Design system
Styleguide
Every primitive the site is assembled from, rendered live in whichever theme you are reading in.
Color
Every semantic color is a runtime custom property, so the theme toggle repaints the whole system by flipping one attribute on <html>.
--c-bgPage ground--c-bg-deepRecessed band--c-surfaceCard surface--c-raisedInset / input--c-lineHairline--c-line-strongHairline, emphasis--c-inkBody text--c-dimSecondary text--c-faintTertiary / meta--c-accentAccent fill--c-accent-inkAccent text--c-emberFire work--c-mossAvailability / success--c-violetToolingType
Newsreader sets every heading, Inter carries the interface, JetBrains Mono handles labels and code. All three are self-hosted subsets.
Display 1
clamp(2.6rem, 1.4rem + 5.2vw, 5.2rem)
Hero headline
Display 2
clamp(2.2rem, 1.3rem + 3.4vw, 4rem)
Page title
Display 3
clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem)
Article title
Section
clamp(1.85rem, 1.2rem + 2.2vw, 3rem)
Section heading
H3
1.25rem
Card and sub-heading
Body
1rem / 1.65
Running text
Body lg
0.95rem
Lead paragraphs, callouts
Meta
0.7rem, mono, 0.18em
Kickers and labels
Caption
0.72rem
Captions, small labels
2xs
0.7rem
Compact meta text
Micro
0.68rem
Smallest inline labels
Buttons & chips
Surfaces
Card
Flat surface with a hairline and an inset highlight.
Card, hover
Lifts, brightens its border, and tracks the pointer with a border glow.
Card, textured
Contour texture behind the content.
Icons
Lucide geometry, inlined as path data so a glyph costs no request.
satellitelayerschartaileafdatabaseterminalpencilfiletrophymailcalendarpinclockdownloadsearchsunmoongithublinkedinscholarorcidrssshieldProse
A third-level heading
Body copy runs at 17px with a 1.75 line height and a link treatment that underlines at a low-contrast accent and firms up on hover. Inline code sits in its own tinted box.
Pull quotes switch to the display serif, which keeps them distinct from body copy without a size jump.
- Unordered lists get an accent-tinted marker.
- Spacing between items stays tight.