Styleguide
The living design system of this site. Guiding principle: truth to mediums — what lives on a screen should be inherently of the screen. Nothing here imitates paper, plastic, or any other material.
Seed palette
Six immutable seeds, chosen by hand.
-
- deep cyan
- #005A78
-
- bright cyan
- #75D1D9
-
- deep amber
- #AB7100
-
- bright amber
- #E69800
-
- cosmic latte
- #FFF8E7
-
- eigengrau
- #16161D
Section palettes
The seeds above are the site's main scheme. Each territory of the map carries its own palette and fractal energy in addition: Projects speaks the cyans and ambers; Writings (provisional hexes, pending refinement) grades deep purple to vermillion in its body and lavender to sandstone in its fractal lace.
-
- writings body
- #53337F→#B5431C
-
- writings fractal
- #B49CE0→#DFAE7E
Color rules
- Non-link text is always eigengrau on cosmic latte, or the inverse. No mixed or muted text colors.
- Links are deep cyan on cosmic latte; bright cyan on eigengrau.
- The cyans and amber are highlights — text never sits on them as a surface.
- Amber may itself be text on cosmic latte only, never on eigengrau; elsewhere it is decoration (underlines, marks, symbols).
Scheme roles
Rendered live from the active scheme — switch your system between light and dark to watch them resolve. Only the rule color is derived (a quantized mix of fg into bg); it draws lines, never letters.
-
- bg
- --color-bg
-
- fg
- --color-fg
-
- link
- --color-link
-
- highlight
- --color-highlight
-
- rule
- derived
Typefaces
Departure Mono — display, labels, code
Symbols in a digital landscape
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 ↑↓←→ ░▒▓█ ─│┌┐└┘ &@#%*{}[]<>
A pixel-grid monospace with a lo-fi technical character — quantitative without being arcade nostalgia. Single weight; hierarchy comes from size and space. OFL, by Helena Zhang / Toshi Omagari.
Space Grotesk — body prose
Body text is set in Space Grotesk, a grotesque derived from the
monospaced Space Mono — its geometry is quantized at the skeleton even
though its spacing is proportional. It exists so that essays remain
effortless to read at length. To commit prose fully to the pixel grid
instead, set --font-body: var(--font-display) in
tokens.css — one token, entire site follows.
Type scale
Ratio 1.2 — distinction without drama, by decision.
2xl · 1.728rem — page titles
xl · 1.44rem — section headings
l · 1.2rem — subheadings
m · 1rem — body prose
s · 0.833rem — chrome, captions, metadata
Links & interaction
A link is cyan — deep on cosmic latte, bright on eigengrau — with a 2px underline. On hover the underline answers in amber while the text holds its color. Selection inverts fg and bg outright. Keyboard focus draws a visible 2px outline.
Alternative typefaces on file
Candidates that also satisfy "pixel-native, not campy" — any of these can replace the current picks by swapping a woff2 and one token. All open licenses (OFL).
Display alternatives
- DotGothic16 (Fontworks) — 16×16 bitmap gothic; quieter and rounder than Departure Mono; excellent Japanese support.
- Handjet (Rosetta) — variable dot-matrix face; element shape and grid density are variable axes — the most "quantitative" option of all, striking for headlines.
- Workbench — variable pixel face with a scan-line axis; more industrial.
- Silkscreen — minimal 5px UI pixel face; best at small sizes only.
Body alternatives
- Space Mono — Space Grotesk's monospaced parent; stricter grid feel, slower to read at length.
- IBM Plex Mono — engineering-room voice, very readable.
- Iosevka — narrow, highly configurable; can be built to taste.
- Departure Mono as body — the full-commitment option; honest to the grid, heavier to read for essays.