Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Vantix
Vantix is a cinematic, atmospheric design system built for agencies who want to feel like the future rather than sell it. Deep navy-black canvases hold glowing holographic 3D chrome forms, looping video textures, and rich editorial portraiture — every surface feels lit from within, like a studio at midnight. Typography leans on a confident geometric sans paired with a flickering italic serif accent, creating a push-pull between corporate precision and creative flourish.
Colors
Canvas
Void Ink
#0c0c1d
Primary canvas & dark surface. Base background for every section, nav, and footer.
Glass Overlay
#c7c7c733
Translucent divider & option background. Option-wrapper fills, hairline borders.
Midnight Panel
#16162b
Card & input surface. Pricing cards, inputs, dropdown panels.
Ink
Bone White
#ffffff
Primary text & button fill. Headlines, body copy, pill button backgrounds.
Faded Smoke
#999999
Secondary text & links. Dark-link labels, muted captions, footer link text.
Accent
Chrome Violet
#b26cf1
Secondary accent. Button-line hover color, link underline accents.
Electric Indigo
#6f00ff
Tertiary accent. Underline hover border on primary nav-style links.
Holographic Mauve
#995263
Primary accent & hover glow. Hero radial gradient, hover states on link buttons.
State — utility only
Signal Blue
#3898ec
Utility action hue. Default Webflow commerce buttons and focus outlines.
Typography
The quick brown fox jumps
Primary UI and body typeface. Used for nav, body copy, buttons, labels.
The quick brown fox jumps
Pricing and label typeface. Used for product titles and condensed UI labels.
The quick brown fox jumps
Decorative accent typeface. Italic emphasis spans within headings and quotes.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1200pxSection gap
120pxCard padding
40pxElement gap
25pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-25
25px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-70
70px--spacing-100
100px--spacing-120
120pxBorder radius
cards20pxsmall5pxavatar9999pxbuttons40pxpill-input100pxparallax-image25pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Void Ink
Level 2Midnight Panel
Level 3Glass Overlay
Do's and don'ts
- Keep the base canvas at Void Ink (#0c0c1d) across every section — never introduce pure black or off-brand navy variants.
- Reserve Holographic Mauve and Chrome Violet for radial glows, hover underlines, and accent spans — never as large fill backgrounds.
- Pair every display headline with one italic serif phrase for editorial contrast, as seen in 'future' and 'solve problems.'
- Use full pill radius (40px+) on all primary CTA buttons to maintain the soft, chrome-capsule aesthetic.
- Let 3D holographic knot/sphere renders bleed off the hero edge for cinematic depth — avoid cropping them into tidy boxes.
- Apply generous 120px section padding and wide 1200px containers to preserve the spacious, editorial rhythm.
- Use Faded Smoke for secondary/meta text so hierarchy against Bone White headlines stays crisp.
- Keep testimonial and stat cards on Midnight Panel or Glass Overlay surfaces to create subtle layered depth against the base canvas.
- Don't place body text directly on Holographic Mauve or Chrome Violet — contrast drops below readable thresholds.
- Don't use sharp square corners on buttons or cards; the system is built entirely on soft pill and rounded-rectangle geometry.
- Don't overcrowd sections — this template relies on breathing room, not dense grids.
- Don't substitute flat stock photography for the cinematic video/3D-render treatment used throughout.
- Don't mix in additional saturated hues beyond the mauve-violet-indigo accent family; the palette must stay cohesive.
- Don't set italic serif spans in all-caps — the flourish only works in natural mixed case.
- Don't shrink the hero display type below 48px on desktop; scale impact is central to the brand's confidence.
Example prompts
Hero section
Services grid
Stat block
CTA footer
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide