Design system
The parts this site is assembled from.
Every color, size, and component on sefr.dev comes from this page. The brand is #57999D; everything else is derived from it or from the ink it sits on.
Color
Brand
Built around #57999D. 500 is the core brand; 600–900 carry text and borders on brand surfaces.
50
#f1f7f8
100
#dceaec
200
#bdd8da
300
#94bec2
400
#73a9ad
500
#57999d
600
#497f83
700
#3d6a6d
800
#34585a
900
#2d4a4c
950
#1b2d2e
Ink
The near-black the brand panel sits on. 900 is the page background.
950
#0d0f10
900
#121415
800
#1a1d1e
700
#23282a
600
#333a3c
500
#4a5355
Foreground
Text colors. paper on ink, paper on brand; muted never carries essential meaning alone.
paper
#f3f6f6
dim
#c9d2d2
muted
#8a9698
Typography
text-displayThe wordmark onlySefr.Dev
text-h1One per page, the page titlePage title
text-h2Section headingsSection heading
text-h3Card and list item titlesItem title
text-ledeStandfirst under a page titleA lede paragraph.
text-baseBody copyBody copy.
text-labelMono eyebrows, uppercase, trackedLABEL
Surfaces
tone="brand"
The hero. Ink text on brand, never white.
tone="deep"
Quiet brand presence for secondary blocks.
tone="ink"
One step up from the page.
tone="outline"
Border only, no fill.
Components
Card
Static card
A bordered block. Pass href to make the whole card a link with a hover state.
Card
Linked card
Hover this one — the border and title shift to brand.
Tags
Radius
rounded-none
Panels, the frame
rounded-xs
Buttons, tags, inputs
rounded-sm
Cards
rounded-md
Rare — media, embeds
Rules
- Text on a brand surface is ink, not white — brand-500 is too light for white body copy.
- Muted grey never carries meaning on its own; pair it with position or a label.
- One text-display per page, and only for the wordmark.
- Motion is decoration: everything still reads with prefers-reduced-motion on.
- New color? Add a token here first, then use it. No raw hex in components.