Fairloom design system
From the Fairloom template.
Included with Everything
Colour
Type
- Archivodisplay · 400, 520, 560, 600, 620, 650, 760, 780 · SIL OFL 1.1
- Display108 / 45px · 780EVERY PIECE GOES WITH EVERY OTHER.
- H264 / 34px · 760NEW THIS SEASON.
- H315 / 15px · 600SIX WORKSHOPS. ONE ROAD NORTH.
- Lead20 / 20px · 400One palette a season, chosen before a single thing is cut.
- Body16 / 18px · 400A pulled seam, a lost button, a moth in the cuff.
- Small13 / 13px · 400One palette a season, chosen before a single thing is cut.
- Eyebrow13 / 13px · 620AUTUMN / WINTER 2026
Components
FairloomLookbookJournalFAIRLOOM0Shop
HOW REPAIRS WORK
Learn more
SEE THE LOOKBOOK
AUTUMN / WINTER 2026
SIX WORKSHOPS. ONE ROAD NORTH.
A pulled seam, a lost button, a moth in the cuff.
FREE REPAIRS FOR LIFE.
One palette a season, chosen before a single thing is cut.
Shape and motion
- sm · 0px
- md · 0px
- lg · 0px
- out ·
cubic-bezier(.2, .7, .1, 1) - in-out ·
cubic-bezier(.7, 0, .2, 1) - fast · 180ms
- base · 450ms
- slow · 900ms
Exports
- DESIGN.md
DESIGN.md22 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json29 KBEverything - Webflow variables
webflow-variables.json9 KBEverything - W3C tokens (JSON)
tokens.json17 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("fairloom") with the MCP server.
- Source
- Fairloom template
- Palette
- Sanzo Wada 149: Olive Ocher, Orange, Deep Slate Green
- Fonts
- Archivo (SIL OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 16.39:1 · muted 5.8:1
Inside DESIGN.md
- At a glance
- Setup
- Colour
- Typography
- Layout and spacing
- Shape and depth
- Motion
- Components
- Voice and copy
- Do and don’t
- Tokens