The theme, written down.
Near-black ink, pale paper text, one phosphor signal, hairline borders, square corners. The same tokens as the compiled pages. Class prefix cy-.
One signal. Square corners.
Phosphor marks the one thing that matters on the screen. Everything else stays ink, paper, and a 1px line.
- 01
One signal
Phosphor is the primary action, the active state, and the live indicator. It is not a second palette.
- 02
Hairlines, no shadow
Square corners. 1px borders. The only texture is the phosphor grid.
- 03
Self-hosted type
Instrument Sans and Space Mono from this site. No third-party font requests.
- 04
44px targets
Mobile first, down to 360px. Focus rings stay visible. Paper sections are for a short close, not a long article.
Tokens
Swatches use the CSS variables. The machine-readable copy is /assets/cyber/tokens.json.
- Ink 950
--ink-950 - Ink 900
--ink-900 - Ink 800
--ink-800 - Paper 100
--paper-100 - Paper 200
--paper-200 - Phosphor 500
--phosphor-500 - Phosphor 700
--phosphor-700 - Line
--line-dark - Warn
--amber-500 - Danger
--red-500 - Info
--cyan-500
background: var(--phosphor-500); color: var(--ink-950);
Sans for the sentence. Mono for the label.
Display
Section heading
A lede stays inside the measure and uses the softer paper color.
Body copy sits in .cy-prose. Links inside prose use the signal color. Strong stays paper.
.cy-kicker + h2 + .cy-lede
The parts, live.
Each block below is the real component. The line under it is the class to copy.
Status and chips
- Default
- Signal
- Solid
- Pressed
.cy-status--live | .cy-chip .cy-chip--signal .cy-chip--tap
Cards and stats
- QuietA card
Raised ink, hairline, no shadow.
.cy-card - GridWith the field
The phosphor grid is the only texture.
- FillOne signal
Use the fill once on a screen.
- Version1.0.0
- Prefixcy-
- Signal1
.cy-card-grid--3 > .cy-card | .cy-stats > .cy-stat
Lists, timeline, phases
- Now
v1.0.0
The live theme, written down as one stylesheet.
- Next
Shell resync
Compiled pages pick up later token changes from the same file.
- PhaseTokens
- PhaseType
- PhaseChrome
- PhaseParts
- PhasePages
- Ink
- Paper
- Phosphor
.cy-timeline | .cy-phase-row | .cy-node-row | .cy-list
Disclosure and tabs
Where the header comes from Do not hand-edit the nav
Static pages paste the header and footer from one module so the nav cannot drift. This page’s chrome is that paste.
What stays off this stylesheet Legacy pages keep their files
Older pages keep their URLs. New pages do not link the legacy stylesheets.
Ink, paper, and one phosphor. Warn, danger, and info are status only.
Instrument Sans for sentences. Space Mono for kickers, buttons, and table heads.
A 4px step, a 74px header, and a 44px tap target. Page padding scales with the viewport.
details.cy-details | [data-cy-tabs] > button.cy-tab
Forms
.cy-field > .cy-input | .cy-select | .cy-textarea | .cy-check | .cy-switch
Notices
A note is the short callout. Use it for one fact, not a paragraph stack.
Signal. The default notice is a left phosphor rule.
Warn. Amber is status, not a second brand color.
Info. Cyan is the same: status only.
.cy-note | .cy-notice .cy-notice--warn .cy-notice--danger .cy-notice--info
Table, keys, meter
| Token | Step |
|---|---|
| Ink | 950 |
| Paper | 100 |
| Phosphor | 500 |
- Prefix
- cy-
- Radius
- 0
- Header
- 74px, 64px on a phone
table.cy-table[data-cy-sortable] | dl.cy-kv | .cy-meter | .cy-bar-list
Wayfinding and code
Press Tab to move. The focus ring is phosphor.
.cy-button.cy-button--primary
.cy-breadcrumb | .cy-pagination | pre.cy-code | kbd.cy-kbd | [data-cy-copy]
Dialog and empty
dialog.cy-dialog | dialog.cy-drawer | [data-cy-open] | .cy-empty
Related links
.cy-related | .cy-section--paper > .cy-cta
v1.0.0
2026-11-06. First public write-down of the live ink-and-phosphor theme: tokens, components, and this page.
Use it on a real page.
New static pages start from this system. The header on this page is the one the other static pages share.