---
version: alpha
name: Circle
description: "Aurora light over midnight, then white paper and six rounded pastels."
colors:
  on-surface: "#3E8DEF"
  surface: "#FFFFFF"
  secondary: "#262626"
  primary: "#408FED"
  default-ink: "#000000"
  heading-ink: "#191B1F"
  body-ink: "#0A0A0A"
  subdue-grey: "#737373"
  nav-on-dark-inks: "#42464D"
  hairlines: "#E5E5E5"
  cool-ground: "#F7F9FA"
  midnight: "#0F0F35"
  plus-ground-pair: "#1D1715"
  brand-blues: "#506CF0"
  feature-pastels: "#E0EAFC"
  tag-pairs: "#DCFFF5"
typography:
  overline:
    fontFamily: Inter
    fontSize: 10px
    fontWeight: 400
    lineHeight: 12px
    letterSpacing: 0em
  micro:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  body-xs:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.25px
  body-sm:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.25px
  body-base:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.5px
  body-md:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -1px
  body-xl:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.92px
    letterSpacing: -0.5px
  h5:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 50.4px
    letterSpacing: -0.5px
  h4:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.5px
  h2:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -1px
  h1:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -1.5px
  display-md:
    fontFamily: Inter
    fontSize: 80px
    fontWeight: 400
    lineHeight: 84.8px
    letterSpacing: -1px
  display-stat:
    fontFamily: Inter
    fontSize: 90px
    fontWeight: 400
    lineHeight: 100px
    letterSpacing: -1px
  display-hero:
    fontFamily: Inter
    fontSize: 110px
    fontWeight: 400
    lineHeight: 92.4px
    letterSpacing: -1px
rounded:
  pill-controls-tags-avatars-rails: 9999px
  panel-portrait-tile-careers-card: 24px
  card-job-row: 20px
  feature-shell: 32px
  media-block: 16px
  thumbnail: 12px
  slider-bubble: 100px
  small-radius: 4px
  medium-radius: 8px
spacing:
  2xs: 2px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px
  section-sm: 60px
  section-sm-2: 64px
  section-md: 80px
  section-lg: 120px
  section-xl: 160px
---
# Circle — Style Reference

> Aurora light over midnight, then white paper and six rounded pastels.

**Theme:** light

Circle paints two systems off one typeface. The marketing pages — home, pricing and careers — live on white paper with a midnight indigo `#0F0F35` ground opening and closing the home page, while the Plus branded-app page swaps the canvas for a warm near-black `#1D1715` over a bone `#F8F5F2` band; the split falls at the product tier, not the section. The signature move belongs to the white system: each product chapter is keyed to its own pastel, and the selected tab chip carries exactly the hex of the panel it opens, so colour is navigation rather than decoration. Type is Inter almost throughout, carrying a 10px uppercase compliance caption and a 110px headline set at 0.84 line-height with −1px tracking alike — scale tends to do the work of hierarchy, and display lines mostly hold at 700. Geometry is just as narrow: a fully-round pill for things you click, a 24px panel for things that hold content, and hairlines at `#E5E5E5` and `#F5F5F5` where another system would put a shadow.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Paper | `#FFFFFF` | `--color-surface-primary` | Canvas and card fill both: the marketing ground, and the fill of every raised box the census measures. At `rgba(255, 255, 255, 0.5)` it fills the glass testimonial on `.flex.flex-col.gap-4.xl:gap-6` and inks the dark tab-row labels on `.px-2.py-2.lg:px-[18px].lg:py-2.5`; at `rgba(255, 255, 255, 0.1)`, the ghost pill. |
| Default Ink | `#000000` | `--color-ink-default` | The inherited ink of the document tree, on more elements than any other value — but not a choice to make: rendered headings measure `#191B1F`, body `#0A0A0A`. Its visible jobs are the video-poster fill, the ring on the numbered step, and the `#000000 → rgba(0, 0, 0, 0.7)` caption scrim. |
| Heading Ink | `#191B1F` | `--color-heading` | The ink of nearly every measured heading, 36px section head to 90px careers display. Reserve it for type; the census paints it as a fill once. |
| Body Ink | `#0A0A0A` | `--color-primary-text` | Body copy, button labels, the uppercase eyebrow. A shade off the default ink, and the difference is the point. |
| Subdue Grey | `#737373` | `--color-text-subdue` | Footer links at 16px/500, small print at 14px/500, and the 4px round separator dot. |
| Secondary Ink | `#262626` | `--color-text-secondary` | Sub-headline type and, among the inks, a border: the 1px ring on the small outline trial pill. |
| Nav & On-Dark Inks | `#42464D` `#F9FAFB` `#FAFAFA` | `--color-nav-on-light`, `--color-nav-on-dark`, `--color-gray-50` | One nav component, two inks: slate on white, near-white over the dark grounds. `#FAFAFA` carries list type inside the black pricing card. |
| Hairlines | `#E5E5E5` `#F5F5F5` `#F0F3F5` | `--color-stroke-primary`, `--color-stroke-secondary`, `--color-stroke-tertiary` | Footer and form at `#E5E5E5`, white-on-white cards at `#F5F5F5`, careers cards at `#F0F3F5`. At this contrast a border is a seam, not an edge. |
| Cool Ground | `#F7F9FA` | `--color-surface-secondary` | The alternating band on careers — the lightest possible step off paper, and the system holds it there. |
| Midnight | `#0F0F35` | `--color-surface-brand` | The indigo band opening and closing the home page, and one careers section besides. A brand ground, not a neutral dark: full-bleed, behind portraits and white display type. |
| Plus Ground Pair | `#1D1715` / `#F8F5F2` | `--color-surface-plus`, `--color-surface-bone` | The warm black canvas of the branded-app page and the bone band beneath it. Keep the pair together and off the cool `#F7F9FA`. |
| Action Gradient | `#408FED → #3E1BC9` | `--gradient-action` | The primary CTA fill, and the nearest thing to a brand colour on a click target. Blue into violet, on a 9999px pill. |
| Prism Gradient | `#3E8DEF → #C95BCF → #E35E2C` | `--gradient-prism` | Clipped to headline words: its gradient observations land on `.heading.hero-heading.text-mask.inline-block` and its text-mask siblings, so it tints type rather than boxes. |
| Brand Blues | `#506CF0` `#3655E5` | `--color-primary`, `--color-surface-highlight` | `#506CF0` is the underlined inline link ("Go to help center"), measured as text; `#3655E5` is its solid-fill counterpart on emphasis blocks and the pricing ribbon. |
| Feature Pastels | `#E0EAFC` `#FBDDD2` `#F2DBF5` `#E4F6F4` `#FFF0D8` `#FFE0E2` | `--color-feature-*` | Six chapter tints, each painted twice: once as the selected chip, once as the 40px panel below it. The pairing is the wayfinding. |
| Tag Pairs | `#DCFFF5`/`#168967`, `#F3E8FF`/`#7E22CE`, `#FFEAD8`/`#D56A11` | `--color-tag-*` | Department tags on the careers list: a pale fill with its own saturated ink. Tint and text travel together. |

## Tokens — Typography

### Inter — the entire system: display, headings, body, labels, captions and numerals · `--font-family-primary`
- **Substitute:** system-ui, -apple-system, "Segoe UI"
- **Weights:** 400, 500, 600, 700, 900
- **Sizes:** 10px, 11px, 12px, 14px, 16px, 18px, 20px, 24px, 36px, 40px, 56px, 64px, 80px, 90px, 110px
- **Line height:** 0.84 at 110px (92.4px), 0.94 at 90px black, 1.11 at 90px bold, 1.14 at 56px, up to 1.6 at 20px
- **Letter spacing:** −1.5px on the 64px home statement, −1px across 56–110px display, −0.5px at 18–36px, −0.25px and −0.1px on UI text, and two positive steps, +0.7px on the 14px/600 uppercase eyebrow and +0.1px on the 14px/500 pricing list items
- **Role:** The measured type across the capture. Display sits at 700 with negative tracking and UI at 500; weight 900 is carried by the statistic numerals on `.text-[32px].font-black.leading-[36px].-tracking-[1px]` ("2023", "2025"), and 600 by the eyebrow `.font-semibold.text-body-xs.leading-5.tracking-[0.7px]` ("Website") and the pill `.inline-flex.items-center.justify-center.rounded-full`.

### ui-sans-serif — the fallback head of the stack · `--font-family-fallback`
- **Substitute:** system-ui, -apple-system, sans-serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** The generic that catches the page before Inter loads. The census paints it at one weight and gives it no heading or text row, so treat it as insurance rather than a second voice.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Overline | 10px | 12px | normal | `--text-overline` |
| Micro | 11px | 16px | normal | `--text-micro` |
| Caption | 12px | 16px | normal | `--font-size-caption` |
| Body XS | 14px | 17.92–20px | −0.25px to +0.7px | `--font-size-body-xs` |
| Body SM | 16px | 20–24px | −0.25px to normal | `--font-size-body-sm` |
| Body Base | 18px | 23.94–28px | −0.5px to −0.25px | `--font-size-body-base` |
| Body MD | 20px | 24–32px | −1px to normal | `--font-size-body-md` |
| Body XL | 24px | 31.92px | −0.5px | `--font-size-body-xl` |
| H5 | 36px | 43.92–50.4px | −0.5px to normal | `--font-size-h5` |
| H4 | 40px | 48px | −0.5px | `--font-size-h4` |
| H2 | 56px | 64px | −1px | `--font-size-h2` |
| H1 | 64px | 70.4–72px | −1.5px to −1px | `--font-size-h1` |
| Display MD | 80px | 83.2–84.8px | −1px to normal | `--font-size-display-md` |
| Display Stat | 90px | 84.6–100px | −1px | `--text-display-stat` |
| Display Hero | 110px | 92.4px | −1px | `--text-display-hero` |

## Tokens — Spacing & Shapes

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--gap-hairline` |
| xxs | 4px | `--gap-xxs` |
| xs | 8px | `--gap-xs` |
| sm | 12px | `--gap-sm` |
| md | 16px | `--gap-md` |
| lg | 20px | `--gap-lg` |
| xl | 24px | `--gap-xl` |
| 2xl | 32px | `--gap-xxl` |
| 3xl | 40px | `--gap-xxxl` |
| Section sm | 60px | `--section-sm` |
| Section sm+ | 64px | `--section-sm-plus` |
| Section md | 80px | `--section-md` |
| Section lg | 120px | `--section-lg` |
| Section xl | 160px | `--section-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Pill — controls, tags, avatars, rails | 9999px |
| Panel, portrait tile, careers card | 24px |
| Card, job row | 20px |
| Feature shell (outer / inner) | 32px / 31px |
| Media block | 16px |
| Thumbnail | 12px |
| Slider bubble | 100px |
| Blur field, carousel button | 100% / 50% |
| Small radius | 4px *(declared, not painted)* |
| Medium radius | 8px *(declared, not painted)* |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card lift | `rgba(169, 169, 169, 0.08) 0px 4px 8px 0px` | `--shadow-card` |
| Plan glow | `rgba(0, 0, 0, 0.08) 0px 0px 20px 0px` | `--shadow-plan` |
| Focus ring | `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(83, 156, 242) 0px 0px 0px 2px` | `--shadow-focus` |
| Live dot | `rgba(34, 197, 94, 0.6) 0px 0px 8px 2px` | `--shadow-live` |
| Rail inset | `rgba(0, 0, 0, 0.12) 0px 1px 4px 0px inset` | `--shadow-rail-inset` |
| Chip (explicit none) | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px` | `--shadow-none` |

### Layout
- **Page max-width:** 1176px (footer rule row), 1280px (home feature shells); full-bleed bands run the 1920px viewport.
- **Section gap:** 60px leads, then 80px, 160px, 64px and 120px.
- **Card padding:** 40px pastel panels, 48px careers card, 32px white card, 20px glass testimonial, 12px/48px job row.
- **Element gap:** 8px leads, then 16px, 32px, 24px, 12px.

## Components

### Nav Link
**Role:** The five top-level destinations, carried in the sticky bar on every page.
Built on the `.text-base.font-medium.leading-6.transition-opacity` text rows: Inter 16px/500, 24px line-height, tracking normal. One component, two inks — `#F9FAFB` over the home and Plus dark grounds, `#42464D` on pricing and careers white. Items sit in sentence case, and "Product" and "Resources" carry a chevron on `.h-4.w-4.transition-transform.flex-none`. Weight 500 is the whole emphasis budget; hover is opacity, per the class name, not colour.

### Primary CTA Pill
**Role:** The trial and demo action — the one control filled with the brand gradient.
`.inline-flex.items-center.justify-center.rounded-full` at 16px/600, 20px line-height, −0.25px tracking, radius 9999px, no border, no shadow. Two sizes: 18px/32px padding in a 166–336×56px box, and a compact 14px/24px in a 150×48px box. The fill is the `#408FED → #3E1BC9` gradient the census records on this class, label ink `#FAFAFA`. The gradient does the shouting, so the type holds at the same 600 the eyebrow uses.

### Outline Trial Pill
**Role:** The quieter trial link, used where a gradient would compete with a priced card or a photograph.
`.inline-flex.items-center.justify-center.rounded-full` in its bordered variant: Inter 14px/600, 18px line-height, −0.1px tracking, ink `#0A0A0A`, 11px/18px padding, radius 9999px, 1px `#262626` border, no shadow, box 130×42px, text "Start free trial". No fill — the ring is the whole treatment, and at 14px it stays under the gradient pill when both sit in one row.

### Email Capture Form
**Role:** The hero's single-field signup — an input and its submit welded into one pill.
`.flex.flex-col.gap-3.md:flex-row` is the shell: no fill, no padding, radius 9999px, 1px `#E5E5E5` border, no shadow, box 405–500×58–66px, holding "Email address Start for free". The field is `.w-full.peer.placeholder:text-[#737373].hover:placeholder:text-[#`, filled `#FFFFFF` with `#0A0A0A` ink at 16px/400/24px, 4px/24px padding, radius 9999px, no border, focus shadow `rgb(255, 255, 255) 0px 0px 0px 0px, rgb(83, 156, 242) 0px 0px 0px 2px`, placeholder in the subdue grey the class names.

### Feature Tab Chip
**Role:** The row of product names above each chapter, switching the panel below without leaving the page.
`.whitespace-nowrap.shadow-none.rounded-full.px-4` measures two ways. Resting: no fill, `#0A0A0A` ink, Inter 18px/500 at 28px line-height and −0.5px tracking, 8px/16px padding, radius 9999px, no border, boxes 83–210×44px. Selected: same padding and radius, weight lifted to 600, plus a pastel fill — `#E0EAFC` "Discussions", `#FBDDD2` "iOS & Android", `#F2DBF5` "Circle AI", `#E4F6F4` "Branded checkout", `#FFF0D8` "Email marketing", `#FFE0E2` "Website". Its shadow is three transparent layers: flatness declared, not omitted.

### Pastel Feature Panel
**Role:** The chapter body a selected chip opens — copy, checklist and product screenshot on one tint.
`.flex.relative.flex-row.gap-8`, 40px padding, radius 24px, no border, no shadow, box 1198×548px, holding "Give your members a space they'll actually want ". Each instance takes one of the six chapter tints, and that fill is the same hex as its chip — which is what makes the tab row legible at a glance. The checklist ticks inside pick the tint's saturated sibling rather than a second accent *(inferred)*.

### Hairline Feature Shell
**Role:** The full-width container each product chapter sits in — the system's largest repeating frame.
Two nested rows build it. The outer `.h-full.w-full.lg:rounded-[--border-radius].md:rounded-[--border-` has no fill, 1px padding, radius 32px, no border, and the card shadow `rgba(169, 169, 169, 0.08) 0px 4px 8px 0px`, box 1280×866–951px. The inner `.h-full.w-full.lg:rounded-[--inner-border-radius].md:rounded-[--i` repeats it at radius 31px in a 1278×864–949px box. That 1px inset and 1px radius delta is how the shell gets a gradient edge without a border.

### Testimonial Glass Card
**Role:** A customer quote laid over the home page's dark artwork.
`.flex.flex-col.gap-4.xl:gap-6`, filled `rgba(255, 255, 255, 0.5)`, 20px padding, radius 24px, no border, no shadow, box 400×154–202px, carrying "Circle has hosted two communities I've built. E". Half-opacity white lifts the quote off the photograph — a veil, not a plate. Attribution runs 14px/700 `#FFFFFF` for the name, 14px/500 for the role, beside a 40px round avatar.

### Creator Portrait Tile
**Role:** The face wall — the proof section that names the creators running on the platform.
`.relative.w-full.overflow-hidden.rounded-3xl` with no fill, no padding, radius 24px, no border, no shadow. Two sizes: 140–188×140–262px tiles holding "Jay Shetty Podcast Host & Life Coach", and 340×540px tiles holding the video quotes. The photograph fills the frame edge to edge; the name sits in 20px/700 white over a `#000000 → rgba(0, 0, 0, 0.7)` bottom-up scrim, the role beneath at 11px/500. A backing video poster is filled `#000000` at radius 0 and clipped by the parent.

### Job Listing Row
**Role:** One open role on the careers list — title, department, location, salary and the link out.
`.bg-white.rounded-[20px].py-3.px-7`: filled `#FFFFFF`, 12px/48px padding, radius 20px, no border, no shadow, box 1090×156px, holding "Senior Brand Designer Growth Design Anywhere $10". It sits on the cool `#F7F9FA` ground, so a white fill alone is all the separation it needs. Title runs 20px/700 `#000000`, meta 16px/400 `#5F6980`, and "View job" 16px/400 `#282828` pinned right.

### Department Tag
**Role:** The team a role belongs to, set beside its title.
`.inline-flex.items-center.shrink-0.rounded-full`, Inter 12px/500 at 16px line-height and normal tracking, 4px/10px padding, radius 9999px, no border, no shadow. The class measures three ways, once per department pair: `#DCFFF5` with `#168967` for "Growth Marketing" in a 61–123×24px box, `#F3E8FF` with `#7E22CE` for "Growth Design" in a 105–112×24px box, and `#FFEAD8` with `#D56A11` for "CMS Builder", a single carrier on the careers page whose box the component census does not measure.

### Footer
**Role:** The sitemap, compliance strip and legal line that closes every page.
`.w-full.bg-white.border-[#e5e5e5].border-t` — filled `#FFFFFF`, no padding of its own, radius 0, 1px `#E5E5E5` border, no shadow, box 1920×1025px, repeated on every captured page. Inside, `.border-t-0.lg:border-t.lg:pt-6.min-h-[64px]` draws the second `#E5E5E5` rule at 24px top padding in a 1176×64px box — that width is the page's real content column. Headings use the 14px/600 `#0A0A0A` eyebrow at +0.7px; links 16px/500 `#737373`; certification captions 10px/500 uppercase.

## Do's and Don'ts

### Do
- Pair every chapter chip with a panel of the identical hex — `#E0EAFC` chip over `#E0EAFC` panel — so the tint carries the navigation.
- Set display type at 700 and let size do the hierarchy: 110px over 92.4px at −1px, 56px over 64px, 36px over 43.92px.
- Separate white on white with a 1px `#F5F5F5` or `#E5E5E5` hairline before reaching for a fill or a shadow.
- Keep the grounds paired: cool `#F7F9FA` with midnight `#0F0F35`, warm bone `#F8F5F2` with `#1D1715`.
- Give clickable things a 9999px radius and content containers a 24px one; the radius census counts 129 elements at 9999px against 83 at 24px.

### Don't
- Don't invent a second accent for click targets. The gradient `#408FED → #3E1BC9` fills eight of the ten gradient pills on `.inline-flex.items-center.justify-center.rounded-full`, and `#506CF0` is measured as text.
- Don't pour the prism gradient into a box. Its gradient observations land on `.heading.hero-heading.text-mask.inline-block` and its text-mask siblings — it colours words.
- Don't out-shadow the pages: the deepest measured is `rgba(0, 0, 0, 0.08) 0px 0px 20px 0px` on `.flex.flex-col.max-w-[320px].lg:max-w-none`, and the workhorse is `rgba(169, 169, 169, 0.08) 0px 4px 8px 0px`.
- Don't uppercase running text. The positive tracking in the census is +0.7px on the eyebrow `.font-semibold.text-body-xs.leading-5.tracking-[0.7px]` ("Website") and +0.1px on 42 pricing list items at 14px/500; the 10px caption is normal, and the rest is negative.
- Don't tint body copy for emphasis — the ink ladder is `#191B1F`, `#0A0A0A`, `#737373`, and weight 500 does the rest.
- Don't reach for pure `#000000` on a heading by default. Nearly every measured heading sits at `#191B1F`; the exception is the 20px/700 "Senior Brand Designer" row on `.text-[20px].font-bold.leading-[140%]`, and elsewhere the black is inherited.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | Marketing ground; also the fill of every shadowed card. |
| 1 | Cool ground | `#F7F9FA` | Alternating band, 160px vertical padding. |
| 1 | Bone ground | `#F8F5F2` | The warm counterpart under Plus black, also 160px. |
| 2 | Pastel panel | `#E0EAFC` and its five siblings | Chapter bodies, 40px padding, radius 24px. |
| 2 | Glass | `rgba(255, 255, 255, 0.5)` | Quote cards over photography. |
| 3 | Midnight | `#0F0F35` | Full-bleed brand band, 190px and 80px padding. |
| 4 | Warm black | `#1D1715` | The Plus canvas and its pricing-page echo. |

## Elevation

Depth is luminance and hairlines, with shadow as a whisper. The home page's feature shells carry `rgba(169, 169, 169, 0.08) 0px 4px 8px 0px` — a grey-tinted 8px blur that reads as a fold in paper. The white content card `.builder-block.builder-2589eebfe33c4c21a1fd4ca808b2e309.css-9zsfk` stacks that shadow with a 1px `#F5F5F5` border at 32px padding and radius 20px: the whole vocabulary in one element, hairline first, shadow second. The pricing columns go further with `rgba(0, 0, 0, 0.08) 0px 0px 20px 0px`, a spreadless glow separating three plans. Everything else separates by ground.

## Imagery

Photography is the identity, and it is people. Portraits of named creators fill 24px-radius tiles edge to edge under a `#000000 → rgba(0, 0, 0, 0.7)` bottom-up scrim; they run as a grid on the home page and a marquee on the Plus page. Product screenshots are the second stream, inside the 32px/31px hairline shell or a pastel panel, and shown as real interface rather than abstracted mock-up. The Plus page adds hardware: phone renders on warm black, a screen-filled phone wall on pricing. Careers runs documentary, with a team portrait at 24px radius and tilted snapshot stacks. Logo walls flatten to one grey so no partner brand competes. The hero's aurora field is an image, not a painted fill: the inventory carries no hex for it, so treat it as art direction, not a token.

## Layout

Contained, centred, generous. The page container holds a 100px horizontal inset throughout; the footer's rule row measures 1176px — the true content column — while the home page's feature shells run wider at 1280px inside a 1920px viewport. Bands break out of that column deliberately: the footer, the midnight CTA block and the Plus black run full-bleed, type still aligned to the inner column. Section rhythm is coarse — 60px repeats most often, then 80px, 160px, 64px and 120px, with 48px to 100px of side inset on nested blocks. Inside a section it is fine: 8px leads, then 16px, 32px, 24px and 12px, a 4px ladder landing on no odd number above 2px. The nav is sticky and full-width, inverting its ink rather than its layout when the ground goes dark. Feature chapters repeat one structure: heading, one-line promise, chip row, then a two-column pastel panel — copy and checklist left, screenshot right.

## Typography Voice

Inter runs in two registers and the tracking tells you which one you are in. The display register sits at 700 from 36px to 110px, tracking −1.5px to normal, with line-heights that fall below the type size at the top: 110px over 92.4px is 0.84, so the two-line hero locks into one mass. The deepest tracking is not on the biggest line — the 64px home statement takes −1.5px while the 110px hero takes −1px, because optical compensation sets the value, not size. The UI register sits at 500 from 10px to 20px with gentle negative tracking (−0.1px to −0.5px) and leading up to 1.6. Two exceptions punctuate it: the 14px/600 eyebrow at +0.7px, the larger of the two positive steps measured, and the 900 numerals at 90px over 84.6px. Weight 600 lands where a thing can be clicked, so boldness reads as a promise of interaction.

## Agent Prompt Guide

## Quick Color Reference
- background: `#FFFFFF`
- text: `#191B1F`
- surface: `#F7F9FA`
- border: `#E5E5E5`
- accent: `#506CF0`
- primary action: `#408FED → #3E1BC9` (gradient pill)

## Example Component Prompts
1. **Primary CTA Pill**: A 9999px-radius anchor filled with a linear gradient from `#408FED` to `#3E1BC9`; label in Inter 16px/600 at 20px line-height, −0.25px tracking, ink `#FAFAFA`; padding 18px 32px, no border, no shadow, box 166×56px. Add a compact variant at padding 14px 24px in a 150×48px box.
2. **Feature Chapter Block**: A 32px-radius container, 1px padding, shadow `rgba(169, 169, 169, 0.08) 0px 4px 8px 0px`, wrapping an inner surface at 31px radius. Inside: a 20px/500 heading in `#737373` at 28px and −0.5px tracking, an 18px/500 line in `#0A0A0A` at 23.94px, a row of 9999px chips at padding 8px 16px, 18px/500 `#0A0A0A` with the active one filled `#F2DBF5` at 600, above a 24px-radius `#F2DBF5` panel with 40px padding.
3. **Job Listing Row**: A `#FFFFFF` row at 20px radius, padding 12px 48px, no border and no shadow, 1090px × 156px, on a `#F7F9FA` section. Title in Inter 20px/700 `#000000`; a 9999px tag at padding 4px 10px, 12px/500, filled `#DCFFF5` with ink `#168967`; meta at 16px/400 `#5F6980`; right-aligned "View job" at 16px/400 `#282828`.
4. **Glass Testimonial**: A 24px-radius card filled `rgba(255, 255, 255, 0.5)`, 20px padding, 24px internal gap, 400×154–202px, over photography. Quote in Inter 16px/500 `#FFFFFF` at 24px line-height and −0.25px tracking; below it a 40px round avatar, a 14px/700 `#FFFFFF` name, a 14px/500 role.
5. **Sticky Nav Bar**: A full-width bar over `#0F0F35`: wordmark left, five links centred in Inter 16px/500 at 24px line-height in `#F9FAFB`, right-aligned "Log in" plus a 9999px pill at padding 10.0054px 18px, 1px `#F8F9FA` border, 14px/600 `#FEFEFE` label. On `#FFFFFF`, switch link ink to `#42464D`.

## Similar Brands
- **Linear** — single-typeface discipline with heavy negative tracking, a gradient-lit dark opening above a white body.
- **Framer** — pastel product panels and round controls on white paper, colour keying sections rather than decorating them.
- **Stripe** — a multi-stop prism gradient as the one chromatic event while the type stays neutral.
- **Vercel** — near-black and paper-white extremity, hairlines instead of shadows, one gradient for the action.
- **Webflow** — creator portrait grids and product screenshots in large-radius shells as the proof device.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-surface-primary: #FFFFFF;
  --color-ink-default: #000000;
  --color-heading: #191B1F;
  --color-primary-text: #0A0A0A;
  --color-text-subdue: #737373;
  --color-text-secondary: #262626;
  --color-nav-on-light: #42464D;
  --color-nav-on-dark: #F9FAFB;
  --color-gray-50: #FAFAFA;
  --color-stroke-primary: #E5E5E5;
  --color-stroke-secondary: #F5F5F5;
  --color-stroke-tertiary: #F0F3F5;
  --color-surface-secondary: #F7F9FA;
  --color-surface-brand: #0F0F35;
  --color-surface-plus: #1D1715;
  --color-surface-bone: #F8F5F2;
  --color-surface-highlight: #3655E5;
  --color-primary: #506CF0;
  --color-meta: #5F6980;
  --color-link-out: #282828;
  --color-rail: #D2D7DB;
  --color-track: #E4E7EB;
  --color-feature-blue: #E0EAFC;
  --color-feature-peach: #FBDDD2;
  --color-feature-lilac: #F2DBF5;
  --color-feature-mint: #E4F6F4;
  --color-feature-sand: #FFF0D8;
  --color-feature-rose: #FFE0E2;
  --color-tag-green-bg: #DCFFF5;
  --color-tag-green-ink: #168967;
  --color-tag-purple-bg: #F3E8FF;
  --color-tag-purple-ink: #7E22CE;
  --color-tag-orange-bg: #FFEAD8;
  --color-tag-orange-ink: #D56A11;
  --color-live: #22C55E;
  --color-glass: rgba(255, 255, 255, 0.5);
  --color-glass-dim: rgba(255, 255, 255, 0.1);
  --color-on-dark-muted: rgba(255, 255, 255, 0.6);
  --gradient-action: linear-gradient(to right, #408FED, #3E1BC9);
  --gradient-prism: linear-gradient(to right, #3E8DEF, #C95BCF, #E35E2C);
  --gradient-scrim: linear-gradient(to top, #000000, rgba(0, 0, 0, 0.7));

  /* Typography — Families */
  --font-family-primary: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-family-fallback: ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Typography — Scale */
  --text-overline: 10px;
  --text-micro: 11px;
  --font-size-caption: 12px;
  --font-size-body-xs: 14px;
  --font-size-body-sm: 16px;
  --font-size-body-base: 18px;
  --font-size-body-md: 20px;
  --font-size-body-xl: 24px;
  --font-size-h5: 36px;
  --font-size-h4: 40px;
  --font-size-h2: 56px;
  --font-size-h1: 64px;
  --font-size-display-md: 80px;
  --text-display-stat: 90px;
  --text-display-hero: 110px;
  --leading-overline: 12px;
  --leading-body-sm: 20px;
  --leading-body-base: 28px;
  --leading-body-md: 32px;
  --leading-h5: 43.92px;
  --leading-h2: 64px;
  --leading-h1: 72px;
  --leading-display-stat: 84.6px;
  --leading-display-hero: 92.4px;
  --tracking-eyebrow: 0.7px;
  --tracking-xs: -0.1px;
  --tracking-sm: -0.25px;
  --tracking-md: -0.5px;
  --tracking-lg: -1px;
  --tracking-xl: -1.5px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --gap-hairline: 2px;
  --gap-xxs: 4px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 16px;
  --gap-lg: 20px;
  --gap-xl: 24px;
  --gap-xxl: 32px;
  --gap-xxxl: 40px;
  --section-sm: 60px;
  --section-sm-plus: 64px;
  --section-md: 80px;
  --section-lg: 120px;
  --section-xl: 160px;
  --inset-page: 100px;
  --inset-card: 48px;

  /* Border Radius */
  --radius-thumb: 12px;
  --radius-media: 16px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-shell-inner: 31px;
  --radius-shell: 32px;
  --radius-bubble: 100px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-card: rgba(169, 169, 169, 0.08) 0px 4px 8px 0px;
  --shadow-plan: rgba(0, 0, 0, 0.08) 0px 0px 20px 0px;
  --shadow-focus: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(83, 156, 242) 0px 0px 0px 2px;
  --shadow-live: rgba(34, 197, 94, 0.6) 0px 0px 8px 2px;
  --shadow-rail-inset: rgba(0, 0, 0, 0.12) 0px 1px 4px 0px inset;
}
```

### Tailwind v4
```css
@theme {
  --color-surface-primary: #FFFFFF;
  --color-ink-default: #000000;
  --color-heading: #191B1F;
  --color-primary-text: #0A0A0A;
  --color-text-subdue: #737373;
  --color-text-secondary: #262626;
  --color-nav-on-light: #42464D;
  --color-nav-on-dark: #F9FAFB;
  --color-gray-50: #FAFAFA;
  --color-stroke-primary: #E5E5E5;
  --color-stroke-secondary: #F5F5F5;
  --color-stroke-tertiary: #F0F3F5;
  --color-surface-secondary: #F7F9FA;
  --color-surface-brand: #0F0F35;
  --color-surface-plus: #1D1715;
  --color-surface-bone: #F8F5F2;
  --color-surface-highlight: #3655E5;
  --color-primary: #506CF0;
  --color-meta: #5F6980;
  --color-link-out: #282828;
  --color-rail: #D2D7DB;
  --color-track: #E4E7EB;
  --color-feature-blue: #E0EAFC;
  --color-feature-peach: #FBDDD2;
  --color-feature-lilac: #F2DBF5;
  --color-feature-mint: #E4F6F4;
  --color-feature-sand: #FFF0D8;
  --color-feature-rose: #FFE0E2;
  --color-tag-green-bg: #DCFFF5;
  --color-tag-green-ink: #168967;
  --color-tag-purple-bg: #F3E8FF;
  --color-tag-purple-ink: #7E22CE;
  --color-tag-orange-bg: #FFEAD8;
  --color-tag-orange-ink: #D56A11;
  --color-live: #22C55E;
  --color-glass: rgba(255, 255, 255, 0.5);
  --color-glass-dim: rgba(255, 255, 255, 0.1);
  --color-on-dark-muted: rgba(255, 255, 255, 0.6);

  --font-primary: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-fallback: ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-overline: 10px;
  --text-micro: 11px;
  --text-caption: 12px;
  --text-body-xs: 14px;
  --text-body-sm: 16px;
  --text-body-base: 18px;
  --text-body-md: 20px;
  --text-body-xl: 24px;
  --text-h5: 36px;
  --text-h4: 40px;
  --text-h2: 56px;
  --text-h1: 64px;
  --text-display-md: 80px;
  --text-display-stat: 90px;
  --text-display-hero: 110px;
  --leading-overline: 12px;
  --leading-body-sm: 20px;
  --leading-body-base: 28px;
  --leading-body-md: 32px;
  --leading-h5: 43.92px;
  --leading-h2: 64px;
  --leading-h1: 72px;
  --leading-display-stat: 84.6px;
  --leading-display-hero: 92.4px;
  --tracking-eyebrow: 0.7px;
  --tracking-xs: -0.1px;
  --tracking-sm: -0.25px;
  --tracking-md: -0.5px;
  --tracking-lg: -1px;
  --tracking-xl: -1.5px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --spacing-hairline: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;
  --spacing-section-sm: 60px;
  --spacing-section-sm-plus: 64px;
  --spacing-section-md: 80px;
  --spacing-section-lg: 120px;
  --spacing-section-xl: 160px;
  --spacing-inset-page: 100px;
  --spacing-inset-card: 48px;

  --radius-thumb: 12px;
  --radius-media: 16px;
  --radius-card: 20px;
  --radius-panel: 24px;
  --radius-shell-inner: 31px;
  --radius-shell: 32px;
  --radius-bubble: 100px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  --shadow-card: rgba(169, 169, 169, 0.08) 0px 4px 8px 0px;
  --shadow-plan: rgba(0, 0, 0, 0.08) 0px 0px 20px 0px;
  --shadow-focus: rgb(255, 255, 255) 0px 0px 0px 0px, rgb(83, 156, 242) 0px 0px 0px 2px;
  --shadow-live: rgba(34, 197, 94, 0.6) 0px 0px 8px 2px;
  --shadow-rail-inset: rgba(0, 0, 0, 0.12) 0px 1px 4px 0px inset;
}
```