Fanlight design system
From the Fanlight template.
Included with Everything
Colour
Type
- Marcellusdisplay · 400 · SIL Open Font License 1.1
- Manropebody · 400, 500, 600, 700 · SIL Open Font License 1.1
- Display95 / 48px · 400An answer, and the reasoning behind it.
- H256 / 40px · 400Three models, one family.
- H329 / 20px · 400We publish what we find.
- Lead23 / 20px · 400Fanlight is a frontier AI research lab.
- Body19 / 16px · 400Keystone 3, our most capable model, shows the reasoning behind every answer, in steps you can read, check and cite.
- Small12 / 12px · 700An Art Deco website template for a frontier AI research lab, led by a generated film of a hall of gold-lit arches.
- Eyebrow16 / 16px · 500KEYSTONE 3
Components
FanlightFANLIGHTSAFETY SAFETYTRY KEYSTONE 3
TRY KEYSTONE 3
ALL RESEARCH
Read more
KEYSTONE 3
We publish what we find.
Keystone 3, our most capable model, shows the reasoning behind every answer, in steps you can read, check and cite.
Shape and motion
- sm · 0px
- md · 0px
- lg · 0px
- in-out ·
cubic-bezier(.7, 0, .2, 1) - out ·
cubic-bezier(.2, .8, .2, 1) - fast · 350ms
- base · 800ms
- slow · 1300ms
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.json28 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("fanlight") with the MCP server.
- Source
- Fanlight template
- Palette
- Sanzo Wada 209: Ivory Buff, Yellow Orange, Salvia Blue
- Fonts
- Marcellus (OFL 1.1), Manrope (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 16.74:1 · muted 7.54: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