---
version: alpha
name: Stripe
description: "White paper, one painted gradient ribbon, and a single indigo that means go."
colors:
  on-surface-variant: "#50617A"
  on-surface: "#061B31"
  surface: "#FFFFFF"
  outline: "#E5EDF5"
  primary: "#533AFD"
  cloud: "#F8FAFD"
  price-cell: "#FAFBFD"
  table-rule: "#E7ECF1"
  pricing-indigo: "#635BFF"
  indigo-wash: "#E2E4FF"
  quiet-wash: "#E8E9FF"
  indigo-hairline: "#B9B9F9"
  pricing-navy: "#0A2540"
  slate: "#425466"
  midnight: "#0D1738"
  cyan: "#00D4FF"
  success-green: "#108C3D"
typography:
  display-xxl:
    fontFamily: sohne-var
    fontSize: 56px
    fontWeight: 400
    lineHeight: 57.68px
    letterSpacing: -1.4px
  display-xxl-2:
    fontFamily: sohne-var
    fontSize: 56px
    fontWeight: 400
    lineHeight: 68px
    letterSpacing: -1.12px
  display-xl-hero:
    fontFamily: sohne-var
    fontSize: 48px
    fontWeight: 400
    lineHeight: 55.2px
    letterSpacing: -0.96px
  stat-value:
    fontFamily: sohne-var
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.96px
  heading-lg:
    fontFamily: sohne-var
    fontSize: 32px
    fontWeight: 400
    lineHeight: 35.2px
    letterSpacing: -0.64px
  heading-md:
    fontFamily: sohne-var
    fontSize: 26px
    fontWeight: 400
    lineHeight: 29.12px
    letterSpacing: -0.26px
  heading-md-2:
    fontFamily: sohne-var
    fontSize: 26px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0em
  story-heading:
    fontFamily: sohne-var
    fontSize: 22px
    fontWeight: 400
    lineHeight: 24.2px
    letterSpacing: -0.22px
  accordion-heading:
    fontFamily: sohne-var
    fontSize: 18.72px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  copy-title:
    fontFamily: sohne-var
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.2px
  body:
    fontFamily: sohne-var
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  body-soft:
    fontFamily: sohne-var
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
  pricing-body:
    fontFamily: sohne-var
    fontSize: 15px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.2px
  price:
    fontFamily: sohne-var
    fontSize: 15px
    fontWeight: 400
    lineHeight: 19px
    letterSpacing: 0.2px
  nav-label:
    fontFamily: sohne-var
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  subprice:
    fontFamily: sohne-var
    fontSize: 13px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0.2px
  micro-tabular:
    fontFamily: SourceCodePro
    fontSize: 10px
    fontWeight: 500
    lineHeight: 14px
    letterSpacing: -0.3px
  code:
    fontFamily: SourceCodePro
    fontSize: 12px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0em
rounded:
  buttons-nav-triggers-status-pills: 4px
  bento-card-inner-content: 5px
  cards-card-media-browser-mockups-menus: 6px
  elevated-cards-stat-wrappers: 8px
  browser-url-field: 16px
  pricing-pill-ctas-and-arrow-links: 16.5px
  top-capped-headers: 4px
  bottom-capped-panels: 0px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px
  5xl: 96px
  6xl: 128px
  token: 88px
  token-2: 160px
---
# Stripe — Style Reference
> White paper, one painted gradient ribbon, and a single indigo that means go.

**Theme:** light

Stripe builds on plain white paper and spends its colour budget in two places: a violet-blue on everything you can click, and a painterly gradient ribbon bleeding off the right edge of the first screen. The captured pages hold two systems — the marketing home and the sales-contact flow share an `hds-` kit with 4px corners, navy ink and the blurple action colour, while the pricing page runs an older marketing kit with a deeper navy, pill CTAs and a different indigo; the split falls the moment you click Pricing in the nav. Display type is one variable grotesque held at weight 300, so hierarchy comes from scale and negative tracking rather than heft — 56px at −1.4px, 48px at −0.96px, body copy locked in the 15–16px band. Structure is drawn, not shaded: a 1px cool-grey hairline does what borders and dividers do elsewhere, and real elevation belongs to the product mockups floating above their gradient beds. It reads as a payments dashboard that learned restraint — tabular numbers, quiet slate labels, one loud thing per screen.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-canvas` | Ground under every section, fill of the mega-menu panels, ink on the dark band. |
| Cloud | `#F8FAFD` | `--color-surface` | One step up from canvas — footer, pricing aside, snippet beds. Not a button colour. |
| Price Cell | `#FAFBFD` | `--color-surface-price` | The price cell in a pricing feature row: a half-step tint doing a border's job. |
| Structural Line | `#E5EDF5` | `--color-line` | The house hairline — section rules, table dividers, menu borders, card-media fill. |
| Table Rule | `#E7ECF1` | `--color-line-table` | The pricing grid's own 1px rule, a notch warmer than the house line. |
| Blurple | `#533AFD` | `--color-primary` | The action colour: filled buttons, callout links, logo, sign-in. The one unambiguous "go". |
| Pricing Indigo | `#635BFF` | `--color-primary-pricing` | The pricing kit's action colour, on pill CTAs and arrow links. Don't mix it with blurple in one view. |
| Indigo Wash | `#E2E4FF` | `--color-primary-wash` | Fill *and* border of the tonal secondary button on tinted card beds. |
| Quiet Wash | `#E8E9FF` | `--color-primary-wash-alt` | The icon-only utility button — carousel arrows, card expanders. Ink is #000000 at 30%. |
| Indigo Hairline | `#B9B9F9` | `--color-primary-hairline` | The 1px outline on translucent buttons — tinted, never grey. |
| Ink Navy | `#061B31` | `--color-text` | Headings and emphasized body on the home side. Nearly black, unmistakably blue. |
| Pricing Navy | `#0A2540` | `--color-text-pricing` | The pricing kit's heading ink — lighter and bluer, and the tell you crossed systems. |
| Slate | `#425466` | `--color-text-body` | Pricing body copy; the most-painted text colour and the system's reading grey. |
| Muted Slate | `#50617A` | `--color-text-muted` | Footer links, soft body, and the value column of every mocked dashboard table. |
| Midnight | `#0D1738` | `--color-inverse` | The dark section fill on the home pages — stats band and its color-mode wrapper. |
| Cyan | `#00D4FF` | `--color-accent` | One button, on the dark pricing card, navy ink. Editorial accent; not a stand-in for the action colour. |
| Success Green | `#108C3D` on `rgba(21, 190, 83, 0.2)` | `--color-success` / `--color-success-bg` | The "Succeeded" pill in dashboard mockups, bordered `rgba(21, 190, 83, 0.4)`. Product semantics. |

## Tokens — Typography

### sohne-var — the whole system: display, headings, body, labels, prices and tabular numbers · `--font-sans`
- **Substitute:** Söhne, Inter Tight, Helvetica Now Display
- **Weights:** 300, 400, 425, 500, 700
- **Sizes:** 10px, 11px, 13px, 14px, 15px, 16px, 18px, 18.72px, 22px, 26px, 32px, 48px, 56px
- **Line height:** 1.03–1.6 — tightest at display (57.68px on 56px), loosest at pricing body (24px on 15px)
- **Letter spacing:** negative in proportion to size (−1.4px at 56px, −0.96px at 48px, −0.64px at 32px, −0.26px at 26px); +0.2px on the pricing kit's 13–18px copy; 10px labels run −0.3px or +0.1px
- **Role:** One family carries everything. The 425 weight — used for pricing titles, prices and arrow links — is the giveaway that this is a variable axis, not a static family.

### SourceCodePro — code snippets and line numbers inside the developer mockups · `--font-mono`
- **Substitute:** Source Code Pro, IBM Plex Mono, ui-monospace
- **Weights:** 500, 700
- **Sizes:** 12px
- **Line height:** 24px (2.0 on 12px — editor leading, not UI leading)
- **Letter spacing:** normal
- **Role:** Confined to code graphics — keyword ink #92ADFF, string ink #FFA956, gutter numbers #FFFFFF on the dark terminal.

### Arial, Times, monospace — fallback faces, not design choices
- **Substitute:** they *are* the substitutes
- **Weights:** Arial 400, Times 400, monospace 500
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** Tail-of-stack leakage on embedded content. Not system faces.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XXL (dark band) | 56px / 300 | 57.68px | -1.4px | `--text-display-xxl` |
| Display XXL (pricing) | 56px / 500 | 68px | -1.12px | `--text-display-pricing` |
| Display XL / hero | 48px / 300 | 55.2px | -0.96px | `--text-display-xl` |
| Stat value | 48px / 300 | 48px | -0.96px | `--text-stat` |
| Heading LG | 32px / 300 | 35.2px | -0.64px | `--text-heading-lg` |
| Heading MD | 26px / 300 | 29.12px | -0.26px | `--text-heading-md` |
| Heading MD (pricing) | 26px / 500 | 36px | normal | `--text-heading-pricing` |
| Story heading | 22px / 300 | 24.2px | -0.22px | `--text-heading-sm` |
| Accordion heading | 18.72px / 700 | normal | normal | `--text-accordion` |
| Copy title | 18px / 425 | 24px | 0.2px | `--text-title` |
| Body | 16px / 300 | 20px | normal | `--text-body` |
| Body soft | 16px / 300 | 22.4px | normal | `--text-body-soft` |
| Pricing body | 15px / 300 | 24px | 0.2px | `--text-body-pricing` |
| Price | 15px / 425 | 19px | 0.2px | `--text-price` |
| Nav label | 14px / 400 | 18px | normal | `--text-label` |
| Subprice | 13px / 300 | 21px | 0.2px | `--text-subprice` |
| Micro / tabular | 10px / 300 | 14px | -0.3px | `--text-micro` |
| Code | 12px / 500 | 24px | normal | `--text-code` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` (`--gutterWidth`, `--columnPaddingNormal`) |
| lg | 24px | `--spacing-lg` (`--rowGapMedium`) |
| xl | 32px | `--spacing-xl` (card padding; `--rowGapLarge`, not painted as a gap) |
| 2xl | 48px | `--spacing-2xl` |
| 3xl | 64px | `--spacing-3xl` (`--rowGapXLarge`) |
| 4xl | 80px | `--spacing-4xl` |
| 5xl | 96px | `--spacing-5xl` |
| 6xl | 128px | `--spacing-6xl` |
| — | 88px | `--rowGapXXLarge` *(declared, not painted)* |
| — | 160px | `--paddingTop` / `--paddingBottom` *(declared, not painted)* |

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, nav triggers, status pills | 4px |
| Bento card inner content | 5px |
| Cards, card media, browser mockups, menus | 6px |
| Elevated cards, stat wrappers | 8px |
| Browser URL field | 16px |
| Pricing pill CTAs and arrow links | 16.5px |
| Top-capped headers | 4px 4px 0px 0px · 6px 6px 0px 0px |
| Bottom-capped panels | 0px 0px 6px 6px |
| Progress rings | 100% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Card XSmall | `rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px` | `--shadow-xs` |
| Card Medium | `rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px` | `--shadow-md` |
| Browser Window | `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px` | `--shadow-window` |
| Browser Page | `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px` | `--shadow-page` |
| Float | `rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px` | `--shadow-float` |
| Lifted Panel | `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px` | `--shadow-lift` |
| Deep Feature | `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px` | `--shadow-deep` |
| Form Card | `rgba(0, 55, 112, 0.14) 0px 20px 80px -16px, rgba(0, 59, 137, 0.06) 0px 10px 60px -16px` | `--shadow-form` |

### Layout
- **Page max-width:** `--layoutWidthMax: 1080px` *(declared, not painted)*; gutters at `--gutterWidth: 16px`
- **Section gap:** 96px on home sections, 128px on pricing; 80px and 64px for tighter blocks
- **Card padding:** 32px 32px on mega-menu groups; 16px 24px on pricing feature cells
- **Element gap:** 8px default; 4px icon-to-label, 16px card grids, 24px stacked copy, 64px between rows

## Components

### Primary Button
**Role:** The filled action on the marketing pages — start, sign up, go to the product.
Built from `.hds-button.hds-button--primary`: an anchor with fill #533AFD, ink #FFFFFF, type 16px/400 at 16px line-height, padding 15.5px 24px, radius 4px, `border none`, `shadow none`. The half-pixel padding sizes it to a 47px target rather than a round number, and the flat 4px corner keeps it in the family of nav triggers and status pills. A 14px/400 variant at padding 11.5px 20px serves the nav bar.

### Pricing Pill CTA
**Role:** The pricing page's filled call to action, on cards and in the sub-nav.
Built from `.CtaButton.variant--Button.CtaButton--arrow`: fill #635BFF, ink #FFFFFF, type 15px/425 at 24px line-height, padding 3px 16px, radius 16.5px, `border none`, `shadow none`. The 3px vertical padding is real: the pill's height comes from its line-height, not its box. A single measured instance of the class fills #00D4FF with #0A2540 ink, on the dark custom-pricing card.

### Secondary Outline Button
**Role:** The alternative path beside the primary action — sign up with a provider.
Built from `.hds-button.hero-section__button--google.hds-button--secondary`: fill `rgba(255, 255, 255, 0.65)`, ink #533AFD, type 16px/400, padding 14.5px 24px, radius 4px, border 1px #B9B9F9, `shadow none`. The translucent white is deliberate — the hero's gradient shows faintly through, so the button joins the artwork instead of covering it. Only four of the thirteen control rows paint a border at all: this one, its `.hds-button.csf-nav__desktop` sibling, the tonal wash button, and the contact-page select.

### Arrow Link
**Role:** The inline read-more, the most-used interactive element after the primary button.
Built from `.CtaButton.variant--Link.CtaButton--arrow`: no fill, ink #635BFF, type 15px/425 at 24px line-height, padding 3px 0px, radius 16.5px, `border none`, `shadow none`. It inherits the pill radius with no fill to show it, keeping hit-states consistent between filled and bare CTAs; a second measured variant adds 0.2px tracking. The home side's equivalent is `.hds-link.hds-link--callout` at 16px/400 in #533AFD, shifting to #7389FF on dark ground.

### Navigation Trigger
**Role:** The top-level nav item that opens a product menu.
Built from `.hds-button.hds-navigation-menu__trigger.hds-button--transparent`: no fill, ink #061B31, type 14px/400 at 14px line-height, padding 12px 0px, radius 4px, `border none`, `shadow none`. Zero horizontal padding puts the nav's rhythm in the 8px flex gap between items rather than in button boxes; the caret rides 4px off the label. Nav labels hold 14px across both kits.

### Nav Mega-Menu Panel
**Role:** The dropdown surface holding product links and their descriptions.
Built from `.RefreshedNavigation__group`: a section with fill #FFFFFF, padding 32px 32px, radius 0px, border 1px #E5EDF5, `shadow none` — measured a second way, identical but `border none`, for interior groups. Beside it `.RefreshedProductsNav__aside` fills #F8FAFD at the same padding and border: the featured rail is a luminance step up, not a different colour. Labels run 14px/400 in #533AFD with 14px/300 descriptions in #3C4F69 at 19.6px. Square corners let the panel meet the nav's edge flush.

### Bento Solution Card
**Role:** The product tile in the "flexible solutions" grid — a title, a live-looking mockup, an expander.
Three nested rows build it. `.modular-solutions-bento-card__border` fills #E5EDF5 at radius 6px with zero padding — the "border" is a sliver of hairline colour showing around the inner surface. `.modular-solutions-bento-card__inner` fills #FFFFFF at radius 0px. `.modular-solutions-bento-card__content` has no fill and radius 5px, a pixel inside its parent so the nesting reads as a real edge. Titles use 26px/300 at 29.12px line-height, −0.26px tracking, ink #061B31. The corner expander is `.charm-icon`: radius 4px, border 1px #D6D9FC, no fill.

### Pricing Feature Row
**Role:** One line of the pricing grid — a capability on the left, its rate on the right.
`.PricingProductFeature` wraps the row: no fill, radius 0px, border 1px #E7ECF1, `shadow none`, zero padding. `.PricingProductFeature__left` carries the same border with padding 16px 24px. `.PricingProductFeature__priceContainer` fills #FAFBFD with identical padding and `border none` — the price column is separated by a tint, not a rule, so the row keeps one continuous outline. Prices set at 15px/425, 19px line-height, 0.2px tracking, ink #0A2540; the qualifier runs 15px/300 in #3F4B66 and "+ 0.5%" modifiers 13px/300 in #707F98.

### Elevated Pricing Card
**Role:** The plan card that lifts off the pricing page's gradient wash.
Built from `.Card.accent--Blurple.flavor--Chroma.Card--shadowXSmall`: fill #FFFFFF, radius 8px, `border none`, shadow `rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px`. Two stacked shadows at negative spread give a contact edge rather than a glow — a card on paper, not floating. The hero plan pair steps up to the Medium shadow (`0px 13px 27px -5px` over `0px 8px 16px -8px`), its dark half filling #0C2E4E with #ADBDCC body ink. Titles are 26px/500 at 36px line-height in #0A2540, #FFFFFF on the dark half.

### Status Pill
**Role:** The state chip in dashboard mockups — succeeded, disputed, refunded.
Built from `.platform-graphic__status-label.platform-graphic__status-label--s`: a span with fill `rgba(21, 190, 83, 0.2)`, ink #108C3D, type 10px/300, padding 1px 6px, radius 4px, border 1px `rgba(21, 190, 83, 0.4)`. A translucent fill under a stronger translucent border of the same base green tints whatever surface the chip lands on instead of punching a hole in it. Neutral states use fill #EBEEF1 with a 1px #D8DEE4 border at the same geometry — real product density at 10px.

### Dark Stats Band
**Role:** The inverted section on the home pages, carrying the scale claim.
Built from `.hds-color-mode.stats-section.stats-section--dark.stats-section--`: a section with fill #0D1738, padding 0px 16px, radius 0px, `border none`, `shadow none`. Its title is the largest type here — 56px/300, 57.68px line-height, −1.4px tracking, ink #FFFFFF. Stat values sit at 48px/300, 48px line-height, −0.96px in #6480B2, with 16px/300 descriptions and a #182659 rule (`.stats-section__border`) splitting title from stats. Same face, same tracking, only ink and ground swap.

### Contact Form Card
**Role:** The lead form on the contact-sales page — a three-step header, two fields, one action.
The card's shadow is measured: `rgba(0, 55, 112, 0.14) 0px 20px 80px -16px, rgba(0, 59, 137, 0.06) 0px 10px 60px -16px` on `.csf-form-card.csf-form-card--get-started.csf-form-card--hydrated`; its fill, radius and padding are `not measured`. The text input `.hds-input.hds-textinput` paints a 1px #665EFD border — the field borrows the action colour rather than a neutral. The select `.hds-select__trigger.hds-select__trigger--primary` fills `rgba(255, 255, 255, 0.25)` with #273951 ink, 16px/400, padding 12px 16px, radius 4px, border 1px `rgba(212, 222, 233, 0.75)`. The submit `.hds-button.csf-card-footer__next-button.hds-button--primary` is the home page's primary button unchanged: fill #533AFD, #FFFFFF ink, 16px/400, padding 15.5px 24px, radius 4px.

## Do's and Don'ts

### Do
- Put the action colour on one thing per screen. #533AFD fills the primary button; everything else that colour is a link.
- Draw structure with the 1px #E5EDF5 hairline — section rules, table dividers, menu edges — before reaching for a shadow.
- Keep display type at weight 300 and let scale and tracking carry hierarchy: 56px/−1.4px, 48px/−0.96px, 32px/−0.64px.
- Separate a table's value column with the #FAFBFD tint, not a vertical rule.
- Leave filled controls unbordered. Nine of the thirteen control rows read `border none`; all thirteen read `shadow none`.
- Set tabular numbers at 10px/300 with −0.3px tracking inside mockups. Product density is brand material.
- Match ink to kit: #061B31 heads `.hds-heading.modular-solutions-bento-card__title.hds-heading--md` beside 4px controls, #0A2540 heads `.Copy__title` beside the 16.5px `.CtaButton` pills.

### Don't
- Don't give the pricing pill to a marketing button, or the 4px radius to a pricing CTA. The radius census puts all 52 of its 16.5px observations on pricing-page anchors.
- Don't add weight to survive a dark ground. `.hds-heading.stats-section__title.hds-heading--xxl` holds weight 300 at 56px against #0D1738.
- Don't use #00D4FF as a general accent — one measured button carries it, with #0A2540 ink.
- Don't add a shadow to a button. All thirteen rows of the controls census paint `shadow none`.
- Don't outline an opaque filled control. Borders belong to the translucent buttons (1px #B9B9F9) and the tonal wash button, whose 1px #E2E4FF border matches its fill.
- Don't reach for a 9999px pill. The largest radius on a control is 16.5px, on `.CtaButton.variant--Button.CtaButton--arrow`; the 100% row belongs to `.billing-plan-graphic__background-gradient-1`.
- Don't let mockup colours — #108C3D success, #FF6118 terminal orange, #FFD7EF pink — leak into chrome.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Section ground; fill of menu panels and cards |
| 1 | Cloud | `#F8FAFD` | Footer, pricing aside, snippet beds — one step up, still cool |
| 1 | Price Cell | `#FAFBFD` | The tinted value column inside pricing rows |
| 2 | Checkout Grey | `#F6F9FC` | Mockup headers and payment-detail panels |
| — | Inverse | `#0D1738` | The dark stats band; ink flips to #FFFFFF, values #6480B2 |
| — | Dark Card | `#0C2E4E` | The custom-plan card, with #ADBDCC body ink |

## Elevation

Depth runs in two modes. Chrome is flat: nav, menu panels, sections, buttons and pricing rows all measure `shadow none` and separate by a 1px #E5EDF5 or #E7ECF1 line, or by one luminance step from #FFFFFF to #F8FAFD. Mockups are where shadows live, engineered rather than decorative — `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px` for a browser window with `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px` for the page inside it, so frame and contents read as two objects. Cards double up: two stacked shadows at negative spread, the second tighter and darker, producing a contact edge instead of a blur. Round the fractional values if you rebuild, but keep the negative spread — it is why these cards look pressed onto the page.

## Imagery

Three registers. One painterly gradient ribbon — orange, magenta, cornflower, violet, brush-textured, bleeding off the right edge of the hero and reappearing behind the contact form — carries almost all of the brand's colour. Product-UI mockups do the explaining: a payment terminal on a phone, a browser checkout, a connected-accounts table, a usage meter running `#7232F1 → #FB76FA → #FFCF5E`, code editors with #92ADFF keywords, all in the real component vocabulary at real density. Photography appears sparingly — an aerial intersection, a conference stage — full-bleed inside a 6px-radius container. Illustration is flat and iconographic; no 3D, no stock.

## Layout

A contained centre column on white, 16px gutters, and full-bleed 1px #E5EDF5 rules running past the column edges to mark section boundaries — the horizontal lines are the layout, not decoration. Section rhythm is 96px of vertical padding on the home pages and 128px on pricing, with 80px and 64px for tighter blocks; rows separate at 64px, copy stacks at 24px, everything smaller resolves to 8px or 4px. The nav is white and sticky: 14px caret triggers left, a Sign in link and filled Contact sales button right; pricing adds a floating capsule sub-nav filled `rgba(255, 255, 255, 0.7)`. Grids stay simple — two- and three-up bento cards at a 16px gap, four-up feature columns divided by vertical hairlines, a left product rail against a wide content pane on pricing.

## Typography Voice

Two modes, one family. The home side sets every display line at weight 300 — 56px, 48px, 32px, 26px — and lets negative tracking do the correction weight normally would: −1.4px at 56px is −0.025em, −0.96px at 48px is −0.02em, a ratio held across the scale. Line-height rides just above 1.0 at the top (57.68px on 56px) and opens to 1.6 in pricing body copy, so the page breathes where it is read. The pricing side answers with weight 500 at the same 56px but a looser 68px line-height and a milder −1.12px, plus the 425 axis position for titles, prices and links — authority without bold. Then the hero's split ink: the same 48px/300 line is painted #061B31, #2D2564 and `rgba(0, 14, 255, 0.5)` across different spans, so the sentence changes colour mid-thought as the gradient passes behind it. Precise, not loud — one face, five weights, tracking measured to the hundredth of a pixel.

## Agent Prompt Guide

## Quick Color Reference
- background: #FFFFFF
- text: #061B31
- surface: #F8FAFD
- border: #E5EDF5
- accent: #00D4FF
- primary action: #533AFD

## Example Component Prompts
1. **Primary Button**: Anchor, background #533AFD, text #FFFFFF, 16px sohne-var weight 400, line-height 16px, padding 15.5px 24px, radius 4px, no border, no shadow, trailing chevron, 8px gap to its sibling.
2. **Pricing Plan Card**: White card, radius 8px, no border, box-shadow `rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px`. Title 26px sohne-var weight 500 / 36px in #0A2540; body 15px weight 300 / 24px, 0.2px tracking, #425466; CTA pill fill #635BFF, #FFFFFF ink, 15px weight 425, padding 3px 16px, radius 16.5px.
3. **Pricing Feature Row**: Two-column row, 1px #E7ECF1 border, radius 0. Left cell padding 16px 24px, label 15px weight 425 / 24px in #0A2540. Right cell fill #FAFBFD, padding 16px 24px, no border; price 15px weight 425 / 19px in #0A2540 with a 13px weight 300 modifier in #707F98.
4. **Dark Stats Band**: Full-bleed section, fill #0D1738, padding 0px 16px. Centred title 56px sohne-var weight 300 / 57.68px, −1.4px tracking, #FFFFFF. Below a 1px #182659 rule, four stats at a 16px gap: value 48px weight 300 / 48px, −0.96px, #6480B2; description 16px weight 300 / 22.4px.
5. **Bento Solution Card**: Outer div fill #E5EDF5, radius 6px, no padding; inner div fill #FFFFFF, radius 0; content div radius 5px, no fill. Title 26px sohne-var weight 300 / 29.12px, −0.26px tracking, #061B31. Corner button radius 4px, 1px #D6D9FC border, no fill.

## Similar Brands
- **Linear** — the same austerity of one accent on near-white, hierarchy carried by tracking rather than weight.
- **Vercel** — shares the flat-chrome-plus-elevated-mockup split, where shadows belong to screenshots.
- **Framer** — a comparable restrained white shell against saturated, painterly gradient artwork.
- **Mercury** — kindred cool navy-and-slate ink ladder over white, tabular numbers as brand material.
- **Intercom** — similar bento-grid rhythm, with realistic in-product mockups as the illustration.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-surface: #F8FAFD;
  --color-surface-price: #FAFBFD;
  --color-surface-checkout: #F6F9FC;
  --color-line: #E5EDF5;
  --color-line-table: #E7ECF1;
  --color-primary: #533AFD;
  --color-primary-pricing: #635BFF;
  --color-primary-wash: #E2E4FF;
  --color-primary-wash-alt: #E8E9FF;
  --color-primary-hairline: #B9B9F9;
  --color-text: #061B31;
  --color-text-pricing: #0A2540;
  --color-text-body: #425466;
  --color-text-muted: #50617A;
  --color-text-subprice: #707F98;
  --color-inverse: #0D1738;
  --color-inverse-rule: #182659;
  --color-inverse-stat: #6480B2;
  --color-dark-card: #0C2E4E;
  --color-dark-card-body: #ADBDCC;
  --color-accent: #00D4FF;
  --color-success: #108C3D;
  --color-success-bg: rgba(21, 190, 83, 0.2);
  --color-success-border: rgba(21, 190, 83, 0.4);

  /* Typography — Families */
  --font-sans: 'sohne-var', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'SourceCodePro', 'Source Code Pro', ui-monospace, monospace;

  /* Typography — Scale */
  --text-display-xxl: 56px;      --leading-display-xxl: 57.68px;
  --text-display-pricing: 56px;  --leading-display-pricing: 68px;
  --text-display-xl: 48px;       --leading-display-xl: 55.2px;
  --text-stat: 48px;             --leading-stat: 48px;
  --text-heading-lg: 32px;       --leading-heading-lg: 35.2px;
  --text-heading-md: 26px;       --leading-heading-md: 29.12px;
  --text-heading-pricing: 26px;  --leading-heading-pricing: 36px;
  --text-heading-sm: 22px;       --leading-heading-sm: 24.2px;
  --text-accordion: 18.72px;
  --text-title: 18px;            --leading-title: 24px;
  --text-body: 16px;             --leading-body: 20px;
  --text-body-soft: 16px;        --leading-body-soft: 22.4px;
  --text-body-pricing: 15px;     --leading-body-pricing: 24px;
  --text-price: 15px;            --leading-price: 19px;
  --text-label: 14px;            --leading-label: 18px;
  --text-subprice: 13px;         --leading-subprice: 21px;
  --text-micro: 10px;            --leading-micro: 14px;
  --text-code: 12px;             --leading-code: 24px;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;
  --spacing-6xl: 128px;
  --gutter-width: 16px;
  --layout-width-max: 1080px;

  /* Border Radius */
  --radius-control: 4px;
  --radius-inner: 5px;
  --radius-card: 6px;
  --radius-card-lg: 8px;
  --radius-field: 16px;
  --radius-pill: 16.5px;
  --radius-round: 100%;

  /* Shadows */
  --shadow-xs: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-md: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-window: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --shadow-page: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
  --shadow-float: rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px;
  --shadow-lift: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;
  --shadow-deep: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-form: rgba(0, 55, 112, 0.14) 0px 20px 80px -16px, rgba(0, 59, 137, 0.06) 0px 10px 60px -16px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-surface: #F8FAFD;
  --color-surface-price: #FAFBFD;
  --color-surface-checkout: #F6F9FC;
  --color-line: #E5EDF5;
  --color-line-table: #E7ECF1;
  --color-primary: #533AFD;
  --color-primary-pricing: #635BFF;
  --color-primary-wash: #E2E4FF;
  --color-primary-wash-alt: #E8E9FF;
  --color-primary-hairline: #B9B9F9;
  --color-text: #061B31;
  --color-text-pricing: #0A2540;
  --color-text-body: #425466;
  --color-text-muted: #50617A;
  --color-text-subprice: #707F98;
  --color-inverse: #0D1738;
  --color-inverse-rule: #182659;
  --color-inverse-stat: #6480B2;
  --color-dark-card: #0C2E4E;
  --color-dark-card-body: #ADBDCC;
  --color-accent: #00D4FF;
  --color-success: #108C3D;
  --color-success-bg: rgba(21, 190, 83, 0.2);
  --color-success-border: rgba(21, 190, 83, 0.4);

  --font-sans: 'sohne-var', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'SourceCodePro', 'Source Code Pro', ui-monospace, monospace;

  --text-display-xxl: 56px;
  --text-display-xxl--line-height: 57.68px;
  --text-display-xxl--letter-spacing: -1.4px;
  --text-display-pricing: 56px;
  --text-display-pricing--line-height: 68px;
  --text-display-pricing--letter-spacing: -1.12px;
  --text-display-xl: 48px;
  --text-display-xl--line-height: 55.2px;
  --text-display-xl--letter-spacing: -0.96px;
  --text-stat: 48px;
  --text-stat--line-height: 48px;
  --text-heading-lg: 32px;
  --text-heading-lg--line-height: 35.2px;
  --text-heading-lg--letter-spacing: -0.64px;
  --text-heading-md: 26px;
  --text-heading-md--line-height: 29.12px;
  --text-heading-md--letter-spacing: -0.26px;
  --text-heading-pricing: 26px;
  --text-heading-pricing--line-height: 36px;
  --text-heading-sm: 22px;
  --text-heading-sm--line-height: 24.2px;
  --text-heading-sm--letter-spacing: -0.22px;
  --text-accordion: 18.72px;
  --text-title: 18px;
  --text-title--line-height: 24px;
  --text-title--letter-spacing: 0.2px;
  --text-body: 16px;
  --text-body--line-height: 20px;
  --text-body-soft: 16px;
  --text-body-soft--line-height: 22.4px;
  --text-body-pricing: 15px;
  --text-body-pricing--line-height: 24px;
  --text-body-pricing--letter-spacing: 0.2px;
  --text-price: 15px;
  --text-price--line-height: 19px;
  --text-label: 14px;
  --text-label--line-height: 18px;
  --text-subprice: 13px;
  --text-subprice--line-height: 21px;
  --text-micro: 10px;
  --text-micro--line-height: 14px;
  --text-micro--letter-spacing: -0.3px;
  --text-code: 12px;
  --text-code--line-height: 24px;

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

  --radius-control: 4px;
  --radius-inner: 5px;
  --radius-card: 6px;
  --radius-card-lg: 8px;
  --radius-field: 16px;
  --radius-pill: 16.5px;
  --radius-round: 100%;

  --shadow-xs: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --shadow-md: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  --shadow-window: rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --shadow-page: rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
  --shadow-float: rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px;
  --shadow-lift: rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;
  --shadow-deep: rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px;
  --shadow-form: rgba(0, 55, 112, 0.14) 0px 20px 80px -16px, rgba(0, 59, 137, 0.06) 0px 10px 60px -16px;
}
```