Styles
Colors, spacing, typography, radius, motion — the tokens every component and page binds to.
Colors
18 tokens · brand + neutrals + status
Brand
storefront-brand-500
#0ea5e9storefront-brand-300
#22d3eestorefront-brand-700
#0369a1storefront-brand-gradient
linear-gradaccent-warm
#f97316accent-cool
#7c3aedSurface & text
surface-0
#09090bsurface-1
#131319surface-2
#1a1a1ftext-hi
#f4f4f5text-md
#a1a1aatext-lo
#71717aStatus
success
#10b981warning
#f59e0bdanger
#f43f5einfo
#38bdf8neutral
rgba(...)transparent
noneSpacing scale
4px base · linear · rem-anchored--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
--space-12
48px
--space-16
64px
Type ramp
Inter · JetBrains Monodisplay-1 · 48/1.05
Welcome to Norrland
h1 · 32/1.15
Your cart
h2 · 22/1.2
Recently viewed
h3 · 15/1.25
Order total
body · 14/1.55
Handmade linen throws, ceramics for daily use, and other slow-goods for the home.
caption · 11.5/1.5
Ships in 3–5 days · free over $80
mono · 11/1.4
order-8829-qk3v
Radius
5 tokens--radius-0
0px · square
--radius-sm
4px · chips
--radius-md
6px · buttons
--radius-lg
10px · cards
--radius-full
50% · pills
Motion
Reusable durations + easings--motion-fast
120ms · out-cubic
Hovers, focus rings, chip toggles.
--motion-base
220ms · out-cubic
Modal open, drawer, toast.
--motion-slow
380ms · out-quart
Route transitions, hero reveals.