Kinfold design system
From the Kinfold template.
Included with Everything
Colour
Type
- Familjen Groteskdisplay · 600, 650 · SIL Open Font License 1.1
- Rethink Sansbody · 400, 600, 650, 700 · SIL Open Font License 1.1
- Display107 / 50px · 600What fourteen towns did together.
- H195 / 61px · 600What fourteen towns did together.
- H259 / 38px · 600Four ways in, one front door.
- H329 / 24px · 600Give an hour, a run or a skill.
- Lead19 / 18px · 400The rest raises the next pound and keeps the lights on.
- Body17 / 16px · 400We answer every message within two working days.
- Small14 / 14px · 400The rest raises the next pound and keeps the lights on.
- Eyebrow15 / 15px · 600Last year
Components
KinfoldImpactStoriesGet involvedEventsDonate
Give £15 a month
Volunteer
One-off
Last year
Give an hour, a run or a skill.
We answer every message within two working days.
Coming up
The rest raises the next pound and keeps the lights on.
Shape and motion
- sm · 12px
- md · 20px
- lg · 20px
- 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 · 1200ms
Exports
- DESIGN.md
DESIGN.md23 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.json9 KBEverything - W3C tokens (JSON)
tokens.json18 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("kinfold") with the MCP server.
- Source
- Kinfold template
- Palette
- Sanzo Wada 141: Orange, Yellow Green, Dark Tyrian Blue
- Fonts
- Familjen Grotesk (OFL 1.1), Rethink Sans (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 11.43:1 · muted 3.63: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