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

# Surfshark · Design System

> Approachable security, in bright teal and confident cards

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

Surfshark pairs a bright teal campaign hero with a clean, modular layout to make online security feel approachable. Rounded feature cards, direct benefit-led copy, and a vivid coral CTA carry the visual system through product education, reviews, and a dark footer.

## North star

Make complex security products feel approachable through bright teal imagery, clear benefit-led hierarchy, and consistently rounded modules.

## Overview

The page opens with a white navigation bar above a full-bleed teal hero, where dark centered headline text sits over lifestyle photography and a VPN interface visual. Coral-red buttons provide the clearest action contrast; black and charcoal text keep the content legible without competing with the imagery. Below, white and pale-gray section bands alternate to separate security topics, using rounded cards with compact explanations and photographic panels. Inter is used throughout, with strong, centered section headings and relatively small body copy that supports scanning. The layout stays centered within a measured 1200px maximum width, while the hero image spans the viewport. Spacious section breaks balance dense information, and card grids vary their columns to give larger feature stories room. Trust badges, statistics, customer reviews, and a dark footer extend the page from product explanation to reassurance.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, navigation background, and white card or testimonial surfaces. |
| Mist Gray | `#f5f5f6` | `--color-mist-gray` | surface | Pale feature-card fill and alternating light section background. |
| Slate Copy | `#5b6065` | `--color-slate-copy` | neutral | Muted supporting text and secondary button labels. |
| Coral Signal | `#de2e4c` | `--color-coral-signal` | accent | Primary Get Surfshark CTA fill against white, black, and teal areas. |
| Deep Ink | `#16191c` | `--color-deep-ink` | brand | Primary headings and body text, plus inverse card and section surfaces. |
| Graphite | `#393e41` | `--color-graphite` | neutral | Secondary copy, links, outlines, and footer text. |
| Surf Teal | `#02a0a2` | `--color-surf-teal` | brand | Prominent teal feature surfaces and media-led accents; the hero screenshot is visually teal. |
| Soft Pewter | `#bfbfc0` | `--color-soft-pewter` | neutral | Low-emphasis footer and control text or borders. |
| Cloud Silver | `#dadadd` | `--color-cloud-silver` | neutral | Subdued footer copy and language-selector text. |
| Bright Current | `#09acb0` | `--color-bright-current` | accent | Teal media gradient highlight, not a primary text or CTA color. |
| Sea Glass | `#4cbfba` | `--color-sea-glass` | accent | Lighter teal gradient finish within media, not a standalone interface surface. |
| Night Charcoal | `#1e2327` | `--color-night-charcoal` | surface | Dark footer and inverse section background. |
| Blackout | `#0d0d0d` | `--color-blackout` | surface | Near-black card and media surfaces within dark promotional areas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f5f5f6` (Mist Gray) · `--color-surface-2` → `#16191c` (Deep Ink) · `--color-surface-3` → `#1e2327` (Night Charcoal) · `--color-surface-4` → `#0d0d0d` (Blackout) · `--color-text` → `#16191c` (Deep Ink) · `--color-text-muted` → `#5b6065` (Slate Copy) · `--color-text-subtle` → `#393e41` (Graphite) · `--color-border` → `#393e41` (Graphite) · `--color-accent` → `#de2e4c` (Coral Signal) · `--color-accent-2` → `#02a0a2` (Surf Teal) · `--color-accent-3` → `#09acb0` (Bright Current) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#16191c` | `#ffffff` | 17.65:1 | AAA |
| `#16191c` | `#f5f5f6` | 16.2:1 | AAA |
| `#16191c` | `#1e2327` | 1.11:1 | fail |
| `#5b6065` | `#ffffff` | 6.35:1 | AA |
| `#5b6065` | `#f5f5f6` | 5.83:1 | AA |
| `#5b6065` | `#16191c` | 2.78:1 | fail |
| `#5b6065` | `#1e2327` | 2.5:1 | fail |
| `#393e41` | `#ffffff` | 10.83:1 | AAA |
| `#393e41` | `#f5f5f6` | 9.94:1 | AAA |
| `#393e41` | `#16191c` | 1.63:1 | fail |

### Gradients

- `linear-gradient(rgb(2, 160, 162), rgb(2, 160, 162) 60%, rgb(9, 172, 176) 80%, rgb(76, 191, 186))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600, 700 | All page typography, from navigation and body copy to headings, CTAs, and labels. | Inter |

- **Inter:** Use measured regular, semibold, and bold weights; headings are sentence case, with uppercase tracked eyebrow labels.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 600 | 1.21 | 0 | — | Inter | Centered hero headline introducing the VPN and scam protection offer. |
| h2 | 40px | 600 | 1.3 | -0.001em | — | Inter | Centered headings that introduce major product and trust sections. |
| h3 | 32px | 600 | 1.5 | -0.001em | — | Inter | Feature-card and supporting content headings. |
| h4 | 24px | 600 | 1.33 | 0.001em | — | Inter | Compact card titles and lower-level feature labels. |
| body | 14px | 400 | 1.71 | 0.014em | — | Inter | Explanatory copy in feature cards and section introductions. |
| caption | 12px | 400 | 1.67 | 0.017em | — | Inter | Small notes, ratings, badges, and supporting metadata. |
| button | 18px | 600 | 1.67 | -0.001em | — | Inter | Primary CTA text and prominent action controls. |
| nav | 14px | 400 | 1.14 | 0 | — | Inter | Header navigation links and account controls. |
| link | 16px | 400 | 1.75 | -0.001em | — | Inter | Inline references and supporting navigation links. |
| eyebrow | 12px | 600 | 1.33 | 0.054em | uppercase | Inter | Uppercase product-category labels above section headings. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 8, 12, 14, 16, 24, 30, 32, 64 px.
- Section rhythm 64px · element gap 16px · card padding — · max content width 1200px.

Use a centered content area with a measured maximum width of 1200px, but let the hero photography run full bleed. Center the hero copy and section introductions; below, arrange feature cards in mixed-column grids and image-and-copy splits. Alternate white and pale-gray section bands for clear topic changes. The measured spacing system is based on an 8px unit, with a 64px section gap and 16px element gap. Keep card content comfortable and scannable rather than tightly packed.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `50%` · nav `50%` · link `24px` · xs `8px` · sm `24px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The design is largely flat: measured styles show no shadows. Separate cards through pale-gray fills, rounded corners, photography, and generous white space rather than raised effects. Dark CTA strips and footer surfaces create contrast through color blocking; use fine outlines selectively for secondary controls and links.

## Imagery

Use polished lifestyle photography showing people using phones, laptops, and connected devices, alongside product-interface overlays that communicate VPN status or protection alerts. The hero is a full-width teal scene with a city backdrop and a person paired with a translucent app panel. Crop photos into rounded card panels; keep interface graphics and trust marks subordinate to the human subjects.

## Components

### Header navigation

A white horizontal header with Surfshark branding, compact product and resource links, account controls, a language icon, and a coral primary CTA.

### Hero offer

Full-bleed teal media beneath centered dark headline and supporting copy, followed by a dark pill-shaped offer control containing a coral Get Surfshark button.

### Feature cards

Rounded pale-gray cards pair concise security benefit copy with photographic media; use 24px card radii and vary card proportions by content.

### Trust statistics

Teal rounded blocks highlight adoption and recognition figures with white type, set beside concise reassurance content.

### Dark CTA strip

Near-black, rounded promotional band pairs a short benefit statement with a coral pill CTA and compact money-back reassurance.

### Review cards

White testimonial panels combine publisher or user identifiers, short review text, and ratings or platform marks on a pale-gray section.

### Footer

A deep-charcoal footer organizes compact link columns, legal copy, platform icons, and subdued secondary text.

### Measured component styles

- **Primary button** (“Get Surfshark”): background #de2e4c · text #ffffff · radius 64px · padding 14px 12px 14px 16px · 600 16px Inter
- **Secondary button** (“See all 100 countries”): transparent background · text #393e41 · border 2px solid #393e41 · radius 64px · padding 12px 10px 12px 14px · 600 14px Inter
- **Link** (“Jatin @beingjatin11 Use Surfshark, it’s ”): background #ffffff · text #000000 · border 2px solid #ffffff · radius 24px · padding 30px · 400 16px Inter
- **Input** (“English Deutsch Español Français Italian”): transparent background · text #dadadd · radius 0px · padding 4px 28px 4px 8px · 400 14px Inter
- **Card** (“Secure connection Keep your connection p”): background #f5f5f6 · text #000000 · radius 24px · padding 0px · 400 16px Inter
- **Navigation item** (“Skip to content Products Pricing Downloa”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #02a0a2 as the signature teal for hero and selected feature media.
- Reserve #de2e4c for prominent conversion actions.
- Keep main content centered within the measured 1200px maximum width.
- Alternate white and #f5f5f6 section bands to distinguish topics.
- Use rounded cards and pill-shaped primary buttons.
- Make product benefits easy to scan with short headings and compact copy.

## Don't

- Do not add unmeasured colors, spacing values, or radius values.
- Do not use heavy drop shadows to create hierarchy.
- Do not let decorative gradients overpower content or product photography.
- Do not make every section a uniform card grid; preserve mixed layouts.
- Do not use coral as a large background field.
- Do not crowd the hero headline, offer, or trust details.

## Agent prompt

Build a new Surfshark-style cybersecurity page using Inter and a clean, consumer-friendly hierarchy. Use Gallery White (#ffffff) for the main canvas, Mist Gray (#f5f5f6) for alternating sections and cards, Deep Ink (#16191c) for headings, and Surf Teal (#02a0a2) for signature media surfaces. Keep Coral Signal (#de2e4c) exclusive to primary actions. Center content within the measured 1200px maximum width, while allowing hero imagery to span the viewport. Create clear section breaks, rounded feature cards, mixed-column image-and-copy layouts, concise benefit-led copy, and a dark footer. Favor real lifestyle photography with restrained app-interface overlays. Avoid shadows and invented measurements; use the measured spacing and radius system.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White navigation above a full-bleed teal hero with centered copy, offer controls, trust indicators, and lifestyle product imagery. | Primary CTA, Offer and guarantee, App-store ratings | Full-bleed teal media, Centered headline, Coral pill button, Floating VPN interface |

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