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

# ExpressVPN · Design System

> Calm editorial clarity for digital privacy

**Theme:** light · **Industry:** saas · **Source:** https://www.expressvpn.com/ · **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._

ExpressVPN pairs editorial serif headlines with a spacious white canvas, deep ink text, and restrained green calls to action. Product UI, explanatory illustrations, trust marks, and benefit cards turn a long educational homepage into a clear, approachable journey.

## North star

Keep the page calm and spacious: lead with editorial serif headlines, explain in compact sans-serif content, and reserve green for decisive actions.

## Overview

The page uses white as its continuous canvas, letting dark navy text and occasional pale section bands provide structure without making the long scroll feel segmented. A large FS Kim serif headline gives the campaign hero an editorial voice; Inter carries navigation, body copy, labels, and most headings in a practical, readable hierarchy. Emerald green is reserved for primary conversion moments and inline links, while navy gradients distinguish the business offer and certain promotional areas. Content alternates centered introductions, narrow explanatory copy, image-and-text splits, and three-column benefit or review cards. Generous whitespace separates these blocks, and soft card shadows give selected content a light physical presence. Product interface imagery and flat explanatory illustrations make abstract privacy concepts tangible; colorful mockup details remain supporting content rather than core brand colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and the white text or icon color on dark promotional bands and green CTAs. |
| Deep Ink | `#001d2f` | `--color-deep-ink` | brand | Main headline, paragraph, navigation, and card text color across the page. |
| Signal Green | `#0f866c` | `--color-signal-green` | accent | Primary deal button, outlined Get Started action, key links, and selective emphasis in the hero. |
| Soft Fog | `#f5f5f5` | `--color-soft-fog` | surface | Subtle section and card surface, including the measured pale horizontal band. |
| Quiet Alloy | `#ccd2d5` | `--color-quiet-alloy` | neutral | Fine borders and understated separators around media and interface details. |
| Muted Graphite | `#adadad` | `--color-muted-graphite` | neutral | Subtle card outlines, including the measured connection-status interface cards. |
| Mist Tint | `#dae8e7` | `--color-mist-tint` | surface | Lower stop in a white-to-pale-teal section gradient, most visible behind the hero product mockup. |
| Ocean Slate | `#0c3956` | `--color-ocean-slate` | brand | Deep blue gradient stop for the dark Teams promotional panel and select campaign treatments. |
| Night Tide | `#001827` | `--color-night-tide` | brand | Near-black blue gradient stop that deepens dark promotional section backgrounds. |
| Slate Caption | `#667782` | `--color-slate-caption` | neutral | Muted supporting text and secondary annotations where hierarchy calls for less emphasis. |
| Illustration Sage | `#b7d1d0` | `--color-illustration-sage` | semantic | Soft background color appearing in testimonial card treatment and supporting artwork, not a dominant interface color. |
| Illustration Peach | `#ffe4d4` | `--color-illustration-peach` | semantic | Warm testimonial card and illustration detail; use as artwork support rather than a core brand surface. |
| Illustration Cream | `#f0eacf` | `--color-illustration-cream` | semantic | Pale decorative or navigation detail in measured content; not a primary page background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f5` (Soft Fog) · `--color-text` → `#001d2f` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ccd2d5` (Quiet Alloy) · `--color-accent` → `#0f866c` (Signal Green) · `--color-accent-2` → `#0c3956` (Ocean Slate) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#001d2f` | `#ffffff` | 17.26:1 | AAA |
| `#001d2f` | `#f5f5f5` | 15.83:1 | AAA |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#0f866c` | `#ffffff` | 4.52:1 | AA |
| `#0f866c` | `#f5f5f5` | 4.15:1 | AA-large |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 0%, rgb(218, 232, 231) 100%)`
- `linear-gradient(261deg, rgb(12, 57, 86) 21.96%, rgb(0, 24, 39) 82.57%)`
- `linear-gradient(270deg, rgb(0, 29, 47) 0px, rgb(0, 92, 149) 100%)`
- `radial-gradient(circle, rgb(218, 57, 64) 0px, rgb(176, 39, 45) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 700, 500, 600 | Navigation, body copy, most section headings, buttons, links, captions, and uppercase eyebrows. | Inter |
| FS Kim | `--font-display` | webfont | 500, 400 | Display and hero or section H1 headlines, adding a distinctive editorial serif voice. | DM Serif Display |
| Arial | `--font-arial` | system | 700, 400, 500 | Measured secondary CTA button typography. | Arial |

- **Inter:** Use a clean sans-serif with measured weights from regular to bold; eyebrows are uppercase with expanded tracking.
- **FS Kim:** Use medium-weight serif display lettering; headlines are sentence case, with slightly tight tracking on display text.
- **Arial:** Bold button lettering; retain straightforward sans-serif forms and avoid decorative tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1 | -0.016em | — | FS Kim | Large campaign display headline, especially the hero offer. |
| h1 | 46px | 500 | 1.09 | 0 | — | FS Kim | Primary page or major section headline. |
| h2 | 24px | 700 | 1.33 | 0 | — | Inter | Feature, review, and explanatory section headings. |
| h3 | 20px | 700 | 1.5 | 0 | — | Inter | Benefit card and subsection titles. |
| body | 16px | 400 | 1.75 | 0 | — | Inter | Explanatory paragraphs and supporting feature copy. |
| caption | 12px | 400 | 1.83 | 0 | — | Inter | Guarantee notes, source notes, and compact metadata. |
| button | 18px | 700 | 1.45 | 0 | — | Arial | Prominent action labels. |
| nav | 14px | 500 | 1.72 | 0 | — | Inter | Header navigation and dropdown items. |
| link | 20px | 700 | 1.5 | 0 | — | Inter | Prominent inline or standalone text links. |
| eyebrow | 12px | 600 | 1.5 | 0.133em | uppercase | Inter | Small uppercase labels above or within content. |

OpenType features in use: `"palt"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 3, 10, 12, 14, 15, 16, 20, 21, 24, 30, 32, 40, 100 px.
- Section rhythm 100px · element gap 10px · card padding 32px · max content width 830px.

A spacious long-form page moves through centered hero and section introductions, a narrow editorial reading column, alternating image-and-copy feature splits, and three-column card groups. The measured content max width is 830px, while major bands and backgrounds can extend across the viewport. Sections are separated by generous vertical pauses; the measured section gap is 100px. Use 4px-based spacing and 32px card padding as reference points. Keep alignment varied but controlled: centered for campaigns and grids, left aligned for detailed explanations.

## Shape & elevation

- Radius: button `10px` · card `24px` · media `10px` · nav `4px` · link `9999px` · xs `4px` · sm `5px` · md `8px` · lg `10px` · xl `20px` · 2xl `24px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0.12) 0px 0px 32px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.1) 0px 0px 15px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.12) 0px 4px 16px 0px`
- Shadow `xl` (media): `rgba(0, 0, 0, 0.1) 0px 0px 52.8px 0px`
- Shadow `lg-2` (button): `rgba(0, 0, 0, 0.1) 0px 0px 39.667px 0px`
- Motion: standard transition `0.25s ease` on interactive elements.

Most sections sit flat on the white canvas, with borders used sparingly. Feature and review cards gain separation through soft, broad shadows rather than heavy outlines; measured card radii are 24px. Media and status mockups use subtler borders and elevation, while dark promotional bands create contrast through color instead of shadow.

## Imagery

The hero combines a realistic VPN app phone interface with floating feature panels, while later sections use flat explanatory illustrations to clarify networking and privacy. Cards use small product or concept artwork, and the Teams band adds a dimensional device illustration. Media is cleanly framed with generous white space and restrained rounding. Treat colorful device screens and illustration palettes as content, not brand color foundations.

## Components

### Campaign hero

Centered serif offer headline, compact supporting line, green pill CTA, guarantee caption, rating marks, and a large VPN app mockup over a pale gradient.

### Primary action

Green filled action with white bold label, generous horizontal padding, and a fully rounded pill silhouette; use for the main conversion.

### Feature card grid

Three-column benefit cards with deep ink titles, generous internal padding, rounded corners, and soft broad shadows; artwork appears only on selected cards.

### Feature split

Alternating illustration and text blocks with a clear heading, compact explanatory copy, and substantial whitespace between rows.

### Review cards

Three editorial testimonial panels with differentiated pale or green-toned fills, small uppercase category labels, short review text, and trust marks.

### Teams promotion

Dark navy gradient band pairing a left-aligned offer and red-toned CTA with a device illustration on the opposite side.

### Navigation

White horizontal header with the brand mark, compact Inter links, dropdown indicators, account access, locale control, and outlined green Get Started action.

### Measured component styles

- **Primary button** (“Get the Deal Now”): background #0f866c · text #ffffff · border 1px solid #0f866c · radius 34px · padding 14px 24px · 700 20px Inter
- **Secondary button** (“Why ExpressVPN?”): background #f7f8f9 · text #001d2f · radius 10px · padding 21px 40px 21px 10px · 700 18px Arial
- **Link** (“EXPRESSVPN”): transparent background · text #001d2f · radius 0px · padding 0px · 600 12px Inter · uppercase
- **Card** (“Servers in 113 countries”): transparent background · text #001d2f · radius 24px · padding 32px · 400 16px Inter · shadow rgba(0, 0, 0, 0.12) 0px 0px 32px 0px
- **Navigation item** (“Explore ExpressVPN Why ExpressVPN? VPN S”): transparent background · text #001d2f · radius 0px · padding 0px · 500 14px Inter

## Do

- Use white as the default canvas and preserve generous whitespace.
- Set campaign headlines in an editorial serif and supporting UI in Inter.
- Reserve Signal Green (#0f866c) for prominent actions and selected links.
- Use Deep Ink (#001d2f) for primary text and navigation.
- Alternate centered introductions with focused split-content sections.
- Use soft shadows and rounded cards for key feature and review groups.
- Keep illustration colors subordinate to the core interface palette.

## Don't

- Do not turn every section into a colored background band.
- Do not use green as a large decorative fill across the page.
- Do not crowd the hero with dense supporting copy.
- Do not replace the editorial serif headlines with generic heavy sans-serif type.
- Do not apply strong borders or dramatic shadows to every card.
- Do not treat mockup and illustration colors as core brand colors.
- Do not compress the vertical rhythm of the long-form content.

## Agent prompt

Build a new page in the ExpressVPN visual style: a calm, spacious white canvas with Deep Ink (#001d2f) text and an editorial serif display headline. Use Inter for navigation, body copy, cards, and captions; use Signal Green (#0f866c) selectively for primary CTAs and links. Keep the main content column restrained, while allowing occasional full-width bands, including a dark Ocean Slate (#0c3956) to Night Tide (#001827) promotional panel. Create a clear rhythm of centered introductions, explanatory split sections, and soft-shadow card grids. Use Mist Tint (#dae8e7) only for a gentle pale gradient backdrop. Pair product UI imagery with simple explanatory illustrations, generous whitespace, subtle borders, and rounded cards. Make trust signals visible but secondary to the main conversion action.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered campaign headline and CTA above ratings and a large app mockup. | Primary deal CTA, Guarantee reassurance, Ratings and review proof | Serif display headline, Green pill button, Pale gradient backdrop, Floating product UI |
| 2 | integrations | Five-column row of product marks and device-platform navigation. | Browse related products, Select device platform | Compact logo row, Small platform icons, White canvas |
| 3 | video | Centered heading above a compact explanatory video thumbnail. | Play explainer video | Centered serif heading, Illustrated thumbnail, Play control |
| 4 | feature-split | Single explanatory copy area paired with a supporting VPN illustration. | Learn basic VPN function, Follow product CTA | Short body paragraphs, Illustration, Inline action |
| 5 | feature-grid | Centered heading above a three-column grid of nine benefits. | Scan feature benefits, Open supporting details | Rounded cards, Soft shadows, Selective card illustrations |
| 6 | other | Full-width pale neutral band between benefit grid and next offer. | Visual breathing space | Muted surface band, Minimal content |
| 7 | feature-split | Left-aligned offer copy paired with a product illustration. | Explore business plans, Start team inquiry | Dark blue gradient band, Contrasting CTA, Device illustration |
| 8 | testimonials | Centered title above three side-by-side testimonial cards. | Review user feedback, Compare trust sources | Differentiated card fills, Compact review copy, Source marks |
| 9 | logo-cloud | Centered label above a horizontal row of six publication logos. | Recognize press coverage | Monochrome publication marks, Open white space |
| 10 | feature-split | Centered section heading followed by an illustration-and-copy explanation. | Understand location changes, Explore VPN benefits | Illustration beside text, Inline link, White canvas |
| 11 | feature-split | Left-aligned copy and an illustration in an alternating split row. | Learn about tracking protection | Alternating media position, Compact body text |
| 12 | feature-split | Illustration and explanatory copy in a single feature row. | Learn about network threats | Text-image split, Illustration-led explanation |
| 13 | content-feed | Centered heading with introductory copy and a conversion link. | Understand when to connect, Continue to product CTA | Centered editorial block, Prominent inline CTA |
| 14 | feature-grid | Three-column scenario cards, continuing into a second row. | Scan practical use cases | Illustrated cards, Rounded surfaces, Concise titles |
| 15 | how-it-works | Centered heading and introduction above two explanatory text sections. | Compare connected states, Learn connection flow | Clear subsection headings, Readable text column |
| 16 | comparison | Two side-by-side illustrated connection panels. | Compare without and with VPN | Framed media cards, Status labels, Subtle shadows |
| 17 | content-feed | Single editorial text column with stacked terminology sections. | Read technical definitions | Stacked subheadings, Compact explanatory paragraphs |
| 18 | cta | Minimal standalone action centered within generous whitespace. | Return to product signup | Green text link, Open white space |
| 19 | feature-grid | Centered section title above three columns of category content. | Compare VPN categories | Three-column layout, Illustration or icon support, Editorial headings |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
```

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