Maximalism design system
From the Maximalism section style.
Included with Everything
Colour
Type
- Bricolage Grotesquedisplay · 500, 800 · SIL Open Font License 1.1
- Instrument Serifbody · 400, 500 · SIL Open Font License 1.1
- Display176 / 74px · 800ONE TEMPLATE. Every FORMAT.
- H2109 / 64px · 800Section headline
- H330 / 24px · 800Card heading
- Lead71 / 46px · 400Body copy reads at this size and measure.
- Body59 / 38px · 400Body copy reads at this size and measure.
- Small52 / 33px · 400Body copy reads at this size and measure.
- Eyebrow47 / 30px · 500Section label
Components
MaximalismProductPricingAboutGet started
Get started
Card heading
Body copy reads at this size and measure.
Inverse card
Body copy reads at this size and measure.
Shape and motion
- sm · 6px
- md · 12px
- lg · 23px
- pill · 9999px
- shadow sm
- base · 300ms
Exports
- DESIGN.md
DESIGN.md19 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css4 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("style-maximal") with the MCP server.
- Source
- Maximalism section style
- Palette
- Sanzo Wada 22: Yellow, Deep Lyons Blue
- Fonts
- Bricolage Grotesque (OFL 1.1), Instrument Serif (OFL 1.1)
- Themes
- Dark, plus a derived light
- Contrast
- Text 9.66:1 · muted 6.55: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