Vanta — design system & UI screens
Vanta's landing opens on a soft lavender hero with a large serif "Trust is everything" headline and an inline email-capture "Get a demo" CTA, anchored by a layered floating product-UI mockup showing an AI agent "Generating Terraform" panel and an ISO 4200 evidence checklist with a violet welcome-chat bubble overlay. The signature element is the tall four-up full-bleed customer portrait wall ("Proof? We've got proof.") where each cinematic photo carries a logo badge (Accumulus, GitHub, DOCGO, Perforce) and a name caption — distinct from typical logo-only social proof. A dark-mode "Built for you" segmented band, a real Forrester Wave bubble chart, and a deep-purple mega-footer with framework columns and "Powered by Vanta" certification seals close the page.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/vanta.
Decoded design system
Vanta's decoded design system: background #FFFFFF, text #181822, accent #5E05C4, link #5E05C4, primary #260048; type scale h1 72px / h2 56px / body 16px; 8px spacing base; 8px base radius. The single interactive/action color is #5E05C4 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #F1F1F1 |
| border | #DCDCDD |
| text | #181822 |
| text_muted | #6F6F75 |
| primary | #260048 |
| accent | #5E05C4 |
| link | #5E05C4 |
| secondary | #DDD6FF |
| button_bg | #5E05C4 |
| button_text | #FFFFFF |
Using these colors
- Action color
#5E05C4— the single interactive color; only on things you click or must notice, never large fills. accent,link,button_bgare all#5E05C4— one role, not several (the action color).- accent
#5E05C4— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#260048— a brand color — but the call-to-action uses #5E05C4, not this. - secondary
#DDD6FF— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Reckless
- Body: Inter
- h1: 72px
- h2: 56px
- body: 16px
Spacing
- base unit: 8px
- scale: 4px, 8px, 10px, 12px, 13px, 16px, 24px, 32px, 40px, 48px
Radii
- base: 8px
- button: 999px
Motion
Micro-interactions run at 200ms (dominant) with ease.
- durations: 200ms · 300ms · 350ms
- easings:
ease·ease-out - animated properties: transform, color, background-color, opacity
Native design tokens
| Token | Value |
|---|---|
--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 |
…and 99 more measured on the page.
Button states (measured)
- primary hover: border
1px solid rgb(38, 0, 72)· background#260048 - primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
1280px - nav: 72px sticky
Motion choreography (measured)
Load order: a.home--products_card×12 → div.navbar5_dropdown-toggle×4 → div.navbar5_dropdown-toggle×4 → a.home--frameworks_item-li×8 → a.button×6 → a.button×6
Scroll reveal: 16 elements rest at opacity 0, translateY(24px), animate in over 0.3s cubic-bezier(0.645, 0.045, 0.355, 1).
Overlay recipe (measured)
dialog panel: #FFFFFF · radius 0px
Input (measured)
height 48px · radius 9999px
Responsive (measured)
- breakpoints: 479px · 590px · 768px · 980px · 992px
- mobile (390px): hero 48px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →
Screens
Sections (12)
- Hero — Lavender serif hero with inline demo capture + layered AI product mockup
- Logo Wall — Trusted-by customer logo strip
- Bento Grid — 'It's all here' six-card capability bento with embedded UI
- Feature — Vanta AI Agent assistant promo with chat panel
- Testimonial / Social Proof — Centered GitHub pull-quote
- Feature — 'All the frameworks you need' carousel with framework cards
- Comparison — Dark 'Built for you' three-segment band (Startups / Mid-market / Enterprise)
- Gallery / Showcase — 'Proof? We've got proof.' four-up customer portrait wall
- Stats / Metrics — Forrester Wave leader callout with bubble chart
- Gallery / Showcase — Dark 'Dive into all things Vanta' four resource cards
- CTA / Sign-up — Lavender 'Meet the new standard for trust' closing CTA
- Footer — Deep-purple mega-footer with framework columns and certification seals