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

# Vana · Design System

> Human-centered data infrastructure in a calm, vivid frame

**Theme:** light · **Industry:** ai · **Source:** https://vana.org/ · **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._

Vana presents open data infrastructure through a confident, spacious homepage led by a lavender video hero and oversized black typography. Warm-white content areas, compact mono labels, and restrained electric-blue actions keep the technical subject approachable.

## North star

Let a single expressive media hero lead, then make every supporting section quieter, clearer, and more usable.

## Overview

The page pairs a warm near-white canvas with a lavender full-width video hero, creating a calm but distinctive first impression. Black Onest display text sits directly over the hero, while muted gray supporting copy keeps the message readable without competing with it. The electric blue CTA is the sharpest interface accent; softer lavender and pastel surfaces distinguish the four audience links below. Onest carries the expressive headline, navigation, and body copy, while JetBrains Mono gives captions, labels, and actions a technical, data-oriented character. Content is organized in broad horizontal bands with generous open space: a media-led hero, a pastel category strip, a compact news-card row, and a quiet footer. The hero's human-shaped, code-like video texture is atmospheric rather than a literal interface illustration. Cards stay mostly flat, with thin gray dividers and subtle shadows reserved for clickable content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fcfcfa` | `--color-warm-canvas` | neutral | Primary page canvas across the navigation, content bands, and footer. |
| Soft Graphite | `#6b6b6b` | `--color-soft-graphite` | neutral | Main muted copy and secondary footer or button text. |
| Deep Ink | `#111111` | `--color-deep-ink` | neutral | Headlines, navigation, primary text, and dark link labels. |
| Lavender Field | `#ece9fb` | `--color-lavender-field` | surface | Hero background surface and a key pale-violet section tone. |
| Divider Gray | `#e5e5e5` | `--color-divider-gray` | neutral | Fine borders separating cards, navigation, and footer elements. |
| Signal Blue | `#4141fc` | `--color-signal-blue` | accent | Primary Launch App button and small, high-emphasis interaction accents. |
| Slate Copy | `#575756` | `--color-slate-copy` | neutral | Secondary muted text in supporting content. |
| Blue Violet | `#4f4ffa` | `--color-blue-violet` | accent | Gradient accent associated with the hero treatment. |
| Warm Taupe | `#a49e91` | `--color-warm-taupe` | semantic | Minor footer detail and subdued border tone. |
| Oat Card | `#f3efe1` | `--color-oat-card` | surface | Warm pastel background for the first audience-category link card. |
| Periwinkle Card | `#d9d9fe` | `--color-periwinkle-card` | surface | Pale blue-violet audience-category card background. |
| Peach Card | `#f0d5bc` | `--color-peach-card` | surface | Soft peach background for an audience-category card. |
| Lemon Card | `#fef2b3` | `--color-lemon-card` | surface | Pale yellow audience-category card background. |
| Footer Gray | `#eaeaea` | `--color-footer-gray` | neutral | Low-contrast footer hairlines and supporting separators. |
| Iris Glow | `#8887f1` | `--color-iris-glow` | accent | Secondary violet gradient tone, mainly visible in the hero media treatment. |
| Periwinkle Glow | `#7e7efd` | `--color-periwinkle-glow` | accent | Minor gradient color in the hero treatment rather than a core UI color. |

### Semantic aliases

`--color-canvas` → `#fcfcfa` (Warm Canvas) · `--color-surface` → `#ece9fb` (Lavender Field) · `--color-surface-2` → `#f3efe1` (Oat Card) · `--color-surface-3` → `#d9d9fe` (Periwinkle Card) · `--color-surface-4` → `#f0d5bc` (Peach Card) · `--color-text` → `#111111` (Deep Ink) · `--color-text-muted` → `#6b6b6b` (Soft Graphite) · `--color-text-subtle` → `#575756` (Slate Copy) · `--color-border` → `#e5e5e5` (Divider Gray) · `--color-accent` → `#4141fc` (Signal Blue) · `--color-accent-2` → `#4f4ffa` (Blue Violet) · `--color-accent-3` → `#8887f1` (Iris Glow) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#fcfcfa` | 18.38:1 | AAA |
| `#111111` | `#ece9fb` | 15.84:1 | AAA |
| `#111111` | `#f3efe1` | 16.41:1 | AAA |
| `#111111` | `#d9d9fe` | 13.76:1 | AAA |
| `#6b6b6b` | `#fcfcfa` | 5.19:1 | AA |
| `#6b6b6b` | `#ece9fb` | 4.47:1 | AA-large |
| `#6b6b6b` | `#f3efe1` | 4.63:1 | AA |
| `#6b6b6b` | `#d9d9fe` | 3.88:1 | AA-large |
| `#575756` | `#fcfcfa` | 7.04:1 | AAA |
| `#575756` | `#ece9fb` | 6.07:1 | AA |

### Gradients

- `linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 70%)`
- `linear-gradient(0deg, rgba(65, 65, 252, 0.92), rgba(65, 65, 252, 0.6))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Onest | `--font-body` | webfont | 400, 600, 500 | Display headlines, navigation, body copy, and card text. | Inter |
| JetBrains Mono | `--font-mono` | webfont | 400 | Eyebrows, dates, captions, compact links, and button labels. | IBM Plex Mono |

- **Onest:** Use medium display weight with tight tracking for large headlines; keep body and navigation clean, sentence case, and unembellished.
- **JetBrains Mono:** Use regular weight for small utility text, with lightly tracked labels; uppercase is reserved for eyebrow-style section labels.

### Type scale — Custom (ratio ≈ 2.683, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 108px | 500 | 0.88 | -0.05em | — | Onest | Oversized hero headline, tightly set over the video background. |
| h1 | 25px | 600 | 1.2 | -0.015em | — | Onest | Section-level primary headings and prominent page titles. |
| body | 15px | 400 | 1.43 | 0 | — | Onest | Supporting paragraphs and descriptive card copy. |
| caption | 13px | 400 | 1.2 | 0.02em | — | JetBrains Mono | Compact dates and metadata on news cards. |
| button | 13px | 400 | 1.2 | 0.02em | — | JetBrains Mono | Short action labels, especially the primary app CTA. |
| nav | 15px | 400 | 1.43 | 0 | — | Onest | Top navigation and footer navigation links. |
| link | 13px | 400 | 1.2 | 0.02em | — | JetBrains Mono | Small utility links and card calls to action. |
| eyebrow | 12px | 400 | 1 | 0.05em | uppercase | JetBrains Mono | Uppercase section labels and compact category markers. |
| code | 13px | 400 | 1.2 | 0.02em | — | JetBrains Mono | Technical-style compact labels or data references. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 11, 12, 14, 16, 18, 20, 24, 36, 80, 96 px.
- Section rhythm 80px · element gap 6px · card padding — · max content width 1180px.

Use a centered content frame capped at the measured 1180px maximum width, with broad full-width color and media bands. The top navigation is a simple horizontal row; the hero aligns its text left over edge-to-edge video. Below it, arrange four pastel audience links in a row, followed by three editorial news cards and a multi-column footer. Keep comfortable density and generous section breathing room; the measured section rhythm uses an 80px gap.

## Shape & elevation

- Radius: button `4px` · input `4px` · card `8px` · nav `4px` · link `8px` · xs `4px` · sm `8px`
- Shadow `sm` (link): `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 2px -1px, rgba(0, 0, 0, 0.04) 0px 2px 3px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: rely on open space, pastel section fills, and fine gray borders instead of pronounced shadows. Clickable news cards may receive a very subtle shadow, while the audience links use distinct background colors as their main separation. Keep layering limited to text over the hero video.

## Imagery

The first view is dominated by a full-bleed video with a human-shaped field of fine, code-like marks over a lavender gradient. Treat this as atmospheric motion imagery, not a product screenshot. Below the audience cards, use small editorial news thumbnails, including people in discussion and a dark data visualization. Keep imagery contained within its card and let generous surrounding space preserve clarity.

## Components

### Top navigation

Place the Vana wordmark at left and compact Onest navigation links at right, ending with a rounded-corner Signal Blue Launch App button.

### Video hero

Use a full-width lavender media field with a large, left-aligned black headline and muted supporting copy layered over the video.

### Audience category links

Present four adjacent pastel cards for distinct audiences, each with a small JetBrains Mono label and number above concise Onest copy.

### News cards

Show a compact three-card editorial row with thumbnail, mono date, headline, short summary, and small mono read-more link.

### Newsletter form

Keep the footer signup minimal: a short description, a single email field, and a small directional submit affordance.

### Footer navigation

Group links into compact columns for Use, Read, and Find Us, with a separate low-key legal and support row.

### Measured component styles

- **Primary button** (“Launch App”): background #4141fc · text #ffffff · radius 4px · padding 4px 10px 4px 16px · 500 15px Onest
- **Link** (“12 OCTOBER 2026 Agents Need Your Data. W”): transparent background · text #111111 · radius 8px · padding 0px · 400 17px Onest · shadow rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.06) 0px 1px 2px -1px, rgba(
- **Input**: transparent background · text #111111 · radius 4px · padding 11px 12px · 400 13px JetBrains Mono
- **Card** (“12 OCTOBER 2026 Agents Need Your Data. W”): background #ffffff · text #111111 · radius 8px · padding 0px · 400 17px Onest
- **Navigation item** (“Use”): transparent background · text #111111 · radius 4px · padding 8px 12px · 400 15px Onest

## Do

- Use Warm Canvas #fcfcfa as the main page ground.
- Keep hero headlines bold, black, and left aligned over the media.
- Reserve Signal Blue #4141fc for the primary action.
- Use JetBrains Mono for small labels, dates, and utility links.
- Separate audience cards with soft, distinct pastel fills.
- Give each major horizontal band generous breathing room.

## Don't

- Do not turn the full page into a saturated gradient.
- Do not use bright blue for long passages of text.
- Do not crowd the hero with multiple competing actions.
- Do not add heavy shadows or thick card borders.
- Do not use mono typography for the main headline.
- Do not treat video artwork colors as universal UI colors.

## Agent prompt

Build a new page in Vana’s visual language: calm, human-centered, and editorial, with a spacious Warm Canvas #fcfcfa ground. Pair Deep Ink #111111 Onest headlines with Soft Graphite #6b6b6b supporting copy, and use JetBrains Mono for compact labels, dates, and utility links. Give the opening section one strong media focal point, using lavender tones such as Lavender Field #ece9fb; keep any human or data-inspired motion artwork atmospheric. Make Signal Blue #4141fc the rare, clear primary action. Use pastel surfaces such as Oat Card #f3efe1, Periwinkle Card #d9d9fe, Peach Card #f0d5bc, and Lemon Card #fef2b3 to distinguish related content. Structure the page as broad, breathable bands with understated card edges, restrained shadows, and a simple footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width video hero with left-aligned headline and supporting copy. | Clear value proposition, Text layered over video | Lavender gradient field, Oversized black headline, Muted supporting copy |
| 2 | footer | Multi-column footer with brand and newsletter at left and grouped links to the right. | Email signup, Grouped site navigation, Legal and support links | Warm-white canvas, Compact mono labels, Fine separators |

## Source CSS custom properties (selected)

```css
--radius: 9px;
--spacing: 4px;
--font-sans: "Onest", "Onest Fallback", "Helvetica Neue", Arial, sans-serif;
--text-hero--letter-spacing: -.05em;
--font-display-opsz: 40;
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
```

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