One family
Monospace everywhere, with sizes snapped to fixed steps rather than scaled fluidly. A terminal has a character grid, so the type lands on it.
design preset — loaded
The interface is the system
Every character on this page is monospace, headline to footer link. One proportional font anywhere and the whole thing collapses — which is why there is no second family defined in the stylesheet at all.
// readout
// what the preset decides
A kit of panes
Panes, not cards
A 1px rule and a title bar. Borders do real work here — they define the windows — rather than decorating a box.
Phosphor and amber
Green at 14.6:1, amber at 10.8:1. The dimmed green is 2.18:1 and so draws rules only — never a word you are expected to read.
// session
Inactive is not low-contrast
user@unysonplus:~$ contrast --check palette
[OK] phosphor #33ff00 on #0a0a0a .......... 14.56:1
[OK] amber #ffb000 on #0a0a0a .......... 10.75:1
[OK] error #ff3333 on #0a0a0a ........... 5.44:1
[FAIL] dim #1f521f on #0a0a0a ........... 2.18:1
[WARN] dim is specified for "borders / inactive text".
As a border it passes. As TEXT it does not.
user@unysonplus:~$ dim the meaning, not the contrast
Every inactive label on this page is phosphor at reduced opacity or wrapped in brackets. The dimmed green appears only as pane edges, rules and the unfilled segments of the bars above.
// pricing, as this preset renders it
Three tiers
// placeholder figures — shown to exercise the layout, not an offer
// faq
Frequently asked
Is this a mock-up or the real thing?
A specimen, hand-built to the preset's specification so the style can be seen whole rather
than as a thumbnail. The preset itself is a set of WordPress Theme Settings; a generated site
inherits the palette, the monospace family and the zero radius. The terminal detail here —
the scanlines, the blinking cursor, the ASCII bars and dividers — is still being folded
into the preset and is not all emitted automatically yet.
Why is the dim green never used for text?
Because it measures 2.18:1 on this ground. The source specification lists it for "borders
and inactive text", and the first half of that is right — but an inactive label set in it
is unreadable rather than merely quiet. Inactive states here dim the meaning instead: phosphor
at lower opacity, or wrapped in brackets.
What happens with reduced motion?
The cursor stops blinking and stays solid. A cursor pulsing forever is exactly the kind of
persistent motion that preference exists for, so it is switched off outright rather than
shortened — and nothing on the page depends on it to be understood.
Build a site in this preset.
Describe the business and your own AI agent builds it on WordPress with Unyson+ — real page-builder pages, with this design system applied site-wide.