Pop art design system
From the Pop art section style.
Included with Everything
Colour
Type
- Bangersdisplay · 400 · SIL Open Font License 1.1
- Archivobody · 400, 500, 800 · SIL Open Font License 1.1
- Display73 / 46px · 400One template. Every format.
- H246 / 35px · 400Section headline
- H336 / 28px · 400Card heading
- Body16 / 16px · 400Body copy reads at this size and measure.
Components
Pop artProductPricingAboutGet started
Get started
Card heading
Body copy reads at this size and measure.
Shape and motion
- sm · 0px
- md · 0px
- lg · 0px
- spring ·
cubic-bezier(0.3, 1.6, 0.5, 1) - spring-2 ·
cubic-bezier(0.3, 1.8, 0.5, 1)
Exports
- DESIGN.md
DESIGN.md18 KBEverything - CSS variables
tokens.css4 KBEverything - Tailwind v4
tailwind.css5 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json24 KBEverything - Webflow variables
webflow-variables.json8 KBEverything - W3C tokens (JSON)
tokens.json15 KBEverything
Everything unlocks every format of every system in the app and through the MCP server. Ask your agent for get_design_system("style-pop-art") with the MCP server.
- Source
- Pop art section style
- Palette
- Sanzo Wada 179: Red Orange, Golden Yellow, Deep Lyons Blue
- Fonts
- Bangers (OFL 1.1), Archivo (OFL 1.1)
- Themes
- Light, plus a derived dark
- Contrast
- Text 17.84:1 · muted 4.82: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