Stoutheart design system
From the Stoutheart template.
Included with Everything
Colour
Type
- Big Shoulders Displaydisplay · 800, 900 · Check the font vendor
- Hanken Groteskbody · 400, 600, 700 · SIL Open Font License 1.1
- Display141 / 64px · 800ONE CLUB. FOUR WAYS TO GET STRONG.
- H277 / 40px · 800FIND A CLASS. BOOK IT IN TWO TAPS.
- H358 / 30px · 900COACHED. COUNTED. KNOWN BY NAME.
- Lead22 / 20px · 400Stoutheart is a strength and boxing club with three clubs in the city, open 5:30 till late.
- Body17 / 17px · 400Coached classes, a serious strength floor and your first week free.
- Small13 / 13px · 600Two colours, two typefaces, hard edges and three ropes.
- Eyebrow13 / 13px · 700FOUR DISCIPLINES
Components
StoutheartSTOUTHEARTTimetableMembershipCoachesTrain
FREE WEEK
THU Today · 10
SEE THE TIMETABLE
ALL THREE
FOUR DISCIPLINES
COACHED. COUNTED. KNOWN BY NAME.
Coached classes, a serious strength floor and your first week free.
Shape and motion
- sm · 2px
- md · 4px
- lg · 8px
- pill · 9999px
- out ·
cubic-bezier(.16, .9, .1, 1) - in-out ·
cubic-bezier(.7, 0, .2, 1) - fast · 160ms
- base · 380ms
- slow · 850ms
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.json16 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("stoutheart") with the MCP server.
- Source
- Stoutheart template
- Palette
- Sanzo Wada 117: Carmine, Black
- Fonts
- Big Shoulders Display (Check the font vendor), Hanken Grotesk (OFL 1.1)
- Themes
- Dark and light
- Contrast
- Text 17.48:1 · muted 12.32: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