---
version: alpha
name: Surfshark
description: "Pool-water teal cut hard against eerie black, corners rounded like a wave."
colors:
  surface: "#16191C"
  on-surface: "#FFFFFF"
  primary: "#DE2E4C"
  deep-slate: "#222E3A"
  carbon: "#1E2327"
  charcoal: "#393E41"
  nav-ink: "#423D3D"
  muted-ink: "#5B6065"
  tab-grey: "#7D8185"
  hairline: "#DADADD"
  footer-ink: "#BFBFC0"
  fog: "#F1F1F1"
  mist: "#F5F5F6"
  paper: "#F9F9F9"
  pure-black: "#000000"
  surf-teal: "#1EBFBF"
  mint-wash: "#E8F7F8"
  arrow-grey: "#C7CEDA"
  hero-split: "#16191C"
typography:
  caption-footer-link:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15.96px
    letterSpacing: 0em
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 23.94px
    letterSpacing: 0.2px
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.011px
  button-label:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  control-text:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 18.4px
    letterSpacing: 0em
  lead-subheading:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 30.06px
    letterSpacing: -0.018px
  card-title:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.92px
    letterSpacing: 0.019px
  heading-small:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.021px
  heading:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 53.2px
    letterSpacing: -0.021px
  display:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 57.984px
    letterSpacing: -0.022px
  hero:
    fontFamily: Inter
    fontSize: 60px
    fontWeight: 400
    lineHeight: 64.2px
    letterSpacing: -0.021px
rounded:
  chip-icon-small-tile-logo-card: 8px
  button-faq-row: 12px
  card-device-tile-table-cap: 16px
  featured-card-cookie-panel: 24px
  language-control-dark-ground-chip: 32px
  panel-picture-pill-chip: 48px
  hero-panel-teal-band-attribution-pill: 64px
  mosaic-panel-right-rounded: 0px
  mosaic-panel-top-left-only: 48px
  mosaic-panel-bottom-pair: 0px
  table-cell-leading-trailing-cap: 16px
spacing:
  3xs: 4px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  2xl: 64px
  3xl: 96px
---
# Surfshark — Style Reference
> Pool-water teal cut hard against eerie black, corners rounded like a wave.

**Theme:** dark

Surfshark paints two builds of one identity: the home page is a bespoke mosaic of colour panels under hashed class names, while the VPN, learning-centre and features pages run on a WordPress block system inked in blue-grey slate. The split falls at the chrome — every page wears the same white bar, red pill and teal shark, but only the block pages carry the `.ss-header` markup, the breadcrumb and the dark FAQ band. The palette is two ladders: a near-black ground stepping eerie black → carbon → charcoal, and a paper ladder of white → off-white → mist → fog, with one teal and one crimson allowed to interrupt either. Nothing lifts; depth is a change of fill and a change of corner, and the corners are the signature — the mosaic gives single tiles two rounded corners and two square ones, so the grid reads as a cut sheet of paper. Type is Inter at a single structural weight, display sizes shouting over a reading system set unusually airy.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Eerie Black | `#16191C` | `--color-eerie-black` | The canvas: FAQ band, dark mosaic tiles, footer field. Also the home page's heading ink and the ink that rides on teal. The site's own name for it, in `.bc-section-bg-eerieblack-100`. |
| Deep Slate | `#222E3A` | `--color-slate` | The block pages' body and heading ink — the most-observed colour in the system, and all 1314 observations are text. Never a fill. |
| Carbon | `#1E2327` | `--color-carbon` | One step above the canvas, so two dark planes can be told apart. |
| Charcoal | `#393E41` | `--color-graphite` | Secondary body ink on light grounds, and the mid-dark panel that pairs with a near-black one. Never a heading. |
| Nav Ink | `#423D3D` | `--color-nav-ink` | Header navigation labels only. It belongs to the bar, not the page. |
| Muted Ink | `#5B6065` | `--color-muted-ink` | Subheads, disclaimers, dates, a resting tab. The quietest ink still readable at 16px. |
| Tab Grey | `#7D8185` | `--color-tab-grey` | A comparison tab's label and its 2px rule. Control ink, not prose ink. |
| Hairline | `#DADADD` | `--color-hairline` | The system's line — the 2px tab rule, the cookie panel's 1px edge — and body ink inside dark panels. |
| Footer Ink | `#BFBFC0` | `--color-footer-ink` | Small links on dark. Its 67 border observations track its table-cell carriers, so its rule is a table's. |
| Fog | `#F1F1F1` | `--color-fog` | Tiles, icon discs, and device links that border themselves in their own fill so the box measures true. |
| Mist | `#F5F5F6` | `--color-mist` | A chip's resting fill on white, and the FAQ question's ink on black. One value on both ladders. |
| Paper | `#F9F9F9` | `--color-paper` | The default card and band surface, one shade off white. |
| White | `#FFFFFF` | `--color-white` | Header bar, highest card, chip on a photograph, and the ink on every dark ground. |
| Pure Black | `#000000` | `--color-black` | Text only, mostly the invisible kind. Not a canvas; the canvas is eerie black. |
| Surf Teal | `#1EBFBF` | `--color-teal` | The identity, and a fill in all 20 of its observations: hero grounds, illustration key, one button. No text, no border. |
| Signal Red | `#DE2E4C` | `--color-signal-red` | Conversion only — five observations, all fills, all on anchors. Never a heading, border or decoration. |
| Mint Wash | `#E8F7F8` | `--color-mint-wash` | One pill behind a creator's name in the testimonial block. |
| Arrow Grey | `#C7CEDA` | `--color-arrow-border` | Border on the carousel's previous/next controls. |
| Hero Split | `#16191C → #16191C → #1EBFBF → #1EBFBF` | `--gradient-hero-split` | The dual hero's ground: doubled stops, so a hard vertical edge with no blend. |

Four translucent inks are measured: `rgba(255, 255, 255, 0.6)` (`--color-veil-white-60`), a veil over home-page imagery; `rgba(255, 255, 255, 0.05)` (`--color-veil-white-05`), the wash that lifts a container off the dark canvas; `rgba(0, 0, 0, 0.05)` (`--color-veil-black-05`), the comparison table's tint; `rgba(34, 46, 58, 0.75)` (`--color-quote-ink`), slate at three-quarters for a pull-quote. The site's variables declare a red and a teal no census row paints, so `#DE2E4C` and `#1EBFBF` are the truth.

## Tokens — Typography

### Inter — the entire system: navigation, body, headings, buttons, captions, footer · `--font-inter`
- **Substitute:** Helvetica Neue, Arial, system-ui
- **Weights:** 400, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 24px, 32px, 40px, 48px, 60px
- **Line height:** 15.96px at 12px through 64.2px at 60px — a range of 1.75 down to 1.07
- **Letter spacing:** effectively neutral; the extremes are +0.2px on 14px labels and −0.022px at 48px, with 24px slightly positive at +0.019px while everything above runs slightly negative
- **Role:** one family for every role. Hierarchy is size and weight, never a change of voice.

### Times — a fallback face the walk caught, with no measured heading or body row of its own · `--font-serif-fallback`
- **Substitute:** Times New Roman, Georgia, serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** in the inventory but not visible in any captured screen — a serif default, not a brand face.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption / footer link | 12px | 15.96px | normal | `--text-caption` |
| Label | 14px | 23.94px | 0.2px | `--text-label` |
| Body | 16px | 28px | −0.011px | `--text-body` |
| Button label | 16px | 16px | normal | `--text-button` |
| Control text | 16px | 18.4px | normal | `--text-control` |
| Lead / subheading | 18px | 30.06px | −0.018px | `--text-body-lg` |
| Card title | 24px | 31.92px | 0.019px | `--text-title` |
| Heading small | 32px | 48px | −0.021px | `--text-heading-sm` |
| Heading | 40px | 53.2px (52px on the mosaic) | −0.021px | `--text-heading` |
| Display | 48px | 57.984px (58.08px on the home page) | −0.022px | `--text-display` |
| Hero | 60px | 64.2px | −0.021px | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 8px | `--spacing-2xs` |
| xs | 12px | `--spacing-xs` |
| sm | 16px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |
| xl | 48px | `--spacing-xl` |
| 2xl | 64px | `--spacing-2xl` |
| 3xl | 96px | `--spacing-3xl` |

The site's `--wp--preset--spacing--*` ramp (0.44rem through 5.06rem) is *(declared, not painted)*. Three off-grid paddings are real: 15px on the logo card, 23px on the cookie panel, 14px on the outlined link, where a 2px border takes up the difference.

### Border Radius
| Element | Value |
|---------|-------|
| Chip icon, small tile, logo card | 8px |
| Button, FAQ row | 12px |
| Card, device tile, table cap | 16px |
| Featured card, cookie panel | 24px |
| Language control, dark-ground chip | 32px |
| Panel, picture, pill chip | 48px |
| Hero panel, teal band, attribution pill | 64px |
| Avatar, icon disc | 50% |
| Mosaic panel — right-rounded | `0px 48px 48px 0px` |
| Mosaic panel — top-left only | `48px 0px 0px` |
| Mosaic panel — bottom pair | `0px 0px 96px 96px` |
| Table cell — leading / trailing cap | `16px 0px 0px 16px` / `0px 16px 16px 0px` |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Popup | `rgba(22, 25, 28, 0.16) 0px 1px 2px 0px, rgba(22, 25, 28, 0.1) 0px 1px 4px 0px` | `--shadow-popup` |
| Table gutter | `rgb(255, 255, 255) -16px 0px 0px 0px, rgb(255, 255, 255) -16px 16px 0px 0px, rgb(255, 255, 255) 0px 16px 0px 0px` | `--shadow-table-gutter` |
| Sticker offset | `rgb(22, 25, 28) 8px 0px 0px 0px` | `--shadow-sticker` |
| Sticker corner | `rgb(22, 25, 28) 8px 8px 0px 0px` | `--shadow-sticker-corner` |

### Layout
- **Page max-width:** `not measured` — no census row carries a width; content centres with wide gutters.
- **Section gap:** 96px on major bands, 64px inside them, 48px once
- **Card padding:** 32px 24px on the featured card's inner surface, 15px 15px on the logo card, 8px 16px on chips
- **Element gap:** 16px default, 8px inside lists, 4px between an icon and its label, 32px between rows

## Components

### Filled Button
**Role:** The one conversion control, in four colourways sized identically so colour carries the meaning.
`._fZX0c._Rljxt._XAWb5` is the red one: an anchor filled `#DE2E4C`, text `#FFFFFF` at 16px/600, padding 12px 16px, radius 12px, no border, no shadow, 4px gap between icon and label. `._fZX0c._6gvaS._XAWb5._0zzWE` repeats that geometry in `#16191C`. `.ss-button.btn-secondary.size48.brand` fills `#1EBFBF` with `#16191C` ink at the same padding and radius. The outlined `.dg-link.primary.large.notResponsive` keeps the teal but adds a 2px `#16191C` border and trims padding to 14px 14px so the box stays put. Labels are `._SzDTn`: 16px/600 on a 16px line height — leading set to the cap, so the pill never grows.

### Header & Primary Nav
**Role:** A white bar that never changes colour, whatever the page below it does.
`.ss-header.js-header` is a `#FFFFFF` header with zero padding, zero radius, no border and no shadow — it separates from the page by contrast alone. Navigation items are `._qWlGp._zAqkD`: a white button, `#423D3D` label at 14px/400 on a 15.96px line height, padding 16px 16px, radius 0 — the tightest leading in the system, because a nav label never wraps. The language control `.js-header-ls.js-dataLayer-push` is fill-less at padding 12px 12px, radius 32px. The skip link `._fkcsi` sits on `#FFFFFF` with `#000000` text, 16px/400, no padding, no radius.

### Product Chip
**Role:** A badge naming the product a section is about, set directly above the heading.
`._7LKEI._rBdel` is the white one: fill `#FFFFFF`, ink `#16191C`, 14px/600 at 23.94px with +0.2px tracking, padding 8px 16px, radius 48px, no border, no shadow, 4px gap holding the mark to the word. `._7LKEI._AeWKp._VDVtj` is the same chip filled `#F5F5F6` for use on white. On dark grounds a second family appears — `._BgEEs._Sldna.sentence._NmBZP` and `._BgEEs._DaL2Y.sentence._NmBZP` — measured only at radius 32px, the rest `not measured`; in the screens it is a hairline outline with white caps.

### Feature Card
**Role:** The repeating unit of the block pages — icon, title, two or three lines.
`.bc-card.bc-card-image-center.bc-card-with-image` measures three ways, all at radius 16px, padding 0px 0px, no border, no shadow: fill-less on a tinted band, `#FFFFFF` where the section ground is grey, `#F9F9F9` where it is white. `.bc-card` is the plain sibling at `#F9F9F9`, radius 16px. Base text is 16px/400 on a 24px line height with −0.1px tracking — tighter than the page's 28px body, because card copy is scanned. Padding lives on the inner wrapper, which is why the card measures zero.

### Dual Hero Panel
**Role:** The block pages' opening — one panel split down the middle, dark on the words, teal on the picture.
`.ss-hero-block.hero-style-dual.wp-block-ss-block-page-hero-sectio` paints `#16191C → #16191C → #1EBFBF → #1EBFBF`: doubled stops, so no blend, only a hard vertical edge. Its radius is 64px, rounding all four outer corners while the interior seam stays razor-straight — the tension between those two facts is the effect. The title `.hero-title` is 48px/600 at 57.984px with −0.022px tracking in `#FFFFFF`. Panel padding is `not measured`. An award pill sits above the title as a hairline outline with caps inside; no census row carries it, so size it from the chip tokens.


### Home Hero Panel
**Role:** The home page's opening — a single saturated field with the headline set straight onto it.
`._IAARQ._hJ2ib` is a section filled `#1EBFBF` at padding 96px 0px, radius 64px, no border, no shadow. The headline `._lTQq4` is the largest type in the system: 60px/600 at 64.2px with −0.021px tracking, inked `#16191C` — black on teal rather than white, which keeps the panel bright instead of heavy. The supporting line `._nryw1` is inked `#1E2327` at a size the census does not measure, and the guarantee line `._6nC4q` sits under the button with a 4px gap to its icon. The red button lands mid-field, where teal is the one fill large enough to make red look calm.

### Underline Tab Strip
**Role:** A row of promises the reader can switch between without leaving the section.
`._UODlC` is a fill-less button with a 2px `#DADADD` bottom rule, padding 12px 32px, radius 0, ink `#5B6065` at 18px/600 on 30.06px with −0.018px tracking. The selected tab is the same class with a modifier, `._UODlC._EL6ES`, and it changes exactly one thing: ink to `#16191C`. No fill, no pill, no weight change — the rule carries the state, at the same 2px the comparison tabs spend on `#7D8185`. Keep the 32px horizontal padding; it stops the tabs reading as a sentence.

### FAQ Accordion Row
**Role:** The closing section of every block page — questions stacked on the darkest ground.
`.dg-accordion-btn-js.bc-faq-item__button` is a fill-less button at 16px/400 on 18.4px, padding 16px 24px, radius 12px, no border, no shadow. The question is `.bc-faq-item__title`: 24px/600 at 31.92px with +0.019px tracking in `#F5F5F6`, near-white rather than white so a long stack does not glare. The band is `.bc-faq-section.bc-section-bg-eerieblack-100.bc-section-mb-0.bc-s` — `#16191C`, padding 96px 0px, radius 0. Chevron size is `not measured`.

### Attribution Pill
**Role:** Names the person behind a quote, one step of colour away from its surroundings.
`._F8KZM` is filled `#E8F7F8`, the palest teal in the inventory and the only element that paints it, at radius 64px — fully round for its height. Padding and label size are `not measured`; in the screens the label is caps in dark ink with the subscriber count below it in the muted grey the disclaimers use. The restraint is the design: a testimonial that could have taken the brand teal takes a wash of it instead.

### Home Mosaic Panel
**Role:** The home page's structural idea — solid tiles whose corners are cut individually.
Fills tile the grid at padding 64px 48px or 64px 24px: `._yItIS._gHv5Z` in `#16191C` at radius `0px 48px 48px 0px`, `._NP1Kx._sjtp1` in `#F1F1F1` at `48px 0px 0px`, `._FBF8R` in `#1EBFBF` at radius 0, `._g16eV` in `#1E2327` at radius 0; `._W6VkT` adds a `#F9F9F9` tile and `._Puogl` carries the bottom pair at `0px 0px 96px 96px`. Panel headings are `._oCn4W`, 40px/600 on 52px in `#FFFFFF`; body copy inside dark tiles is `#DADADD`, and the read-more link `._StYbH.light._xYDUN` keeps a 4px gap to its chevron. Only outer edges round.

### Section Heading Block
**Role:** The centred introduction that opens most sections: chip, headline, one paragraph.
The chip `._7LKEI._AeWKp._VDVtj` comes first in `#F5F5F6`. The headline `._0ld7l` is 48px/600 at 58.08px with −0.022px tracking in `#16191C`. Beneath it the paragraph runs 16px/400 on 28px with −0.011px tracking, inked `#5B6065` as on `._V8viW`, in a narrower column than the section it introduces. The grey is the tell: a subhead almost never shares its heading's ink here.

### Footer
**Role:** A six-column directory on the dark ground, ending in platform icons and legal.
Column headings are `._F85SJ`: 14px/600 at 23.94px with +0.2px tracking in `#DADADD`. Links are `._WfKfd`: 12px/400 at 15.96px, tracking normal, in `#BFBFC0` — the most-repeated text style in the system and the only place 12px carries navigation. The ground and the column gaps are `not measured`; in the screens the field reads as the canvas, with a slightly lighter band under it for the platform row. Keep the two-step ink — headings brighter than links is the only hierarchy the footer gets.

## Do's and Don'ts

### Do
- Fill with `#1EBFBF` and set the type on it in `#16191C`, the way `.ss-button.btn-secondary.size48.brand` does.
- Reach for `#DE2E4C` only for a call to action; its carriers are the anchors `._fZX0c._Rljxt._XAWb5` and `.dg-button.contained.large.red`.
- Round hero panels to 64px and cards to 16px, and cut single corners with `0px 48px 48px 0px` or `48px 0px 0px` where a tile meets the page edge.
- Set body at 16px/28px and leads at 18px/30.06px; the airy leading is the counterweight to the tight display.
- Space major bands 96px apart and their contents 64px, with a 16px default gap inside components.
- Put the paragraph under a heading in `#5B6065` and keep the heading in `#16191C` or `#222E3A`.

### Don't
- Don't fill anything with `#222E3A` — the most-observed colour in the system, and all 1314 observations are text.
- Don't set type in `#1EBFBF`. Its carriers — `._IAARQ._hJ2ib`, `._FBF8R`, `._hOGnp` — take it as a fill, and on `.ss-button.btn-secondary.size48.brand` the ink over it is `#16191C`.
- Don't blur a shadow. Only `.dg-container.dg-cookieConsent.popup.popupEnter` carries a blur radius; the shadows on `.tableData`, `.surfsharkData.isHighlighted`, `.tableHeader.surfshark` and `.getSurfshark` are zero-blur offsets — white 16px gutters and `rgb(22, 25, 28)` 8px sticker edges.
- Don't add a border to a button. Every measured filled button reads `border none` except the outlined teal link, which pays for its 2px with 2px of padding.
- Don't tighten the display tracking to make it feel designed; the largest heading sits at −0.021px.
- Don't blend the hero split. Its gradient doubles both stops on purpose, and a soft transition erases the edge that defines the panel.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#16191C` | FAQ bands, dark mosaic tiles, the footer field. |
| 1 | Carbon | `#1E2327` | One step of light above the canvas, when two dark planes must be told apart. |
| 2 | Charcoal | `#393E41` | The mid-dark panel that pairs with a near-black one. |
| 0′ | Page | `#FFFFFF` | The light ground under the header and most sections. |
| 1′ | Paper | `#F9F9F9` | The default card and band surface. |
| 2′ | Mist | `#F5F5F6` | Chip fills and logo cards. |
| 3′ | Fog | `#F1F1F1` | Tiles, discs and device links. |
| Line | Hairline | `#DADADD` | The 1px and 2px rules, on either ladder. |

## Elevation

Depth is colour, not lift. The boxes overwhelmingly measure `shadow none`, and the only blurred shadow anywhere is the cookie panel's `rgba(22, 25, 28, 0.16) 0px 1px 2px 0px, rgba(22, 25, 28, 0.1) 0px 1px 4px 0px` — 1px and 4px, barely there. The other measured shadows are not elevation: `rgb(255, 255, 255)` offsets punch 16px white gutters between table cells, and `rgb(22, 25, 28)` 8px offsets give a highlighted column a hard sticker edge. Everything else separates by a step on the surface ladder, a hairline, or a change of corner.

## Imagery

Three registers, mixed freely and never blended. Photography is lifestyle and warm — a woman on a sofa with a tablet, an older woman with a phone, a traveller in an airport — always cut into a panel with a large radius, often on the dark side of a split. App screenshots are composited with photographed hands holding real devices, so the interface and the person arrive in one image. Illustration is flat line art in black, teal and white with red held back for danger: a data-breach browser window, a coiled tunnel between laptop and server, a hand slamming a red button. Portraits are circles, one ringed in teal.

## Layout

Both builds are contained: content centres with wide gutters, and even the hero stops short of the viewport edge so its 64px corners show on all four sides. Full-bleed is kept for the two bands that must feel like ground — the FAQ section and the footer. Section rhythm is 96px for major bands, 64px inside them. The home page's grid is the mosaic: tiles of `#16191C`, `#1E2327`, `#1EBFBF`, `#F1F1F1` and `#F9F9F9` butting together with square interior seams. The block pages swap that for a three-across card grid at radius 16px on a `#F9F9F9` band, plus a breadcrumb the home page does not have. The header looks identical across both — white, no border, no shadow, logo left, five links, globe, account link, red pill right — but only the block pages paint it from `.ss-header.js-header`.

## Typography Voice

Two modes, and the line height is where they part. Display runs 40px to 60px at weight 600 with leading between 1.07 and 1.21 — 60px on 64.2px is nearly solid, which makes a two-line headline read as one object. Reading runs the other way: 16px on 28px is 1.75, 18px on 30.06px is 1.67, 14px labels on 23.94px are 1.71. That gap — display packed, prose open — is why a 48px heading sits close above a paragraph without crowding it. The ramp is not monotonic: 32px sits on 48px, looser than the 40px step above it. Every heading row the census measures is weight 600; the family also paints 700, though no measured heading or text row carries it, so treat 700 as reserve.

## Agent Prompt Guide

## Quick Color Reference
- background: `#16191C`
- text: `#222E3A`
- surface: `#F9F9F9`
- border: `#DADADD`
- accent: `#1EBFBF`
- primary action: `#DE2E4C`

## Example Component Prompts
1. **Primary CTA**: Anchor button, fill `#DE2E4C`, label `#FFFFFF` Inter 16px/600 with 16px line-height, padding 12px 16px, radius 12px, no border, no shadow, 4px icon-to-label gap. Black variant fills `#16191C`; teal variant fills `#1EBFBF` with a `#16191C` label.
2. **Feature Card**: Radius 16px, fill `#F9F9F9` on a white section or `#FFFFFF` on a grey one, no border, no shadow, zero padding on the card with 32px 24px on the inner wrapper. Centred icon, 24px/600 title at 31.92px, body 16px/400 at 24px, −0.1px tracking, ink `#222E3A`.
3. **Dual Hero Panel**: Section at radius 64px with `linear-gradient(#16191C, #16191C, #1EBFBF, #1EBFBF)` so the colours meet at a hard vertical edge. Left: outline chip in caps, title 48px/600 at 57.984px, −0.022px tracking, `#FFFFFF`, a three-item checklist, a `#1EBFBF` button with `#16191C` label. Right: product photography, no overlay.
4. **Underline Tab Strip**: Fill-less buttons, padding 12px 32px, radius 0, 2px bottom border `#DADADD`, label Inter 18px/600 at 30.06px, −0.018px tracking, ink `#5B6065`. The selected tab changes ink to `#16191C` and nothing else.
5. **Dark FAQ Band**: Full-bleed section, fill `#16191C`, padding 96px 0px, radius 0. Each row a fill-less button at padding 16px 24px, radius 12px, question 24px/600 at 31.92px, +0.019px tracking, ink `#F5F5F6`, chevron right-aligned, no dividing rules.

## Similar Brands
- **Monzo** — one hot brand colour across full-bleed rounded panels, black display type doing the hierarchy instead of weight.
- **Wise** — a single saturated hue against near-black, oversized corner radii, photography cut into shaped panels rather than framed.
- **Mailchimp** — flat colour blocks and hand-drawn line illustration carrying the personality the typography deliberately does not.
- **Gumroad** — flat fills and hard, zero-blur offsets in place of soft elevation; depth is a shifted copy of the shape.
- **Duolingo** — one bright hue, fully rounded geometry, cheerful character illustration above a plain grotesque.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-eerie-black: #16191C;
  --color-carbon: #1E2327;
  --color-graphite: #393E41;
  --color-nav-ink: #423D3D;
  --color-slate: #222E3A;
  --color-muted-ink: #5B6065;
  --color-tab-grey: #7D8185;
  --color-hairline: #DADADD;
  --color-footer-ink: #BFBFC0;
  --color-fog: #F1F1F1;
  --color-mist: #F5F5F6;
  --color-paper: #F9F9F9;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-teal: #1EBFBF;
  --color-mint-wash: #E8F7F8;
  --color-signal-red: #DE2E4C;
  --color-arrow-border: #C7CEDA;
  --color-link-default: #0000EE;
  --color-veil-white-60: rgba(255, 255, 255, 0.6);
  --color-veil-white-05: rgba(255, 255, 255, 0.05);
  --color-veil-black-05: rgba(0, 0, 0, 0.05);
  --color-quote-ink: rgba(34, 46, 58, 0.75);
  --gradient-hero-split: linear-gradient(#16191C, #16191C, #1EBFBF, #1EBFBF);
  --gradient-table-highlight: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05), #1EBFBF, #1EBFBF);

  /* Typography — Families */
  --font-inter: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif-fallback: 'Times', 'Times New Roman', Georgia, serif;

  /* Typography — Scale */
  --text-caption: 12px;      --leading-caption: 15.96px;
  --text-label: 14px;        --leading-label: 23.94px;      --tracking-label: 0.2px;
  --text-body: 16px;         --leading-body: 28px;          --tracking-body: -0.011px;
  --text-button: 16px;       --leading-button: 16px;
  --text-control: 16px;      --leading-control: 18.4px;
  --text-body-lg: 18px;      --leading-body-lg: 30.06px;    --tracking-body-lg: -0.018px;
  --text-title: 24px;        --leading-title: 31.92px;      --tracking-title: 0.019px;
  --text-heading-sm: 32px;   --leading-heading-sm: 48px;    --tracking-heading-sm: -0.021px;
  --text-heading: 40px;      --leading-heading: 53.2px;     --tracking-heading: -0.021px;
  --text-display: 48px;      --leading-display: 57.984px;   --tracking-display: -0.022px;
  --text-hero: 60px;         --leading-hero: 64.2px;        --tracking-hero: -0.021px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  /* Border Radius */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-3xl: 64px;
  --radius-round: 50%;
  --radius-panel-right: 0px 48px 48px 0px;
  --radius-panel-topleft: 48px 0px 0px;
  --radius-panel-bottom: 0px 0px 96px 96px;
  --radius-cell-start: 16px 0px 0px 16px;
  --radius-cell-end: 0px 16px 16px 0px;

  /* Shadows */
  --shadow-popup: rgba(22, 25, 28, 0.16) 0px 1px 2px 0px, rgba(22, 25, 28, 0.1) 0px 1px 4px 0px;
  --shadow-table-gutter: rgb(255, 255, 255) -16px 0px 0px 0px, rgb(255, 255, 255) -16px 16px 0px 0px, rgb(255, 255, 255) 0px 16px 0px 0px;
  --shadow-sticker: rgb(22, 25, 28) 8px 0px 0px 0px;
  --shadow-sticker-corner: rgb(22, 25, 28) 8px 8px 0px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-eerie-black: #16191C;
  --color-carbon: #1E2327;
  --color-graphite: #393E41;
  --color-nav-ink: #423D3D;
  --color-slate: #222E3A;
  --color-muted-ink: #5B6065;
  --color-tab-grey: #7D8185;
  --color-hairline: #DADADD;
  --color-footer-ink: #BFBFC0;
  --color-fog: #F1F1F1;
  --color-mist: #F5F5F6;
  --color-paper: #F9F9F9;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-teal: #1EBFBF;
  --color-mint-wash: #E8F7F8;
  --color-signal-red: #DE2E4C;
  --color-arrow-border: #C7CEDA;
  --color-link-default: #0000EE;
  --color-veil-white-60: rgba(255, 255, 255, 0.6);
  --color-veil-white-05: rgba(255, 255, 255, 0.05);
  --color-veil-black-05: rgba(0, 0, 0, 0.05);
  --color-quote-ink: rgba(34, 46, 58, 0.75);

  --font-inter: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif-fallback: 'Times', 'Times New Roman', Georgia, serif;

  --text-caption: 12px;      --text-caption--line-height: 15.96px;
  --text-label: 14px;        --text-label--line-height: 23.94px;     --text-label--letter-spacing: 0.2px;
  --text-body: 16px;         --text-body--line-height: 28px;         --text-body--letter-spacing: -0.011px;
  --text-button: 16px;       --text-button--line-height: 16px;
  --text-control: 16px;      --text-control--line-height: 18.4px;
  --text-body-lg: 18px;      --text-body-lg--line-height: 30.06px;   --text-body-lg--letter-spacing: -0.018px;
  --text-title: 24px;        --text-title--line-height: 31.92px;     --text-title--letter-spacing: 0.019px;
  --text-heading-sm: 32px;   --text-heading-sm--line-height: 48px;   --text-heading-sm--letter-spacing: -0.021px;
  --text-heading: 40px;      --text-heading--line-height: 53.2px;    --text-heading--letter-spacing: -0.021px;
  --text-display: 48px;      --text-display--line-height: 57.984px;  --text-display--letter-spacing: -0.022px;
  --text-hero: 60px;         --text-hero--line-height: 64.2px;       --text-hero--letter-spacing: -0.021px;

  --spacing-3xs: 4px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 48px;
  --radius-3xl: 64px;
  --radius-round: 50%;

  --shadow-popup: rgba(22, 25, 28, 0.16) 0px 1px 2px 0px, rgba(22, 25, 28, 0.1) 0px 1px 4px 0px;
  --shadow-table-gutter: rgb(255, 255, 255) -16px 0px 0px 0px, rgb(255, 255, 255) -16px 16px 0px 0px, rgb(255, 255, 255) 0px 16px 0px 0px;
  --shadow-sticker: rgb(22, 25, 28) 8px 0px 0px 0px;
  --shadow-sticker-corner: rgb(22, 25, 28) 8px 8px 0px 0px;
}
```