# Terminal UI style sheet > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A one-screen style sheet for an operations console ("halden-ctl") that behaves like a full-screen terminal program: every measurement is in `ch` or line-heights, the type is IBM Plex Mono at 14/20 throughout, panels are 1px boxes with titles that break the border using box-drawing characters ("┤ Buttons ├"), buttons are wrapped in square brackets, checkboxes are `[x]`, and the selected list row is a solid amber bar with a `>` marker. A vim-style status line (mode block, branch, summary, encoding, clock) and a `:` command input close the screen. It demonstrates buttons, inputs, a list, key-value rows, a table and the command line in that one language. The thing worth copying is the discipline: one font, one size, one accent, zero radii, and a grid you can count in characters. ## Reference behaviour 1. Initial state: top line with the product name, environment in amber and node count; three columns of boxed panels; row 01 ("api") selected in the Processes list; status line reads `NORMAL main *2 halden-ctl · 8 processes · 1 failed … utf-8 22:41:07`; the command line shows `:` and a dim "type help". 2. Hover a button: border brightens to `--ink-2`; the primary lightens to `#F7C454`. Press: the button shifts down 1px. The disabled button ("Roll back") is dimmed with `cursor: not-allowed`. 3. Tab into a text field: the field gets a 1px dashed amber outline at 2px offset; the caret is amber. Selecting text anywhere shows amber selection with dark text. 4. Click a checkbox label: `[ ]` becomes `[x]` in amber. 5. Press `j` / `↓` or `k` / `↑` (when no input is focused): the selection moves down/up through the process list, wrapping at the ends; the selected row turns amber with `> ` before it; the hint under the list updates ("selected: 03 cron · …"). Clicking a row also selects it. 6. Press `Enter`: the command output reads "inspect → pid ". Press `r`: "restarted ". Press `?`: a key legend. 7. Press `:`: the command input is focused and the mode block changes to `COMMAND`. Type `help`, `status`, `restart worker` or `clear` and press Enter: the output line shows the response; unknown input shows "unknown command: …". `Escape` blurs the input and the mode returns to `NORMAL`. 8. Hover a table row: the row's cells take the `--line` background. ## Structure ``` 1280 × 800 (body padding 20px 3ch; font 14/20; 1ch ≈ 8.4px → ~152 columns) halden-ctl v0.9.3 · prod-eu-1 · 3 nodes j/k move enter select : command ? help ┤ Buttons ├──────────────┐ ┤ Processes ├──────────────────────────┐ ┤ Table ├──────────────────┐ │ [ Deploy ] [ Cancel ] │ │ > 01 api api --port 8080 running │ │ PID Name CPU MEM RSS │ │ [ Roll back ] │ │ 02 worker worker --queue… running │ │ 2201 halden-api … │ │ primary · secondary … │ │ 03 cron … │ │ … │ ├────────────────────────┤ │ 04 indexer … waiting │ │ │ ┤ Inputs ├───────────────┐ │ 05 mailer … exit 137 │ │ sorted by PID · 8 of 41 │ │ │ host api-3.halden… │ │ │ … │ │ │ │ │ port 8080 │ │ │ │ │ │ │ [x] Follow logs │ │ │ │ │ ├────────────────────────┤ │ │ │ │ ┤ Key / value ├──────────┐ │ │ │ │ │ region · eu-north-1 │ │ selected: 01 api · enter to inspect… │ │ │ │ load · ████░░░░ 0.42│ └────────────────────────────────────────┘ └─────────────────────────┘ NORMAL main *2 halden-ctl · 8 processes · 1 failed utf-8 22:41:07 : type help columns: 36ch | 1fr | 42ch, 3ch gaps, one line-height between stacked boxes ``` - ``: `display: grid; grid-template-rows: 20px 1fr 40px; padding: 20px 3ch; gap: 20px 0`. - `

`: two spans, `white-space: pre`. - `

`: three `.col` flex columns. Each `.box` is a `

` with an absolutely positioned `