The visual language
of this site.
Seven themes. Four typefaces. Every color, surface, and component wired through a single token layer that updates live at runtime.
Accent
Secondary
Gradient
Seven themes.
Switch themes from the bottom right. Every swatch below updates live.
The active palette.
Switch themes from the bottom right. Every swatch updates live.
Primary
Accent
Buttons · active states · links
Contrast
Secondary
Gradients · emphasis · pairings
Gradient: accent to secondary
Canvas
Page background
Surface
Cards · components
Surface hover
Elevated state
Accent: 100% to 5% opacity
Four voices, one hierarchy.
Syne
Display typeface. Used for every heading and title across the site.
Good software takes time.
The best tools feel invisible. You stop thinking about them and just build.
JetBrains Mono
Labels, scores, stats. Anything that needs mechanical precision.
Precision at every size
Inter
Everything that needs to be read. Body copy, descriptions, prose.
Good design is invisible. Bad design is everywhere.
A well-chosen typeface does half the work before the words are even read. Inter sits at the core of the UI | neutral enough to disappear, refined enough to hold up at any size.
Captions, footnotes, timestamps, fine print. Small text still deserves care. Legibility at 13px is not an afterthought.
Caveat
A lighter touch. Used sparingly for theme labels and personality.
Not everything needs to be serious.
Components.
Card
Good software takes time.
A well-chosen typeface does half the work before the words are even read.
Pills
Buttons
Gradient text
Good software takes time.