Mordant design system
From the Mordant template.
Included with Everything
Colour
Type
- Bricolage Grotesquedisplay · 600, 700, 800 · SIL Open Font License 1.1
- Instrument Sansbody · 400, 500, 600 · SIL Open Font License 1.1
- Display140 / 54px · 800Change it by saying what you want.
- H1104 / 55px · 800Change it by saying what you want.
- H272 / 38px · 800One model for every graphic you ship.
- H340 / 34px · 800Teach it your brand once.
- Lead20 / 20px · 400Mordant learns your colours, type and products.
- Body18 / 16px · 400Write one prompt and get every size the launch needs, on brand.
- Small14 / 14px · 400A website template for an AI image product that stays on brand: brand kits, upscaling, integrations and pricing.
- Eyebrow14 / 14px · 500Section label
Components
MordantProductCustomersPricingCompanyStart free
Start free
Subscribe
Teach it your brand once.
Write one prompt and get every size the launch needs, on brand.
What you can do with it
A website template for an AI image product that stays on brand: brand kits, upscaling, integrations and pricing.
Shape and motion
- sm · 10px
- md · 14px
- lg · 28px
- pill · 9999px
- shadow sm
- shadow md
- out ·
cubic-bezier(.2, .7, .2, 1) - fast · 250ms
- base · 350ms
- slow · 900ms
Exports
- DESIGN.md
DESIGN.md22 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css4 KBEverything - Figma variables
figma-variables.json30 KBEverything - Webflow variables
webflow-variables.json10 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("mordant") with the MCP server.
- Source
- Mordant template
- Palette
- Sanzo Wada 217: Pale Burnt Lake, Ochraceous Salmon, Diamine Green
- Fonts
- Bricolage Grotesque (OFL 1.1), Instrument Sans (OFL 1.1)
- Themes
- Light and dark
- Contrast
- Text 9.52:1 · muted 5.03: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