background
--background
hsl(45 15% 96%)
Page background (warm cream)
01 · Foundations
Colour tokens
Semantic tokens defined in src/styles.css under :root and exposed to Tailwind via @theme inline. Reference them as bg-{token}, text-{token}, border-{token}.
foreground
--foreground
hsl(210 20% 12%)
Primary text & ink
muted
--muted
hsl(210 10% 94%)
Subtle surfaces, chips
muted-foreground
--muted-foreground
hsl(210 10% 40%)
Secondary / metadata text
accent
--accent
hsl(12 85% 50%)
Signal, focus rings, highlights
accent-foreground
--accent-foreground
hsl(0 0% 100%)
Ink on accent
card
--card
hsl(0 0% 100%)
Card / panel surface
card-foreground
--card-foreground
hsl(210 20% 12%)
Ink on cards
primary
--primary
hsl(210 20% 12%)
Primary action / dark ink
primary-foreground
--primary-foreground
hsl(45 15% 96%)
Ink on primary
secondary
--secondary
hsl(210 10% 94%)
Secondary surfaces
secondary-foreground
--secondary-foreground
hsl(210 20% 12%)
Ink on secondary
destructive
--destructive
hsl(0 70% 45%)
Errors, destructive actions
destructive-foreground
--destructive-foreground
hsl(0 0% 100%)
Ink on destructive
border
--border
hsl(210 10% 12% / 0.12)
Hairlines, dividers, inputs
input
--input
hsl(210 10% 12% / 0.12)
Input borders
ring
--ring
hsl(12 85% 50%)
Focus ring
02 · Foundations
Typography
Display: Inter (400–900) with OpenType features ss01 and cv11. Mono: JetBrains Mono. Loaded via Google Fonts in src/routes/__root.tsx.
Display / page hero
text-6xl font-extrabold tracking-tight leading-[0.9]
The Archive of Accessible Pairs.
Section title
text-4xl font-black tracking-tighter
Curated palettes
Card title (feature)
text-2xl font-black uppercase tracking-tighter
Burnt Marmalade
Card title
text-xl font-bold tracking-tight
Cordovan
Body
text-sm leading-relaxed
Every pair below clears WCAG AAA (≥7.0:1). Drag the threshold lower to explore AA territory.
Caption / metadata
text-[10px] font-mono uppercase tracking-widest text-muted-foreground
Min. Contrast Ratio
Mono value
font-mono text-xs font-bold
7.4:1
03 · Foundations
Spacing & radii
A standard 4px Tailwind rhythm. Layouts breathe at 24–32px between blocks. Radii are tight — most surfaces use rounded-sm (0px) or rounded (4px) for a precise, editorial feel.
Spacing scale
4px
p-1 / gap-1
8px
p-2 / gap-2
12px
p-3 / gap-3
16px
p-4 / gap-4
24px
p-6 / gap-6
32px
p-8 / gap-8
48px
p-12
64px
p-16
Radii
--radius
0.25rem (4px)
rounded
--radius-sm
calc(--radius - 4px) → 0px
rounded-sm
--radius-md
calc(--radius - 2px) → 2px
rounded-md
--radius-lg
--radius → 4px
rounded-lg
--radius-xl
calc(--radius + 4px) → 8px
rounded-xl
04 · Foundations
Borders & dividers
1px hairlines at hsl(210 10% 12% / 0.12). The base layer applies border-color globally so every Tailwind border utility uses the token automatically.
border border-border
Bordered card
border-b border-border
Section title
Divider beneath heading.
h-[1px] w-full bg-border
Above
Below
05 · Foundations
Motion
One reusable utility: .animate-reveal — a 600ms ease-out fade & translate (10px) using cubic-bezier(0.16, 1, 0.3, 1). Used on grid cards as they enter the viewport.
animation: reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
tile 1
tile 2
tile 3
tile 4
06 · Layout
Containers & grids
The site uses no fixed max-width container. Pages flow edge-to-edge with consistent horizontal padding (px-4 on mobile, px-6 from sm:). Vertical rhythm is 24–32px between blocks; section breaks sit at py-6 / py-8.
Page shell
<div className="min-h-screen pb-24">
<Nav />
<header className="px-4 sm:px-6 py-6 sm:py-8 border-b border-border">
{/* heading + controls */}
</header>
<main className="p-6">
{/* content */}
</main>
</div>Asymmetric grid
Cards live on a 2 / 4 / 6 column grid with gap-6 and gridAutoFlow: dense. Every 11th cell is a 2×2 feature; cells 6 and 10 are wide 2×1 tiles.
feature
cell 2
cell 3
cell 4
cell 5
cell 6
wide
cell 8
cell 9
cell 10
wide
feature
Sticky nav
Nav is sticky with a backdrop blur and a 1px bottom border in the foreground colour. Background defaults to #F7F7F7 on #21081D ink, but accepts custom bg / fg props per page.
07 · Components
Component patterns
Building blocks reused across the site. Each example uses only the semantic tokens above — drop them into any page for an on-brand result.
Buttons
Cards
Plain
Surface card
1px border, card surface, p-6, rounded-sm.
Swatch
Cordovan
Stat
7.4:1
AAA · normal text
Filter pills / hue chips
Tabs
Inputs & controls
Range
7.0:1
Palette card
Plum / Cream
#21081D · #F7F7F7
15.6:1