The decided values of the SANROK visual system. Every swatch, ratio, and measurement on this page is read from the stylesheet at the top of this file — the page is rendered with the tokens it documents, so it cannot describe a value it isn't also using.
Web 1.0 is the foundation, mixed with modern to stay legible to contemporary clients. Not a period piece.
1.0 sets the structure. Modern sets the finish.
Bones are Web 1.0 — density, monospace, allcaps,
/ separators, hairline rules, fixed sizes, underlined links.
Surface is allowed to be modern — rounded corners, smooth transitions,
responsive behaviour.
Because a mix can justify almost any individual choice, that line is the tie-breaker. One thing it does not license is low contrast: Web 1.0 was high-contrast at both poles — black on white with blue links, or bright green and amber on black.
Nine tokens. Dark-first — there is no light mode. The system has no pure white and no pure black.
| Token | Framer | Value | Use |
|---|
--color-muted is non-text only —
dividers, separators, disabled states. It sits below the contrast floor for
text. Framer has no way to express this restriction, so it is enforced by
people reading it here.
Two families. Serif for what you read first, mono for what you
read next. 1.1 leading for anything set tight and capped, looser
only for running prose.
| Token | Family | Weight | Role |
|---|---|---|---|
| --type-display | Platypi | 300 Light | Display, headings, nav |
| --type-mono | Chivo Mono | 400 Regular | Body, labels, UI |
Base-4, with 2px named as a deliberate half-step
for dense listings rather than treated as an outlier — table-tightness is
on-direction.
≤640 / ≤809 / 810–1199 / 1200–1599 / 1600+
Radius broadly scales with element size. Each box below is drawn with the token it names.
Separation is done with 1px hairline borders. There are no shadows.
Two independent surfaces — the site and the terminal widget — landed on this answer independently, and it is strongly on-direction: shadows are a skeuomorphic move, hairline rules are a 1.0 one.
Web 1.0's most recognisable signature, and treated as a first-class category rather than a detail. Links are always underlined.
Measured against --color-bg and computed when this
page loads, not typed in. WCAG AA needs 4.5:1 for body text and 3:1 for large
text.
| Token | Value | Ratio |
|---|
A self-contained component with a visible boundary may own its
internal spacing and radius — the ASK terminal widget carries its own
12px/8px radii and a 6px internal gap.
The page scale governs everything between components. This does not
license a stray value in the middle of a page section.