# Vanta · Design system migration spec

> Source: https://www.vanta.com  ·  Curated by OpenDesign  ·  en

> A prime example of a modern B2B SaaS design that successfully blends editorial serif typography with clean, functional tech interfaces to build trust.

## 1. Identity DNA

Vanta's design system is built as a confident, professional shield for modern SaaS companies. The visual language balances high-end editorial warmth with modern tech precision, establishing a foundation of trust and authority for compliance and security.

**One-liner:** An enterprise SaaS platform that simplifies compliance and builds trust through automation.
**Keywords:** trust · compliance · security · automation · audit
**Analogy:** A confident, professional shield for modern SaaS companies.

## 2. Color

The color system is anchored by a deep ink-black and crisp whites, creating a high-contrast, professional foundation. A singular, high-chroma purple accent denotes primary action and key interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F8FA` | card background |
| `--bg-quiet` | `#EDE9F6` | quiet area |
| `--ink` | `#181822` | body text |
| `--ink-soft` | `#6D6E87` | secondary text |
| `--muted` | `#484960` | placeholder |
| `--accent` | `#5E05C4` | single accent |
| `--line` | `rgba(24, 24, 34, 0.1)` | divider |

**Color principle:** A restrained, professional palette anchored by deep navy-black and a singular, high-chroma purple accent.

The principle is restraint; a limited, purposeful palette avoids visual noise and focuses attention where it matters.

## 3. Typography

The typographic voice pairs the transitional serif Reckless for authoritative display headlines with the geometric sans Inter for clear, legible body and UI text. This duality of warmth and precision mirrors the brand's balance of editorial trust and technical clarity.

- **Display:** transitional-serif
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 72px | 1.0 | 400 | -1px | Hero headlines to convey gravity and trust. |
| headline | 40px | 1.1 | 400 | -0.5px | Section headings. |
| body | 16px | 1.5 | 400 | 0 | Standard text for readability. |
| label | 14px | 1.5 | 500 | 0 | Navigation and secondary labels. |

**Type rules:**
- Use Reckless for all display and headline text to add warmth and editorial authority.
- Use Inter for all body, UI, and label text to maintain clarity and a modern tech feel.
- Limit text weight variations to 400 and 500 to keep the interface clean.

## 4. Spacing

A generous vertical and horizontal rhythm reduces clutter and emphasizes the clarity of each content block.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical and horizontal padding emphasizes clarity and reduces visual clutter.

## 5. Surfaces

Depth is communicated through minimalist surfaces and subtle structural definition, not heavy elevation. Soft grey backgrounds and sparse, fine borders define modular components with a light touch.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Shadows:**
  - 0px 0px 2px 2px rgba(204, 204, 204, 1)
- **Borders:** Subtle 1px borders in rgba(24, 24, 34, 0.1) are used sparingly to define structure.

## 6. Layout

The layout skeleton is a structured 12-column grid with wide gutters, supporting a clean and modular organization. This framework enables generous whitespace and distinct content zones for high readability.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A structured 12-column grid with wide gutters supports a clean, modular layout.

## 7. Motion & Interaction

Motion is minimal and purposeful, serving to confirm interactions and guide focus without distraction. Smooth, subtle transitions provide a polished, professional feel that aligns with the system's authoritative tone.

- **Durations:** micro 200ms · small 350ms · medium 645ms
- **Easing:** `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
- **Patterns:**
  - Smooth 0.2s color transitions on text and UI elements.
  - Slightly longer 0.3s to 0.35s cubic-bezier transitions for structural animations.

- **Hover:** Text color transitions smoothly, buttons may have subtle background shifts or scale.
- **Click:** Immediate visual feedback via standard active states.
- **Transition:** Consistent 0.2s to 0.35s transitions across all interactive elements.
- **Keyboard:** Standard logical tab order supported by the clean semantic structure.

## 8. Voice & Don'ts

The editorial voice is professional, reassuring, and authoritative, using direct statements for impact. It avoids jargon, aggression, and casual playfulness in favor of clear, declarative communication.

- **Tone:** Professional, reassuring, and authoritative yet approachable.
- **Headline style:** Direct and declarative statements using a transitional serif typeface for impact.
- **CTA style:** Action-oriented and concise, often enclosed in pill-shaped buttons.
- **Avoid:** Jargon-heavy language / Aggressive sales pitches / Playful or overly casual tone / Visual clutter

### Don'ts
- ❌ Don't use harsh, saturated colors for backgrounds — screenshot shows soft lavender and grey.
- ❌ Don't use blocky, rectangular buttons — screenshot shows fully rounded, pill-shaped buttons.
- ❌ Don't rely on heavy drop shadows for depth — screenshot shows flat or very subtle elevation.
- ❌ Don't use a wide variety of type weights — screenshot shows mostly 400 and 500 weights.
- ❌ Don't clutter the layout with excessive elements — screenshot shows generous whitespace.
- ❌ Don't use sans-serif fonts for large headlines — screenshot shows a distinct transitional-serif.

The system deliberately omits visual clutter, heavy shadows, harsh colors, and typographic excess to maintain its core identity of trustworthy clarity.

## System Prompt (paste into AI tool)

```
Design system for Vanta, a compliance and security SaaS platform. The visual language balances high-end editorial warmth with modern tech precision, positioning the brand as a trustworthy partner for complex enterprise needs. Key colors include a crisp white (#FFFFFF) and soft grey (#F7F8FA) backgrounds, a deep ink-black (#181822) for text, and a vibrant purple (#5E05C4) for primary accents and CTAs. Typography features a transitional-serif (Reckless) for bold display headlines, paired with a geometric sans (Inter) for highly legible body and UI text. Critical donts: never use harsh or overly saturated background colors; avoid blocky, sharp-cornered UI elements like rectangular buttons; maintain generous whitespace and avoid visual clutter; and do not use heavy, distracting drop shadows or overly complex gradients.
```
