Lanthorn design system
From the Lanthorn template.
Included with Everything
Colour
Type
- Libre Caslon Displaydisplay · 400 · SIL Open Font License 1.1
- Libre Franklinbody · 400, 500, 550, 560, 600, 620, 650, 700 · SIL Open Font License 1.1
- Libre Caslon Textsupport · 400 · SIL Open Font License 1.1
- Display104 / 48px · 400Six subjects, one library.
- H189 / 59px · 400Six subjects, one library.
- H260 / 40px · 400Where most people start
- H319 / 17px · 650Watch a little. Practise a lot.
- Lead23 / 20px · 400Lanthorn is an online academy: courses in writing, design, data and business, taught by people who do the work.
- Body19 / 17px · 400Learn at your own pace or with a cohort.
- Small14 / 14px · 400Every course is short enough to finish and deep enough to change how you work.
- Eyebrow16 / 16px · 500THE LIBRARY
Components
LanthornPathsFacultyFor teamsPricingStart learning
Start learning free
2 Languages
Typography
THE LIBRARY
Watch a little. Practise a lot.
Learn at your own pace or with a cohort.
Built for finishing
Every course is short enough to finish and deep enough to change how you work.
Shape and motion
- sm · 6px
- md · 10px
- lg · 10px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.22, .8, .24, 1) - in-out ·
cubic-bezier(.65, 0, .35, 1) - fast · 250ms
- base · 450ms
- slow · 1000ms
Exports
- DESIGN.md
DESIGN.md24 KBEverything - CSS variables
tokens.css6 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json30 KBEverything - Webflow variables
webflow-variables.json10 KBEverything - W3C tokens (JSON)
tokens.json19 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("lanthorn") with the MCP server.
- Source
- Lanthorn template
- Palette
- Sanzo Wada 126: Ivory Buff, Yellow Ocher, Deep Lyons Blue
- Fonts
- Libre Caslon Display (OFL 1.1), Libre Franklin (OFL 1.1), Libre Caslon Text (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 15.1:1 · muted 10.03: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