---
name: Vanta
description: "A prime example of a modern B2B SaaS design that successfully blends editorial serif typography with clean, functional tech interfaces to build trust."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#181822"
  secondary: "#6D6E87"
  tertiary: "#5E05C4"
  neutral: "#484960"
  bg-soft: "#F7F8FA"
  bg-quiet: "#EDE9F6"
  line: "rgba(24, 24, 34, 0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  headline:
    fontFamily: geometric-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  label:
    fontFamily: geometric-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

An enterprise SaaS platform that simplifies compliance and builds trust through automation.

*A confident, professional shield for modern SaaS companies.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#181822`)** — uses `ink` token
- **Secondary text (`#6D6E87`)** — uses `ink-soft` token
- **Accent (`#5E05C4`)** — uses `accent` token
- **Muted (`#484960`)** — uses `muted` token
- **Borders (`rgba(24, 24, 34, 0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous vertical and horizontal padding emphasizes clarity and reduces visual clutter.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Primary buttons are pill-shaped with a vibrant purple background; secondary buttons are outlined or ghost with pill-shaped or slightly rounded corners.
- **card:** Minimalist cards with soft grey backgrounds, no shadows, and subtle padding.
- **chip:** Not prominently featured; relies on clean typography and icons instead.
- **input:** Rounded, pill-shaped input fields with light grey borders and generous internal padding.
- **hero:** A split layout with a large serif headline on the left and a detailed product UI mockup on the right.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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