# Vanta — Marketing site Design Spec

> 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`.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Brand primaries (published tokens)

| 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 |

### Text

| 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 |

### Surfaces & borders

| 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 |

### Purple ladder

`50 #fbf6ff` · `400 #c88eff` · `500 #ba71ff` · `600 #8f47d5` · `700 #7339aa` · `800 #562b80` · `900 #391c55` · shade `#771fcb` · tint `#d5aaff`

### Dark-purple ladder

`50 #f4f2f5` · `100 #d3cdd9` · `200 #b6acc0` · `300 #9283a1` · `400 #6d5981` · `500 #492f62` · `600 #1e0537`

### Semantic

| 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.

## 3. Typography Rules

- Display: `Reckless, Georgia, serif` — the brand serif, used for every headline
- UI + body: `"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.

## 4. Component Stylings

**Nav** — transparent bar over the canvas, ~43px of control height, no border, no backdrop blur. Five dropdown links in Inter 18/500; right cluster is an outline "Log in" pill and a purple "Get a demo" pill that ends in a circular arrow chip. Below it sits a `#260048` aubergine announcement bar (56px, white 16/500, sparkle glyph, `#d5aaff` "Learn more" link with an arrow).

**Buttons** — everything is a **999px pill**:

| Variant | Fill | Text | Border | Radius | Height | Padding | Type |
|---|---|---|---|---|---|---|---|
| Primary | `#5e05c4` | `#ffffff` | 1px `#5e05c4` | 999px | 43px | 2.4px / 12px | 16/500 |
| Outline | transparent | `#181822` | 1px `#9e9fb7` | 999px | 42px | 8px 12px | 16/500 |
| Large white | `#ffffff` | `#181822` | 1px `#9e9fb7` | 999px | 58px | 4px / 12px | 16/600 |
| On-dark link | none | `#ba9dff` | none | — | 24px | 0 | 16/500 |

The primary and large-white variants both carry a trailing **circular arrow chip** inset in the pill (the 2.4px/4px padding is what makes room for it). Transition `0.2s` on colour, `0.3s cubic-bezier(0.645, 0.045, 0.355, 1)` on opacity, `transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)`. Explicit hover fills: not captured.

**Signature hero email capture** — a single 48px white pill: `#ffffff` fill, **1.5px `rgba(36,6,67,.33)`** border, 999px radius, 18px Inter, 13.6px/16px padding, `#333333` placeholder ("nodrama@llama.com"), with a 40px `#5e05c4` submit pill nested flush inside the right edge.

**Cards** — 16px radius (`radius/large`) on `#ffffff` or `#f7f8fa`, separated by `#dfdfe9`/`#eaeaf1` hairlines. One shadow recipe only.

**Status chips** — 4px radius (`radius/small`) using the semantic trio: green `#09c639` pass, red `#f45b5b` fail, goldenrod `#ffbe0f` in-progress.

## 5. Layout Principles

The page is a stack of full-bleed bands: periwinkle `#cdd2f8` hero → white → `#f7f8fa` snow → `#eaeaf1` → a `#21222f` near-black section → aubergine footer. The hero is tightly centered: serif headline, one 18px line, one email pill — no illustration competing with the type. Content sections use 2- and 3-column card grids. Published radius scale is a named 3-step token set: `radius/small 4px`, `radius/medium 8px`, `radius/large 16px`, plus `radius/round 999px`. Base spacing unit `--size: 10px`.

## 6. Depth & Elevation

Radius scale: `4px` (small) / `8px` (medium) / `16px` (large) / `999px` (round), plus `100%` for avatars and `16px 0 0 16px` for left-capped panels.

Single shadow recipe observed:

- `rgba(0, 0, 0, 0.15) 0px 0px 30px 3px` — an ambient halo on the floating product card

Everything else separates by band fill and 1px `#dfdfe9` / `#eaeaf1` hairlines. Border-over-shadow is the rule.

## 7. Motion

Short and functional: `0.2s` on colour, `all 0.2s` on interactive surfaces, `opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1)`, and `transform 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)` on the arrow chips and card lifts. No scroll-jacking or entrance-animation library detected on the landing surface.

## 8. Backgrounds, Effects & WebGL

Essentially flat — the atmosphere comes from solid band colours, not effects. Two gradients observed, both media scrims rather than decoration:

- `linear-gradient(rgba(255,255,255,0), rgba(97,97,97,.23) 63%, rgba(0,0,0,.49))`
- `linear-gradient(rgba(31,31,31,.75), rgba(0,0,0,0))`

No canvas/WebGL, no backdrop-filter, no grain or noise texture. Background `<video>` is used for product motion.

## 9. Do's and Don'ts

### Do
- Set every headline in the Reckless serif at weight 500 — let size carry hierarchy.
- Put the hero on a full-bleed periwinkle `#cdd2f8` band with nothing but type and one email pill on it.
- Make every control a 999px pill; give primary CTAs a trailing circular arrow chip.
- Use Vanta Purple `#5e05c4` as the only chrome accent.
- Separate sections with full-bleed band colours and 1px `#dfdfe9` hairlines.
- Reserve green/red/goldenrod for compliance status chips at 4px radius.

### Don't
- Don't call this brand blue — the primary is purple `#5e05c4`.
- Don't set the serif above weight 500, and don't use it for body or UI copy.
- Don't use gradients, glass or glow for depth; use band fills and hairlines.
- Don't use `#cdd2f8` as a button or card fill — it is a band colour.
- Don't put semantic green or red on a CTA.
- Don't add uppercase tracked eyebrows; headings are sentence case.

## 10. Responsive Behavior

Webflow breakpoints: `max-width: 991px` (tablet), `max-width: 767px` (mobile landscape), `max-width: 479px` (mobile portrait), with a `min-width: 768px` desktop-up rule. The 991px breakpoint drives the mega-menu &rarr; drawer switch. Exact mobile type scale-down: not captured.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Band `#cdd2f8` · Text `#181822` · Muted `#8687a0` · Border `#dfdfe9` · Accent `#5e05c4`
- Font: Reckless serif (display), Inter Variable (UI/body) · Body: 16/24, lead 18/27 · Radius: 999px control / 16px card · Control height: 42-43px (58px large)
- Focus: not captured · Field border: 1.5px `rgba(36,6,67,.33)` at 48px · Hover fill: not captured (transition `0.2s`)

<vanta_design_language>
An editorial trust brand, purple rather than blue. White canvas stacked as full-bleed bands — periwinkle #cdd2f8 hero, snow #f7f8fa, gray #eaeaf1, near-black #21222f, aubergine #260048 — with ink #181822 and muted #8687a0. Every headline is set in the Reckless high-contrast serif at a restrained weight 500 (72/79.2 at -1px in the hero, 56/67.2 for sections); all UI and body copy is Inter Variable at 16/24 and 18/27, sentence case, no tracked eyebrows. Controls are always 999px pills at 42-43px: Vanta Purple #5e05c4 primary with a trailing circular arrow chip, or transparent with a 1px #9e9fb7 border. The signature component is the hero email capture — a 48px white pill with a 1.5px rgba(36,6,67,.33) border and a purple submit pill nested flush inside it. Cards use the published 4/8/16px radius scale, separated by #dfdfe9 hairlines rather than shadow (only one recipe exists: rgba(0,0,0,.15) 0 0 30px 3px). Semantic green #09c639, red #f45b5b and goldenrod #ffbe0f are confined to 4px compliance status chips. Motion is 0.2s colour and transform. Feels: composed, editorial, trustworthy, calm. Avoid: treating the brand as blue, setting the serif above 500 or using it for body copy, gradients and glass for depth, using #cdd2f8 as a control fill, and putting semantic colour on a CTA.
</vanta_design_language>