---
title: "Vanta design system"
variant: extended
source: https://www.vanta.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/vanta-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Vanta · Design System

> Editorial clarity in a lilac compliance world

**Theme:** light · **Industry:** saas · **Source:** https://www.vanta.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Vanta’s homepage pairs oversized editorial serif headlines with a lilac hero, vivid purple calls to action, and a pale, open canvas. Product interface previews and character illustrations give the enterprise compliance story a warm, approachable edge.

## North star

Pair editorial serif statements and spacious lilac fields with precise product UI, reserving vivid purple for meaningful actions.

## Overview

The page uses a pale, near-white canvas as its main field, interrupted by a broad lilac hero and deep plum announcement and footer bands. Saturated purple is reserved for primary actions and small interface accents, while dark ink text keeps the large statements crisp. SC Ripley gives display and heading text a delicate editorial character: oversized, light-weight serif forms with tight tracking and compact line spacing. Soehne handles navigation, body copy, captions, and buttons in a practical sans serif. A centered, constrained content column supports a long sequence of distinct blocks: hero and product preview, customer logos, feature cards, testimonials, audience illustrations, and resource content. Rounded pill controls, pale gray-lilac cards, and restrained borders soften the interface without making it feel ornamental. Custom illustrations and product screenshots are prominent, with photography concentrated in customer proof cards. Generous whitespace separates sections, while card grids keep detailed product information scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, light section backgrounds, and text on purple actions. |
| Vanta Violet | `#5e05c4` | `--color-vanta-violet` | brand | Primary filled CTA buttons and small purple interface accents. |
| Ink Black | `#181822` | `--color-ink-black` | neutral | Default headings, navigation, and body text on light backgrounds. |
| Muted Mauve | `#beb3c8` | `--color-muted-mauve` | semantic | Muted text measured primarily in the deep footer; use for subdued contrast there. |
| Night Slate | `#21222f` | `--color-night-slate` | surface | Dark inverse section background, notably the audience and customer-proof area. |
| Lavender Gray | `#9e9fb7` | `--color-lavender-gray` | semantic | Borders and hairlines around controls, cards, and links. |
| Cloud Lilac | `#e6e6f0` | `--color-cloud-lilac` | surface | Pale navigation and feature surfaces, including softly defined cards. |
| Periwinkle Field | `#c2beff` | `--color-periwinkle-field` | brand | Signature lilac hero background and selected highlighted surfaces. |
| Deep Plum | `#260048` | `--color-deep-plum` | brand | Announcement strip and deep footer background; also appears in inverse details. |
| Frosted Lilac | `#efeff5` | `--color-frosted-lilac` | surface | Very pale cards and link panels, including repeated framework tiles. |
| Soft Ink | `#1c1c2a` | `--color-soft-ink` | neutral | Secondary dark text measured in card and link content. |
| Slate Ink | `#2b2c3f` | `--color-slate-ink` | neutral | Supporting text and interface copy where a softer dark tone is needed. |
| Orchid Tint | `#d4baff` | `--color-orchid-tint` | accent | Light purple section accent, visible in selected surfaces and page details. |
| Mist Gray | `#dfdfe9` | `--color-mist-gray` | neutral | Subtle supporting text tone measured in page content. |
| Graphite Ink | `#373744` | `--color-graphite-ink` | neutral | Low-emphasis dark text and secondary interface details. |
| Midnight Ink | `#11121a` | `--color-midnight-ink` | neutral | Very dark text detail measured in small portions of page content. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#21222f` (Night Slate) · `--color-surface-2` → `#c2beff` (Periwinkle Field) · `--color-surface-3` → `#260048` (Deep Plum) · `--color-surface-4` → `#e6e6f0` (Cloud Lilac) · `--color-text` → `#181822` (Ink Black) · `--color-text-muted` → `#beb3c8` (Muted Mauve) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#9e9fb7` (Lavender Gray) · `--color-accent` → `#5e05c4` (Vanta Violet) · `--color-accent-2` → `#c2beff` (Periwinkle Field) · `--color-accent-3` → `#d4baff` (Orchid Tint) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181822` | `#ffffff` | 17.61:1 | AAA |
| `#181822` | `#21222f` | 1.12:1 | fail |
| `#181822` | `#c2beff` | 10.15:1 | AAA |
| `#181822` | `#260048` | 1.01:1 | fail |
| `#beb3c8` | `#ffffff` | 2.01:1 | fail |
| `#beb3c8` | `#21222f` | 7.85:1 | AAA |
| `#beb3c8` | `#c2beff` | 1.16:1 | fail |
| `#beb3c8` | `#260048` | 8.9:1 | AAA |
| `#ffffff` | `#21222f` | 15.74:1 | AAA |
| `#ffffff` | `#c2beff` | 1.74:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Soehne | `--font-body` | webfont | 400, 500, 700 | Navigation, body copy, buttons, captions, and utility text. | Inter |
| SC Ripley | `--font-display` | webfont | 500, 300, 400 | Display and heading hierarchy, including editorial hero statements. | Cormorant Garamond |

- **Soehne:** Practical sans; body is regular, while captions and eyebrows use uppercase with pronounced tracking.
- **SC Ripley:** Light serif display with tight negative tracking; use restrained medium weights for smaller headings.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 300 | 0.95 | -0.031em | — | SC Ripley | Oversized editorial campaign statements and major page moments. |
| h1 | 88px | 300 | 0.95 | -0.034em | — | SC Ripley | Primary hero heading, set as a light serif statement. |
| h2 | 56px | 300 | 1.2 | -0.018em | — | SC Ripley | Section titles for features, proof, and content areas. |
| h3 | 42px | 500 | 1.2 | -0.048em | — | SC Ripley | Subsection and prominent feature-card headings. |
| h4 | 30px | 500 | 1.35 | -0.05em | — | SC Ripley | Smaller feature and content card titles. |
| body | 14px | 400 | 1.83 | 0 | — | Soehne | Explanatory copy, product descriptions, and supporting paragraphs. |
| caption | 12px | 500 | 1.3 | 0.667em | uppercase | Soehne | Compact uppercase labels and tightly scoped metadata. |
| button | 16px | 400 | 1.6 | 0 | — | Soehne | CTA and action labels, set in the functional sans serif. |
| nav | 16px | 400 | 1.6 | 0 | — | Soehne | Primary navigation and menu labels. |
| eyebrow | 12px | 500 | 1.3 | 0.667em | uppercase | Soehne | Small uppercase section labels above headings. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 128 px.
- Section rhythm 80px · element gap 16px · card padding — · max content width 1280px.

Build a centered, wide desktop layout with a measured maximum content width of 1280px. The page is a long sequence of strongly differentiated bands: compact navigation and announcement, a full-width lilac hero, then spacious white sections with logo rows, card grids, split product stories, proof, and resources. Use comfortable density and generous section separation; the measured section gap is 80px and element gap is 16px. Keep headings centered in the hero and align detailed content to orderly card grids elsewhere.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `16px` · nav `50%` · link `8px` · xs `8px` · sm `16px` · pill `9999px`
- Shadow `sm` (media): `rgba(0, 0, 0, 0.03) 0px 0px 8px 4px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page favors flat color bands, thin measured borders, and softly differentiated pale cards over heavy shadows. Use rounded media and card surfaces to separate product previews from the canvas; the measured small media shadow is extremely subtle. Layer large screenshots and illustrations within the hero without adding dramatic depth or glossy effects.

## Imagery

Mix crisp product-interface previews with custom, dark-purple character illustrations that sit within or alongside the lilac hero and audience cards. Use customer photography in proof cards, cropped into vertical, rounded panels with a darkened treatment that keeps overlays legible. Product screenshots remain light and realistic, framed as large interface surfaces rather than decorative 3D objects. Keep illustration colors consistent with the purple-and-lilac palette.

## Components

### Primary CTA

Use a Vanta Violet (#5e05c4) pill with white text, a thin matching border, and a small directional arrow where shown.

### Hero signup field

A white pill-shaped email input paired with a purple demo action; keep the form centered beneath the hero copy.

### Announcement strip

A narrow Deep Plum (#260048) band with compact announcement copy, a small illustrated icon, and a directional link.

### Product preview

A large, pale rounded interface screenshot below the hero form, with believable app chrome and clear data panels.

### Feature tiles

Pale Frosted Lilac (#efeff5) or Cloud Lilac (#e6e6f0) cards with concise titles, supporting copy, and product-interface imagery.

### Proof cards

Rounded customer-photo panels placed on a dark Night Slate (#21222f) section, with restrained readable overlay text.

### Measured component styles

- **Primary button** (“Learn more”): background #5e05c4 · text #ffffff · border 1px solid #5e05c4 · radius 999px · padding 4px 4px 4px 16px · 500 18px Soehne
- **Secondary button** (“Platform”): transparent background · text #181822 · border 1px solid #ffffff · radius 999px · padding 8px 10.4px 8px 12.8px · 400 16px Soehne
- **Link** (“SOC 2 Get audit-ready fast”): background #efeff5 · text #1c1c2a · radius 8px · padding 24px 16px · 400 16px Soehne
- **Input**: background #ffffff · text #333333 · border 1px solid #8e81c1 · radius 999px · padding 13.6px 16px · 400 18px Soehne
- **Navigation item** (“Platform Solutions Partners Resources Pl”): transparent background · text #181822 · radius 0px · padding 0px · 400 16px Soehne

## Do

- Use SC Ripley-style serif for large editorial headlines.
- Keep the main canvas near-white and reserve lilac for major hero moments.
- Use Vanta Violet for primary actions, not broad decorative fills.
- Separate long-form sections with generous whitespace.
- Show product UI as legible, light interface previews.
- Use rounded pills for buttons and rounded corners for media.

## Don't

- Do not turn the page into a dense dashboard.
- Do not use gradients as a defining visual treatment.
- Do not replace the editorial serif hierarchy with all-sans headings.
- Do not spread vivid purple across every card or section.
- Do not add heavy shadows or elaborate depth effects.
- Do not use generic stock imagery in place of the distinctive character art.

## Agent prompt

Create a SaaS page in Vanta’s editorial, product-led visual style. Use Gallery White (#ffffff) as the principal canvas, Periwinkle Field (#c2beff) for a bold hero band, and Deep Plum (#260048) for compact announcement or inverse bands. Set major headlines in a light, tightly tracked serif similar to SC Ripley; use a clean sans like Inter for navigation, copy, and actions. Make primary pill CTAs Vanta Violet (#5e05c4) with white labels. Organize the page into spacious, centered sections with pale Cloud Lilac (#e6e6f0) and Frosted Lilac (#efeff5) cards, thin Lavender Gray (#9e9fb7) borders, and rounded product previews. Combine detailed interface screenshots with distinctive illustrated characters and occasional customer photography. Keep the hierarchy clear, calm, and scannable; avoid gradients, heavy shadows, and excessive color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Long opening region with a lilac hero, centered headline and signup form, and a large product preview below. | Email capture, Demo CTA, Announcement link | Lilac background band, Serif headline, Rounded signup form, Product screenshot |
| 2 | footer | Deep plum footer with several dense navigation columns and a bottom legal and certification row. | Multi-column site navigation, Legal links, Social links | Deep plum background, Small muted text, Hairline divider, Certification badges |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(255,252,252,0);
--osano-button-border-color: #fff;
--osano-button-background-color: #240642;
--osano-button-foreground-color: #ffffff;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #240642;
--osano-info-dialog-overlay-color: rgba(0,0,0,0);
--osano-link-color: #000000;
--osano-toggle-off-track-color: #7A3FF1;
--osano-toggle-off-thumb-color: #FFFFFF;
--osano-toggle-on-track-color: #37CD8F;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-button-close-color: #240642;
--osano-button-accept-background-color: #240642;
--osano-button-accept-border-color: #fff;
--osano-button-accept-foreground-color: #ffffff;
--osano-button-deny-background-color: #7A3FF1;
--osano-button-deny-border-color: #fff;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #240642;
--osano-button-manage-border-color: #fff;
--osano-button-manage-foreground-color: #ffffff;
--osano-info-dialog-link-color: #000000;
--osano-info-dialog-button-close-color: #000000;
--osano-info-dialog-toggle-off-track-color: #7A3FF1;
--osano-info-dialog-toggle-off-thumb-color: #FFFFFF;
--osano-info-dialog-toggle-on-track-color: #37CD8F;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #240642;
--osano-info-dialog-button-border-color: #ffffff;
--osano-info-dialog-button-foreground-color: #ffffff;
--osano-info-dialog-background-color: #fffcfc;
--osano-info-dialog-foreground-color: #000000;
--osano-toggle-off-background-color: #d2cfff;
--osano-toggle-button-off-color: #ffffff;
--osano-toggle-on-background-color: #37cd8f;
--osano-toggle-button-on-color: #f4f4f4;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/vanta-com