Warmtone design system
From the Warmtone template.
Included with Everything
Colour
Type
- Unboundeddisplay · 600, 700 · SIL Open Font License 1.1
- Radio Canadabody · 400, 500, 600 · SIL Open Font License 1.1
- Display81 / 42px · 700The bell founder
- H256 / 32px · 700Last month, in five-minute pieces.
- H329 / 22px · 700One guest. One sound. Five minutes.
- Lead20 / 18px · 400Warmtone is a short show about sound and the people who listen closely: one guest, one sound, five minutes, every Thursday.
- Body15 / 15px · 400Sigrun Halvorsen casts bells in a field behind her house.
- Small14 / 14px · 600Warmtone is a short show about sound and the people who listen closely: one guest, one sound, five minutes, every Thursday.
- Eyebrow12 / 12px · 500Episode 48 1 October 4 min
Components
WarmtonewarmtoneEpisodesGuestsHostsLatest
Get the notes
+ Queue
Episode 48 1 October 4 min
One guest. One sound. Five minutes.
Sigrun Halvorsen casts bells in a field behind her house.
Shape and motion
- sm · 10px
- md · 20px
- lg · 34px
- pill · 9999px
- shadow sm
- out ·
cubic-bezier(.2, .7, .2, 1) - in-out ·
cubic-bezier(.65, 0, .35, 1) - base · 550ms
Exports
- DESIGN.md
DESIGN.md21 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("warmtone") with the MCP server.
- Source
- Warmtone template
- Palette
- Sanzo Wada 53: Yellow Orange, Dusky Madder Violet
- Fonts
- Unbounded (OFL 1.1), Radio Canada (OFL 1.1)
- Themes
- Dark and light
- Contrast
- Text 16.12:1 · muted 9.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