Editorial trust brand that is purple rather than the expected compliance blue: a full-bleed periwinkle hero band carrying an enormous Reckless serif headline at a restrained weight 500, quiet Inter Variable underneath, 999px pill CTAs in Vanta Purple with inset circular arrow chips, and a published 11-step token ladder whose semantic green, red and goldenrod are confined to 4px status chips.
Browse Vanta in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: vanta.com (live DOM, computed styles + published Webflow token variables), 2026-07-18. Coverage: home / platform landing. Logged-in compliance app not captured (needs login). Note: the system is purple, not trust-blue — the primary brand colour is Vanta Purple #5e05c4.
Vanta reads as an editorial trust brand rather than a security-vendor dashboard. The hero drops the whole viewport into a soft periwinkle #cdd2f8 band, and on top of it sits an enormous Reckless serif headline — a high-contrast display face with real stroke modulation — which is the single most recognisable move in the system. Everything under the headline is quiet Inter Variable: a one-line sub, then an inline email pill with a purple button tucked inside it. Colour is a full 11-step Webflow token ladder (purple, dark-purple, gray, green, red, yellow) but the marketing surface only ever spends purple, one bright green for pass states, and deep aubergine bands. It deliberately avoids gradients, glass, and the neon-on-black look of most compliance tooling. Feels: composed, editorial, trustworthy, calm.
| Token | Hex | Role / usage |
|---|---|---|
primary/vanta-purple | #5e05c4 | THE brand colour — primary CTA fill, inline submit button |
primary/vanta-dark-purple | #260048 | Announcement bar, deep aubergine sections |
primary/cerulean | #cdd2f8 | The signature periwinkle hero band |
primary/vanta-green | #09c639 | Pass / compliant state |
primary/white | #ffffff | Canvas, on-dark text |
primary/black | #000000 | Reserved |
| Token | Hex | Role / usage |
|---|---|---|
gray/1000 | #181822 | Headlines + body ink (default text colour) |
gray/1100 | #11121a | Deepest ink |
gray/700 | #484960 | Secondary copy |
gray/600 | #6d6e87 | Tertiary copy |
gray/500 | #8687a0 | Muted / meta |
gray/400 | #9e9fb7 | Placeholder + outline-button border |
purple/tint | #d5aaff | Link colour on dark aubergine sections |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
snow | #f7f8fa | Full-bleed pale band |
gray/100 | #f6f7f9 | Palest inset |
gray/200 | #eaeaf1 | Second band / hairline fill |
gray/300 | #dfdfe9 | Hairline borders |
| dark band | #21222f | Near-black section |
dark-purple/600 | #1e0537 | Deepest aubergine |
purple/50 | #fbf6ff | Palest purple wash |
| field border | rgba(36,6,67,.33) | 1.5px border on the hero email field |
50 #fbf6ff · 400 #c88eff · 500 #ba71ff · 600 #8f47d5 · 700 #7339aa · 800 #562b80 · 900 #391c55 · shade #771fcb · tint #d5aaff
50 #f4f2f5 · 100 #d3cdd9 · 200 #b6acc0 · 300 #9283a1 · 400 #6d5981 · 500 #492f62 · 600 #1e0537
| Token | Hex | Role / usage |
|---|---|---|
| green | #09c639 (300 #84e39c, 500 #32d05a, shade #068d39) | Pass / compliant |
| red | #f45b5b (500 #f67676, shade #b03243, tint #f9adad) | Fail / at-risk |
| goldenrod | #ffbe0f (300 #ffde87, shade #ef8909) | Warning / in-progress |
Rules. Purple is the only chrome accent — semantic green/red/yellow appear only inside compliance status chips and test rows, never on buttons. The periwinkle #cdd2f8 is a band colour, never a fill for cards or controls.
Reckless, Georgia, serif — the brand serif, used for every headline"Inter Variable", Arial, sans-serif| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 (Reckless) | 72/79.2 | 500 | -1px |
| Quote h2 (Reckless) | 64/76.8 | 500 | -0.5px |
| Section h2 (Reckless) | 56/67.2 | 500 | -1px |
| Sub-section h2 (Reckless) | 42/50.4 | 500 | -0.5px |
| Card h3 (Inter) | 24/31.2 | 500 | normal |
| Lead body (Inter) | 18/27 | 400 | normal |
| Body (Inter) | 16/24 | 400 | normal |
| Nav link (Inter) | 18 | 500 | normal |
| Button label (Inter) | 16 | 500 (600 on the large white variant) | normal |
| Announcement bar | 16 | 500 | normal |
Patterns: the serif never goes above weight 500 — scale, not weight, carries hierarchy. Tracking is negative only on serif display sizes and returns to normal for all Inter roles. Headings are sentence case; no uppercase tracked eyebrows anywhere.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.