Phosphor
The Phosphor skin: its design, tokens, type and contrast.
Subject. A monochrome video terminal on a lab bench: a curved glass tube with green phosphor glyphs, a faint bloom around bright text, scan lines you only notice up close, a block cursor, and boxes drawn with line characters. Audience. Developers building developer tools: CLIs in the browser, infrastructure consoles, logs, agents, and anyone who wants their app to feel like a terminal. Job. The skin that makes developers share a screenshot, and the natural partner of the Terminal kit.
Named Phosphor, not Terminal, so the skin never gets confused with the Terminal kit.
Tokens
| Name | Value | Role |
|---|---|---|
| Tube | oklch(0.26 0.035 155) | The glass: a dark green-grey, never black |
| Raster | oklch(0.3 0.04 155) | Raised surfaces (popups, cards): a brighter scan area |
| Dim | oklch(0.75 0.11 150) | Half-intensity text: secondary text, borders, placeholders |
| Glow | oklch(0.88 0.17 148) | Full-intensity text and the key color |
| Inverse | Glow fill, Tube text | Selection, the chosen item, solid buttons |
| Signals | P3 amber oklch(0.84 0.15 75), P22 red oklch(0.75 0.16 28), P4 white oklch(0.95 0.02 150), P7 blue oklch(0.8 0.1 230) | Data series and status, each a real phosphor type |
Type. One monospace for everything, because a terminal has one character grid: "Spline Sans Mono", falling back to the platform's monospace. Body 14px with 1.5 line height; headings are the same face at a heavier weight, never uppercase.
Layout. Everything aligns to the character grid: 0 radius, 1px Dim borders as if drawn with box characters, spacing in multiples of half a line. Popups are a brighter raster area with a Glow border, no shadow.
Principles.
- The interface is monochrome. Color is intensity: Dim, Glow, and Inverse video. Only data and status use the other phosphors, so they stand out.
- A chosen thing is drawn in inverse video: the selected day, the active tab, the checked switch track, the highlighted menu item, solid buttons.
- Bright text blooms a little (a tight text-shadow on Glow text only). Scan lines are a static, very faint pattern on the background, never on text, and never animated; no flicker, no blinking except the text caret.
- Focus is a 2px Glow outline offset by 2px, unmissable on the dark tube.
- Sound is the
beepvoice: short square-wave chirps. - Forced colors drops bloom and scan lines; reduced transparency drops scan lines.
Contrast (computed). Glow on Tube 11.4:1, Dim on Tube 7.2:1, Tube on Glow (inverse) 11.4:1. Dim started at L 0.68 (5.6:1 on the tube); axe found it under 4.5:1 on tinted surfaces (badges, avatar chips, event blocks), so it went up to L 0.75, which clears 4.5:1 on all of them; red went from 0.72 to 0.75 for the danger badge. Borders in Dim clear 3:1.
Charts (validated, tests/unit/chart-palette.test.ts): the tube's green, then blue,
P3 amber, P22 red, P4 white, lavender, cyan and pink, each 3:1 or more on the tube;
neighbors CVD ΔE ≥ 9.5 and normal ≥ 17, the first six pairwise CVD ≥ 9.4.
As shipped. Inside inverse video, quiet text and chips reverse too (a menu item's hint, a tab's count). Code uses white for keywords, amber for strings and constants, blue for functions, Dim for comments; the Terminal kit's ANSI colors are the phosphors.
Review against generic defaults. "Near-black with one acid-green accent" is a known default. Phosphor differs on purpose: the background is a green-grey glass, not near black; green is not an accent on neutral UI but the only ink, in intensity steps; the signature is inverse video for selection, which defaults don't do; and the second colors are named phosphors used only for data. Monospace here is the subject's own type, used for everything rather than for small labels.