---
version: alpha
name: Slack
description: "A white page sliced by aubergine arcs, product screenshots doing the talking."
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  primary: "#611F69"
  muted-ink: "#696969"
  quiet-ink: "#454245"
  nav-ink: "#1D1D1D"
  aubergine: "#4A154B"
  deep-plum: "#481A54"
  link-blue: "#1264A3"
  orchid: "#730394"
  lilac-wash: "#F9F0FF"
  rail-lilac: "#F9EDFF"
  hairline: "#EBEAEB"
  mauve: "#D17DFE"
  veiled-ink: "rgba(29, 28, 29, 0.5)"
  scrim: "rgba(0, 0, 0, 0.5)"
typography:
  stat-numeral:
    fontFamily: Salesforce-Sans
    fontSize: 96px
    fontWeight: 400
    lineHeight: 104px
    letterSpacing: -1.152px
  display:
    fontFamily: Salesforce-Avant-Garde
    fontSize: 64px
    fontWeight: 400
    lineHeight: 71.68px
    letterSpacing: -0.768px
  display-reverse:
    fontFamily: Salesforce-Avant-Garde
    fontSize: 58px
    fontWeight: 400
    lineHeight: 72.5px
    letterSpacing: -0.464px
  headline:
    fontFamily: Salesforce-Sans
    fontSize: 50px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -0.6px
  section-head:
    fontFamily: Salesforce-Sans
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: -0.256px
  subhead:
    fontFamily: Salesforce-Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.096px
  lede:
    fontFamily: Salesforce-Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.024px
  body:
    fontFamily: Salesforce-Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27.99px
    letterSpacing: -0.0216px
  body-small:
    fontFamily: Salesforce-Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24.88px
    letterSpacing: -0.0192px
  nav-label:
    fontFamily: Salesforce-Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 23.325px
    letterSpacing: -0.0216px
  caption:
    fontFamily: Salesforce-Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21.77px
    letterSpacing: -0.0216px
  button-label:
    fontFamily: Salesforce-Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18.004px
    letterSpacing: 0.798px
  eyebrow:
    fontFamily: Salesforce-Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0.684px
rounded:
  buttons-dropdowns-search-accordion-quest: 4px
  rounded-icon-media: 5px
  rounded-panel-link: 6px
  inline-images-and-video: 8px
  cards-carousel-assets-video-overlays-the: 16px
  card-media-cap: 16px
  capability-chip: 48px
  sticky-toc-item: 90px
  pills-carousel-nav-buttons-the-white-pro: 999px
spacing:
  2xs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  section-sm: 48px
  section: 80px
  section-lg: 96px
  hero: 128px
---
# Slack — Style Reference

> A white page sliced by aubergine arcs, product screenshots doing the talking.

**Theme:** light

The system runs on one white canvas and spends its colour in two places: a plum that fills buttons and an aubergine that fills full-bleed bands. The signature move is the arc — a curved sweep ending one band and beginning the next, so sections separate by silhouette rather than by rule or shadow. Display type is Salesforce-Avant-Garde, geometric and almost always 700 with tracking near −0.012em — "All your people and AI agents working together." sets 64px/700 at −0.768px — while body copy drops to Salesforce-Sans at a steady one-and-a-half leading. Depth is mostly one ambient, directionless glow under cards (`.c-promo.v--flush.v--border`) and outlines drawn as inset rings: paper with objects resting on it rather than a stack of panels.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#FFFFFF` | `--color-canvas` | Page ground and the fill of raised cards (`.c-promo.v--flush.v--border`, `.c-feature-tile.full`); also button ink and reversed headlines. |
| Ink | `#000000` | `--color-ink` | Body and heading ink, by a wide margin the most-painted colour. Barely a fill — it backs two elements and starts one gradient. |
| Muted Ink | `#696969` | `--color-ink-muted` | The 14px caption voice ("Watch Demo") and second-level footer links. Not a heading colour. |
| Quiet Ink | `#454245` | `--color-ink-quiet` | The 14px `.c-promo__subheading` ("Future of work") and the media-control label. Separate from Muted Ink by hue and leading, not size — both set 14px/400; `#696969` runs 21.77px at −0.0216px, `#454245` runs 18.2px at +0.1px on `.c-promo__subheading` and 20.006px on `.c-video-control__label`. |
| Nav Ink | `#1D1D1D` | `--color-ink-nav` | Navigation labels ("Features", "Enterprise") at 15px/700 and 14px/700 — off-black, so the nav sits behind the page's headings. |
| Aubergine | `#4A154B` | `--color-aubergine` | The full-bleed band fill — dark AI section and signup CTA. A section colour: no control row paints it. |
| Action Plum | `#611F69` | `--color-action` | The primary button fill, and the secondary button's ink and inset ring. Aubergine is the stage it stands on. |
| Deep Plum | `#481A54` | `--color-plum-deep` | The `.comp-stats` fill and the ink of `.c-billboard__icon-text` and `.c-accordion-carousel__text-title`. No control row paints it. |
| Link Blue | `#1264A3` | `--color-link` | Inline links ("See all updates", "Learn more about Slackbot") and a thin border role. No control row paints it as a fill. |
| Orchid | `#730394` | `--color-orchid` | The "New Feature" eyebrow ink (`.c-promo__subheading`, 12px/700/18px at +0.684px, 10 spans) and the announcement banner text (`.c-announcement-banner__text`), size `not measured`. |
| Lilac Wash | `#F9F0FF` | `--color-wash` | The first step above canvas: `.c-promo__media`, the toc shell, the announcement banner. |
| Rail Lilac | `#F9EDFF` | `--color-wash-alt` | The unfilled track of `.progress-bar-container` — a hair pinker than Lilac Wash. |
| Hairline | `#EBEAEB` | `--color-hairline` | The 1px rule on `.c-accordion__row` and the carousel nav button — the most-painted border colour. |
| Mauve | `#D17DFE` | `--color-stat` | The 96px `.comp-stats__card-number` numerals; it exists to clear the `#481A54` of `.comp-stats`. |
| Veiled Ink | `rgba(29, 28, 29, 0.5)` | `--color-ink-veiled` | Inactive carousel copy — "not selected" without changing size or weight. |
| Scrim | `rgba(0, 0, 0, 0.5)` | `--color-scrim` | `.comp-customer-videos__card-overlay`, so white 24px headings clear the photography. |

## Tokens — Typography

### Salesforce-Avant-Garde — the display face: every headline from the 24px promo title to the 96px stat numeral · `--font-display`
- **Substitute:** ITC Avant Garde Gothic, Century Gothic, Poppins
- **Weights:** 400, 600, 700
- **Sizes:** 24px, 32px, 50px, 50.4px, 58px, 64px, 76px, 96px
- **Line height:** 30px at 24px, 40px at 32px (≈1.25), tightening to 56px at 50px and 68px at 64px (≈1.06); 58px paints 72.5px and 56px
- **Letter spacing:** −1.152px at 96px, −0.768px at 64px, −0.6px at 50px, −0.464px at 58px, −0.4032px at 50.4px, −0.256px at 32px, −0.096px at 24px — a near-constant −0.012em. The 76px/400 and 24px/600 rows paint `normal`.
- **Role:** Display. Its smallest measured row is the 24px/700 `.c-promo__heading` ("Slack Code"), so it does not reach the 14px caption or 12px eyebrow.

### Salesforce-Sans — the body, label and navigation face: everything from the 12px eyebrow to the 20px hero paragraph · `--font-body`
- **Substitute:** Salesforce Sans, Helvetica Neue, ui-sans-serif
- **Weights:** 300, 400, 600, 700 (the text census measures 400 and 700)
- **Sizes:** 12px, 14px, 15px, 16px, 18px, 20px
- **Line height:** 18px at 12px, 21.77px at 14px, 23.325px at 15px, 24.88px at 16px, 27.99px at 18px, 30px at 20px — 1.5 at 12px and 20px, ≈1.555 on the reading rows between. Labels and controls run tighter: 18.004px on the 14px/700 button row, 18.2px on `.c-promo__subheading`, 20.006px on `.c-video-control__label`; `sup` paints 12px/0px.
- **Letter spacing:** the sign flips with size. Uppercase micro-type opens: +0.798px on 14px button labels, +0.8px on 14px nav parent labels, +0.684px on 12px eyebrows. Running text sits at −0.0216px (14px, 15px, 18px), −0.0192px (16px), −0.024px (20px); the 18px link row is the exception at +0.216px.
- **Role:** Body, ledes, buttons, eyebrows, nav — the accordion question at 18px/700 as well as the 14px caption.

### Times — present in the family inventory at weight 400 · `--font-serif`
- **Substitute:** Times New Roman, Liberation Serif, serif
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** Unassigned in the captured pages — a browser serif fallback, not a brand face. Do not compose with it.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Stat numeral | 96px | 104px | −1.152px | `--text-stat` |
| Display | 64px | 68–71.68px | −0.768px | `--text-display` |
| Display Reverse | 58px | 72.5px | −0.464px | `--text-display-alt` |
| Headline | 50px | 56px | −0.6px | `--text-headline` |
| Section Head | 32px | 40px | −0.256px | `--text-section` |
| Subhead | 24px | 30px | −0.096px | `--text-subhead` |
| Lede | 20px | 30px | −0.024px | `--text-lede` |
| Body | 18px | 27.99px | −0.0216px | `--text-body` |
| Body Small | 16px | 24.88px | −0.0192px | `--text-body-sm` |
| Nav Label | 15px | 23.325px | −0.0216px | `--text-nav` |
| Caption | 14px | 21.77px | −0.0216px | `--text-caption` |
| Button Label | 14px | 18.004px | +0.798px | `--text-button` |
| Eyebrow | 12px | 18px | +0.684px | `--text-eyebrow` |

## Tokens — Spacing & Shapes

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

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-2xs` |
| xs | 4px | `--spacing-xs` |
| sm | 8px | `--spacing-sm` |
| md | 12px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |
| 2xl | 32px | `--spacing-2xl` |
| 3xl | 40px | `--spacing-3xl` |
| section-sm | 48px | `--spacing-section-sm` |
| section | 80px | `--spacing-section` |
| section-lg | 96px | `--spacing-section-lg` |
| hero | 128px | `--spacing-hero` |

Four painted values break the 4px grid: 19px vertical on buttons (`.c-button.v--primary`), 5px / 6.4px on the sticky toc (`.c-bento-sticky-toc`), 10px on the rounded panel link (`.c-panel.v--rounded.t-blank-link...`, 10px 10px) and the active switcher item (`.c-switcher-nav-item.asset-text-carousel__text.active`, 10px 16px), 18px horizontal on the capability chip (`.c-billboard__icon-text`, 4px 18px). Treat all four as component constants, not scale steps.

### Border Radius

| Element | Value |
|---------|-------|
| Buttons, dropdowns, search, accordion question | 4px |
| Rounded icon media | 5px |
| Rounded panel link | 6px |
| Inline images and video | 8px |
| Cards, carousel assets, video overlays, the `#F9EDFF` progress rail (`.progress-bar-container`, 12 elements) | 16px |
| Card media cap | 16px 16px 0px 0px |
| Capability chip | 48px |
| Sticky toc item | 90px |
| Pills, carousel nav buttons, the white `.progress-bar-container` shell | 999px |
| Media control icon | 50% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Card bloom | `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px` | `--shadow-card` |
| Lift | `rgba(0, 0, 0, 0.1) 0px 5px 20px 0px` | `--shadow-lift` |
| Plum ring | `rgb(97, 31, 105) 0px 0px 0px 1px inset` | `--shadow-ring-plum` |
| Reverse ring | `rgb(255, 255, 255) 0px 0px 0px 1px inset` | `--shadow-ring-reverse` |
| Grey ring | `rgb(105, 105, 105) 0px 0px 0px 1px inset` | `--shadow-ring-grey` |
| Badge tick | `rgba(0, 0, 0, 0.08) 0px 1px 3px 0px` | `--shadow-badge` |
| Toc float | `rgba(106, 106, 106, 0.25) 0px 3.073px 9.372px 0px` | `--shadow-toc` |

### Layout

- **Page max-width:** `not measured` — the widest painted boxes run 1920px (`.o-section.c-cta.c-cta--signup.t-dark-theme` at 1920×370px, `.c-arc__lower.color-white` at 1920×128px); stacked content measures 864px (`.c-accordion__row`) and 876px (`.c-accordion-carousel__asset-img.lazyload`).
- **Section gap:** 80px vertical padding is the house rhythm; 48px compresses; heroes stretch to 128px, 160px and 190px.
- **Card padding:** 16px 16px (`.c-feature-tile.full`); the What's New card paints 0px and insets its own text block, `not measured`.
- **Element gap:** 8px is the common flex gap, then 16px (`normal 16px`, `16px 8px`, `16px 2.43902%`, `16px 7.5%`); 12px is rare — two elements, `.c-billboard__icons.o-content-container` and `.c-bento-sticky-toc`. Two-column blocks use gutters of 10.9756%, 7.5%, 5% and 2.43902%.

## Components

### Primary Button
**Role:** The filled call to action — "Get started" — closing heroes and dark bands.
Built from `.c-button.v--primary`: `#611F69` fill, `#FFFFFF` ink, 14px/700/18.004px at +0.798px, padding 19px 40px, radius 4px, no border, no shadow, box 178×57px. The label is uppercase, so the positive tracking is legibility, not decoration. `.c-button.v--primary.v--left` and the offscreen skip link (`.c-button.v--primary.c-skip-link`, four anchors) share that fill; no other control row paints it, so plum still reads as *the* action.

### Secondary Button
**Role:** The quieter partner beside the primary — "Find your plan", "Talk to sales".
Built from `.c-button.v--secondary`: `#FFFFFF` fill, `#611F69` ink, 14px/700/18.004px at +0.798px, padding 19px 40px, radius 4px, border none, outline drawn as `rgb(97, 31, 105) 0px 0px 0px 1px inset`, box 191–226×57px. Its 57px height matches the primary, so a pair sits on one baseline.

### Compact Header Buttons
**Role:** The nav's pair — "Request a demo" and "Get started".
`.c-button.v--primary.v--left` paints `#611F69` fill, `#FFFFFF` ink, padding 12px 16px, radius 4px, no shadow, box 130×42px. `.c-button.v--secondary.v--left.search-hide-element` paints no fill, `#611F69` ink, the same padding 12px 16px and radius 4px, plus the `rgb(97, 31, 105) 0px 0px 0px 1px inset` ring, box 143–166×42px.

### What's New Card
**Role:** The release card in the update carousel.
Built from `.c-promo.v--border.c-home-whats-new-module__card`: an anchor with `#FFFFFF` fill, radius 16px, no border, `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px`, box 400×420px. Its media cap is `.c-promo__media`: `#F9F0FF` fill, radius `16px 16px 0px 0px`, box 400×208px — the tint fills the top half so a transparent screenshot reads without its own frame. Card padding is 0px; the inner text inset is `not measured`.

### Eyebrow Badge
**Role:** The tiny category stamp above a card title — "New Feature".
Built from `.c-promo__subheading`: `#F9F0FF` fill, `#730394` ink, 12px/700/18px at +0.684px, padding 2px 8px, radius 4px, no border, no shadow, box 106–175×22px. Orchid on lilac is a single-hue pairing, so it reads as a label, not a button. The 2px vertical padding keeps it attached to the heading below; do not grow it into a pill.

### Flush Promo Card
**Role:** The repeating editorial card in three- and four-up grids.
Built from `.c-promo.v--flush.v--border`: `#FFFFFF` fill, radius 0px, no border, `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px`, padding 0px, box 285×420–427px. The square-cornered sibling of the 16px What's New card, on every captured page: the carousel card is rounded because it moves, the grid card flush because it tiles.

### Feature Tile
**Role:** The small linked tile in a use-case grid — a label and one line about who it is for.
Built from `.c-feature-tile.full`: `#FFFFFF` fill, `#000000` ink at 18px/400/26px, padding 16px 16px, radius 0px, no border, `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px`, box 300×250px. It is the card row that paints its own inner padding, and 16px is tight — the tile is scanned, not read.

### Accordion Row
**Role:** The FAQ list at the foot of the feature pages — a question that opens in place.
`.c-accordion__row` is the container: no fill, padding 0px 24px, radius 0px, a 1px `#EBEAEB` border, no shadow, box 864×93–94px. `.c-accordion__row__question` is the control inside: no fill, `#000000` ink at 18px/700/27.99px/−0.0216px, padding 32px 0px, radius 4px, no border, box 816×92px. No chevron colour, no hover fill, no shadow. The affordance is 1px of hairline and 32px of breathing room, the question bold at body size rather than heading size.

### Dark CTA Band
**Role:** The closing conversion band.
Built from `.o-section.c-cta.c-cta--signup.t-dark-theme`: a section with `#4A154B` fill, padding 80px 0px, radius 0px, no border, no shadow, box 1920×370px. It carries the 50px/700/56px `#FFFFFF` headline "See all you can accomplish in Slack." Reversed buttons inside take the `rgb(255, 255, 255) 0px 0px 0px 1px inset` ring, not a plum one.

### Capability Chip
**Role:** The floating tag under the hero — "Plan launches", "Ask Slackbot".
`.c-billboard__icon-text` measures two ways. The common variant paints `#FFFFFF` fill with `#481A54` ink, box 209–253×38px; the inverted variant `#2E0039` fill with `#FFFFFF` ink, box 216×38px. Everything else is shared: 22px/600 type, padding 4px 18px, radius 48px, a 1px `rgba(0, 0, 0, 0.04)` hairline, no shadow. Use the inverted fill for one chip in a set, not for a state.

### Sticky Section Toc
**Role:** The pill-shaped section switcher tracking the home page's chapters.
Built from `.c-bento-sticky-toc`: `#F9F0FF` fill, padding 5px 6.4px, radius 60px, a 1px `#EAC8FE` border, and `rgba(106, 106, 106, 0.25) 0px 3.073px 9.372px 0px` — the only grey-tinted shadow with offset and blur; the other grey value, `rgb(105, 105, 105) 0px 0px 0px 1px inset` on `.c-panel.v--rounded.t-blank-link...`, is a ring. Its items are `.c-bento-sticky-toc__item`: no fill, `#3D0157` ink at 18px/400, padding 12px 12px, radius 90px, no border, box 85–123×47px. Selection lives in the shell, not the label. Internal gap is 12px.

### Media Playback Control
**Role:** The pause/play toggle under the animated product demos.
Built from `.c-video-control.c-video-control--light`: a button with no fill, 14px/400/20.006px type, padding 0px, radius 4px, no border, no shadow, box 136–148×32px, 8px gap between icon and label. Its icon is `.c-video-control__icon.c-video-control__icon--play`, measured two ways: `#FFFFFF` fill with a 1px `#EBEAEB` border, and `rgba(255, 255, 255, 0.9)` fill with no border — both 32×32px at radius 50%. The label reads in `#454245` at 14px. A control that asks for nothing: circle, hairline, grey word.

## Do's and Don'ts

### Do
- Fill the primary action with `#611F69` at padding 19px 40px and radius 4px (`.c-button.v--primary`), label uppercase at 14px/700 with +0.798px tracking.
- Draw secondary outlines as inset rings — `rgb(97, 31, 105) 0px 0px 0px 1px inset` on `.c-button.v--secondary`, `rgb(255, 255, 255) 0px 0px 0px 1px inset` on the reverse variant — so the box never resizes.
- Give raised cards the same ambient bloom, `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px`, and let radius (0px against 16px) carry the difference.
- Keep `#1264A3` in running text — "See all updates" (`.c-home-whats-new-module__see-all-text`, 16px/400), "Learn more about Slackbot" (18px/400 at +0.216px) — plus a third measured job: 17 spans at the button spec, 14px/700/18.004px at +0.798px ("Learn more").
- Cut between bands with the arc: `.c-arc__lower.color-white` paints a 1920×128px white sweep, its upper partners `#4A154B` and `#EBF7E6`.
- Tighten display tracking toward −0.012em as size grows and open uppercase micro-type toward +0.057em — the sign flip is the signature.
- Set section rhythm at 80px vertical padding and reserve 128px and above for heroes.

### Don't
- Don't set body copy in Avant-Garde. The workhorse 14px/400 row ("Watch Demo") is Salesforce-Sans, and Avant-Garde's smallest measured row is 24px.
- Don't shadow the dark band — `.o-section.c-cta.c-cta--signup.t-dark-theme` paints `shadow none`, and the luminance step is the whole effect.
- Don't round the accordion: `.c-accordion__row` paints radius 0px and separates on a 1px `#EBEAEB` rule and nothing else.
- Don't use `#4A154B` as a button fill. It paints sections (`.o-section.o-section--feature.c-dark-ai-container.v--borderless`); the button rows paint `#611F69`.
- Don't grey the canvas to invent a section. Raised elements sit on `#FFFFFF` and step up into `#F9F0FF`; the measured grey plane is `.u-background--gray` at `#F5F4F5`.
- Don't mix radius languages in one composition: 4px controls, 16px cards, 48px/90px/999px pills and rails.
- Don't scale the button label with the button: `.c-button.v--primary` and `.c-button.v--primary.v--left` both set 14px/700/18.004px at +0.798px and differ only in padding, 19px 40px against 12px 16px.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Page ground and card fill. |
| 1 | Lilac Wash | `#F9F0FF` | The first tint: media caps, toc shell, announcement banner. |
| 1 | Grey Plane | `#F5F4F5` | A neutral plane (`.u-background--gray`) where lilac would read as brand. |
| 2 | Aubergine Band | `#4A154B` | The full-bleed dark section — feature band and closing CTA. |
| 2 | Deep Plum Block | `#481A54` | The stats block (`.comp-stats`), a half-step darker than the band. |
| 3 | Midnight Chip | `#2E0039` | The inverted capability chip, darkest painted fill in the census. |

## Elevation

Depth is luminance and glow, not stacking. The dominant shadow, `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px`, has zero offset and a 32px blur, so cards bloom evenly. A directional value, `rgba(0, 0, 0, 0.1) 0px 5px 20px 0px`, marks "selected" — the active carousel switcher, the customer showcase card. Outlines are mostly rings: three of the seven measured shadows are `0px 0px 0px 1px inset` strokes in plum, white and grey. Real 1px borders stay structural: `#EBEAEB`, `#EDEAED`, `rgba(0, 0, 0, 0.04)`.

## Imagery

Product UI first, photography second. The recurring image is a Slack window inside a macOS-style frame — aubergine sidebar chrome, traffic-light dots, a white message pane — at 8px radius inline (`.c-zig-zag__image.lazyload`) or 16px as a carousel asset. Photography appears in customer-story cards, where a `rgba(0, 0, 0, 0.5)` scrim lets a 24px/700 white heading sit over it. Client logos run as a monochrome row with a `#757575` label ("Trusted by top teams", `.logo-bar_container__label`), size `not measured`. One hero uses cut-out portraits over coloured shapes with chat-bubble stickers — the only illustrative treatment captured. No decorative icon sets, no abstract 3D.

## Layout

Bands run edge to edge. The widest painted boxes measure 1920px (`.o-section.c-cta.c-cta--signup.t-dark-theme`, `.c-arc__lower.color-white`), and almost no section paints a horizontal inset of 48px or more — two home-page columns do, at 64px — so the gutter lives on inner containers as a percentage. Inside, the page is a centred stack — the heading and lede column width is `not measured` — then alternating two-column blocks with copy one side and a screenshot the other, on gutters of 10.9756%, 7.5% or 5%. Vertical rhythm is 80px between feature sections, 48px where blocks compress, 64px for the FAQ stack, 96px for the carousel chapters; heroes take 128px, 160px or 190px. The nav is a persistent header with the wordmark, three dropdown labels — "Features", "Solutions", "Resources" (`.dropdown_button`, twelve buttons over four pages) — whose `.nav_parent_label.nav_parent_label_l1` sets 15px/700 `#1D1D1D`, two further top-level links in that ink at 23.325px leading ("Enterprise"), a search button (`.nav_search_btn`, 20×24px, radius 4px) and the compact button pair; on scroll it becomes a floating white capsule, `not measured` in the census, as is the dark floating support button on the feature pages.

## Typography Voice

Two faces, three registers. Every measured type row from 24px up is Avant-Garde and almost always 700; its 600 appears on the 58px reversed and gradient headlines, where the lighter cut stops a long line going solid. Every row below is Salesforce-Sans and barely varies — 400 for reading, 700 for emphasis, leading near 1.5 on reading rows and tightening toward 1.3 on labels and buttons. The component census carries no font family, so the face of the 22px/600 chip (`.c-billboard__icon-text`) and the 18px/400 toc item (`.c-bento-sticky-toc__item`) is `not measured`. The trick is the tracking sign: display tightens by a near-constant −0.012em as it grows, so a 96px numeral and a 24px card title sit at the same optical density, while micro-type reverses and opens to about +0.057em wherever the text is uppercase. Lowercase small text stays near −0.0015em. Scale alone carries hierarchy: no italic, and the heaviest weight any family paints is 700.

## Agent Prompt Guide

## Quick Color Reference
- background: #FFFFFF
- text: #000000
- surface: #F9F0FF
- border: #EBEAEB
- accent: #4A154B
- primary action: #611F69

## Example Component Prompts
1. **Primary / Secondary Button Pair**: Two side-by-side buttons, each 57px tall, padding 19px 40px, radius 4px. Primary: `#611F69` fill, `#FFFFFF` label. Secondary: `#FFFFFF` fill, `#611F69` label, and a `rgb(97, 31, 105) 0px 0px 0px 1px inset` ring instead of a border. Labels uppercase Salesforce-Sans 14px/700, line-height 18.004px, letter-spacing 0.798px. No shadow on either.
2. **Release Card**: A 400×420px anchor card, `#FFFFFF` fill, radius 16px, shadow `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px`, no border. Top 208px is a `#F9F0FF` media area at radius `16px 16px 0px 0px`. Below: a badge with `#F9F0FF` fill, `#730394` ink, 12px/700, letter-spacing 0.684px, padding 2px 8px, radius 4px; a 24px/700/30px `#000000` Avant-Garde title at −0.096px; a 16px/400/24.88px `#000000` lede at −0.0192px.
3. **Closing CTA Band**: A full-bleed 1920×370px section filled `#4A154B`, 80px vertical padding, radius 0, no shadow. Centre a 50px/700/56px Avant-Garde headline in `#FFFFFF` at −0.6px, then a button pair whose reverse secondary uses `rgb(255, 255, 255) 0px 0px 0px 1px inset`. End the band above with a white arc sweep 128px tall at full width.
4. **FAQ Accordion**: Stack 864px rows, each with a 1px `#EBEAEB` border, radius 0px, no fill, no shadow, padding 0px 24px. Inside each, an 816px button with padding 32px 0px, radius 4px, no border, carrying the question in Salesforce-Sans 18px/700/27.99px `#000000` at −0.0216px. No hover fill, no chevron colour.
5. **Capability Chip Row**: Pill chips on 12px gaps, each 38px tall, padding 4px 18px, radius 48px, 1px `rgba(0, 0, 0, 0.04)` border. Default chips fill `#FFFFFF` with `#481A54` ink at 22px/600; one chip fills `#2E0039` with `#FFFFFF` ink. No shadow.

## Similar Brands
- **Asana** — a white canvas with rounded product cards and one saturated colour held for the action button.
- **Intercom** — geometric display set very large and tight over white, short copy beside a product screenshot.
- **Mailchimp** — one brand colour as full-bleed bands under a light editorial page, playful shapes at the section joins.
- **Atlassian** — link-blue inline text against near-black copy, screenshot-first sections and a dense multi-column footer.
- **Dropbox** — a heavy geometric sans with tightened tracking over white, punctuated by one flat saturated field.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #696969;
  --color-ink-quiet: #454245;
  --color-ink-nav: #1D1D1D;
  --color-ink-faint: #757575;
  --color-aubergine: #4A154B;
  --color-action: #611F69;
  --color-plum-deep: #481A54;
  --color-plum-ink: #2E0039;
  --color-plum-toc: #3D0157;
  --color-link: #1264A3;
  --color-link-deep: #0B4C8C;
  --color-teal-ink: #05628A;
  --color-orchid: #730394;
  --color-violet: #9602C7;
  --color-ultraviolet: #BA01FF;
  --color-stat: #D17DFE;
  --color-wash: #F9F0FF;
  --color-wash-alt: #F9EDFF;
  --color-wash-grad: #F9F1FF;
  --color-wash-blue: #E8F5FA;
  --color-wash-green: #EBF7E6;
  --color-green-ink: #396547;
  --color-plane-grey: #F5F4F5;
  --color-hairline: #EBEAEB;
  --color-hairline-alt: #EDEAED;
  --color-hairline-lilac: #EAC8FE;
  --color-ink-veiled: rgba(29, 28, 29, 0.5);
  --color-scrim: rgba(0, 0, 0, 0.5);
  --color-chip-border: rgba(0, 0, 0, 0.04);
  --color-wash-veiled: rgba(249, 237, 255, 0.25);
  --color-white-veiled: rgba(255, 255, 255, 0.9);
  --gradient-headline: linear-gradient(90deg, #000000, #BA01FF);
  --gradient-icons: linear-gradient(180deg, #F9F0FF, #FFFFFF);
  --gradient-love: linear-gradient(180deg, #F9F1FF, #FFFFFF);
  --gradient-hero: linear-gradient(90deg, rgba(255, 100, 150, 0.25), rgba(100, 150, 255, 0.25));
  --gradient-overlay: linear-gradient(180deg, rgba(29, 28, 29, 0.06), rgba(29, 28, 29, 0.12), rgba(29, 28, 29, 0.25));

  /* Typography — Families */
  --font-display: 'Salesforce-Avant-Garde', 'ITC Avant Garde Gothic', 'Century Gothic', ui-sans-serif, sans-serif;
  --font-body: 'Salesforce-Sans', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', 'Times New Roman', serif;
  --font-family-monospace: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;

  /* Typography — Scale */
  --text-stat: 96px;     --leading-stat: 104px;     --tracking-stat: -1.152px;
  --text-display: 64px;  --leading-display: 68px;   --tracking-display: -0.768px;
  --text-display-alt: 58px; --leading-display-alt: 72.5px; --tracking-display-alt: -0.464px;
  --text-headline: 50px; --leading-headline: 56px;  --tracking-headline: -0.6px;
  --text-section: 32px;  --leading-section: 40px;   --tracking-section: -0.256px;
  --text-subhead: 24px;  --leading-subhead: 30px;   --tracking-subhead: -0.096px;
  --text-lede: 20px;     --leading-lede: 30px;      --tracking-lede: -0.024px;
  --text-body: 18px;     --leading-body: 27.99px;   --tracking-body: -0.0216px;
  --text-body-sm: 16px;  --leading-body-sm: 24.88px; --tracking-body-sm: -0.0192px;
  --text-nav: 15px;      --leading-nav: 23.325px;   --tracking-nav: -0.0216px;
  --text-caption: 14px;  --leading-caption: 21.77px; --tracking-caption: -0.0216px;
  --text-button: 14px;   --leading-button: 18.004px; --tracking-button: 0.798px;
  --text-eyebrow: 12px;  --leading-eyebrow: 18px;   --tracking-eyebrow: 0.684px;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-section-sm: 48px;
  --spacing-section: 80px;
  --spacing-section-lg: 96px;
  --spacing-hero: 128px;

  /* Border Radius */
  --radius-control: 4px;
  --radius-icon: 5px;
  --radius-panel: 6px;
  --radius-media: 8px;
  --radius-card: 16px;
  --radius-card-cap: 16px 16px 0px 0px;
  --radius-chip: 48px;
  --radius-toc-item: 90px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.1) 0px 0px 32px 0px;
  --shadow-lift: rgba(0, 0, 0, 0.1) 0px 5px 20px 0px;
  --shadow-ring-plum: rgb(97, 31, 105) 0px 0px 0px 1px inset;
  --shadow-ring-reverse: rgb(255, 255, 255) 0px 0px 0px 1px inset;
  --shadow-ring-grey: rgb(105, 105, 105) 0px 0px 0px 1px inset;
  --shadow-badge: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px;
  --shadow-toc: rgba(106, 106, 106, 0.25) 0px 3.073px 9.372px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-ink: #000000;
  --color-ink-muted: #696969;
  --color-ink-quiet: #454245;
  --color-ink-nav: #1D1D1D;
  --color-ink-faint: #757575;
  --color-aubergine: #4A154B;
  --color-action: #611F69;
  --color-plum-deep: #481A54;
  --color-plum-ink: #2E0039;
  --color-plum-toc: #3D0157;
  --color-link: #1264A3;
  --color-link-deep: #0B4C8C;
  --color-teal-ink: #05628A;
  --color-orchid: #730394;
  --color-violet: #9602C7;
  --color-ultraviolet: #BA01FF;
  --color-stat: #D17DFE;
  --color-wash: #F9F0FF;
  --color-wash-alt: #F9EDFF;
  --color-wash-grad: #F9F1FF;
  --color-wash-blue: #E8F5FA;
  --color-wash-green: #EBF7E6;
  --color-green-ink: #396547;
  --color-plane-grey: #F5F4F5;
  --color-hairline: #EBEAEB;
  --color-hairline-alt: #EDEAED;
  --color-hairline-lilac: #EAC8FE;
  --color-ink-veiled: rgba(29, 28, 29, 0.5);
  --color-scrim: rgba(0, 0, 0, 0.5);
  --color-chip-border: rgba(0, 0, 0, 0.04);
  --color-wash-veiled: rgba(249, 237, 255, 0.25);
  --color-white-veiled: rgba(255, 255, 255, 0.9);

  --font-display: 'Salesforce-Avant-Garde', 'ITC Avant Garde Gothic', 'Century Gothic', ui-sans-serif, sans-serif;
  --font-body: 'Salesforce-Sans', 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', 'Times New Roman', serif;
  --font-mono: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;

  --text-stat: 96px;
  --text-stat--line-height: 104px;
  --text-stat--letter-spacing: -1.152px;
  --text-display: 64px;
  --text-display--line-height: 68px;
  --text-display--letter-spacing: -0.768px;
  --text-display-alt: 58px;
  --text-display-alt--line-height: 72.5px;
  --text-display-alt--letter-spacing: -0.464px;
  --text-headline: 50px;
  --text-headline--line-height: 56px;
  --text-headline--letter-spacing: -0.6px;
  --text-section: 32px;
  --text-section--line-height: 40px;
  --text-section--letter-spacing: -0.256px;
  --text-subhead: 24px;
  --text-subhead--line-height: 30px;
  --text-subhead--letter-spacing: -0.096px;
  --text-lede: 20px;
  --text-lede--line-height: 30px;
  --text-lede--letter-spacing: -0.024px;
  --text-body: 18px;
  --text-body--line-height: 27.99px;
  --text-body--letter-spacing: -0.0216px;
  --text-body-sm: 16px;
  --text-body-sm--line-height: 24.88px;
  --text-body-sm--letter-spacing: -0.0192px;
  --text-nav: 15px;
  --text-nav--line-height: 23.325px;
  --text-nav--letter-spacing: -0.0216px;
  --text-caption: 14px;
  --text-caption--line-height: 21.77px;
  --text-caption--letter-spacing: -0.0216px;
  --text-button: 14px;
  --text-button--line-height: 18.004px;
  --text-button--letter-spacing: 0.798px;
  --text-eyebrow: 12px;
  --text-eyebrow--line-height: 18px;
  --text-eyebrow--letter-spacing: 0.684px;

  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-section-sm: 48px;
  --spacing-section: 80px;
  --spacing-section-lg: 96px;
  --spacing-hero: 128px;

  --radius-control: 4px;
  --radius-icon: 5px;
  --radius-panel: 6px;
  --radius-media: 8px;
  --radius-card: 16px;
  --radius-chip: 48px;
  --radius-toc-item: 90px;
  --radius-pill: 999px;

  --shadow-card: rgba(0, 0, 0, 0.1) 0px 0px 32px 0px;
  --shadow-lift: rgba(0, 0, 0, 0.1) 0px 5px 20px 0px;
  --shadow-ring-plum: rgb(97, 31, 105) 0px 0px 0px 1px inset;
  --shadow-ring-reverse: rgb(255, 255, 255) 0px 0px 0px 1px inset;
  --shadow-ring-grey: rgb(105, 105, 105) 0px 0px 0px 1px inset;
  --shadow-badge: rgba(0, 0, 0, 0.08) 0px 1px 3px 0px;
  --shadow-toc: rgba(106, 106, 106, 0.25) 0px 3.073px 9.372px 0px;
}
```