---
version: alpha
name: Framer
description: "Pure black to every edge, white type, and a blue held in reserve."
colors:
  on-surface: "#FFFFFF"
  surface: "#000000"
  outline: "rgba(255, 255, 255, 0.06)"
  primary: "rgba(255, 255, 255, 0.6)"
  framer-blue: "#0099FF"
  framer-deep-blue: "#0055FF"
  signal-green: "#4CD963"
  live-green: "#00BB88"
  metadata-grey: "#999999"
  panel: "#242424"
  pill: "#1E1E1E"
  control: "#1F1F1F"
  code-well: "#111111"
  ghost-fill: "rgba(255, 255, 255, 0.1)"
  terminal-clay: "#D67A5C"
  default-link-ink: "#0000EE"
typography:
  display:
    fontFamily: GT Walsheim Medium
    fontSize: 54px
    fontWeight: 500
    lineHeight: 54px
    letterSpacing: -2.16px
  stat:
    fontFamily: Inter
    fontSize: 54px
    fontWeight: 400
    lineHeight: 43.2px
    letterSpacing: -2.16px
  heading:
    fontFamily: Inter
    fontSize: 44px
    fontWeight: 400
    lineHeight: 48.4px
    letterSpacing: -1.76px
  subheading:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: -0.2px
  metric:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.8px
  title:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.3px
    letterSpacing: -0.2px
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.1px
  label:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 20.25px
    letterSpacing: -0.1px
  footer-heading:
    fontFamily: Inter
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: -0.15px
  nav:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.2px
  caption:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: -0.1px
  meta:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.14px
  micro:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0em
  nano:
    fontFamily: Inter
    fontSize: 7px
    fontWeight: 400
    lineHeight: 7px
    letterSpacing: 0.21px
rounded:
  buttons-links-chips-most-cards: 8px
  micro-tag: 3px
  square-chip: 4px
  code-chip: 6px
  small-control: 5px
  input-container: 10px
  status-pill-media-panel: 15px
  large-card-cookie-banner: 18px
  video-and-feature-panel: 20px
  deep-panel: 25px
  pill-track: 100px
spacing:
  3xs: 4px
  2xs: 5px
  xs: 6px
  sm: 7px
  md: 8px
  lg: 10px
  xl: 15px
  2xl: 20px
  3xl: 30px
  4xl: 40px
  gutter: 52px
  band: 64px
  section: 120px
---
# Framer — Style Reference
> Pure black to every edge, white type, and a blue held in reserve.

**Theme:** dark

Framer's marketing pages share one black field — nav band, body, cards and footer all take it — so surfaces separate by luminance step far more often than by background. The signature move is a refusal of size: below the hero, section titles sit in Inter Variable at 18px/400, the same face, size and weight as the paragraph beneath them, and what separates title from prose is that the title is full white and the prose is white at sixty percent. Display type is the exception, and it is loud: GT Walsheim Medium at 500, 54px on a 54px line at −2.16px, locking the two-line hero into a solid block of letterforms. Controls stay small and tight, nearly all 8px-radius — 34–35px tall in the marketing bands, 22px in the footer — a call to action treated as UI, not as a poster element. Colour is the discipline: black, white, translucent white and near-black greys, with Framer Blue kept for the recommended plan and the numbers that prove a claim.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Black | `#000000` | `--color-black` | Canvas, and the fill of things standing on it: `.framer-2C6Pk.framer-Grv0o.framer-zprce9`, the nav band `.framer-1gyv5v7`, the footer, the story card `.framer-Vm6Ys.framer-0k2u9.framer-naRDe.framer-13l9zkl`. Swatch: "#000000 Black". |
| White | `#FFFFFF` | `--color-white` | Primary ink, and the fill of both conversion controls — `.framer-16mrjhl.framer-enysp5` ("Sign up") and the white variant of `.framer-VpmL1.framer-qkzqfa.framer-v-qkzqfa.framer-lt5xhr` ("Get started for free"). Swatch: "#FFFFFF White". |
| White 60% | `rgba(255, 255, 255, 0.6)` | `--color-white-60` | The workhorse secondary ink: nav labels ("Platform"), body prose ("A professional design agent, native to the canva…"), de-emphasised footer links. |
| Framer Blue | `#0099FF` | `--color-blue` | Its own swatch ("#0099FF Framer Blue"); in the UI it fills the control reading "Start with Pro" and inks proof-numbers like "1.1s". Tints at 10% and 22% fill panels, 42% draws borders. |
| Framer Deep Blue | `#0055FF` | `--color-deep-blue` | Painted once here, in the swatch tile "#0055FF Framer Deep Blue" — a brand asset the marketing pages do not spend. |
| Signal Green | `#4CD963` | `--color-green` | Status affirmative: the 8px dot `.framer-10xidxf`, the "GOOD" label, the "SOC 2" line, a 10% tint behind the compliance chips. Status, not action. |
| Live Green | `#00BB88` | `--color-live` | Ink for "Live" at Inter 13px/500; its 10% tint fills the pill it sits in, `.framer-OB0Jk.framer-1cl768y.framer-v-k5113i`. |
| Metadata Grey | `#999999` | `--color-grey` | Counts and separators inside the product screenshots — "·", "320". |
| Panel | `#242424` | `--color-panel` | The most-used lifted fill: `.framer-2kw70q` (padding 0px 10px, radius 8px) and the 14×14px chip `.framer-32ok31`. |
| Pill | `#1E1E1E` | `--color-pill` | The neutral status pill `.framer-OB0Jk.framer-1cl768y.framer-v-1acnc2u` at radius 15px, holding labels like "Inspiration". |
| Control | `#1F1F1F` | `--color-control` | Dark control and panel fill — `.framer-krQrc.framer-oollii.framer-v-oollii` (radius 15px), `.framer-molehw` (radius 8px). |
| Code Well | `#111111` | `--color-code` | The inline code chip `.framer-text.framer-styles-preset-7a2d2k` and the terminal blocks; one step off black. |
| Ghost Fill | `rgba(255, 255, 255, 0.1)` | `--color-ghost` | Secondary button fill on `.framer-VpmL1.framer-qkzqfa.framer-v-qkzqfa.framer-lt5xhr` ("Download app"); a 15% sibling covers the tertiary case. |
| Hairline | `rgba(255, 255, 255, 0.06)` | `--color-hairline` | Fill of the 562×1px divider rule `.framer-1rmx0ug`, and the border on the home page's small floating cards. The code chip uses 5%. |
| Terminal Clay | `#D67A5C` | `--color-clay` | Ink of the terminal frame "╭─── Claude Code v2.1.170 ─…". Borrowed from a CLI; outside the control palette. |
| Default Link Ink | `#0000EE` | `--color-link-default` | The user-agent link colour computed on anchors and their children; the label is painted by a nested element. An unset inherited value, not a brand colour. |

## Tokens — Typography

### GT Walsheim Medium — hero and section openers at weight 500, set solid · `--font-display`
- **Substitute:** Aeonik, Söhne Breit, Neue Haas Grotesk Display
- **Weights:** 500
- **Sizes:** 44px, 54px
- **Line height:** 43.2px–54px — 0.8 to 1.1 of the size across the census's GT Walsheim rows
- **Letter spacing:** −1.76px at 44px, −2.16px at 54px (a constant −0.04em)
- **Role:** Hero and section-opener headings ("Framer is the AI design agent for every step fro…", "Agents that work alongside you, not instead of y…") plus the stat "99.99%", whose 43.2px line lets the numeral crowd its own baseline.

### Inter Variable — everything that is not a hero, at a single weight · `--font-sans`
- **Substitute:** Inter, SF Pro Text, ui-sans-serif
- **Weights:** 400
- **Sizes:** 7px, 12px, 14px, 15px, 16px, 18px, 22px, 24px
- **Line height:** 7px–31.2px; 1.0 for labels (14px/14px, 15px/15px), 1.3–1.5 for prose (14px/19.6px, 16px/24px, 18px/24.3px)
- **Letter spacing:** negative on most rows, −0.01px to −0.6px, with 46 elements at `normal` and one positive value: +0.21px on the 7px "New" tag
- **Role:** Section titles, body copy, nav, pricing tables, footer — hierarchy carried by colour (white vs `rgba(255, 255, 255, 0.6)`) and line-height, not weight.

### Inter — the UI-inside-the-UI face, where the weights live · `--font-ui`
- **Substitute:** Inter Variable, SF Pro Text, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 10px, 12px, 13px, 20px
- **Line height:** 12px–24px (1.2 for chrome, 1.6 for list rows)
- **Letter spacing:** `normal` on most rows; −0.26px at 13px, −0.8px at 20px
- **Role:** Type inside the product screenshots — CMS row labels, counters ("320", "256"), the "Live" tag, the 20px/600 metric "400". Weight contrast is allowed here: it is a picture of an app.

### Inter Medium — the named 500 cut · `--font-ui-medium`
- **Substitute:** Inter 500, SF Pro Text Medium · **Weights:** 500
- **Sizes / Line height / Letter spacing:** not measured
- **Role:** A separately loaded medium face beside the UI type.

### Input Mono Regular — terminal and code voice · `--font-mono`
- **Substitute:** Berkeley Mono, iA Writer Mono, ui-monospace · **Weights:** 400
- **Sizes / Line height / Letter spacing:** not measured
- **Role:** Fixed-width type in the install and terminal panels.

### Input Mono Bold — emphasis inside mono blocks · `--font-mono-bold`
- **Substitute:** Berkeley Mono Bold, JetBrains Mono Bold · **Weights:** 700
- **Sizes / Line height / Letter spacing:** not measured
- **Role:** The bold cut in this stack, spent on monospace rather than headings.

### Azeret Mono — the code-chip face · `--font-mono-alt`
- **Substitute:** Söhne Mono, Roboto Mono · **Weights:** 400
- **Sizes:** 14.4px · **Line height:** 19.44px · **Letter spacing:** −0.2px
- **Role:** The face of the inline code chip, beside Input Mono in the stack.

### JetBrains Mono — code-sample mono · `--font-mono-code`
- **Substitute:** IBM Plex Mono, Fira Code · **Weights:** 400
- **Sizes / Line height / Letter spacing:** not measured
- **Role:** Code listings inside the agent panel.

### Times — inherited serif · `--font-serif`
- **Substitute:** Times New Roman, Georgia · **Weights:** 400
- **Sizes / Line height / Letter spacing:** not measured
- **Role:** A default serif in the computed stack; no designed role.

### sans-serif — generic fallback · `--font-fallback`
- **Substitute:** system-ui, Helvetica Neue, Arial · **Weights:** 400
- **Sizes / Line height / Letter spacing:** not measured
- **Role:** The terminal fallback at the end of every stack.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 54px | 54px | −2.16px | `--text-display` |
| Stat | 54px | 43.2px | −2.16px | `--text-stat` |
| Heading | 44px | 48.4px | −1.76px | `--text-heading` |
| Subheading | 24px | 31.2px | −0.2px | `--text-subheading` |
| Metric | 20px | 24px | −0.8px | `--text-metric` |
| Title | 18px | 24.3px | −0.2px | `--text-title` |
| Body | 16px | 24px | −0.1px | `--text-body` |
| Label | 15px | 20.25px | −0.1px | `--text-label` |
| Footer heading | 15px | 15px | −0.15px | `--text-footer-heading` |
| Nav | 14px | 14px | −0.2px | `--text-nav` |
| Caption | 14px | 19.6px | −0.1px | `--text-caption` |
| Meta | 14px | 14px | −0.14px | `--text-meta` |
| Micro | 12px | 14.4px | normal | `--text-micro` |
| Nano | 7px | 7px | +0.21px | `--text-nano` |

## Tokens — Spacing & Shapes

**Base unit:** 5px — 10px and 5px carry most gaps, with 4, 6, 7 and 8 filling the sub-scale.   **Density:** compact at control scale, generous at section scale — a 34px button inside a 120px band.

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 4px | `--spacing-3xs` |
| 2xs | 5px | `--spacing-2xs` |
| xs | 6px | `--spacing-xs` |
| sm | 7px | `--spacing-sm` |
| md | 8px | `--spacing-md` |
| lg | 10px | `--spacing-lg` |
| xl | 15px | `--spacing-xl` |
| 2xl | 20px | `--spacing-2xl` |
| 3xl | 30px | `--spacing-3xl` |
| 4xl | 40px | `--spacing-4xl` |
| gutter | 52px / 60px | `--spacing-gutter` |
| band | 64px | `--spacing-band` |
| section | 120px | `--spacing-section` |

### Border Radius
| Element | Value |
|---------|-------|
| Buttons, links, chips, most cards | 8px |
| Micro tag (`.framer-kcBTu.framer-1sisfx8.framer-v-1sisfx8`) | 3px |
| Square chip (`.framer-32ok31`) | 4px |
| Code chip (`.framer-text.framer-styles-preset-7a2d2k`) | 6px |
| Small control (`.framer-rc2Tf.framer-1pjvk2z.framer-v-1pjvk2z`) | 5px |
| Input / container | 10px |
| Status pill, media panel | 15px |
| Large card, cookie banner | 18px |
| Video and feature panel | 20px |
| Deep panel (`.framer-1gidngg`, `.framer-ESuOr.framer-njega.framer-o3jmk3.framer-v-o3jmk3`) | 25px |
| Pill track | 100px |
| Status dot (`.framer-10xidxf`) | 100% |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Raised control | `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px` | `--shadow-raised` |
| Micro lift | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px` | `--shadow-micro` |
| Dark ring | `rgb(17, 17, 17) 0px 0px 0px 1px` | `--shadow-ring` |
| Light ring | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px` | `--shadow-ring-light` |
| Overlay | `rgba(0, 0, 0, 0.1) 0px 10px 20px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-overlay` |
| Float | `rgba(0, 0, 0, 0.2) 0px 26.2434px 41.9894px 0px` | `--shadow-float` |

### Layout
- **Page max-width:** 1200px content column (1240px is the footer's own box); bands run the full 1920px viewport — page wrapper 1920×8102–10858px, nav band 1920×64px.
- **Section gap:** 120px vertical padding across all pages; also 100px, 80px, 64px, 60px, 50px, and a 200px hold on the enterprise page.
- **Card padding:** 40px story card, 30px and 25px feature blocks, 20px footer and swatch tile, 10px small panels, 8px horizontal inside pills.
- **Element gap:** 10px dominant, 5px close behind, 15px between grouped blocks, 7px inside a button, 40px between columns.
- **Horizontal inset:** 60px and 52px on the widest inset blocks.

## Components

### Top Navigation Bar
**Role:** The persistent strip carrying the wordmark, the product menus and the account actions.
`.framer-1gyv5v7`: a `div` filled `#000000`, box 1920×64px, `padding 0px 0px`, `radius 0px`, `border none`, `shadow none`, on all four pages. Black on a black canvas with no drawn edge: the bar's presence is spelled by the type and the white "Sign up" button.

### Nav Link
**Role:** A menu item in the navigation bar and in the footer's link columns.
`.framer-g3IIp.framer-1lhjg5m.framer-v-1lhjg5m.framer-vlg2pn` is the default: an `a` with `fill none`, `padding 0px 0px`, `radius 8px`, `border none`, `shadow none`, box 17–131×22px, the most-repeated row in the component census. The variant `.framer-g3IIp.framer-1lhjg5m.framer-v-194d9av.framer-vlg2pn` fills `#000000` at box 37–80×22px. The row's own type measures 12px/400; the label is set by a nested element — "Platform" at Inter Variable 14px/400/14px, −0.2px, `rgba(255, 255, 255, 0.6)`, with only the current page's item in `#FFFFFF`. The 8px radius is the hover target, not a visible chip.

### Primary Button
**Role:** The conversion action — "Get started for free", and its nav twin "Sign up".
The white variant of `.framer-VpmL1.framer-qkzqfa.framer-v-qkzqfa.framer-lt5xhr`: `a`, `fill #FFFFFF`, `padding 10px 14px`, `radius 8px`, `border none`, `shadow none`, box 94–287×34–35px, 7px gap between label and icon. The nav's version is a separate class, `.framer-16mrjhl.framer-enysp5`: `fill #FFFFFF`, `padding 8px 10px`, `radius 8px`, `border none`, `shadow none`, box 66×30px, 10px gap. Most control rows record the anchor's own text colour as the inherited `#0000EE`, one white-fill row — two anchors on the enterprise page — as `#000000`; the black label is painted by a child the rows do not measure. Inverted, not coloured — on a black page the brightest rectangle is the CTA.

### Ghost Button
**Role:** The secondary action beside a primary — "Download app", "See Framer sites".
Same class, same geometry, different fill: `rgba(255, 255, 255, 0.1)` at `padding 10px 14px`, `radius 8px`, box 67–260×34–35px; a `rgba(255, 255, 255, 0.15)` sibling covers the tertiary case at box 107–287×34px. Both paint `border none` and `shadow none`.

### Blue Action Button
**Role:** The recommended plan on the pricing table — "Start with Pro".
`.framer-VpmL1.framer-qkzqfa.framer-v-qkzqfa.framer-lt5xhr` again, filled `#0099FF`, `padding 10px 14px`, `radius 8px`, `border none`, `shadow none`, box 260×34px, painted once in the capture — geometry identical to the white and ghost variants.

### "New" Badge
**Role:** Flags a recently shipped item in the footer and menu lists.
`.framer-kcBTu.framer-1sisfx8.framer-v-1sisfx8`: a `div` with `fill none`, `padding 3px 3px`, `radius 3px`, `border none`, `shadow none`, box 23×13px, repeated across all pages. Its label is the smallest type here — Inter Variable 7px/400/7px with +0.21px tracking in `#FFFFFF`. The row paints neither fill nor border, so the hairline outline seen in the page is drawn by a child the census does not carry; rebuild it as a 1px `rgba(255, 255, 255, 0.06)` outline *(inferred)*.

### Status Pill
**Role:** A state or category tag inside the product screenshots — "Live", "Inspiration".
Two variants of one class. `.framer-OB0Jk.framer-1cl768y.framer-v-1acnc2u` is neutral: `fill #1E1E1E`, `padding 0px 8px`, `radius 15px`, `border none`, `shadow none`, box 29–96×20px. `.framer-OB0Jk.framer-1cl768y.framer-v-k5113i` is live: `fill rgba(0, 187, 136, 0.1)`, same padding and radius, box 54×20px, label in Inter 13px/500/20.8px `#00BB88`. Both use a 6px gap.

### Customer Story Card
**Role:** A logo-and-link tile in the "Trusted by teams shipping big sites" carousel.
`.framer-Vm6Ys.framer-0k2u9.framer-naRDe.framer-13l9zkl`: an `a` filled `#000000`, `padding 40px 40px`, `radius 18px`, `border none`, `shadow none`, box 360×460px, on the home and enterprise pages. A black card on a black canvas — the logo sits vertically centred, "Read story" at the bottom, and what makes it a card is the 18px corner: defined by radius, not fill.

### Inline Code Chip
**Role:** Wraps a technical token inside running enterprise copy — "L3/L4".
`.framer-text.framer-styles-preset-7a2d2k`: a `code` element, `fill #111111`, ink `#FFFFFF`, 14.4px/400/19.44px at −0.2px, `padding 2.16px 4.32px`, `radius 6px`, `border 1px rgba(255, 255, 255, 0.05)`, `shadow none`, box 56–111×22px. The fractional padding comes from an em-based rule: the chip hugs its glyphs tightly.

### Cookie Consent Banner
**Role:** The persistent consent overlay anchored to the lower-left of every page.
`.--framer-cookie-banner-container.--framer-cookie-banner-type-sim`: a `div` filled `#FFFFFF`, `radius 18px`, box 340×124px, carrying the census's one two-part shadow — `rgba(0, 0, 0, 0.1) 0px 10px 20px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset`. Body copy is `#222222` ("We use cookies to enhance your experience, analy…"). Its dismiss control `.__framer-cookie-component-button` is an `input` filled `#DEDEDE`, `#000000` ink at 14px/500/14px/−0.3px, `padding 10px 10px`, `radius 10px`, box 38×34px.

### Footer
**Role:** The seven-column site index plus trust, status and social rows.
`.framer-DHR4q.framer-FmnPF.framer-3wgpx.framer-v-3wgpx`: a `footer` filled `#000000`, `padding 20px 20px`, `radius 0px`, `border none`, `shadow none`, box 1240×728px, identical on all four pages. Column headings are Inter Variable 15px/400/15px at −0.15px in `#FFFFFF`; the links below drop to `rgba(255, 255, 255, 0.6)`. The social row is five 18×18px white glyph blocks (`.framer-VEMo0.framer-16zobti`, `.framer-yLy1B.framer-1dyg44s`, `.framer-Vv3bZ.framer-169563k`, `.framer-473jB.framer-6tzqx1`, `.framer-4Lhmf.framer-irgt7u`) at `radius 0px`. Column gaps: `not measured`.

## Do's and Don'ts

### Do
- Set the canvas to `#000000` and build upward by luminance: `#111111`, `#1E1E1E`, `#1F1F1F`, `#242424`.
- Use `rgba(255, 255, 255, 0.6)` for secondary text rather than a solid grey.
- Give controls `radius 8px` and `padding 10px 14px`; the radii census counts 546 elements at 8px, more than every other radius combined.
- Track display type at −0.04em: −2.16px at 54px, −1.76px at 44px, as `.framer-text.framer-styles-preset-1gzpg4m` and `.framer-text.framer-styles-preset-fbtpvo` paint it.
- Build badges as a 10% tint of the status colour with that colour full-strength as ink, as `.framer-OB0Jk.framer-1cl768y.framer-v-k5113i` pairs `rgba(0, 187, 136, 0.1)` with `#00BB88`.
- Let section titles share the body's size and weight — 18px/400 `#FFFFFF` above prose at 18px/400 `rgba(255, 255, 255, 0.6)`, as `.framer-text.framer-styles-preset-ojsfn5` and `.framer-text.framer-styles-preset-vn6u90` do.
- Keep the section rhythm at 120px, the padding the census counts most often — 17 sections and blocks.

### Don't
- Don't put a drop shadow on a card: of the sixteen box rows the layout census lists, fifteen paint `shadow none` — only `.framer-1kcln18` lifts, at `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px`.
- Don't add a second blue button to a view — `#0099FF` fills one control here, the "Start with Pro" variant of `.framer-VpmL1.framer-qkzqfa.framer-v-qkzqfa.framer-lt5xhr`.
- Don't reach for bold to make a heading: `.framer-text.framer-styles-preset-fbtpvo` ("Agents that work alongside you, not instead of y…") is GT Walsheim Medium 500 and `.framer-text.framer-styles-preset-ojsfn5` ("Design with an agent") is Inter Variable 400 — the weights the census lists for those families.
- Don't draw a border under the nav — `.framer-1gyv5v7` paints `border none` and `shadow none` on a fill identical to the canvas.
- Don't swap an opaque grey for `rgba(255, 255, 255, 0.1)` on secondary buttons; translucency is what lets one control class sit on canvas and on panel.
- Don't set a heading in `#999999`: solid grey belongs to the product screenshots ("320", "·"), page prose to translucent white.
- Don't spend `#0055FF` in the interface — the capture paints it on `.framer-waxEN.framer-7sRmL.framer-8uorw5.framer-v-8uorw5`, the swatch tile reading "#0055FF Framer Deep Blue", and nowhere else recorded.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#000000` | Page, nav band, footer, story card |
| 1 | Code Well | `#111111` | Code chips and terminal blocks; reads recessed |
| 2 | Pill | `#1E1E1E` | Status pills at radius 15px |
| 3 | Control | `#1F1F1F` | Dark buttons and small panels |
| 4 | Panel | `#242424` | Highest neutral — chips, list rows, lifted cards |
| — | Ghost | `rgba(255, 255, 255, 0.1)` | Surface-agnostic control fill |
| — | Inverted | `#FFFFFF` | Primary button and cookie overlay |

## Elevation

Depth is luminance, not shadow. The ladder from `#000000` through `#111111`, `#1E1E1E`, `#1F1F1F` to `#242424` spans about 14% of the available range, so surfaces separate by a whisper and edges do the rest: eight 1px `rgba(255, 255, 255, 0.06)` borders on the home page's small cards, a 1px `rgba(255, 255, 255, 0.05)` border on the code chip, a `rgb(17, 17, 17) 0px 0px 0px 1px` ring drawn as a shadow. Shadows go to what floats: the cookie overlay's `rgba(0, 0, 0, 0.1) 0px 10px 20px 0px` with its inset white ring, a `rgba(0, 0, 0, 0.2) 0px 2px 6px 0px` lift on small controls, and per-frame drops on the home page's animated cards — `0px 12.0021px 19.2034px`, `0px 25.7566px 41.2106px`, `0px 39.9979px 63.9966px`, all `rgba(0, 0, 0, 0.2)`.

## Imagery

Two registers, both photographic by proxy. First the product: screenshots of the canvas, the CMS table, the analytics chart and the agent panel, at true resolution inside rounded panels (15px and 20px radii) — the app is the hero image, not an illustration of it. Second, customer work: site thumbnails from Legora, miro, perplexity and mixpanel, each a miniature of a real page in full colour against the black grid. Customer logos are white marks with no containers. Abstract 3D, gradient mesh and stock photography are absent; the census records three gradients — a `#FFFFFF → rgba(0, 0, 0, 0.1)` fade on "uptime", a `rgba(0, 153, 255, 0.1) → rgba(28, 28, 28, 0.5)` panel wash and a flat `#FFFFFF → #FFFFFF` on `.framer-1s0280c`. Icons are 18×18px white glyph blocks at `radius 0px`.

## Layout

Bands run the full 1920px viewport; content sits in a 1200px column, 1240px on the footer alone. The home page repeats one composition: a left-aligned display heading with a control closing the row at the far right ("Start with agents", "Read stories"), a wide product panel, then a title-and-paragraph pair with an arrow link. The pricing page switches to a four-column card grid over a hairline-separated comparison table; the enterprise page pairs a 2×2 feature grid with an inline contact form. The same seven-column footer closes every page.

## Typography Voice

Two modes, rarely touching. Mode one is GT Walsheim Medium at 500 — 54px on a 54px line, 44px on a 48.4px line, at −0.04em — for the sentences meant to read as statements. The "99.99%" stat pushes further, to a 43.2px line under 54px letters. Mode two is Inter Variable at 400, covering everything else from 7px to 24px. The signature move lives there: one 14px size carries two line heights — 14px for labels and nav, 19.6px for prose. Hierarchy below the hero is carried by ink alone: an 18px/400 heading in `#FFFFFF` above 18px/400 prose in `rgba(255, 255, 255, 0.6)`. The black canvas turns that opacity step into a full tonal step, so a section opens without raising its voice.

## Agent Prompt Guide

## Quick Color Reference
- background: `#000000`
- text: `#FFFFFF`
- surface: `#242424`
- border: `rgba(255, 255, 255, 0.06)`
- accent: `#0099FF`
- primary action: `#FFFFFF`

## Example Component Prompts
1. **Primary button**: `background: #FFFFFF`, black label, `padding: 10px 14px`, `border-radius: 8px`, no border, no shadow, 34px tall, 7px gap before a trailing icon, label in Inter Variable 400.
2. **Ghost button**: Same geometry — `padding: 10px 14px`, `border-radius: 8px`, 34px tall — with `background: rgba(255, 255, 255, 0.1)` and a `#FFFFFF` label; `rgba(255, 255, 255, 0.15)` for the tertiary variant.
3. **Status pill**: 20px tall, `border-radius: 15px`, `padding: 0 8px`, `background: rgba(0, 187, 136, 0.1)`, label "Live" in Inter 500 13px/20.8px `#00BB88`, 6px gap.
4. **Section block**: A full-width band on `#000000`, `padding: 120px 60px`, heading in GT Walsheim Medium 500 at 44px/48.4px, `letter-spacing: -1.76px`, `#FFFFFF`; body in Inter Variable 400 at 18px/24.3px, `letter-spacing: -0.2px`, `rgba(255, 255, 255, 0.6)`.
5. **Story card**: 360×460px, `background: #000000`, `padding: 40px`, `border-radius: 18px`, no shadow, a 1px `rgba(255, 255, 255, 0.06)` edge *(inferred from tile p1-07)*, white logo vertically centred, "Read story →" in Inter Variable 400 at 18px/24.3px `#FFFFFF` below.

## Similar Brands
- **Linear** — black canvas, display type tracked tight, accent rationed to one state at a time.
- **Vercel** — pure black and white, near-zero chrome, inverted buttons as the primary action.
- **Raycast** — depth built from a ladder of near-black greys and translucent white fills rather than shadows.
- **Arc (The Browser Company)** — product screenshots as hero imagery, in rounded panels, so the app is the illustration.
- **Cursor** — dark marketing surface with one saturated blue for the recommended plan and the proof-numbers.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-blue: #0099FF;
  --color-deep-blue: #0055FF;
  --color-green: #4CD963;
  --color-live: #00BB88;
  --color-grey: #999999;
  --color-panel: #242424;
  --color-pill: #1E1E1E;
  --color-control: #1F1F1F;
  --color-code: #111111;
  --color-ghost: rgba(255, 255, 255, 0.1);
  --color-ghost-strong: rgba(255, 255, 255, 0.15);
  --color-hairline: rgba(255, 255, 255, 0.06);
  --color-clay: #D67A5C;
  --color-link-default: #0000EE;

  /* Typography — Families */
  --font-display: 'GT Walsheim Medium', Aeonik, ui-sans-serif, sans-serif;
  --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui-medium: 'Inter Medium', 'Inter', ui-sans-serif, sans-serif;
  --font-mono: 'Input Mono Regular', ui-monospace, monospace;
  --font-mono-bold: 'Input Mono Bold', ui-monospace, monospace;
  --font-mono-alt: 'Azeret Mono', ui-monospace, monospace;
  --font-mono-code: 'JetBrains Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', serif;
  --font-fallback: sans-serif;

  /* Typography — Scale */
  --text-display: 54px;   --leading-display: 54px;
  --text-stat: 54px;      --leading-stat: 43.2px;
  --text-heading: 44px;   --leading-heading: 48.4px;
  --text-subheading: 24px;--leading-subheading: 31.2px;
  --text-metric: 20px;    --leading-metric: 24px;
  --text-title: 18px;     --leading-title: 24.3px;
  --text-body: 16px;      --leading-body: 24px;
  --text-label: 15px;     --leading-label: 20.25px;
  --text-footer-heading: 15px; --leading-footer-heading: 15px;
  --text-nav: 14px;       --leading-nav: 14px;
  --text-caption: 14px;   --leading-caption: 19.6px;
  --text-meta: 14px;      --leading-meta: 14px;
  --text-micro: 12px;     --leading-micro: 14.4px;
  --text-nano: 7px;       --leading-nano: 7px;
  --tracking-display: -2.16px;
  --tracking-heading: -1.76px;
  --tracking-title: -0.2px;
  --tracking-body: -0.1px;
  --tracking-nav: -0.2px;
  --tracking-nano: 0.21px;

  /* Spacing */
  --spacing-3xs: 4px;
  --spacing-2xs: 5px;
  --spacing-xs: 6px;
  --spacing-sm: 7px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 15px;
  --spacing-2xl: 20px;
  --spacing-3xl: 30px;
  --spacing-4xl: 40px;
  --spacing-gutter: 60px;
  --spacing-band: 64px;
  --spacing-section: 120px;

  /* Border Radius */
  --radius-tag: 3px;
  --radius-chip: 4px;
  --radius-xs: 5px;
  --radius-code: 6px;
  --radius-control: 8px;
  --radius-input: 10px;
  --radius-pill: 15px;
  --radius-card: 18px;
  --radius-panel: 20px;
  --radius-deep: 25px;
  --radius-track: 100px;
  --radius-dot: 100%;

  /* Shadows */
  --shadow-raised: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
  --shadow-micro: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  --shadow-ring: rgb(17, 17, 17) 0px 0px 0px 1px;
  --shadow-ring-light: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
  --shadow-overlay: rgba(0, 0, 0, 0.1) 0px 10px 20px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-float: rgba(0, 0, 0, 0.2) 0px 26.2434px 41.9894px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-blue: #0099FF;
  --color-deep-blue: #0055FF;
  --color-green: #4CD963;
  --color-live: #00BB88;
  --color-grey: #999999;
  --color-panel: #242424;
  --color-pill: #1E1E1E;
  --color-control: #1F1F1F;
  --color-code: #111111;
  --color-ghost: rgba(255, 255, 255, 0.1);
  --color-ghost-strong: rgba(255, 255, 255, 0.15);
  --color-hairline: rgba(255, 255, 255, 0.06);
  --color-clay: #D67A5C;
  --color-link-default: #0000EE;

  --font-display: 'GT Walsheim Medium', Aeonik, ui-sans-serif, sans-serif;
  --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui-medium: 'Inter Medium', 'Inter', ui-sans-serif, sans-serif;
  --font-mono: 'Input Mono Regular', ui-monospace, monospace;
  --font-mono-bold: 'Input Mono Bold', ui-monospace, monospace;
  --font-mono-alt: 'Azeret Mono', ui-monospace, monospace;
  --font-mono-code: 'JetBrains Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', serif;
  --font-fallback: sans-serif;

  --text-display: 54px;    --text-display--line-height: 54px;
  --text-stat: 54px;       --text-stat--line-height: 43.2px;
  --text-heading: 44px;    --text-heading--line-height: 48.4px;
  --text-subheading: 24px; --text-subheading--line-height: 31.2px;
  --text-metric: 20px;     --text-metric--line-height: 24px;
  --text-title: 18px;      --text-title--line-height: 24.3px;
  --text-body: 16px;       --text-body--line-height: 24px;
  --text-label: 15px;      --text-label--line-height: 20.25px;
  --text-footer-heading: 15px; --text-footer-heading--line-height: 15px;
  --text-nav: 14px;        --text-nav--line-height: 14px;
  --text-caption: 14px;    --text-caption--line-height: 19.6px;
  --text-meta: 14px;       --text-meta--line-height: 14px;
  --text-micro: 12px;      --text-micro--line-height: 14.4px;
  --text-nano: 7px;        --text-nano--line-height: 7px;
  --tracking-display: -2.16px;
  --tracking-heading: -1.76px;
  --tracking-title: -0.2px;
  --tracking-body: -0.1px;
  --tracking-nav: -0.2px;
  --tracking-nano: 0.21px;

  --spacing-3xs: 4px;
  --spacing-2xs: 5px;
  --spacing-xs: 6px;
  --spacing-sm: 7px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 15px;
  --spacing-2xl: 20px;
  --spacing-3xl: 30px;
  --spacing-4xl: 40px;
  --spacing-gutter: 60px;
  --spacing-band: 64px;
  --spacing-section: 120px;

  --radius-tag: 3px;
  --radius-chip: 4px;
  --radius-xs: 5px;
  --radius-code: 6px;
  --radius-control: 8px;
  --radius-input: 10px;
  --radius-pill: 15px;
  --radius-card: 18px;
  --radius-panel: 20px;
  --radius-deep: 25px;
  --radius-track: 100px;
  --radius-dot: 100%;

  --shadow-raised: rgba(0, 0, 0, 0.2) 0px 2px 6px 0px;
  --shadow-micro: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  --shadow-ring: rgb(17, 17, 17) 0px 0px 0px 1px;
  --shadow-ring-light: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
  --shadow-overlay: rgba(0, 0, 0, 0.1) 0px 10px 20px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-float: rgba(0, 0, 0, 0.2) 0px 26.2434px 41.9894px 0px;
}
```