Westlight design system
From the Westlight template.
Included with Everything
Colour
Type
- Mona Sansdisplay · 340, 380, 400, 480, 500, 520, 560, 600 · SIL OFL 1.1 (assets/fonts/OFL-mona-sans.txt)
- Spline Sans Monomono · 400 · SIL OFL 1.1 (assets/fonts/OFL-spline-sans-mono.txt)
- Display117 / 48px · 340One basin in. Every parcel scored.
- H195 / 64px · 340One basin in. Every parcel scored.
- H246 / 32px · 400Three maps, read as one.
- H335 / 24px · 340Ask the Atlas in plain words.
- Lead17 / 17px · 400For developers with a pipeline.
- Body15 / 18px · 400Anything else, write to the siting team.
- Small12 / 12px · 560A person answers within a working day.
- Eyebrow12 / 12px · 500Section label
Components
WestlightSite scanAtlasCustomersPricingBook a site review
Book a site review
Book a site review
Read more
Ask the Atlas in plain words.
Anything else, write to the siting team.
Shape and motion
- sm · 4px
- md · 14px
- lg · 22px
- pill · 9999px
- out ·
cubic-bezier(.16, 1, .3, 1) - base · 500ms
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.json30 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("westlight") with the MCP server.
- Source
- Westlight template
- Palette
- Sanzo Wada 182: Raw Sienna, Vandyke Brown, Deep Indigo
- Fonts
- Mona Sans (SIL OFL 1.1 (assets/fonts/OFL-mona-sans.txt)), Spline Sans Mono (SIL OFL 1.1 (assets/fonts/OFL-spline-sans-mono.txt))
- Themes
- Light and dark
- Contrast
- Text 16.13:1 · muted 4.72: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