---
version: alpha
name: Evervault
description: Encrypted minimalism — near-black canvas with a precise grotesque sans, monospace for code and technical labels, hairline borders instead of fills, and a restrained lavender accent that marks security and developer surfaces.
colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0a0a0a"
  surface-soft: "#121212"
  surface-raised: "#1a1a1a"
  ink: "#ffffff"
  ink-secondary: "#a1a1a1"
  ink-muted: "#707070"
  ink-faint: "#525252"

  # Accent — lavender/violet security mark
  primary: "#9d8cff"
  primary-bright: "#b3a4ff"
  accent-glow: "#6d5cff"

  # Code / syntax
  code-green: "#7ee787"
  code-blue: "#79c0ff"
  code-purple: "#d2a8ff"
  code-orange: "#ffa657"

  # Borders (opaque, flattened over canvas)
  border: "#1f1f1f"
  border-soft: "#161616"
  border-strong: "#2e2e2e"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#000000"

  # Badge / pill
  badge-bg: "#161616"
  badge-text: "#a1a1a1"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.76px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.18px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.6px
  mono-body:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px

spacing:
  micro: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-raised:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-strong}"

  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.md}"
    padding: 16px 20px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  accent-link:
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
---

# Evervault Design System

## Overview

Evervault sells encryption and payments security to developers, and its website is built to feel like the product: precise, quiet, and engineered. The canvas is pure black (`{colors.background}`) with white (`{colors.ink}`) text, a high-contrast pairing that reads less like fashion-dark and more like a terminal that happens to have excellent typography. Everything decorative has been removed; what remains is structure, hairline borders, and a single restrained accent.

The type system pairs a precise grotesque sans (Inter standing in for the brand's near-identical custom grotesque) with a monospace for code, technical labels, and the developer voice. Headlines use moderate negative tracking (-2.56px at hero) to feel tight and intentional, while body copy relaxes to comfortable reading. The monospace isn't decoration — it marks the seam where marketing meets the actual SDK, and it appears in eyebrow labels, code samples, and inline technical references.

The signature move is restraint with the accent. Evervault's lavender (`{colors.primary}`) appears almost nowhere as a fill — it's reserved for links, focus rings, security marks, and the occasional glow behind an encrypted-payload diagram. Chrome is built from `{colors.surface}` panels separated by `{colors.border}` hairlines, never from saturated color. Depth comes from layering near-black surfaces (`#0a0a0a` → `#121212` → `#1a1a1a`) and from 1px borders, not from heavy shadows.

**Key Characteristics:**
- Pure-black canvas with white ink — terminal-grade contrast, not soft dark mode
- Precise grotesque sans with moderate negative tracking on display sizes
- Monospace for code, eyebrow labels, and the developer voice
- Restrained lavender accent (`{colors.primary}`) used only for links, focus, and security marks — never as decorative fill
- Hairline borders (`{colors.border}`) instead of filled separators
- Layered near-black surfaces for depth rather than shadows
- Syntax-highlight palette (green/blue/purple/orange) confined to code blocks

## Colors

### Canvas & Ink
- **Black** (`{colors.background}`): Page background — pure black, terminal-grade.
- **Surface** (`{colors.surface}`): Cards, code blocks, panels — lifted one step off black.
- **Surface Soft / Raised** (`{colors.surface-soft}`, `{colors.surface-raised}`): Nested and hover surfaces.
- **White** (`{colors.ink}`): Primary text, headings, primary button fill.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions.
- **Ink Muted / Faint** (`{colors.ink-muted}`, `{colors.ink-faint}`): Captions, metadata, disabled.

### Accent
- **Lavender** (`{colors.primary}`): Links, focus rings, security marks. The brand's single signature color.
- **Lavender Bright** (`{colors.primary-bright}`): Hover/active accent state.
- **Accent Glow** (`{colors.accent-glow}`): Atmospheric glow behind hero/diagram visuals.

### Code / Syntax
- **Code Green / Blue / Purple / Orange** (`{colors.code-green}`, `{colors.code-blue}`, `{colors.code-purple}`, `{colors.code-orange}`): Syntax highlighting inside code blocks only.

### Borders
- **Border** (`{colors.border}`): The default hairline separator and card outline.
- **Border Soft** (`{colors.border-soft}`): Faintest dividers.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary buttons, emphasized edges.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `Helvetica Neue, Arial, sans-serif` (stand-in for Evervault's near-identical custom grotesque).
- **Monospace**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px hero headline, tight tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, card group headings |
| `card-title` | Feature card titles |
| `body-large` | Lead paragraphs, feature intros |
| `body` | Standard reading text |
| `body-small` | UI text, secondary copy |
| `button-ui` | Buttons, nav links |
| `caption` | Metadata, fine print |
| `mono-label` | Eyebrow labels, technical tags |
| `mono-body` | Code blocks and inline code |

### Principles
- **Tight but legible headlines**: Negative tracking (-2.56px hero → -0.4px card) gives display type an engineered density without crushing it.
- **Mono as the developer voice**: Monospace marks eyebrow labels, code, and inline SDK references — the seam between marketing and product.
- **Two weights for chrome**: 400 (reading) and 500 (UI/interactive); 600 reserved for headings. No heavy bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px sub-step for tight UI.

### Grid & Container
- Max content width: ~1200px, centered.
- Hero: centered single column with generous top padding and an atmospheric accent glow.
- Feature sections: 2–3 column grids separated by `{colors.border}` hairlines.

### Whitespace Philosophy
- **Negative-space generosity**: Large vertical rhythm (`{spacing.3xl}`–`{spacing.4xl}`) between sections.
- **Separation by hairline, not fill**: Sections and cards are divided by 1px borders, never by background color shifts beyond the near-black surface ladder.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | Black canvas, no border | Page background |
| Hairline | `1px solid {colors.border}` | Cards, dividers, panels |
| Raised | `{colors.surface-soft}` + `1px {colors.border-strong}` | Hover, nested cards |
| Glow | Soft `{colors.accent-glow}` blur behind visuals | Hero and encryption diagrams |
| Focus | `2px {colors.primary}` ring | Keyboard focus on interactive elements |

**Depth Philosophy**: Depth is built from a ladder of near-black surfaces and hairline borders, not from drop shadows. The only luminous element is the lavender accent glow, used sparingly behind security/encryption visuals to suggest a payload being protected.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed |
| `xs` | 4px | Inline code, small chips |
| `sm` | 6px | Compact controls |
| `md` | 8px | Buttons, inputs, code blocks |
| `lg` | 12px | Cards, panels |
| `xl` | 16px | Large feature cards |
| `pill` | 9999px | Badges, status pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — White fill, black text, `{rounded.md}`. The default CTA ("Get Started").
- **`button-secondary`** — `{colors.surface}` fill with `{colors.border-strong}` outline ("Talk to an Expert").

### Pills & Badges
- **`badge`** — `{colors.badge-bg}` with monospace label and hairline border. Used for eyebrow tags and status.

### Cards
- **`card`** — `{colors.surface}` with `{colors.border}` hairline, `{rounded.lg}`.
- **`card-raised`** — `{colors.surface-soft}` with `{colors.border-strong}` for nested/hover state.

### Code
- **`code-block`** — `{colors.surface}` panel, monospace, syntax colors confined here. The product's voice rendered on the page.

### Inputs
- **`input`** — `{colors.surface}` with `{colors.border-strong}`; focus swaps the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Black sticky header, `{colors.ink-secondary}` links, hairline bottom border, white pill CTA on the right.

### Distinctive Components
- **Accent link** (`{components.accent-link}`) — Lavender text for the few links that carry the brand color.
- **Encryption glow visual** — Diagrams with a soft `{colors.accent-glow}` blur suggesting a protected payload.

## Do's and Don'ts

### Do
- Keep the canvas pure black with white ink for terminal-grade contrast.
- Build separation from `{colors.border}` hairlines and the near-black surface ladder.
- Reserve `{colors.primary}` lavender for links, focus, and security marks only.
- Use monospace for eyebrow labels, code, and inline SDK references.
- Confine syntax colors to code blocks.

### Don't
- Don't fill large areas with the lavender accent — it loses its meaning.
- Don't use drop shadows for depth — use surface layering and borders.
- Don't introduce warm or saturated chrome colors outside code blocks.
- Don't use heavy bold (700+) on body text.
- Don't separate sections with background color blocks — hairlines do the work.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tightened padding |
| Tablet | 600–1024px | 2-column grids begin |
| Desktop | 1024–1200px | Full multi-column layout |
| Large | >1200px | Centered, max width with generous margins |

### Collapsing Strategy
- Hero: 64px headline scales down, retains proportional negative tracking.
- Navigation: horizontal links → hamburger menu.
- Feature cards: 3-column → 2-column → single column.
- Code blocks: maintain monospace, may horizontally scroll.

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: White `{colors.ink}` fill, black text
- Background: Black `{colors.background}`
- Heading text: White `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: `1px solid {colors.border}`
- Accent / link: Lavender `{colors.primary}`
- Focus ring: Lavender `{colors.primary}`

### Example Component Prompts
- "Create a hero on black. Headline 64px Inter weight 600, line-height 1.05, letter-spacing -2.56px, white. Subtitle 18px weight 400, `{colors.ink-secondary}`. White pill-radius-md CTA plus a `{colors.surface}` outline button with `{colors.border-strong}`."
- "Design a card: `{colors.surface}` background, `1px solid {colors.border}`, 12px radius, 24px padding. Title 20px Inter weight 500, white. Body 16px weight 400, `{colors.ink-secondary}`."
- "Build a code block: `{colors.surface}` panel, JetBrains Mono 14px, `{colors.border}` hairline, syntax colors green/blue/purple from the code palette."
- "Add an eyebrow label in JetBrains Mono 12px weight 500, `{colors.ink-secondary}`, slight positive tracking."

### Iteration Guide
1. Black canvas, white ink — never soften to gray-dark.
2. Hairline borders carry all separation; reach for `{colors.border}` first.
3. Lavender accent is rare and meaningful — links, focus, security marks only.
4. Monospace is the developer voice; syntax color stays inside code blocks.
5. Depth = surface ladder (`#0a0a0a`→`#121212`→`#1a1a1a`) + borders, not shadows.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Evervault. Brand names and trademarks belong to their respective owners.