Fairleaf design system
From the Fairleaf template.
Included with Everything
Colour
Type
- Literatadisplay · 400, 500, 600 · SIL Open Font License 1.1
- Sofia Sansbody · 400, 500, 600, 700 · SIL Open Font License 1.1
- Noto Serif Displaysupport · 400, 500 · SIL Open Font License 1.1
- Display363 / 110px · 500In this issue
- H233 / 26px · 600Latest
- H319 / 19px · 500Attention is a place
- Lead21 / 19px · 400Fairleaf is a quarterly magazine of culture, design, travel and ideas, with new stories online every weekday.
- Body17 / 17px · 400Read the latest issue, browse the archive, subscribe in print or digital.
- Small14 / 14px · 400We talk about paying it, as if it were money.
- Eyebrow13 / 13px · 700IDEAS
Components
FairleafDesignTravelIdeasPhoto essaysSubscribe
Open your list
Subscribe
Show a toast
IDEAS
Attention is a place
Read the latest issue, browse the archive, subscribe in print or digital.
Shape and motion
- sm · 3px
- md · 4px
- lg · 4px
- pill · 9999px
- shadow sm
- out ·
cubic-bezier(.2, .7, .1, 1) - base · 1000ms
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("fairleaf") with the MCP server.
- Source
- Fairleaf template
- Palette
- Sanzo Wada 245: Carmine Red, Oil Green, Dark Tyrian Blue, Slate Color
- Fonts
- Literata (OFL 1.1), Sofia Sans (OFL 1.1), Noto Serif Display (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 11.22:1 · muted 5.3: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