Waymark design system
From the Waymark template.
Included with Everything
Colour
Type
- Sairadisplay · 700 · Check the font vendor
- Red Hat Textbody · 400, 500, 650, 700 · Check the font vendor
- Red Hat Monomono · 400 · Check the font vendor
- Display126 / 48px · 700SHOP BY BODY
- H258 / 32px · 700JUST ARRIVED
- H317 / 17px · 700FOUR PROMISES, IN WRITING.
- Lead21 / 20px · 400They are printed on every buyer’s order.
- Body17 / 17px · 400Six questions, a real offer in about a minute, and we hold it for seven days.
- Small13 / 13px · 400They are printed on every buyer’s order.
- Eyebrow14 / 14px · 400Preview / Style guide
Components
WaymarkSpecialsFinanceTrade-inServiceGet pre-approved
Get pre-approved
Dusky
Preview / Style guide
FOUR PROMISES, IN WRITING.
Six questions, a real offer in about a minute, and we hold it for seven days.
Shape and motion
- sm · 6px
- md · 10px
- lg · 10px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.2, .7, .1, 1) - in-out ·
cubic-bezier(.65, 0, .35, 1) - base · 450ms
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.json18 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("waymark") with the MCP server.
- Source
- Waymark template
- Palette
- Sanzo Wada 219: Jasper Red, Chromium Green, Dusky Green
- Fonts
- Saira (Check the font vendor), Red Hat Text (Check the font vendor), Red Hat Mono (Check the font vendor)
- Themes
- Light and dark
- Contrast
- Text 16.2:1 · muted 9.17: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