---
version: alpha
name: ClickUp
description: "A white sheet of type that fades mid-sentence, then falls off a cliff into black."
colors:
  on-surface-variant: "#B4B4B4"
  on-surface: "#202020"
  surface: "#FFFFFF"
  primary: "#0091FF"
  void: "#000000"
  ink-inherited: "#292D34"
  ink-secondary: "#646464"
  ink-tertiary: "#838383"
  heading-navy: "#090C1D"
  box: "#F8F9FA"
  control-grey: "#F0F0F0"
  hairline: "#E8E8E8"
  dark-ink: "#EEEEEE"
  dark-hairline: "#2A2A2A"
  headline-gradient: "#202020"
  brain-gradient: "#0091FF"
  signal-green: "#42CC77"
  accent-purple: "#6647F0"
typography:
  caption-mono:
    fontFamily: Sometype Mono
    fontSize: 11px
    fontWeight: 400
    lineHeight: 11px
    letterSpacing: 0em
  caption-mono-lg:
    fontFamily: Sometype Mono
    fontSize: 11.5px
    fontWeight: 400
    lineHeight: 17.25px
    letterSpacing: 0.23px
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.15px
  body-mono:
    fontFamily: Sometype Mono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  card-title:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.54px
  heading-sm:
    fontFamily: Inter
    fontSize: 26px
    fontWeight: 400
    lineHeight: 32.5px
    letterSpacing: -0.91px
  stat:
    fontFamily: Inter
    fontSize: 34px
    fontWeight: 400
    lineHeight: 34px
    letterSpacing: -1.6px
  heading-md:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 41.4px
    letterSpacing: -0.72px
  display-xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 55.2px
    letterSpacing: -1.68px
  display-2xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 60px
    fontWeight: 400
    lineHeight: 66px
    letterSpacing: -2.1px
  display-3xl:
    fontFamily: Plus Jakarta Sans
    fontSize: 76px
    fontWeight: 400
    lineHeight: 79.8px
    letterSpacing: -3.04px
  display-max:
    fontFamily: Plus Jakarta Sans
    fontSize: 80px
    fontWeight: 400
    lineHeight: 96px
    letterSpacing: -3.2px
rounded:
  icon-glyph-banner-text-block: 6px
  control: 8px
  footer-link-hit-area: 9px
  tab-button: 10px
  app-icon: 11px
  card-large-button: 12px
  media-frame-dark-agent-card: 14px
  large-button: 15px
  ambient-pill: 18px
  icon-pill: 20px
  eyebrow-pill: 54px
  skill-pill: 70px
  terminal-pill-feature-pill: 999px
  grid-corner-tiles: 12px
spacing:
  2xs: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  2xl: 16px
  3xl: 20px
  4xl: 24px
  gutter: 48px
  section: 80px
  section-tall: 96px
  band: 160px
---
# ClickUp — Style Reference

> A white sheet of type that fades mid-sentence, then falls off a cliff into black.

**Theme:** mixed

Two systems share this site and they do not blend. A white marketing surface runs the home, pricing and enterprise pages — `#FFFFFF` ground, `#F8F9FA` boxes, `#E8E8E8` hairlines, near-black `#202020` type and controls — while a dark Brain surface owns the Brain page, annexes the home page for two full-bleed bands and takes the AI section on the pricing page — where `.PricingV4AIPricing_title___2k0u.display-xl.white-text` sets "The world's most advanced AI for work" in 48px `#FFFFFF` — swapping in `#000000`, `#2A2A2A` hairlines, `#EEEEEE` ink and uppercase mono labels; the switch lands mid-scroll, with no transitional grey. The signature move is a headline that changes value inside its own sentence: weight 700, tracked to roughly −0.04em, filled `#202020 → #8F8F8F` so the second clause greys out. Colour stays off the controls and concentrates in one four-stop AI ramp — blue, magenta, coral, amber — worn as glow and shimmer. The rhythm is 80px between sections, 1px between cards, 8px between nearly everything else.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#FFFFFF` | `--color-canvas` | The marketing ground; also the feature-tile fill and the inverted button fill on the Brain page. |
| Void | `#000000` | `--color-void` | The Brain ground: section fills, the 160px home band, dark card interiors; it also inks the badge "NEW: Brain² —". |
| Ink | `#202020` | `--color-ink` | `--Core-Text-Main`. Headings, the primary button fill, the first stop of the headline gradient. |
| Ink Inherited | `#292D34` | `--color-ink-inherited` | The document-root default, inherited until a component overrides it; also the banner's text. Set it on `<body>`. |
| Ink Secondary | `#646464` | `--color-ink-secondary` | `--Core-Text-Secondary`. Nav links, footer links, tab rest state, running copy. |
| Ink Tertiary | `#838383` | `--color-ink-tertiary` | `--Core-Text-Tertiary`. Feature-tile labels, mono taglines, the legal line. |
| Heading Navy | `#090C1D` | `--color-heading-navy` | Card titles like "Projects and Tasks" `.CuContentCardV5_title__nrR_V` and headlines like "All apps, AI Agents, and humans in ClickUp" `.CuTitle_title__mV35_.h2` — cooler and darker than Ink. |
| Box | `#F8F9FA` | `--color-box` | `--Core-Background-Box`. The grey plane of the light system: content cards, the announcement strip, tab rest fill. |
| Control Grey | `#F0F0F0` | `--color-control` | `--Core-Button-Secondary`. The secondary-button fill on `.ui._loginButton_1ojt5_108._hideOnSm_1ojt5_244` and `.PricingV4Card_ctaButton__yJ92O` — one step darker than Box. |
| Hairline | `#E8E8E8` | `--color-hairline` | `--Core-Border-Default`. The dominant 1px rule on the light pages (98 borders), plus the eyebrow pill's fill. The comparison table runs its own `#CECEEA` rule on 25 cells. |
| Dark Ink | `#EEEEEE` | `--color-dark-ink` | The Brain system's primary ink: mono labels, card headings, 48px display on black. |
| Dark Ink Muted | `#B4B4B4` | `--color-dark-ink-muted` | Body copy and skill-pill text on black; the dark footer's link colour. |
| Dark Hairline | `#2A2A2A` | `--color-dark-hairline` | The Brain system's 1px rule — card grids, panel edges, terminal pills. |
| Headline Gradient | `#202020 → #8F8F8F` | `--gradient-headline` | A fill across display headings so the sentence loses value as it ends; painted on ten `h2` and two `h1`, among them "60% of work is lost in context – and AI is lost" `.CuHomeVideoSection4on_title__4Fwp_`. |
| Brain Gradient | `#0091FF → #FA24CE → #FC6D7B → #FD9A46` | `--gradient-brain` | The AI identity ramp on `.PersonalityCardVisual_glow__3M5ie`, `.Brain2MemoryVisual_glow__9mn_8` and `.EveryModelCardVisual_glow__49ZQP` — 30 elements, every one a decorative glow layer. |
| Shimmer | `#0091FF → #A43CB4 → #F100E3` | `--gradient-shimmer` | The three-stop ramp on the word "Brain" in `._dropdownText_ywfkq_48` and `._shimmerText_jp7j6_293` — a wordmark treatment. |
| Signal Green | `#42CC77` | `--color-signal` | Live state in the Brain hero: dots `.Brain2HeroFinal_plDot__vBBDM` and orbs `.Brain2HeroFinal_cvOrbChat__0276A` take the solid fill; the ring `.Brain2HeroFinal_cvCoreRing__iEUQd` takes it as a 1px `rgba(66, 204, 119, 0.6)` border. |
| Accent Purple | `#6647F0` | `--color-accent-purple` | `--Core-Accents-Purple`. Stat eyebrows like "ROI" `.CuHomeImpact4o_statTitle__5bmK7` and chip dots `.AmbientIntelligenceCardVisual_chipDotPurple__peMxe`. |

## Tokens — Typography

### Plus Jakarta Sans — display and headings on both systems plus feature labels; 700 for display, 650 for card titles, 900 for one emphasised word · `--font-display`
- **Substitute:** Figtree, Manrope, Poppins
- **Weights:** 400, 500, 600, 650, 700, 800, 900
- **Sizes:** 14px, 14.5px, 16px, 18px, 26px, 32px, 34px, 36px, 48px, 56px, 60px, 76px, 80px
- **Line height:** 1.0 at 34px through 1.2 at 80px; display sits at 1.05–1.2, card titles at 1.33
- **Letter spacing:** −3.2px at 80px, −3.04px at 76px, −2.24px at 56px, −2.1px at 60px, −1.68px at 48px, −1.6px at 34px, −0.91px at 26px, −0.72px at 36px, −0.54px at 18px, −0.15px at 14px

### Inter — the UI and body face: nav links, footer links, buttons, paragraph copy, table cells · `--font-ui`
- **Substitute:** Inter Tight, Roboto, system-ui
- **Weights:** 400, 500, 600, 650, 700
- **Sizes:** 8px, 14px
- **Line height:** 11px at 8px; 14px, 20px and 21px at 14px — 14px/14px is the footer link, 14px/20px is running copy
- **Letter spacing:** −0.15px on running copy and nav links; `normal` on footer links, buttons and timestamps

### Sometype Mono — eyebrows, category labels and synthetic terminal strings, set uppercase on rows like "Trusted by the best" `._tagline_nk8qp_73` · `--font-mono`
- **Substitute:** IBM Plex Mono, JetBrains Mono, Space Mono
- **Weights:** 400, 500, 600
- **Sizes:** 11px, 11.5px, 14px, 16px
- **Line height:** 11px at 11px (terminal pills), 16.5px at 11px, 17.25px at 11.5px, 18px at 14px, 20px at 16px
- **Letter spacing:** `normal` at 11px, 14px and 16px; +0.23px at 11.5px on "AI Chats" `.Brain2HeroFinal_plLabel__dj_xh`

### SF Pro Text / SF Pro / -apple-system — the platform stack behind embedded product chrome, not a brand face · `--font-system`
- **Substitute:** system-ui, Segoe UI, Helvetica Neue
- **Weights:** SF Pro Text 400, 450, 500, 600, 700; SF Pro 500, 590; -apple-system 400, 500, 600
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption mono | 11px | 11px | normal | `--text-caption` |
| Caption mono lg | 11.5px | 17.25px | 0.23px | `--text-caption-lg` |
| Label | 14px | 14px | normal | `--text-label` |
| Body | 14px | 20px | −0.15px | `--text-body` |
| Body mono | 14px | 18px | normal | `--text-body-mono` |
| Body lg | 16px | 24px | normal | `--text-body-lg` |
| Card title | 18px | 24px | −0.54px | `--text-title` |
| Heading sm | 26px | 32.5px | −0.91px | `--text-heading-sm` |
| Stat | 34px | 34px | −1.6px | `--text-stat` |
| Heading md | 36px | 41.4px | −0.72px | `--text-heading-md` |
| Display xl | 48px | 55.2px | −1.68px | `--text-display-xl` |
| Display 2xl | 60px | 66px | −2.1px | `--text-display-2xl` |
| Display 3xl | 76px | 79.8px | −3.04px | `--text-display-3xl` |
| Display max | 80px | 96px | −3.2px | `--text-display-max` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** compact — controls at 8px 12px and cards at 16px, inside sections that breathe at 80px

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-2xs` |
| xs | 4px | `--spacing-xs` |
| sm | 6px | `--spacing-sm` |
| md | 8px | `--spacing-md` |
| lg | 10px | `--spacing-lg` |
| xl | 12px | `--spacing-xl` |
| 2xl | 16px | `--spacing-2xl` |
| 3xl | 20px | `--spacing-3xl` |
| 4xl | 24px | `--spacing-4xl` |
| Gutter | 48px | `--spacing-gutter` |
| Section | 80px | `--spacing-section` |
| Section tall | 96px | `--spacing-section-tall` |
| Band | 160px | `--spacing-band` |

5px is painted too, on 52 dot rows and tab lists, and the site's `--size-1` … `--size-15` step by 1px — so 4px is a tendency, not a hard grid.

### Border Radius
| Element | Value |
|---------|-------|
| Icon glyph, banner text block | 6px |
| Control (button, dropdown) | 8px |
| Footer link hit-area | 9px |
| Tab button | 10px |
| App icon | 11px |
| Card, large button | 12px |
| Media frame, dark agent card | 14px |
| Large button (18px label) | 15px |
| Ambient pill | 18px |
| Icon pill | 20px |
| Eyebrow pill | 54px |
| Skill pill | 70px |
| Terminal pill, feature pill | 999px |
| Dot, avatar | 50% |
| Grid corner tiles | one 12px corner, three at 0 |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| App tile | `rgba(13, 21, 48, 0.05) 0px 4px 10px 0px` | `--shadow-tile` |
| Tab active | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | `--shadow-tab` |
| Avatar ring | `rgb(255, 255, 255) 0px 0px 0px 1.5px` | `--shadow-ring` |
| Node dot glow | `rgba(66, 204, 119, 0.8) 0px 0px 6px 0px` | `--shadow-dot` |
| Orb glow | `rgba(251, 158, 121, 0.85) 0px 0px 10px 0px` | `--shadow-orb` |
| Skill pill active | `rgb(42, 42, 42) 0px 0px 0px 1px inset, rgba(250, 36, 206, 0.1) 0px 5px 16px 0px, rgba(0, 145, 255, 0.1) 0px 9px 26px 0px` | `--shadow-pill-active` |
| Floating panel | `rgba(0, 0, 0, 0.17) -34px -13px 37px 0px, rgba(0, 0, 0, 0.2) -9px -3px 20px 0px` | `--shadow-panel` |
| Ambient pill | `rgba(0, 0, 0, 0.55) 0px -13.455px 32.291px 0px` | `--shadow-ambient` |

### Layout
- **Page max-width:** 1160px content, 1120px nav *(declared, not painted)*
- **Section gap:** 80px is the dominant beat (18 blocks); 96px, 56px and 48px are secondary; one 160px band and one 140px block are outliers
- **Card padding:** 16px on the content card, 20px on the stat card, 0px on the feature tile
- **Element gap:** 8px by default (316 elements); 4px for icon-plus-label pairs, 12px for CTA rows, 20px and 24px for card stacks
- **Horizontal inset:** 48px on the light pages, 78px on the Brain feature blocks, 100px on the mockup container

## Components

### Navigation Bar
**Role:** The header carrying the wordmark, six top-level links and the two-button account cluster.
Links are Inter 14px/500 at 20px line-height and −0.15px tracking in `#646464`, in a `._navLinks_1ojt5_100` row at 8px gaps. The backdrop `._backdrop_1ojt5_52`: `rgba(255, 255, 255, 0.9)` on the light pages, `rgba(17, 17, 17, 0.9)` on the Brain page — the same component re-grounded, so one nav stays legible over two systems. Dropdown triggers `._dropdownButton_ywfkq_4._hideOnSm_1ojt5_244` take the 8px control radius; "Brain" in `._shimmerText_jp7j6_293` gets the `#0091FF → #A43CB4 → #F100E3` shimmer. Height `--spacing-nav-height: 76px` and container `--size-nav-container: 1120px` are *(declared, not painted)*.

### Primary Button
**Role:** The highest-commitment action — sign up, get started, contact sales.
`._button_sazky_38.ui._button_sazky_38.button-regular`: fill `#202020`, text `#FFFFFF`, 14px/600, padding 8px 12px, radius 8px, no border, no shadow. Box `not measured`. The restraint is the signal. No hover elevation is measured, and `--Navigation-Signup-Background-Hover: #202020cc` points at the same ink at 80% rather than a new colour.

### Secondary Button
**Role:** The lower-commitment action beside a primary — log in, learn more, read the story.
`.ui._loginButton_1ojt5_108._hideOnSm_1ojt5_244`: fill `#F0F0F0`, text `#000000`, 14px/600, padding 8px 12px, radius 8px, no border, no shadow. Geometry identical to the primary, so hierarchy rides on fill luminance — a 208-step drop to `#202020`, 240 down to 32. On the Brain page the same anchor swaps its fill to `rgba(255, 255, 255, 0.1)`; it draws no border on either system.

### Hero CTA Button
**Role:** The section-level action under a display headline, as in `.Lp4AgentsSection_ctaButton__RcRvw`.
`.v4.CuButtonV4_button__UdK5Z.CuButtonV4_buttonMd__SHsdu.CuButtonV4_buttonTertiary__UEC_z`: fill `#202020`, text `#FFFFFF`, 16px/500, padding 14px 20px, radius 12px, no border, no shadow. Its ghost twin `.CuLink_link__CFBMW.CuLink_v4__I4ldH.v4.CuButtonV4_button__UdK5Z` takes fill `#F0F0F0` and text `#202020` at the same 16px/500, 14px 20px, radius 12px. The pair scales the nav button up — label +2px, padding +6/+8px, radius +4px — while weight goes *down*, 600 to 500. The hero's own CTA row `.HomeHeroLongTitle_ctaRow__0gkIl` runs a larger button — 18px/650, padding 14px 20px, radius 15px (`.v5.CuButtonV5_button__SDlee.CuButtonV5_buttonLg__BZbeh.button-large`).

### Eyebrow Pill
**Role:** The linked announcement chip above a hero headline.
`.CuLink_link__CFBMW.CuButton_button__2XIwY.CuButton_buttonShadow__wF2uA.GradientPill_eyebrow__m19g_`: fill `#E8E8E8`, text `#202020`, 14px/600, padding 4px 12px, radius 54px, no border, no shadow. The fill is the border token used as a surface. Inside, `.GradientPill_gradientOverlay__ZTHAF` carries a `#6647F0 / #FF02F0 / #F76808` overlay at 12px radius and `.GradientPill_eyebrowText__EYj3Z` sets the label at a 2px gap from the glyph. The dark counterpart, same class, fills `#141414`.

### Announcement Banner
**Role:** The clickable strip above the nav carrying the current launch.
`.v5.CuPageBanner_wrapper__Xy_44.CuPageBanner_fullyClickableUrl__cUe3_.cu-page-banner--global-site-banner`: fill `#F8F9FA`, text `#292D34`, 16px/400, padding 0px, radius 0px, no border, no shadow. Here the grey Box token spans the viewport rather than bounding a card, and the inherited `#292D34` becomes deliberate ink. The lead fragment `.CuPageBanner_badge__JmJD1` sits in `#000000`; the body sits in `.CuMarkdown_wrapper__0ea92.CuPageBanner_bannerText__zj_D_` at 6px radius with 4px gaps. A stripe, not a card.

### Segmented Toggle
**Role:** The two- or three-way switch that swaps a pricing period or a feature set in place.
Rest state, `.v5.CuButtonV5_button__SDlee.CuButtonV5_tab__a8lnz.button-regular`: fill `#F8F9FA`, text `#646464`, 14px/600, padding 8px 8px, radius 10px, no border, no shadow. The active state is a separate row — `.v5.CuButtonV5_button__SDlee.CuButtonV5_tab-active__cS__Z.button-regular`, carrying `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` on two elements, "Yearly" and "100+ Integrations" — the shadow's other four carriers are `li.CuHomeTeamsTab4o_tabCardListElement___esQE`; its fill and padding are `not measured`. That two-layer shadow is one of the light-page shadows, and it buys a 1px lift — selection signalled physically, not by colour.

### Feature Tile Grid
**Role:** The lattice of product names that stands in for a feature list.
`.CuButton_button__2XIwY.CuButton_buttonShadow__wF2uA.CuWallOfFeatures_featureTile__h21qA`: fill `#FFFFFF`, 14px/700 at 21px, padding 0px, radius 0px, border 1px `#E8E8E8`, no shadow, box 138×127px. The non-interactive twin `.CuWallOfFeatures_featureTile__h21qA.CuWallOfFeatures_noHover__3UqDy` measures the same box, fill and border. Labels run 14px/500 at 20px, −0.15px, in `#838383`. Four corner tiles break the mesh: `.CuWallOfFeatures_parentTileProject__c8X7l` and its three siblings fill `#FFFFFF` with `#7B68EE` text at 16px/400 and rotate a single 12px radius outward, so the block reads as one panel.

### Content Card
**Role:** The scrolling capability card on the enterprise page.
`.CuContentCardV5_wrapper__IRhG_.v5.CuContentCardGrid_card__e_80Y.CuContentCardGrid_clickToScrollCard__H6c9L`: fill `#F8F9FA`, padding 16px 16px, radius 8px, no border, no shadow, box 273×261–312px — two heights from one row, so the card is width-locked and copy-flexible. Its title `.CuTitle_title__mV35_.display-xs.CuContentCardV5_title__nrR_V` is 18px/650 at 24px, −0.54px, in `#090C1D`. On `#FFFFFF`, a `#F8F9FA` fill is a seven-unit luminance step, and that step alone is the card.

### Comparison Table Cell
**Role:** The plan-by-plan feature matrix on the enterprise page.
`._td_ubmr6_78._compareCell_ubmr6_100.text-sm` measures three ways. Plain cell: no fill, border 1px `#CECEEA`, padding 4px 4px, radius 0px, Inter 14px/400 at 20px with −0.15px, box 119×95px. Highlighted column: fill `#F8F2FF`, same border, same box. And one borderless `#F8F2FF` cell at 119×94px, where the column terminates. `#CECEEA` and `#F8F2FF` are carried by this table alone — a violet-tinted rule and fill instead of the `#E8E8E8` hairline, with `#514B81` on a single row header (`th ×1`, `._th_ubmr6_77._featureCell_ubmr6_89`) — its six other carriers are the footer's `._legalLinks_sg5ru_82` and `._copyrightLockup_sg5ru_83`.

### Dark Feature Card
**Role:** The Brain capability card — mono label, one sentence, one animated visual.
`.Brain2WhatsNew_card__NtBm2`: fill `#000000`, padding 0px, radius 0px, no border, no shadow, box 359×394px. Label `.Brain2WhatsNew_cardLabel__mAIxj.caption-regular` is Sometype Mono 16px/500 at 20px in `#EEEEEE`; body `.Brain2WhatsNew_cardDescription__3tGsK.text-sm` is Inter 14px/500 at 20px, −0.15px, in `#B4B4B4`; the rule `.Brain2WhatsNew_divider__DBwtU` draws a 1px `#2A2A2A` edge — `#808080` is only its inherited text colour. A black card on a black page is invisible, so separation comes from the 1px `#2A2A2A` edge on the grid that holds the cards — lines and light, not planes.

### Terminal Pill
**Role:** The streaming work-item chip in the Brain hero.
`.Brain2HeroFinal_cvPill__cp3z7`: fill `rgba(255, 255, 255, 0.02)`, Sometype Mono 11px/400 at 11px, padding 5px 10px, radius 999px, border 1px `#2A2A2A`, no shadow, box 112–201×23px. A 2% white fill lifts the pill about five luminance units off `#000000`; the `#2A2A2A` hairline does the real work. Inside, `.Brain2HeroFinal_cvPillType__zyW5N` sets the key in `#7B7B7B` and `.Brain2HeroFinal_cvPillLabel__7PdZA` the value in `#EEEEEE`: `task: ship api v3`. Line-height equals font size — a 23px pill holding 11px type on 5px of air.

## Do's and Don'ts

### Do
- Fill display headlines with `#202020 → #8F8F8F` rather than a flat ink.
- Track display type hard: −3.2px at 80px ("The best AI is your AI"), −3.04px at 76px ("A new era of humans, with Super Agents"), −2.1px at 60px, −1.68px at 48px. Display rows from 48px up hold −0.035em; below that the tracking spreads, from −0.02em on the 36px card title (`.Brain2Features_cardTitle__oEg4F`) to −0.047em on the 34px stat row (`.ScrollingNumbers_textClip__1rTn3`).
- Set eyebrows in Sometype Mono, uppercase — "Memory & Preferences" `.Brain2WhatsNew_cardLabel__mAIxj.caption-regular` at 16px/500 — and let "AI Chats" `.Brain2HeroFinal_plLabel__dj_xh` keep its +0.23px at 11.5px.
- Use 8px radius for controls, 12px for cards and large buttons, 999px or 70px for pills, 50% for dots. Cards are the exception — the content card takes the 8px control radius and the stat card takes `12px 12px 0px 0px`.
- Separate light cards with a 1px `#E8E8E8` border or a `#F8F9FA` fill step; separate dark cards with a 1px `#2A2A2A` border.
- Keep sections at 80px vertical padding, and reserve 160px for a band that changes the canvas, as `.HomeBrain2Section_heroBand__tT7D9` does.
- Let the black bands run edge to edge and let the type inside hold its own measure — the inner blocks carry no side padding, and the 48px inset belongs to the light pages (`._contentWrapper_hggtp_187`).

### Don't
- Don't colour a call to action. The repeating control fills are `#202020`, `#F0F0F0`, `#F8F9FA`, `#FFFFFF` and `#E8E8E8`; the one saturated button fill, `#EC3609` on `.Brain2HeroFinal_button__TLM5u.Brain2HeroFinal_buttonPrimary__7imH4`, is a single Brain-page exception, and one-off fills sit beside it — `#141414`, `rgba(216, 77, 12, 0.2)` on the Brain page and `#EDF6FD` on the p1 tab nav.
- Don't reach for shadow to separate light-page cards. `.CuContentCardGrid_clickToScrollCard__H6c9L`, `.CuWallOfFeatures_featureTile__h21qA` and `.CuHomeImpact4o_statCard__O8BHY` all measure `shadow none`.
- Don't blend the two systems' hairlines: `#E8E8E8` on black and `#2A2A2A` on white both fail.
- Don't let the Brain gradient touch a button, a border or body text — `.PersonalityCardVisual_glow__3M5ie`, `.Brain2MemoryVisual_glow__9mn_8` and `.EveryModelCardVisual_glow__49ZQP` carry it as glow, and that rarity keeps it readable as "AI".
- Don't round the feature lattice. `.CuWallOfFeatures_featureTile__h21qA` measures radius 0px on all 44 interactive tiles; only the four parent tiles take a 12px corner.
- Don't set body copy heavier than 500 — running text measures Inter 400 and 500, while 600 and 700 sit on buttons and column headings.
- Don't add a second grey: `#F8F9FA` fills `.CuContentCardGrid_clickToScrollCard__H6c9L` and the page banner, `#F0F0F0` belongs to controls like `.ui._loginButton_1ojt5_108._hideOnSm_1ojt5_244`.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas (light) | `#FFFFFF` | The marketing ground, and the fill of tiles and stat cards on it |
| 0 | Canvas (dark) | `#000000` | The Brain ground and the home page's 160px `.HomeBrain2Section_heroBand__tT7D9` — 47% of painted background area. The closing band `.HomeBrain2Section_closingBand__8aVza` measures `#000002`. |
| 1 | Box | `#F8F9FA` | Content cards, the announcement strip, tab rest state |
| 1 | Control | `#F0F0F0` | Secondary buttons — a control plane, not a card plane |
| 1 | Dark panel | `#030303` | Raised Brain cards and ambient pills, one unit off the void |
| 2 | Dark inset | `#111111` | Window and menu interiors, usually the top stop of an `#111111 → #000000` fade |
| 2 | Table highlight | `#F8F2FF` | The emphasised column in the comparison matrix |
| — | Hairline (light) | `#E8E8E8` | 1px structure on white |
| — | Hairline (dark) | `#2A2A2A` | 1px structure on black |

## Elevation

Depth is drawn, not cast. The light **system**'s repeated shadows are minimal: `rgba(13, 21, 48, 0.05) 0px 4px 10px 0px` on 24 app tiles, the two-layer `rgba(0, 0, 0, 0.1)` tab lift on six controls, and a `rgb(255, 255, 255) 0px 0px 0px 1.5px` ring on seven overlapping avatars. The home page also carries the Brain cards' panel and inset glows, and the embedded product chrome paints its own. On the Brain pages the logic inverts — elements emit light rather than drop it. Node dots carry `rgba(66, 204, 119, 0.8) 0px 0px 6px 0px`; hero orbs each carry a 10px glow at 0.85 alpha in their own hue. Floating panels throw `rgba(0, 0, 0, 0.17) -34px -13px 37px 0px, rgba(0, 0, 0, 0.2) -9px -3px 20px 0px` up and to the left, and the active skill pill stacks a `rgb(42, 42, 42) 0px 0px 0px 1px inset` ring with magenta and blue blooms at 0.1 alpha.

## Imagery

Four modes, kept apart. Live product UI rendered as real markup rather than flat screenshots — a task list with "Refactor auth middleware" and "Migrate DB to Postgres 16", priority flags, soft-tone status chips at 6px radius (`#E7F9F5` on `#067A6F`, `#EAF1FE` on `#1D4ED8`, `#FFEDD5` on `#99543A`). Third-party marks: a greyscale client wall and integration logos in white squares at 11px radius. One piece of hero art — a noise-grain silhouette in coral-to-red behind a chromatic 3D mask, in a 14px-radius frame. On the Brain page, vector diagrams instead of imagery: a concentric green radar with dashed orbits, glowing nodes and mono callouts. Icons are single-weight line glyphs — no fills, no duotone, no colour.

## Layout

Contained, with deliberate exceptions. Content sits inside `--size-container-current: 1160px` with the nav at 1120px, both *(declared, not painted)*. Section rhythm is flat — 80px on 18 blocks, with single instances at 140px, 92px and 64px. What breaks containment is colour: `.HomeBrain2Section_heroBand__tT7D9` at 160px, `.HomeBrain2Section_closingBand__8aVza` at 80px and `.Brain2IcpStories_wrapper__65DNT.v5` at 80px run the full viewport width while their type holds the same measure, so the page reads as a white column with black chapters cut through it. The footer is five link columns plus a download stack, each link a 214×32px hit-area at 9px radius (`.ui._columnListLink_jp7j6_238`), with a dark variant that swaps ink from `#646464` to `#B4B4B4`.

## Typography Voice

Marketing mode is Plus Jakarta Sans at enormous size and severe negative tracking, set in 700 with a value gradient across the line, so hierarchy comes from scale and from fade rather than weight or colour. Line-height rides just above 1.05 (79.8px on 76px) and only relaxes to 1.2 at 80px, locking a two-line headline into a single mass. Product mode is Sometype Mono, uppercase, at 11–16px, tracking flipped positive at 11.5px — labels that read like a terminal prompt and refuse the display face's compression. Every section announces itself twice: once as a whisper in monospace, once as a shout that trails off.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF` (marketing) / `#000000` (Brain)
- text: `#202020` (marketing) / `#EEEEEE` (Brain)
- surface: `#F8F9FA` (marketing) / `#030303` (Brain)
- border: `#E8E8E8` (marketing) / `#2A2A2A` (Brain)
- accent: `#0091FF → #FA24CE → #FC6D7B → #FD9A46` (a glow on `.EveryModelCardVisual_glow__49ZQP`, not a control fill)
- primary action: `#202020` on light, `#FFFFFF` on dark

## Example Component Prompts
1. **Primary Button**: Filled `#202020`, `#FFFFFF` label in Inter 14px weight 600, padding 8px 12px, border-radius 8px, no border, no shadow; hover darkens to `#202020` at 80% opacity.
2. **Gradient Headline**: An `h1` in Plus Jakarta Sans weight 700 at 60px, line-height 66px, letter-spacing −2.1px, filled `linear-gradient(#202020, #8F8F8F)` via `background-clip: text`, max two lines, on `#FFFFFF`.
3. **Content Card**: 273px wide, filled `#F8F9FA`, padding 16px, border-radius 8px, no border and no shadow, holding a Plus Jakarta Sans 18px weight 650 title at 24px/−0.54px in `#090C1D` above Inter 14px/20px body in `#646464`.
4. **Terminal Pill**: An inline chip filled `rgba(255, 255, 255, 0.02)` with a 1px `#2A2A2A` border, border-radius 999px, padding 5px 10px, on `#000000`, holding Sometype Mono 11px/11px — a key in `#7B7B7B` then a value in `#EEEEEE`.
5. **Feature Tile Lattice**: A grid of 138×127px cells filled `#FFFFFF` with 1px `#E8E8E8` borders and 0px radius, each holding a line icon above a Plus Jakarta Sans 14px weight 500 label at 20px/−0.15px in `#838383`; the four corner cells take a 12px outer radius, an anchor ink of `#7B68EE` and a visible `h3` title in `#242449` (`.CuTitle_title__mV35_.h3`, e.g. "Projects").

## Similar Brands
- **Linear** — greyscale chrome with one saturated gradient held back for the AI surface, and display type that trusts scale over weight.
- **Vercel** — the same white/black polarity, hairline-bordered cards without shadow, a monospace face on technical labels.
- **Raycast** — dark surfaces built from 1px lines and coloured glow rather than raised planes, mono metadata under sans headings.
- **Stripe** — a neutral, type-led marketing page where the colour is a multi-stop gradient working as identity, not accent.
- **Framer** — oversized, tightly tracked display headings on white, with live product UI embedded as real interface.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FFFFFF;
  --color-void: #000000;
  --color-ink: #202020;
  --color-ink-inherited: #292D34;
  --color-ink-secondary: #646464;
  --color-ink-tertiary: #838383;
  --color-heading-navy: #090C1D;
  --color-box: #F8F9FA;
  --color-control: #F0F0F0;
  --color-hairline: #E8E8E8;
  --color-dark-ink: #EEEEEE;
  --color-dark-ink-muted: #B4B4B4;
  --color-dark-hairline: #2A2A2A;
  --color-dark-panel: #030303;
  --color-dark-inset: #111111;
  --color-signal: #42CC77;
  --color-accent-purple: #6647F0;
  --color-accent-blue: #0091FF;
  --color-accent-violet: #7B68EE;
  --color-table-rule: #CECEEA;
  --color-table-highlight: #F8F2FF;
  --color-table-header-ink: #514B81;
  --color-brain-cta: #EC3609;
  --color-pill-fill: rgba(255, 255, 255, 0.02);
  --color-nav-backdrop: rgba(255, 255, 255, 0.9);
  --color-nav-backdrop-dark: rgba(17, 17, 17, 0.9);
  --gradient-headline: linear-gradient(#202020, #8F8F8F);
  --gradient-brain: linear-gradient(#0091FF, #FA24CE, #FC6D7B, #FD9A46);
  --gradient-shimmer: linear-gradient(#0091FF, #A43CB4, #F100E3);
  --gradient-dark-panel: linear-gradient(#111111, #000000);

  /* Typography — Families */
  --font-display: 'Plus Jakarta Sans', Figtree, Manrope, ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', 'Inter Tight', Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Sometype Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-system: -apple-system, 'SF Pro Text', 'SF Pro', system-ui, sans-serif;

  /* Typography — Scale */
  --text-caption: 11px;       --leading-caption: 11px;
  --text-caption-lg: 11.5px;  --leading-caption-lg: 17.25px;
  --text-label: 14px;         --leading-label: 14px;
  --text-body: 14px;          --leading-body: 20px;
  --text-body-mono: 14px;     --leading-body-mono: 18px;
  --text-body-lg: 16px;       --leading-body-lg: 24px;
  --text-title: 18px;         --leading-title: 24px;
  --text-heading-sm: 26px;    --leading-heading-sm: 32.5px;
  --text-stat: 34px;          --leading-stat: 34px;
  --text-heading-md: 36px;    --leading-heading-md: 41.4px;
  --text-display-xl: 48px;    --leading-display-xl: 55.2px;
  --text-display-2xl: 60px;   --leading-display-2xl: 66px;
  --text-display-3xl: 76px;   --leading-display-3xl: 79.8px;
  --text-display-max: 80px;   --leading-display-max: 96px;
  --tracking-body: -0.15px;
  --tracking-title: -0.54px;
  --tracking-display-xl: -1.68px;
  --tracking-display-2xl: -2.1px;
  --tracking-display-3xl: -3.04px;
  --tracking-display-max: -3.2px;
  --tracking-caption-lg: 0.23px;

  /* Spacing */
  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-gutter: 48px;
  --spacing-section: 80px;
  --spacing-section-tall: 96px;
  --spacing-band: 160px;

  /* Border Radius */
  --radius-xs: 6px;
  --radius-control: 8px;
  --radius-link: 9px;
  --radius-tab: 10px;
  --radius-icon: 11px;
  --radius-card: 12px;
  --radius-frame: 14px;
  --radius-button-lg: 15px;
  --radius-ambient: 18px;
  --radius-icon-pill: 20px;
  --radius-eyebrow: 54px;
  --radius-skill-pill: 70px;
  --radius-pill: 999px;
  --radius-dot: 50%;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FFFFFF;
  --color-void: #000000;
  --color-ink: #202020;
  --color-ink-inherited: #292D34;
  --color-ink-secondary: #646464;
  --color-ink-tertiary: #838383;
  --color-heading-navy: #090C1D;
  --color-box: #F8F9FA;
  --color-control: #F0F0F0;
  --color-hairline: #E8E8E8;
  --color-dark-ink: #EEEEEE;
  --color-dark-ink-muted: #B4B4B4;
  --color-dark-hairline: #2A2A2A;
  --color-dark-panel: #030303;
  --color-dark-inset: #111111;
  --color-signal: #42CC77;
  --color-accent-purple: #6647F0;
  --color-accent-blue: #0091FF;
  --color-accent-violet: #7B68EE;
  --color-table-rule: #CECEEA;
  --color-table-highlight: #F8F2FF;
  --color-table-header-ink: #514B81;
  --color-brain-cta: #EC3609;
  --color-pill-fill: rgba(255, 255, 255, 0.02);
  --color-nav-backdrop: rgba(255, 255, 255, 0.9);
  --color-nav-backdrop-dark: rgba(17, 17, 17, 0.9);

  --font-display: 'Plus Jakarta Sans', Figtree, Manrope, ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', 'Inter Tight', Roboto, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Sometype Mono', 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --font-system: -apple-system, 'SF Pro Text', 'SF Pro', system-ui, sans-serif;

  --text-caption: 11px;
  --text-caption--line-height: 11px;
  --text-caption-lg: 11.5px;
  --text-caption-lg--line-height: 17.25px;
  --text-caption-lg--letter-spacing: 0.23px;
  --text-label: 14px;
  --text-label--line-height: 14px;
  --text-body: 14px;
  --text-body--line-height: 20px;
  --text-body--letter-spacing: -0.15px;
  --text-body-mono: 14px;
  --text-body-mono--line-height: 18px;
  --text-body-lg: 16px;
  --text-body-lg--line-height: 24px;
  --text-title: 18px;
  --text-title--line-height: 24px;
  --text-title--letter-spacing: -0.54px;
  --text-heading-sm: 26px;
  --text-heading-sm--line-height: 32.5px;
  --text-stat: 34px;
  --text-stat--line-height: 34px;
  --text-heading-md: 36px;
  --text-heading-md--line-height: 41.4px;
  --text-display-xl: 48px;
  --text-display-xl--line-height: 55.2px;
  --text-display-xl--letter-spacing: -1.68px;
  --text-display-2xl: 60px;
  --text-display-2xl--line-height: 66px;
  --text-display-2xl--letter-spacing: -2.1px;
  --text-display-3xl: 76px;
  --text-display-3xl--line-height: 79.8px;
  --text-display-3xl--letter-spacing: -3.04px;
  --text-display-max: 80px;
  --text-display-max--line-height: 96px;
  --text-display-max--letter-spacing: -3.2px;

  --spacing-2xs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 16px;
  --spacing-3xl: 20px;
  --spacing-4xl: 24px;
  --spacing-gutter: 48px;
  --spacing-section: 80px;
  --spacing-section-tall: 96px;
  --spacing-band: 160px;

  --radius-xs: 6px;
  --radius-control: 8px;
  --radius-link: 9px;
  --radius-tab: 10px;
  --radius-icon: 11px;
  --radius-card: 12px;
  --radius-frame: 14px;
  --radius-button-lg: 15px;
  --radius-ambient: 18px;
  --radius-icon-pill: 20px;
  --radius-eyebrow: 54px;
  --radius-skill-pill: 70px;
  --radius-pill: 999px;

  --shadow-tile: rgba(13, 21, 48, 0.05) 0px 4px 10px 0px;
  --shadow-tab: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-dot: rgba(66, 204, 119, 0.8) 0px 0px 6px 0px;
  --shadow-orb: rgba(251, 158, 121, 0.85) 0px 0px 10px 0px;
  --shadow-panel: rgba(0, 0, 0, 0.17) -34px -13px 37px 0px, rgba(0, 0, 0, 0.2) -9px -3px 20px 0px;
}
```