Yoake design system
From the Yoake template.
Included with Everything
Colour
Type
- Zen Antiquedisplay · 400 · SIL Open Font License 1.1
- Hanken Groteskbody · 400, 500, 600, 700 · SIL Open Font License 1.1
- Display89 / 48px · 400One sentence in. The whole road out.
- H252 / 40px · 400When the day changes, so does the plan.
- H318 / 18px · 700Sixty regions, walked first.
- Lead19 / 18px · 400Yoake is the AI travel planner.
- Body16 / 15px · 400Say where you want to wake up; it plans every train, walk and table, and plans the day again when the day changes.
- Small13 / 13px · 600Yoake watches the trains, the weather and the opening hours for you.
- Eyebrow13 / 13px · 500THE PLANNER
Components
YoakeDestinationsPricingJournalCompanyPlan a trip
Plan a trip
Learn more
Day 2 Dazaifu
THE PLANNER
Sixty regions, walked first.
Say where you want to wake up; it plans every train, walk and table, and plans the day again when the day changes.
Shape and motion
- sm · 6px
- md · 7px
- lg · 8px
- pill · 9999px
- in-out ·
cubic-bezier(.7, 0, .25, 1) - out ·
cubic-bezier(.2, .7, .2, 1) - fast · 350ms
- base · 800ms
- slow · 1400ms
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.json29 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("yoake") with the MCP server.
- Source
- Yoake template
- Palette
- Sanzo Wada 258: Pale Burnt Lake, Pinkish Cinnamon, Olive, Antwarp Blue
- Fonts
- Zen Antique (OFL 1.1), Hanken Grotesk (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 14.87:1 · muted 6.01: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