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-card--c-raisedInset / input--c-lineHairline--c-line-strongHairline, emphasis--c-control-border--c-inkBody text--c-dimSecondary text--c-faintTertiary / meta--c-accentAccent fill--c-accent-inkAccent text--c-accent-contrast--c-btn2Outline button--c-btn2-hover--c-btn2-active--c-on-light--c-red--c-ember--c-yellow--c-yellow-ink--c-teal--c-pink--c-moss--c-violet--c-sheenType
Inter sets every heading and carries the interface, JetBrains Mono handles labels and code. Both are self-hosted subsets.
Display 1
clamp(2.4rem, 1.3rem + 4.4vw, 4.4rem)
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
Meta
0.7rem, mono, 0.18em
Kickers and labels
micro
0.68rem
Named size step
2xs
0.7rem
Named size step
caption
0.72rem
Named size step
body-lg
0.95rem
Named size step
small
0.82rem
Named size step
lead
1.05rem
Named size step
Radius
xs 4pxsm 8pxmd 12pxlg 12pxxl 16pxButtons & chips
Surfaces
Card
Flat surface with a hairline border. No shadow, no lift.
Card, hover
Brightens its border and tracks the pointer with a border glow.
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.