A single visual language for BossConsole and BossTerm. Built on the character cell and one amber signal — the lamp that tells an operator what is live, right now.
Everything below derives from these. When a choice is unclear, return here.
The terminal character cell (~8.4×17px at 14sp Meslo) is the grid the whole UI snaps to. Chrome borrows the terminal's discipline, not the other way around.
Amber means live / active / now — the primary action, the focused field, the selected tab, the blinking cursor. Nothing else competes for it. Cyan carries data and links.
Surfaces separate by tint, not shadow. Borders are hairlines. Density is high and calm so the content — your output — is the loudest thing on screen.
Host chrome and terminal share one floor (ink), so a panel and the shell it wraps feel continuous. Amber and cyan are the only saturated colors that appear in chrome.
Monospace is the brand voice — display headings, eyebrows, labels, every number and path. A humanist sans carries running UI copy where reading speed matters. The app bundles MesloLGS Nerd Font for the mono role.
| instant | 0ms | cursor, key echo |
| fast | 90ms | hover, press |
| base | 160ms | menus, panels |
| blink | 530ms | cursor cadence |
Easing cubic-bezier(.2,0,0,1). Motion respects prefers-reduced-motion — the cursor stops blinking, panels cut instead of slide.
The frame around the work: title bar, tabs, controls, overlays. The active item always wears amber.
Primary = amber, used once per view. Destructive stays outlined until hover, then commits to alert-red.
Focus ring is always amber — the field is "live."
Thumb #ffffff30 over a 12%-white track · search hits = amber markers · command-block status = ok/alert markers on the right gutter.
Where the operator actually works. The cursor is amber; ANSI colors are tuned to sit calmly on the shared ink floor.
Focused 0.7 alpha · unfocused 0.3 · blink 530ms.
7 color presets for grouping · cyan #4FC3F7 marks mirrored / remote sessions · active chip wears the amber signal.
OSC 9;4 progress bar — amber, 6dp, top or bottom edge.
The same tokens composed into real product surfaces. Toggle between the two BOSS apps — each is a different screen built entirely from this design language.
Host UX — left rail, file tree, an editor with semantic syntax colors, and a split terminal. The active tab, the selected file's marker, and the current rail tool all wear the amber signal; everything else stays graphite-quiet.
Terminal UX — tab chips (cyan marks a mirrored/remote session), a split pane, the floating search overlay with amber match highlights, command-block gutters (green ok / red error / running), selection, and the amber block cursor. Same ink floor as the host, so the window reads as one continuous surface.
These tokens ship as BossDesignSystem.kt (host, exposed via BossTheme CompositionLocals) and as the "BOSS Operator" builtin Theme + ColorPalette in BossTerm.
| Token | Value | Host (BossColors) | BossTerm |
|---|---|---|---|
| color.ink | #0E1217 | darkContentBackground | background |
| color.panel | #161D26 | darkBackground / Surface | — |
| color.raised | #1E2731 | contextMenuHover / raised | — |
| color.line | #2A3744 | darkBorder | — |
| color.chalk | #E9EEF3 | darkTextPrimary | foreground (#D7DEE6) |
| color.mist | #8593A3 | darkTextSecondary | — |
| color.signal | #F2A93B | darkAccent | cursor |
| color.data | #56C7E0 | (link) | hyperlink |
| color.ok | #6FD08C | darkSuccess / darkSecondary | ansi.green |
| color.alert | #F2685F | darkError | ansi.red |
| radius.button | 5dp | RoundedCornerShape(5) | — |
| font.mono | MesloLGS NF | display + data | terminal |
Full token set — spacing, elevation, motion, type scale — lives in the generated Kotlin alongside these colors.