---
version: alpha
name: Proton
description: Privacy-first productivity suite — off-white canvas, ProtonSerif display type at aggressive negative tracking, signature electric violet accent, and gentle purple-tinted gradients that communicate trust without severity.

colors:
  # Canvas and surfaces
  background: "#ffffff"
  surface: "#f6f7f9"  # near-white section background
  surface-tinted: "#e2dbff"  # was rgb(226,219,255) — purple wash for gradient endpoint
  surface-gradient-start: "#f6f7f9"  # was rgb(246,247,249)
  surface-gradient-purple: "#c5b7ff"  # was rgb(197,183,255) — warm purple tint

  # Ink (text scale)
  ink: "#1a1a2e"  # near-black with deep violet undertone
  ink-secondary: "#4b5563"  # was rgb(75,85,99) — warm gray
  ink-tertiary: "#9ca3af"  # was rgba(156,163,175,0.9) — muted neutral
  ink-brand: "#372580"  # was rgb(55,37,128) — deep violet for links/nav

  # Brand accent
  primary: "#6d4aff"  # Proton violet — signature electric purple
  primary-hover: "#8359ff"  # was rgb(131,89,255)
  primary-container: "#e2dbff"  # soft tinted surface for badges
  on-primary: "#ffffff"

  # Semantic
  success: "#1ea672"
  warning: "#d97706"
  error: "#dc2626"

  # Borders and dividers
  border: "#e5e7eb"  # was rgb(229,231,235) — cool light gray
  border-subtle: "#d1d5db"  # was rgba(209,213,219,0.6) — flattened over white
  border-accent: "#c5b7ff"  # was rgb(197,183,255) — purple accent divider

  # Shadow tints
  shadow-soft: "#e8e3ff"  # was rgba(74,45,197,0.1) on white — brand-tinted card shadow

  # Focus
  focus-ring: "#6d4aff"

typography:
  display-hero:
    fontFamily: "ABCArizonaFlare Variable, ProtonSerif, ProtonSerifFallback, ui-serif, Georgia, Times New Roman, serif"
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -2.04px
  display:
    fontFamily: "ABCArizonaFlare Variable, ProtonSerif, ProtonSerifFallback, ui-serif, Georgia, Times New Roman, serif"
    fontSize: 54px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -1.62px
  heading-section:
    fontFamily: "ABCArizonaFlare Variable, ProtonSerif, ProtonSerifFallback, ui-serif, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -1.22px
  heading-sub:
    fontFamily: "ABCArizonaFlare Variable, ProtonSerif, ProtonSerifFallback, ui-serif, Georgia, Times New Roman, serif"
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -1.01px
  heading-card:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 23px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-strong:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.57
    letterSpacing: 0px
  caption:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0px
  label:
    fontFamily: "Inter Variable, ProtonSans, ProtonSansFallback, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.57
    letterSpacing: 0px

spacing:
  xs: 5px
  sm: 9px
  md: 18px
  lg: 27px
  xl: 36px
  2xl: 54px
  3xl: 72px
  4xl: 108px

rounded:
  sm: 2px
  md: 7px
  lg: 9px
  xl: 14px
  2xl: 27px
  pill: 9999px

components:
  # Primary violet CTA — pill-shaped, brand fill
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 5px 14px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Secondary / ghost — transparent with border
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 18px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Nav button — muted pill
  button-ghost:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-tertiary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.pill}"
    padding: 5px 14px
  button-ghost-hover:
    backgroundColor: "{colors.border}"
    textColor: "{colors.ink}"

  # Standard content card
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 27px
    border: "1px solid {colors.border}"
  card-featured:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 36px

  # Product badge / tag
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink-brand}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 18px 27px
    border: "0px 0px 1px 0px solid {colors.border}"

  # Form input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 9px 14px
    border: "1px solid {colors.border}"
  input-focus:
    border: "1px solid {colors.primary}"
    boxShadow: "0 0 0 2px {colors.primary}"

  # Gradient hero section background
  hero-surface:
    backgroundColor: "{colors.surface-gradient-start}"
    backgroundGradient: "linear-gradient(to right top, {colors.surface-gradient-start} 40%, {colors.surface-tinted} 100%)"
    rounded: "{rounded.2xl}"
---

# Proton Design System

## Overview

Proton's visual language is built around a single, confident proposition: privacy is not a compromise. The design system translates this into form through an unusual typographic pairing — flowing serif display type (ABCArizonaFlare Variable, with ProtonSerif as a fallback) set against a clean ProtonSans / Inter Variable sans-serif for all UI chrome. The result reads like a manifesto printed on quality paper rather than a software product's landing page. Headlines use tight negative tracking (-2px at 68px), compressing letterforms into a cohesive mass that projects authority without aggression.

The canvas is pure white (`{colors.background}`) with off-white section surfaces (`{colors.surface}`) that shift to gentle purple-tinted gradients on feature moments. These gradients — moving from `{colors.surface-gradient-start}` to `{colors.surface-tinted}` — are the signature atmospheric device of the system. They reference the brand's `{colors.primary}` violet without directly repeating it, creating a spatial depth that's more atmospheric than structural. The branded violet (`{colors.primary}`) itself is reserved almost exclusively for primary CTAs and focus indicators, giving it enough scarcity to retain its visual weight.

Component shapes are fully rounded — every interactive element is either a pill (`{rounded.pill}`) or a large-radius card (`{rounded.2xl}`). There are no sharp corners in the UI. This softness contradicts the conventional "security software" aesthetic of hard geometric precision, signaling that Proton considers usability and warmth to be features, not liabilities. Motion is quick and purposeful: `0.15s` transitions on all interactive states with a `cubic-bezier(0.4, 0, 0.2, 1)` curve — Material's standard easing — keeping feedback instant without feeling mechanical.

**Key Characteristics:**
- ABCArizonaFlare Variable (self-hosted) for all display/serif type — approachable editorial tone vs. sterile sans
- ProtonSans / Inter Variable for UI chrome — clean, neutral, highly legible at small sizes
- Aggressive negative letter-spacing on display: -2.04px at 68px, -1.62px at 54px
- Electric violet `{colors.primary}` appears only on primary CTAs and focus rings — never decoratively
- Atmospheric purple gradient from `{colors.surface-gradient-start}` to `{colors.surface-tinted}` on hero and feature sections
- All interactive surfaces are pill-shaped (`{rounded.pill}`) — buttons, badges, nav items, tabs
- Content cards use `{rounded.2xl}` (27px) — generous and approachable, never sharp
- 9px base spacing unit (Tailwind's 1.5 step) — finer grain than standard 8px grids
- Brand-tinted shadow: `rgba(74,45,197,0.1)` dropshadow on cards reads violet, not generic gray
- Heroicons SVG icon system — consistent stroke-weight with the sans-serif body
- `0.15s` transitions everywhere; only loading animations extend to `6s` (progress bar)

## Colors

### Primary Canvas
- **Pure White** (`{colors.background}`): Page background, card faces, button surfaces. The default resting state of every surface.
- **Off-White** (`{colors.surface}`): Section alternation background, input fill, secondary surface.
- **Purple Tint** (`{colors.surface-tinted}`): Gradient endpoint for hero and feature hero sections — the signature atmospheric wash.

### Brand Accent
- **Proton Violet** (`{colors.primary}`): The system's single saturated accent color. Applied exclusively to primary CTAs, focus rings, and link text. Hovering shifts to `{colors.primary-hover}` — a brighter, lighter violet.
- **Ink Brand** (`{colors.ink-brand}`): Deep violet for nav-level link text and badge labels — connects to `{colors.primary}` without competing with it.
- **Primary Container** (`{colors.primary-container}`): Tinted surface for badges, highlighted cards, and select feature sections. Derived from `{colors.primary}` at ~15% opacity over white.

### Text / Ink
- **Deep Violet-Black** (`{colors.ink}`): Primary headline and body text — not pure black, carries a subtle violet undertone that harmonizes with the brand palette.
- **Warm Gray** (`{colors.ink-secondary}`): Secondary text, descriptions, support copy.
- **Muted Neutral** (`{colors.ink-tertiary}`): Placeholder text, inactive UI labels, previous/next navigation.

### Borders and Dividers
- **Whisper Border** (`{colors.border}`): Standard 1px divider on cards, inputs, and section breaks.
- **Subtle Border** (`{colors.border-subtle}`): Lighter border at 60% opacity over white, for nested or de-emphasized divisions.
- **Accent Divider** (`{colors.border-accent}`): Purple-tinted divider used alongside feature navigation list items.

### Semantic States
- **Success** (`{colors.success}`): Confirmation, completed states.
- **Warning** (`{colors.warning}`): Caution states, non-critical alerts.
- **Error** (`{colors.error}`): Destructive actions, critical validation.

### Shadows and Elevation
- **Brand Shadow** (`{colors.shadow-soft}`): Card drop-shadow — a brand-tinted approximation of the raw `rgba(74,45,197,0.1)` shadow. Gives elevation a violet register rather than the standard cool gray.

## Typography

### Font Families
- **Display / Serif**: `ABCArizonaFlare Variable`, with ProtonSerif + ui-serif + Georgia as progressive fallbacks. A variable flare-serif with optical character at large sizes — warm, literary, editorial.
- **UI / Sans**: `Inter Variable`, with ProtonSans + ui-sans-serif + system-ui. The workhorse for all nav, body, button, and label text.
- **OpenType**: No explicit OpenType feature activation detected. The variable fonts handle optical sizing automatically.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Hero headings, billboard statements |
| `display` | Section-level feature headings |
| `heading-section` | Mid-page section titles |
| `heading-sub` | Tertiary section headers, feature sub-blocks |
| `heading-card` | Card titles, feature names (switched to sans at this size) |
| `body-large` | Hero subheadlines, introductory copy |
| `body` | Standard reading copy, feature descriptions |
| `body-strong` | Emphasized body facts, bold callouts |
| `nav-link` | Navigation items, utility links |
| `button-ui` | Button labels, action text |
| `caption` | Metadata, fine print, secondary labels |
| `label` | Form labels, badge text, semi-bold captions |

### Principles
- Serif for headings, sans for everything below `{typography.heading-sub}` — the crossover is intentional and creates clear visual hierarchy
- Display tracking is always negative and always substantial — loose tracking at large size would break the editorial authority
- Body text has zero letter-spacing, letting Inter's optical spacing handle readability
- Font weights are binary for UI: 400 for reading, 600 for actions — no 500 intermediary

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 9px (Tailwind's `1.5` step — a 1.5× multiplier of the standard 6px base).

Proton's spacing reads generous at page level, with `{spacing.2xl}` (54px) as the standard section padding and `{spacing.4xl}` (108px) for hero vertical breathing room. The 9px base creates fractional intermediate steps that don't map to standard 8px grids — a consequence of Tailwind's arbitrary-value usage rather than a deliberate custom system.

### Grid and Container
- Max content width: ~1280px (Tailwind's `max-w-7xl` breakpoint in use)
- Column structure: flexible, feature sections alternate between single-column centered and asymmetric 2-column layouts
- Product icon grid: auto-fit 5-per-row at desktop, wrapping to 2 columns on mobile

### Whitespace Philosophy
- Page-level sections are given very generous vertical padding — content never feels compressed
- Cards maintain consistent internal padding at `{spacing.lg}` (27px) rather than shrinking on smaller variants
- Navigation whitespace is tight — items have `{spacing.sm}` (9px) internal padding to stay compact

## Elevation and Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default surface, sections |
| Subtle (Level 1) | `0 1px 0 {colors.border}` | Dividers, horizontal rules |
| Card (Level 2) | `0 4.5px 9px 0 {colors.shadow-soft}, 0 0 0 1px {colors.border}` | Product cards, pricing cards |
| Focus Ring | `0 0 0 2px {colors.primary} inset` | Focused inputs and buttons |

**Shadow Philosophy**: Proton's shadow system is deliberately brand-tinted rather than generic gray. The card shadow at Level 2 combines a violet-wash drop shadow (derived from `{colors.primary}` at low opacity) with a subtle 1px border, creating elevation that reads as belonging to the brand rather than the operating system. Flat sections and navigation use no shadow at all — depth is created through color contrast between `{colors.background}` and `{colors.surface}` surfaces, not shadow stacking.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `sm` | 2px | Minimal visual artifacts, progress indicators |
| `md` | 7px | Small chips, inline code blocks |
| `lg` | 9px | Inputs, small interactive widgets |
| `xl` | 14px | Medium panels, inline feature items |
| `2xl` | 27px | Content cards, tabbed panels, large containers |
| `pill` | 9999px | All buttons, badges, nav tabs, toggle chips |

The shape system is functionally binary: interactive elements are always pill (`{rounded.pill}`), containers are always large-radius (`{rounded.2xl}`). There is no use of sharp corners anywhere in the interface. This consistent softness is a deliberate identity marker — other privacy tools lean into hard geometry; Proton uses rounding as a humanizing signal.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing values from scratch.

### Button Variants

- **`button-primary`** — Filled violet pill, white text. The only fully-saturated element on most pages. Used for CTAs like "Create a free account." Hover brightens to `{colors.primary-hover}`.
- **`button-secondary`** — White-fill pill with `{colors.border}` outline, dark text. Used alongside primary for secondary actions like "Compare plans."
- **`button-ghost`** — Muted surface fill with `{colors.ink-tertiary}` text. Navigation carousel controls and de-emphasized utility buttons.

### Cards

- **`card`** — White face, `{rounded.2xl}` radius, single `{colors.border}` border. Standard container for product feature blocks.
- **`card-featured`** — `{colors.primary-container}` fill. Used for highlighted product tiles and premium feature callouts.

### Navigation

The top nav is a white bar with no drop-shadow at rest. Navigation link text uses `{colors.ink-brand}` (deep violet) rather than `{colors.ink}`, creating a subtle brand-connection without full saturation. The "Create a free account" CTA in the nav is a `{components.button-primary}` at compact padding.

### Badges

Product category badges use `{components.badge}` — soft purple fill, deep violet text, pill-shaped. They appear beneath product icon grids to label service categories (Mail, VPN, Drive, etc.).

### Inputs

Form inputs are `{rounded.lg}` (not pill — intentional distinction from buttons), with a standard `{colors.border}` ring that upgrades to `{colors.primary}` with a 2px inset box-shadow on focus.

## Do's and Don'ts

### Do
- Use `{colors.primary}` only for primary CTAs, focus indicators, and essential link text — its visual scarcity is the source of its power
- Pair ABCArizonaFlare serif display type with Inter Variable sans UI — the contrast between the two families is the system's defining typographic move
- Apply negative letter-spacing to all serif headings: -2px at 68px, scaling proportionally down to -1px at 34px
- Use `{rounded.pill}` for every interactive element — buttons, badges, nav tabs, toggles — consistency is the rule
- Use `{rounded.2xl}` for all content containers — product cards, feature panels, pricing tables
- Apply the purple gradient (`{colors.surface-gradient-start}` → `{colors.surface-tinted}`) on hero and feature-hero sections only; use flat `{colors.surface}` for standard alternating sections
- Use brand-tinted shadows (`{colors.shadow-soft}`) for card elevation — the violet undertone is intentional, not replaceable with gray
- Reserve the serif font for sizes 34px and above — below `{typography.heading-sub}`, always use Inter Variable

### Don't
- Don't use `{colors.primary}` for decorative highlights, section backgrounds, or non-interactive text — it must remain a CTA signal
- Don't mix rounded and sharp corner treatments — there are no sharp corners in the Proton system
- Don't use mid-range border radii (4px–13px) for buttons or badges — the system is pill or large-radius, never ambiguous
- Don't flatten the gradient to a solid `{colors.primary-container}` fill on hero sections — the direction and transition are atmospheric signals
- Don't apply the serif display font (`{typography.display-hero}`) at UI-sized type (below 34px) — it loses its optical quality at small sizes
- Don't use pure black (#000000) for text — `{colors.ink}` carries the subtle violet undertone that keeps the palette coherent
- Don't add additional accent colors beyond the violet family — Proton's restraint is deliberate; one brand color family, no exceptions

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single-column layout; stacked hero; product grid wraps to 2-per-row |
| Tablet | 768px–1280px | 2-column feature sections; reduced hero font size |
| Desktop | 1280px+ | Full 5-per-row product grid; split hero layout |
| Wide | >1401px | Container max-width kicks in; layout stays centered within 1280px |

### Touch Targets
- All interactive elements are pill-shaped at minimum 36px height, meeting touch target guidelines
- Navigation collapses to a hamburger at mobile breakpoints

### Collapsing Strategy
- Hero display text scales from 68px to approximately 36px at mobile, maintaining the negative letter-spacing ratio
- Product feature grid collapses from 5-column to 2-column on mobile
- Navigation becomes a full-screen overlay drawer on mobile
- Section padding reduces from `{spacing.4xl}` to `{spacing.2xl}` on mobile

### Image Behavior
- Product screenshots and feature illustrations use fluid widths within their containers
- Hero illustration fades gracefully — the gradient background remains even when the illustration is hidden on small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}`
- Border: `{colors.border}`
- CTA text: `{colors.on-primary}`
- Link / nav text: `{colors.ink-brand}`

### Example Component Prompts

- "Build a Proton hero section with background `{colors.background}`, a linear gradient overlay from `{colors.surface-gradient-start}` at 40% to `{colors.surface-tinted}`, heading in `{typography.display-hero}` using the ABCArizonaFlare Variable serif with letter-spacing -2.04px, a subhead in `{typography.body-large}`, and two pill-shaped CTAs: a filled `{colors.primary}` primary button and a white `{colors.background}` secondary button with a 1px `{colors.border}` border."
- "Create a Proton product card with `{colors.background}` fill, `{rounded.2xl}` border-radius, a 1px `{colors.border}` border, a `0 4.5px 9px 0 {colors.shadow-soft}` card shadow, a product icon at top, title in `{typography.heading-card}`, and description in `{typography.body}` with `{colors.ink-secondary}` text."
- "Generate a Proton navigation bar: white `{colors.background}` fill, wordmark at left, nav links using `{typography.nav-link}` in `{colors.ink-brand}`, and a pill `{components.button-primary}` CTA labeled 'Create a free account' at right. No drop-shadow at rest."
- "Design a Proton badge for a product category label: `{colors.primary-container}` background, `{colors.ink-brand}` text in `{typography.label}`, `{rounded.pill}` border-radius, 4px 10px padding."
- "Build a Proton pricing card: `{colors.background}` background with `{rounded.2xl}`, plan name in `{typography.heading-card}`, price in `{typography.display}` serif with `{colors.ink}`, feature list in `{typography.body}`, a `{components.button-primary}` CTA at bottom. For the highlighted plan, swap background to `{colors.primary-container}`."
- "Create a Proton form with email input: `{rounded.lg}` corners, 1px `{colors.border}` ring at rest, 1px `{colors.primary}` ring with 2px inset box-shadow on focus, placeholder text in `{colors.ink-tertiary}`, label in `{typography.label}` above."

### Iteration Guide

1. Start with `{colors.background}` (white) as the base canvas — introduce `{colors.surface}` for alternating sections and the purple gradient only on the hero
2. Lock `{colors.primary}` to CTAs only — every other interactive element uses `{colors.ink-brand}` or `{colors.ink-secondary}` for text-level signaling
3. Apply serif `{typography.display-hero}` for all headings 34px and above; switch to Inter Variable sans for everything below
4. Maintain negative letter-spacing on all serif tokens — the exact values in the token block are non-negotiable for the editorial feel
5. Build elevation through border + brand-tinted shadow combinations rather than luminance stacking
6. Keep all interactive shapes at `{rounded.pill}` and all containers at `{rounded.2xl}` — no corner radius mixing
7. Use `0.15s cubic-bezier(0.4, 0, 0.2, 1)` for all hover/focus transitions; color-shift from `{colors.ink-brand}` to `{colors.primary}` on nav links

---

## 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 Proton. Brand names and trademarks belong to their respective owners.