Neon dark design system
From the Neon dark section style.
Included with Everything
Colour
Type
- Archivodisplay · 400, 800, 900 · SIL Open Font License 1.1
- Display89 / 44px · 900ONE TEMPLATE. EVERY FORMAT.
- H255 / 36px · 900Section headline
- H352 / 34px · 900Card heading
- Eyebrow13 / 13px · 9005 IN 1
- Body16 / 16px · 400Body copy reads at this size and measure.
Components
Neon darkProductPricingAboutGet started
Get started
Read more
5 IN 1
Card heading
Body copy reads at this size and measure.
Shape and motion
- sm · 7px
- md · 13px
- lg · 30px
- pill · 9999px
- shadow sm
- shadow md
- fast · 150ms
- base · 700ms
- slow · 900ms
Exports
- DESIGN.md
DESIGN.md19 KBEverything - CSS variables
tokens.css5 KBEverything - Tailwind v4
tailwind.css6 KBEverything - shadcn/ui theme
shadcn.css5 KBEverything - Figma variables
figma-variables.json26 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("style-neon-dark") with the MCP server.
- Source
- Neon dark section style
- Palette
- Sanzo Wada 346: Rosolanc Purple, Turquoise Green, Light Green Yellow, Andover Green
- Fonts
- Archivo (OFL 1.1)
- Themes
- Dark, plus a derived light
- Contrast
- Text 19.79:1 · muted 10.2: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