DESIGN.md · measured October 21, 2026

Proton design system

Light interface measured from proton.me: ProtonSerif type with ProtonSans, indigo accents, flat surfaces and pill-shaped controls.

Background: #FFFFFF
Primary: #6D4AFF
Type: ProtonSerif
Corners: Pill

Download DESIGN.md

From proton.me ↗ · 376 elements at 1440×900 and 390×844 · Independent analysis, not affiliated with Proton

Proton colors

9 roles measured on the page, grouped by where each color is used.

Surfaces

White#FFFFFFbackground · --tw-ring-offset-colorPage background · 2×

Blue 10%#9CA3AF1AoverlayTranslucent fill for cards and controls · 2×

Text

Dark Blue#4B5563on-surfacePrimary text and headings · 53×

Cool Gray#A6ACB7on-surface-variantSecondary text · 2×

White#FFFFFFon-primaryText and icons on primary

Accents

Indigo#6D4AFFprimaryPrimary buttons and calls to action · 71×

Dark Indigo#372580secondaryLinks and interactive text · 33×

Borders

Cool Silver 60%#D1D5DB99outlineBorders and dividers · 3×

Light Indigo#C5B7FFoutline-variantSecondary dividers · 3×

Proton fonts

2 families.

AaProtonSerifWeights 400ProtonSerif, ProtonSerifFallback, ProtonScript, ui-serif

AaProtonSansWeights 400, 600ProtonSans, ProtonSansFallback, ProtonScript, ui-sans-serif

headline-displayPage title (h1)Proton60px · 400 · 1.06 · -0.04em
mobile 36px

headline-lgSection headings (h2)The quick brown fox jumps over the lazy dog48px · 400 · 1.13 · -0.04em

headline-mdSub-section headingsThe quick brown fox jumps over the lazy dog36px · 400 · 1.16 · -0.04em
mobile 24px

headline-smCard and feature titlesThe quick brown fox jumps over the lazy dog30px · 400 · 1.13 · -0.04em

title-lgSmall titlesThe quick brown fox jumps over the lazy dog20px · 600 · 1.5

body-mdBody textThe quick brown fox jumps over the lazy dog16px · 400 · 1.5

body-lgLead paragraphsThe quick brown fox jumps over the lazy dog18px · 400 · 1.55

body-smSecondary and small textThe quick brown fox jumps over the lazy dog14px · 400 · 1.57

captionCaptions and fine printThe quick brown fox jumps over the lazy dog12px · 400 · 1.5

label-mdButtons, navigation and labelsThe quick brown fox jumps over the lazy dog16px · 600 · 1.63

label-smSmall labels and badgesThe quick brown fox jumps over the lazy dog14px · 600 · 1.57

Contrast

Text on #FFFFFF

AaAAA7.6:1

AaLarge only2.3:1

Spacing

No strict grid · 85% are multiples of 4px

xs4px

sm6px

md16px

lg20px

xl48px

gutter8px

section48px

margin64px

container1920px

Shapes

Corner radii, most used first.

full9999px · 160×

Depth

Ring

Inset

Ring

Components

Rebuilt from the measured CSS.

Create a free account

button-primaryFilled button · hover to see the measured hover state

Personal

button-ghostText button

Inline link

linkInline link

Motion

Interface transitions

0.15s0.3s

cubic-bezier(0.4, 0, 0.2, 1)

Do’s and don’ts

Rules written from the measurements, so a coding agent stays on style.

Use #FFFFFF for the page.
Keep text in 2 levels: #4B5563, #A6ACB7.
Reserve #6D4AFF for primary actions and key highlights.
Set headlines in ProtonSerif with tight tracking (-0.04em).
Reuse the measured spacing steps (6px, 16px, 20px).
Make buttons and chips fully rounded (9999px).
Use #A6ACB7 for body text; it reaches 2.3:1 on #FFFFFF. Keep it for large text or metadata.
Add drop shadows for depth; use hairline rings and borders and contrast.
Introduce new font families beyond ProtonSerif and ProtonSans.
Use #6D4AFF for large backgrounds or body text.
Make interface transitions slower than 0.3s.

DESIGN.md215 lines

---
version: alpha
name: Proton
description: "Light interface measured from proton.me: ProtonSerif type with ProtonSans, indigo accents, flat surfaces and pill-shaped controls."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#4B5563"
  on-background: "#4B5563"
  on-surface-variant: "#A6ACB7"
  overlay: "#9CA3AF1A"
  outline: "#D1D5DB99"
  outline-variant: "#C5B7FF"
  primary: "#6D4AFF"
  on-primary: "#FFFFFF"
  secondary: "#372580"
typography:
  headline-display:
    fontFamily: ProtonSerif
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: ProtonSerif
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.04em
  headline-md:
    fontFamily: ProtonSerif
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -0.04em
  headline-sm:
    fontFamily: ProtonSerif
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.13
    letterSpacing: -0.04em
  title-lg:
    fontFamily: ProtonSans
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
  body-md:
    fontFamily: ProtonSans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
  body-lg:
    fontFamily: ProtonSans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: ProtonSans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
  caption:
    fontFamily: ProtonSans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: ProtonSans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.63
  label-sm:
    fontFamily: ProtonSans
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.57
  headline-display-mobile:
    fontFamily: ProtonSerif
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.11
    letterSpacing: -0.04em
  headline-md-mobile:
    fontFamily: ProtonSerif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.16
    letterSpacing: -0.04em
rounded:
  full: 9999px
spacing:
  xs: 4px
  sm: 6px
  md: 16px
  lg: 20px
  xl: 48px
  gutter: 8px
  section: 48px
  margin: 64px
  container: 1920px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 12px
    height: 30px
  button-primary-hover:
    backgroundColor: "#4A2DC5"
  button-ghost:
    textColor: "{colors.secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 6px 16px
  link:
    textColor: "{colors.secondary}"
---

# Proton Design System

## Overview

Proton describes itself as: “Over 100 million people use Proton to stay private and secure online. Get a free Proton account and take back your privacy.” The interface is light, built on **White (#FFFFFF)** with **Dark Blue (#4B5563)** text, and **Indigo (#6D4AFF)** as the main accent.

Type is set in **ProtonSerif** and **ProtonSans**. Headlines run large with tight negative tracking; body text is 16px. Depth comes from hairline borders and inset highlights rather than drop shadows. Controls are pill-shaped.

Measured from [proton.me](https://proton.me/) on October 21, 2026 at 1440×900 and 390×844 from 376 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 9 roles.

- **White (#FFFFFF):** Page background, seen 2 times. Token `background`, CSS `--tw-ring-offset-color`.
- **Dark Blue (#4B5563):** Primary text and headings, seen 53 times. Token `on-surface`.
- **Cool Gray (#A6ACB7):** Secondary text, seen 2 times. Token `on-surface-variant`.
- **Blue 10% (#9CA3AF1A):** Translucent fill for cards and controls, seen 2 times. Token `overlay`.
- **Cool Silver 60% (#D1D5DB99):** Borders and dividers, seen 3 times. Token `outline`.
- **Light Indigo (#C5B7FF):** Secondary dividers, seen 3 times. Token `outline-variant`.
- **Indigo (#6D4AFF):** Primary buttons and calls to action, seen 71 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Dark Indigo (#372580):** Links and interactive text, seen 33 times. Token `secondary`.

## Typography

**ProtonSerif** and **ProtonSans** share the interface. Fallback stack: `ProtonSerif, ProtonSerifFallback, ProtonScript, ui-serif`. Other loaded fonts: ProtonSansFallback, ProtonSerifFallback.

- **headline-display:** ProtonSerif 60px at weight 400, line height 1.06, tracking -0.04em (36px on mobile). Page title (h1).
- **headline-lg:** ProtonSerif 48px at weight 400, line height 1.13, tracking -0.04em. Section headings (h2).
- **headline-md:** ProtonSerif 36px at weight 400, line height 1.16, tracking -0.04em (24px on mobile). Sub-section headings.
- **headline-sm:** ProtonSerif 30px at weight 400, line height 1.13, tracking -0.04em. Card and feature titles.
- **title-lg:** ProtonSans 20px at weight 600, line height 1.5. Small titles.
- **body-md:** ProtonSans 16px at weight 400, line height 1.5. Body text.
- **body-lg:** ProtonSans 18px at weight 400, line height 1.55. Lead paragraphs.
- **body-sm:** ProtonSans 14px at weight 400, line height 1.57. Secondary and small text.
- **caption:** ProtonSans 12px at weight 400, line height 1.5. Captions and fine print.
- **label-md:** ProtonSans 16px at weight 600, line height 1.63. Buttons, navigation and labels.
- **label-sm:** ProtonSans 14px at weight 600, line height 1.57. Small labels and badges.

## Layout

Spacing is mostly on a 4px grid (85% of measured values), with some off-grid steps. Match the measured scale rather than rounding everything.

- **Scale:** xs 4px, sm 6px, md 16px, lg 20px, xl 48px.
- **Sections:** 48px vertical padding between major sections.
- **Gaps:** 8px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1920px.
- **Page margin:** 64px on each side of full-width sections.

## Elevation & Depth

The design avoids drop shadows. Layers are separated by tonal surface steps and hairline rings:

- `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(109, 74, 255) 0px 0px 0px 2px inset`
- `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 2px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 160 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-primary (“Create a free account”):** #6D4AFF fill, #FFFFFF text, 14px/600, 9999px radius, padding 4px 12px.
- **button-primary-hover:** background #4A2DC5, text #FFFFFF on hover.
- **button-ghost (“Personal”):** transparent fill, #372580 text, 14px/600, 9999px radius, padding 6px 16px, shadow `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`.
- **link:** transparent fill, #372580 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 2 levels: #4B5563, #A6ACB7.
- Do reserve #6D4AFF for primary actions and key highlights.
- Do set headlines in ProtonSerif with tight tracking (-0.04em).
- Do reuse the measured spacing steps (6px, 16px, 20px).
- Do make buttons and chips fully rounded (9999px).
- Don't use #A6ACB7 for body text; it reaches 2.3:1 on #FFFFFF. Keep it for large text or metadata.
- Don't add drop shadows for depth; use hairline rings and borders and contrast.
- Don't introduce new font families beyond ProtonSerif and ProtonSans.
- Don't use #6D4AFF for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.15s, 0.3s.

- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/proton.me/), the free DESIGN.md generator.

What you can build with it

Landing pages, pricing tables, dashboards: your AI coding agent builds them in this style, with these colors, fonts, spacing and buttons instead of its defaults.

Download DESIGN.md, put it in your project’s root folder, then ask your agent for a page.

Prompt · DESIGN.md attached

Build a landing page for my product. Follow for every color, font, spacing value, corner and button.

Guides

Need more than one page?

Design MD in the Sitepeel tools for Chrome measures pages behind a login, combines several pages into one file and works on any site you open.

Explore the tool

More designs

See all →

GrammarlyBrand grammarly.com · matter

HootsuiteBrand hootsuite.com · Montserrat

SmartSkill smartskill.shop · IRANYekanX

Just Falafel jfvegancafe.com · Bodoni Moda

Greenpaktourism greenpaktourism.com/destinations · Poppins

Pusho pusho.fun · Yatra One

FAQ

Questions

What can I build with the Proton DESIGN.md?

Any page or component in this style: a landing page, pricing table, dashboard or sign-up form. Your AI coding agent uses the measured colors, ProtonSerif type, spacing, corners and buttons instead of its own defaults.

How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

Is this Proton’s official design system?

No. Sitepeel measured it from proton.me’s public page on October 21, 2026. It is an independent analysis, not made or approved by Proton.

Can I use Proton’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Proton’s logo, name, pictures or text.

How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.