# Vana — Design System
> An open protocol for portable, user-owned data.
- **Canonical:** https://uiuxskills.com/library/vana
- **Source:** https://www.vana.com
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:26.930Z

---

---
version: alpha
name: Vana
description: An open protocol for portable, user-owned data.
tone: >-
  Technical, authoritative, and mission-driven. The tone is direct and focuses on the utility of an
  open protocol.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F9F9F9"
  on-surface: "#1A1A1A"
  outline: "#E5E5E5"
  secondary: "#666666"
  error: "#D93025"
  success: "#1E8E3E"
  info: "#1A73E8"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.info}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "#0056b3"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDE7E7"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Vana’s design language is defined by a technical, authoritative, and mission-driven aesthetic. It prioritizes clarity and utility, stripping away visual noise to focus on the shift from centralized data harvesting to user-owned data protocols. The overall emotional response is one of trust, transparency, and forward-thinking infrastructure.

## Colors

The color strategy is monochromatic and high-contrast, utilizing a strict black-and-white base to emphasize content clarity, with specific semantic colors used sparingly for navigation and status.

*   Primary (#000000): Deep ink for headlines and primary CTAs.
*   Surface (#FFFFFF): Primary background for the site.
*   Surface-dim (inferred) (#F9F9F9): Used for section backgrounds to create subtle separation.
*   On-surface (inferred) (#1A1A1A): Primary text color for readability on white backgrounds.
*   Outline (inferred) (#E5E5E5): Used for borders and dividers.
*   Secondary (inferred) (#666666): Secondary text for subheadings and descriptive copy.
*   Info (inferred) (#1A73E8): Used for links and interactive elements.
*   On-primary (inferred) (#FFFFFF): Text color for buttons with dark backgrounds.

## Typography

Typography is set in Inter, a clean, highly readable sans-serif font that supports the brand's technical and authoritative tone.

*   Display-lg (inferred): Main hero headlines.
*   Headline-lg (inferred): Section titles.
*   Headline-md (inferred): Sub-section headers.
*   Body-md (inferred): Standard paragraph text.
*   Label-md (inferred): Button labels.

## Layout

The layout relies on a clean, centered grid with generous whitespace to maintain a professional, uncluttered feel. It uses a max-width container to ensure readability on large screens and follows a mobile-first approach, collapsing into a single-column layout on smaller viewports. Section order typically follows: hero, comparison, features, cta-section, footer. The hero pattern is centered, featuring a primary headline, subhead, and two call-to-action buttons.

## Elevation & Depth

Depth is used sparingly, primarily to distinguish interactive cards from the background using subtle, single-layer shadows.

*   Elevation.sm (inferred): Subtle lift for small UI elements.
*   Elevation.md (inferred): Standard card lift.
*   Elevation.lg (inferred): Modal or drawer overlay.

## Shapes

The brand utilizes a subtle rounded corner approach to maintain a modern, approachable feel without appearing overly playful. The `rounded` scale is applied consistently to buttons, cards, and input fields, using `rounded.md` as the standard for interactive components.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
High-contrast, black background with white text. Use for main actions. It uses `{typography.label-md}` and `{colors.primary}`.

### Card
Clean, bordered container using `{colors.outline}` and `{rounded.md}`. Use for grouping related content blocks.

### Input Field
Simple, bordered field with `{rounded.sm}` and `{colors.outline}`. The focus state transitions to `{colors.info}` to indicate active interaction.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for background elements. |
| Apply `{typography.headline-lg}` for main section titles. | Never use `{typography.display-lg}` for body text. |
| Maintain consistent `{spacing.md}` between content blocks. | Avoid using `{typography.body-sm}` for primary content. |
| Use `{colors.outline}` for all subtle dividers. | Do not mix sharp corners with `{rounded.md}` components. |
| Ensure all buttons use `{rounded.md}` for a consistent look. | Avoid excessive use of shadows on flat content. |
| Use `{colors.info}` for all text-based links. | Do not use `{colors.error}` for non-destructive actions. |
| Use `{colors.surface-dim}` for section backgrounds. | Avoid using `{colors.secondary}` for primary headlines. |
| Apply `{elevation.md}` for interactive cards. | Do not use `{elevation.lg}` on non-modal elements. |

## Content Style

CTA style is imperative, clear, and direct. Use verbs like "Get Started" or "Start Building" to guide the user through the protocol's utility.

Heading tone focuses on concrete benefit statements, emphasizing the shift in data ownership and the utility of the protocol.

Copy density should be scannable, utilizing short paragraphs and clear headings to maintain a clean, technical rhythm.

## Imagery & Icons

The site uses a mixed approach, combining clean, flat vector illustrations for conceptual diagrams with high-quality product imagery. Icons should maintain a minimal, technical aesthetic to match the overall brand tone.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Vana, a minimal, technically authoritative open-protocol brand. Match its direct, mission-driven tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent new button styles, card variants, or badge types beyond what the spec lists.
3. Follow the Layout section when arranging pages: centered grid, mobile-first, single-column collapse, and the documented section order (hero → comparison → features → cta-section → footer).
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.primary}` as a background fill or `{elevation.lg}` on a non-modal — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, and typography value.
- Include hover, focus, and disabled states for interactive components when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{spacing.md}` as the default gap between content blocks; use the full `{spacing.xs}`–`{spacing.2xl}` scale for all other paddings and gaps.
- Apply `{rounded.md}` to buttons and cards, `{rounded.sm}` to inputs, matching the Shapes narrative.
- Write CTAs using imperative verbs consistent with the Content Style section (e.g., "Get Started", "Start Building").
- Maintain body text contrast using `{colors.on-surface}` on `{colors.surface}` or `{colors.surface-dim}` backgrounds.

**Must NOT:**
- Invent colors, font sizes, or radii outside the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, decorative flourishes, or marketing filler copy.
- Use `{elevation.lg}` on any element that is not a modal or drawer.
- Rewrite, replace, or invent page copy, headings, labels, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-dim}`; for ambiguous text, default to `{colors.on-surface}`; for ambiguous actions, default to `{colors.primary}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px per the Layout section.
- Inferred tokens are approximations — defer to any authoritative design system file if one exists.