---
version: alpha
name: Raycast
description: "Near-black glass, a red laser cut across it, and keycaps you can almost press."
colors:
  on-surface-variant: "#434345"
  on-surface: "#FFFFFF"
  surface: "#07080A"
  outline: "rgba(255, 255, 255, 0.05)"
  primary: "#9C9C9D"
  panel-800: "#0C0D0F"
  panel-700: "#111214"
  chip-600: "#1B1C1E"
  line-500: "#2F3031"
  ink-tertiary: "#6A6B6C"
  button-light: "#E6E6E6"
  raycast-red: "#FF6363"
  signal-blue: "#56C2FF"
  announcement-rose: "#452324"
  mono-violet: "#DB97FF"
  hairline: "rgba(255, 255, 255, 0.06)"
  plan-gradient: "#222326"
typography:
  display:
    fontFamily: Inter
    fontSize: 80px
    fontWeight: 400
    lineHeight: 86px
    letterSpacing: 1.2px
  headline:
    fontFamily: Inter
    fontSize: 64px
    fontWeight: 400
    lineHeight: 70.4px
    letterSpacing: 0em
  headline-light:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 65.52px
    letterSpacing: 0.2px
  title:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  section:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 46px
    letterSpacing: 0em
  statement:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 51.2px
    letterSpacing: 0.2px
  subheading:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  heading:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  name:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.3px
  body-large:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0.2px
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0.2px
  ui-row:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.1px
  caption-mono:
    fontFamily: GeistMono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0em
rounded:
  hairline-bar: 1px
  send-button: 4px
  nav-link-list-row-tag-dropdown: 6px
  button-emoji-tile-action-key: 8px
  keycap: 11px
  window-frame-extension-card-app-icon: 12px
  navbar-testimonial-card-outer-window-fra: 16px
  showcase-card-dock-marquee-item: 20px
  browse-more-pill: 22px
  announcement-ring: 43px
  star-round-avatar: 9999px
spacing:
  "1": 8px
  "2": 16px
  "3": 24px
  "4": 32px
  "5": 40px
  "6": 48px
  "10": 96px
  "12": 168px
  "13": 224px
  0-5: 4px
  1-5: 12px
  2-5: 20px
---
# Raycast — Style Reference

> Near-black glass, a red laser cut across it, and keycaps you can almost press.

**Theme:** dark

The canvas is #07080A — not black, a hair of blue in it — and almost everything else is translucent white laid over it: a faint wash for a fill, a hairline for structure, a 1px inset highlight along the top of anything raised. Colour arrives twice: the red diagonal ray artwork burning through the hero and the footer's upper edge, and the app-coloured glows under the extension cards. Type is Inter throughout, and hierarchy comes from size and ink rather than weight — section headings sit at a modest twenty pixels while a display line runs to eighty, and one of the largest headings on the marketing page takes the lightest weight the family paints here. The signature move is the double-framed macOS window: a translucent outer shell with a half-pixel top highlight, a darker inner frame, and the real screenshot inside, lit from behind by that same red gradient.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#07080A` | `--color-bg` | `body`, hero background, inner window frames. |
| Panel 800 | `#0C0D0F` | `--grey-800` | Search fields, category rails, carousel arrows. |
| Panel 700 | `#111214` | `--grey-700` | The lighter stop of the tooltip and browse-more gradients. |
| Chip 600 | `#1B1C1E` | `--grey-600` | The opaque chip fill: tags, badges, footer content. |
| Line 500 | `#2F3031` | `--grey-500` | Double duty — search-field borders, and the ink inside the light button. |
| Muted 400 | `#434345` | `--grey-400` | The @handle grey and the video placeholder fill. |
| Ink Tertiary | `#6A6B6C` | `--grey-300` | Second half of a heading couplet; eyebrow labels; placeholders. |
| Ink Secondary | `#9C9C9D` | `--grey-200` | The workhorse ink — nav links, body, table cells. |
| Ink Primary | `#FFFFFF` | `--base-white` | Headings and emphasis; far more text than fill. |
| Button Light | `#E6E6E6` | `--grey-50` | The only bright control fill. |
| Raycast Red | `#FF6363` | `--red-dark` | Editorial and state, never action — model bar, command icon, rule label. |
| Signal Blue | `#56C2FF` | `--blue-dark` | The dots graphic and its 31% ring. |
| Announcement Rose | `#452324` | `--color-rose-ring` | The ring around the hero announcement pill, whose fill is `#130D0E`. |
| Mono Violet | `#DB97FF` | `--color-violet` | The terminal tilde. |
| Hairline | `rgba(255, 255, 255, 0.06)` | `--color-line` | Structure: navbar edge, card border, button ring. |
| Hairline Fill | `rgba(255, 255, 255, 0.05)` | `--color-line-soft` | The same white as a fill — emoji tiles, dividers, enterprise link. |
| Plan Gradient | `#222326 → #151619` | `--gradient-plan` | Paid pricing cards; free and advanced use the same stops at half alpha. |

## Tokens — Typography

### Inter — display, headings, nav, body, labels and prices · `--main-font`
- **Substitute:** SF Pro Text, Söhne, ui-sans-serif
- **Weights:** 400, 500, 600, 700
- **Sizes:** 13px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 80px
- **Line height:** 1.1 at display (70.4px on 64px, 86px on 80px), 1.6 at body (22.4px on 14px, 25.6px on 16px); most 20–24px headings run `normal`
- **Letter spacing:** positive throughout — 0.1px on 13px rows, 0.2px on 14px UI and most headings, 0.3px on names and prices, 1.2px on the display
- **Role:** every human sentence, from the 80px store title to the 13px window row.

### GeistMono — the eyebrow label that introduces a value · `--font-geist-mono`
- **Substitute:** Berkeley Mono, SF Mono, ui-monospace
- **Weights:** 300, 400, 500
- **Sizes:** 14px
- **Line height:** 22.4px
- **Letter spacing:** 0.3px
- **Role:** small grey labels in `#6A6B6C` — `.index-module__NFhuXW__label` ("Favorite Feature:").

### JetBrains Mono — terminal chrome · `--monospace-font`
- **Substitute:** Menlo, Monaco, Courier
- **Weights:** 400, 500
- **Sizes:** 12px
- **Line height:** 16.8px
- **Letter spacing:** normal
- **Role:** the prompt tilde in the Quick AI terminal, inked `#DB97FF`.

### SF Pro Text — keycap glyphs · `--font-sf-pro-text`
- **Substitute:** SF Pro, Inter, system-ui
- **Weights:** 500, 700
- **Sizes:** 16px, 23.75px, 24px, 32px
- **Line height:** 18.4px, 27.3125px, 27.6px, 36.8px
- **Letter spacing:** normal
- **Role:** the legends on the keyboard graphic — `esc`, `F1`, `±`, `!`.

### SF Pro — system chrome · `--font-sf-pro`
- **Substitute:** SF Pro Text, Inter, system-ui
- **Weights:** 700
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** a bold system face the census finds but does not size.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 80px / 600 | 86px | 1.2px | `--text-display` |
| Headline | 64px / 600 | 70.4px | normal | `--text-headline` |
| Headline Light | 56px / 400 | 65.52px | 0.2px | `--text-headline-light` |
| Title | 48px / 600 | normal | normal | `--text-title` |
| Section | 40px / 500 | 46px | normal | `--text-section` |
| Statement | 32px / 500 | 51.2px | 0.2px | `--text-statement` |
| Subheading | 24px / 500 | normal | 0.2px | `--text-subheading` |
| Heading | 20px / 500 | normal | 0.2px | `--text-heading` |
| Name | 16px / 600 | normal | 0.3px | `--text-name` |
| Body Large | 16px / 500 | 25.6px | normal | `--text-body-lg` |
| Body | 14px / 500 | 22.4px | 0.2px | `--text-body` |
| Label | 14px / 500 | 16px | 0.2px | `--text-label` |
| UI Row | 13px / 400 | normal | 0.1px | `--text-ui` |
| Caption Mono | 12px / 400 | 16.8px | normal | `--text-caption` |

## Tokens — Spacing & Shapes

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 0.5 | 4px | `--spacing-0-5` |
| 1 | 8px | `--spacing-1` |
| 1.5 | 12px | `--spacing-1-5` |
| 2 | 16px | `--spacing-2` |
| 2.5 | 20px | `--spacing-2-5` |
| 3 | 24px | `--spacing-3` |
| 4 | 32px | `--spacing-4` |
| 5 | 40px | `--spacing-5` |
| 6 | 48px | `--spacing-6` |
| 10 | 96px | `--spacing-10` |
| 12 | 168px | `--spacing-12` |
| 13 | 224px | `--spacing-13` |

6px and 10px are painted as gaps but named by no `--spacing-*` step; 56px, 64px, 80px and 112px are *(declared, not painted)*.

### Border Radius
| Element | Value |
|---------|-------|
| Hairline bar (active model rail, caret) | 1px |
| Send button | 4px |
| Nav link, list row, tag, dropdown | 6px |
| Button, emoji tile, action key | 8px |
| Keycap | 11px |
| Window frame, extension card, app icon | 12px |
| Navbar, testimonial card, outer window frame | 16px |
| Showcase card, dock, marquee item | 20px |
| Browse-more pill | 22px |
| Announcement ring | 43px |
| Star, round avatar | 100% / 50% / 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Top light | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` | `--shadow-top-light` |
| Top light strong | `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset` | `--shadow-top-light-strong` |
| Control ring | `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset` | `--shadow-control` |
| Light button | `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset` | `--shadow-button-light` |
| Keycap | `rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset` | `--shadow-key` |
| Frame outer | `rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset` | `--shadow-frame-outer` |
| Frame inner | `rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset` | `--shadow-frame-inner` |
| Hairline ring | `rgb(27, 28, 30) 0px 0px 0px 1px, rgb(7, 8, 10) 0px 0px 0px 1px inset` | `--shadow-hairline-ring` |
| Icon lift | `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px 0px` | `--shadow-icon` |

### Layout
- **Page max-width:** 1204px (`--container-width`; 746px / 1064px / 1280px are declared alternates)
- **Section gap:** 224px on the home page, 168px on Pro and AI, 96px around carousels and footer links, 200px inside the footer container
- **Card padding:** 32px on store extension cards, 24px on testimonial cards, 20px on AI prompt buttons, 12px on the API caption block
- **Element gap:** 8px by default; 4px in metadata rows, 6px in control clusters, 12px between keycaps, 16px in the nav, 24px between card headers, 32px on the grid (`--grid-gap`), 40px between footer link groups

## Components

### Navigation Bar
**Role:** A floating pill carrying the wordmark, the section links and the one bright action, held above the artwork.
`.Navbar-module__pSp8Ga__navbar`: 16px radius, an `rgba(255, 255, 255, 0.06)` hairline, and a fill gradienting `rgba(17, 18, 20, 0.75) → rgba(12, 13, 15, 0.9)`. `rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset` lights the top edge. Links are `.NavLink-module__qZd0pW__navLink`: Inter 14px/500, 0.2px tracking, `#9C9C9D`, no fill, 12px 8px padding, 6px radius. The link row gaps 16px, the right cluster 24px. Height is `--navbar-height: 58px` *(declared, not painted)*.

### Primary Button — Light
**Role:** The download. One bright object per screen, so the eye has exactly one place to land.
Fill `#E6E6E6`, ink `#2F3031`, Inter 14px/500, padding 8px 12px, radius 8px, border none. Its edge is entirely shadow: `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px` cuts it out of the artwork, `rgba(255, 255, 255, 0.19) 0px 0px 14px 0px` haloes it, and the 0.4px insets run dark under, `rgb(255, 255, 255)` over. Icon and label gap 8px. "Start Free Trial" on Pro and AI shares the values exactly; "Send" tightens to 2px 12px padding and a 4px radius.

### Secondary Button — Dark
**Role:** The second action in a pair — install, browse, learn more — present without competing.
`.Button-module__3dJGfa__button.Button-module__3dJGfa__dark.Instal` paints no solid fill; its surface is the gradient `rgba(255, 255, 255, 0.03) → rgba(255, 255, 255, 0.1)`, dark above to light below. Ink `#FFFFFF`, Inter 14px/500 at 16px line-height and 0.2px tracking, 8px padding, 8px radius. The control ring finishes it — `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset`.

### Hero Announcement Pill
**Role:** The one-line "there's news" link sitting under the hero's call to action.
`.HeroAnnouncement-module__ezSJPa__announcementOuter` is a 43px ring filled `#452324` with 1px of padding — a rose hairline that is a fill, not a border — carrying a 20px rose bloom as its only shadow. Inside, `.HeroAnnouncement-module__ezSJPa__announcement` fills `#130D0E`, inks `#FFFFFF`, sets Inter 14px/500, pads 4px 12px, rounds to 1000px, and casts nothing. Label and arrow gap 8px.

### Keycap
**Role:** The physical key in the keyboard graphic — the system's proof that it understands hardware.
`.index-module__h8MSgW__key`: 11px radius, 14.5px 15px padding, gradient `#121212 → #0D0D0D`, four stacked shadows — `rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px` seat, `rgb(0, 0, 0) 0px 0px 0.5px 1px` cut line, `rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset` dish, `rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset` bevel light. Legends are SF Pro Text 23.75px/500 at 27.3125px in `#FFFFFF`, with 32px, 24px and 16px alternates. Keys gap 12px.

### App Window Frame
**Role:** The container every product screenshot lives inside — a macOS window in the page's own materials.
`.index-module__utU0aa__frameOuter` carries an `rgba(255, 255, 255, 0.08)` border over near-invisible washes — `rgba(0, 0, 0, 0.44)`, `rgba(222, 226, 255, 0.08)`, `rgba(241, 242, 255, 0.02)` — under `rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`. `.index-module__utU0aa__frameInner` drops to 12px radius, fills `#07080A`, takes `rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset`. The AI showcase's outer frame rounds to 16px. Rows inside run Inter 13px/400 at 0.1px, 0px 8px padding, 6px radius, 10px gaps.

### Extension Card
**Role:** One community extension in the store grid — icon, name, description, author, install count, install button.
`.ExtensionCard-module__8v4Aaq__card` is generous: 32px padding all round, 12px radius, an `rgba(255, 255, 255, 0.06)` border, and a single `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` for the lit top edge — no drop shadow. It paints no fill. Metadata is Inter 13px/400 at 14.95px in `#9C9C9D`, gapped 4px from its icon; avatars are `.Avatar-module__ojsiSq__avatar` at 9999px, unbordered here. The wrapper repeats the 12px radius.

### Showcase Card
**Role:** A single integration presented as a lit slab, the partner's own colour glowing behind it.
`.index-module__pFn2Lq__card` rounds to 20px and paints no fill; it measures eight ways, and this is the most common variant, at three occurrences. Its shadow is `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset` for the top edge, `rgba(0, 0, 0, 0.4) 0px 30px 50px 0px` for the drop, a 4px 24px brand-tinted glow, and `rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset` for the ring; other variants swap the drop for twin 20px and 40px coloured blooms. Inside: `.index-module__pFn2Lq__icon` at 12px radius with `rgba(0, 0, 0, 0.28) 0px 1.189px 2.377px 0px`, a description in Inter 16px/500 at 25.6px, an `rgba(255, 255, 255, 0.05)` divider, and `.index-module__pFn2Lq__action` at 8px padding and radius under the control ring.

### Testimonial Card
**Role:** A named practitioner vouching for the product, carried in a draggable carousel.
`.index-module__NFhuXW__embla__slide.index-module__NFhuXW__card`: 24px padding, 16px radius, no fill, no border, no shadow. The name is Inter 16px/600 at 0.3px in `#FFFFFF`, the handle the same size and weight in `#434345`, the title the same again in `#6A6B6C`. The avatar is `.Avatar-module__ojsiSq__avatar.index-module__NFhuXW__avatar`, 9999px, with a 1px `rgba(255, 255, 255, 0.1)` border. The block sits on 96px of vertical padding.

### Pricing Plan Card
**Role:** One tier in the plan comparison — price, inclusions, and the action that buys it.
The paid tiers (`.Pricing-module__cZ3m5q__proPlan.Pricing-module__cZ3m5q__plan`, team, enterprise) fill with `#222326 → #151619` under a four-layer shadow: a 40px lavender bloom, a 16px negative-spread haze, a 40px 10px glow, and `rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset`. Free and advanced carry the same stops at half alpha — `rgba(34, 35, 38, 0.5)` and `rgba(21, 22, 25, 0.5)`. Prices are Inter 64px/600 at 0.3px in `#FFFFFF`, dropping to 40px/600 for secondary figures. The discount chip inverts everything: fill `#FFFFFF`, ink `#2C1617`, 0px 8px padding, 12px radius.

### Search Field
**Role:** The store's find-an-extension input, with its keyboard shortcut printed inside it.
`.StoreHeader-module___0KjAa__searchInput` fills `#0C0D0F` with a 1px `#2F3031` border, 12px radius, 16px padding, Inter 15px/400 and placeholder ink `#6A6B6C`. No shadow. `.page-module__hUuG-G__searchButton` in the filter bar is the same object at 12px padding. The `⌘` and `K` keys inside carry `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` and gap 6px.

### Section Heading Couplet
**Role:** The two-line title that opens nearly every block: a statement, then its completion in grey.
Both lines are Inter 20px/500 with 0.2px tracking and no line-height override — identical type, split by ink alone. The first is `#FFFFFF` ("Take shortcuts, not detours."); the second is `#6A6B6C` on the home page ("One interface, everything you need.") or `#9C9C9D` on the Pro page. The couplet centres above what it introduces, with 224px of section padding beneath it on the home page and 168px on Pro and AI.

## Do's and Don'ts

### Do
- Draw structure with `rgba(255, 255, 255, 0.06)` — 244 borders across all four pages, navbar edge to store card.
- Put `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` on anything raised.
- Split headings into a white clause and a grey clause at the same 20px/500/0.2px: `"Take shortcuts, not detours."` and its `#6A6B6C` completion are one style, two inks.
- Keep radii inside the painted vocabulary — 6px rows and tags, 8px buttons, 12px frames and cards, 16px navbar, 20px showcase slabs.
- Let letter-spacing stay positive: 0.2px on the 14px/500 UI row, 1.2px on the 80px display.
- Reserve `#E6E6E6` for the action you want taken — the control census finds it on ten download links and three buttons.

### Don't
- Don't make the red a button. `#FF6363` paints 335 fills and two text runs, and every filled control the layout census carries is `#E6E6E6`, `#0C0D0F`, `#434345`, `#1B1C1E`, `#130D0E`, `#111214` or a translucent white — none red.
- Don't lighten the canvas to soften a section. `#07080A` covers 89% of painted background area; depth comes from translucent whites on it.
- Don't reach for weight when you want emphasis: the 56px `"Build the perfect tools."` sits at 400, lighter than the 20px section headings at 500.
- Don't put a border on the light button. Its measured border is `none`; the edge is a 2px black ring plus a white 0.4px inset.
- Don't scale white surfaces up. `#FFFFFF` paints 2445 text runs against 101 fills, and those fills are small — the discount chip, the star dots, the subscribe input.
- Don't compress the section rhythm. Home blocks sit on 224px, Pro and AI on 168px.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#07080A` | `body`, hero background, inner window frames |
| 1 | Well | `#0C0D0F` | Search fields, category rails, arrows |
| 2 | Panel | `#111214` | Tooltip and browse-more gradient tops |
| 3 | Chip | `#1B1C1E` | Tags, badges, footer content block |
| 4 | Wash | `rgba(255, 255, 255, 0.05)` | Emoji tiles, dividers, enterprise link |
| 5 | Muted block | `#434345` | The video placeholder |
| 6 | Bright control | `#E6E6E6` | The light button |

## Elevation

Depth is luminance and edge light, not drop shadow. The default lift is one inset hairline along the top — `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset` on the store card and shortcut keys, `rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset` on the carousel controls — and the default separation is an `rgba(255, 255, 255, 0.06)` border. Drop shadows are rationed to three jobs: keycaps, which stack four layers; the home showcase cards, which drop `rgba(0, 0, 0, 0.4) 0px 30px 50px 0px` and glow in the partner's colour; and the window frames, which bloom 40px 20px ambient rather than cast a direction.

## Imagery

Two families, both dark. First, generated artwork: red-to-black diagonal rays, softly noised, behind the home hero, over the store header and along the footer's top edge, with a blue-white variant behind the Pro hero. It sits above and below the reading column, never behind body copy. Second, product truth: real screenshots, always inside the double window frame, always lit from behind by that same red gradient. Iconography is third-party app icons at 12px radius with a 1.189px lift, avatars at 9999px, and a marquee of extension tiles at 20px radius on the AI page. No photography beyond small circular headshots, and no illustration.

## Layout

Contained, centred, and very tall. The reading column is 1204px (`--container-width`), the grid gap 32px, and the navbar takes the container's width. Section rhythm is the loudest decision — 224px between blocks on the home page, 168px on Pro and AI, 96px around carousels and footer link groups, 200px inside the footer container. The store is the one grid-first page: a two-column card grid under a filter bar, with pagination pills. The footer is six link columns over a newsletter row on a gradient from `rgba(7, 8, 10, 0.8)` through `#07080A` to `rgba(255, 255, 255, 0.03)`.

## Typography Voice

Two modes, cleanly divided. Inter carries every human sentence; monospace carries every machine utterance — eyebrow labels in GeistMono at 14px/500 with 0.3px tracking, the terminal tilde in JetBrains Mono at 12px in `#DB97FF`, keycap legends in SF Pro Text. The signature move is the ink couplet: two clauses at identical 20px/500/0.2px, first white then grey. Line-height tightens as type grows — 1.6 at 14px and 16px, 1.1 at 64px and 80px — while tracking stays positive everywhere, up to 1.2px on the display.

## Agent Prompt Guide

## Quick Color Reference
- background: `#07080A`
- text: `#FFFFFF`
- surface: `#1B1C1E`
- border: `rgba(255, 255, 255, 0.06)`
- accent: `#FF6363`
- primary action: `#E6E6E6`

## Example Component Prompts
1. **Navigation Bar**: A floating pill, max-width 1204px, 16px radius, background linear-gradient `rgba(17, 18, 20, 0.75)` to `rgba(12, 13, 15, 0.9)`, 1px border `rgba(255, 255, 255, 0.06)`, box-shadow `rgba(255, 255, 255, 0.15) 0px 1px 1px 0px inset`. Wordmark left; centre links Inter 14px/500, 0.2px, `#9C9C9D`, 12px 8px padding, 6px radius, 16px gap; right cluster gapped 24px, ending in an `#E6E6E6` button with `#2F3031` text.
2. **Light Download Button**: Inter 14px/500, background `#E6E6E6`, text `#2F3031`, padding 8px 12px, radius 8px, no border, icon and label gapped 8px, box-shadow `rgba(0, 0, 0, 0.5) 0px 0px 0px 2px, rgba(255, 255, 255, 0.19) 0px 0px 14px 0px, rgba(0, 0, 0, 0.2) 0px -1px 0.4px 0px inset, rgb(255, 255, 255) 0px 1px 0.4px 0px inset`.
3. **Store Extension Card**: On `#07080A`, no fill, 32px padding, 12px radius, 1px border `rgba(255, 255, 255, 0.06)`, box-shadow `rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset`. Title Inter 16px/600 `#FFFFFF`; description Inter 14px/500 at 22.4px and 0.2px, `#9C9C9D`; a 9999px avatar and 13px/400 install count in `#9C9C9D` gapped 4px; top-right an install button with an `rgba(255, 255, 255, 0.03) → rgba(255, 255, 255, 0.1)` gradient, 8px padding and radius.
4. **Keycap**: 11px radius, 14.5px 15px padding, background linear-gradient `#121212` to `#0D0D0D`, legend in SF Pro Text 23.75px/500 at 27.3125px in `#FFFFFF`, box-shadow `rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px, rgb(0, 0, 0) 0px 0px 0.5px 1px, rgba(0, 0, 0, 0.25) 0px 2px 1px 1px inset, rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset`. Grid the keys with 12px gaps.
5. **Framed Screenshot Section**: Centre two lines of Inter 20px/500 at 0.2px — first `#FFFFFF`, second `#6A6B6C` — above a double frame: outer shell 1px `rgba(255, 255, 255, 0.08)` with `rgba(255, 255, 255, 0.03) 0px 0px 40px 20px, rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset`; inner shell 12px radius on `#07080A` with `rgba(255, 255, 255, 0.19) 0px 0px 2px 0px, rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0px inset`. Pad the section 224px top and bottom.

## Similar Brands
- **Linear** — the same near-black canvas of translucent white washes, hierarchy carried by ink steps.
- **Vercel** — a monochrome grey ramp, one bright control per screen, hairlines doing the structural work.
- **Superhuman** — dark chrome around real product UI, keyboard-first iconography, gradients only as backdrop.
- **Arc** — colour reserved for glows and app identity while the interface stays near-black.
- **Framer** — long section rhythm, contained centre column, screenshots framed as windows.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-bg: #07080a;
  --grey-900: #07080a;
  --grey-800: #0c0d0f;
  --grey-700: #111214;
  --grey-600: #1b1c1e;
  --grey-500: #2f3031;
  --grey-400: #434345;
  --grey-300: #6a6b6c;
  --grey-200: #9c9c9d;
  --grey-100: #cdcece;
  --grey-50: #e6e6e6;
  --base-white: #ffffff;
  --base-black: #000000;
  --red-dark: #ff6363;
  --blue-dark: #56c2ff;
  --color-green: #59d499;
  --color-yellow: #ffc531;
  --color-violet: #db97ff;
  --color-rose-ring: #452324;
  --color-rose-fill: #130d0e;
  --color-line: rgba(255, 255, 255, 0.06);
  --color-line-soft: rgba(255, 255, 255, 0.05);
  --color-line-strong: rgba(255, 255, 255, 0.1);
  --color-ink-muted: rgba(255, 255, 255, 0.6);
  --color-ink-placeholder: rgba(255, 255, 255, 0.4);
  --gradient-key: linear-gradient(#121212, #0d0d0d);
  --gradient-glass: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.1));
  --gradient-navbar: linear-gradient(rgba(17,18,20,0.75), rgba(12,13,15,0.9));
  --gradient-plan: linear-gradient(#222326, #151619);
  --gradient-panel: linear-gradient(#111214, #0c0d0f);

  /* Typography — Families */
  --main-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --monospace-font: 'JetBrains Mono', Menlo, Monaco, Courier, monospace;
  --font-geist-mono: 'GeistMono', 'SF Mono', ui-monospace, monospace;
  --font-sf-pro-text: 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-sf-pro: 'SF Pro', 'SF Pro Text', system-ui, sans-serif;

  /* Typography — Scale */
  --text-display: 80px;        --leading-display: 86px;
  --text-headline: 64px;       --leading-headline: 70.4px;
  --text-headline-light: 56px; --leading-headline-light: 65.52px;
  --text-title: 48px;          --leading-title: normal;
  --text-section: 40px;        --leading-section: 46px;
  --text-statement: 32px;      --leading-statement: 51.2px;
  --text-subheading: 24px;     --leading-subheading: normal;
  --text-heading: 20px;        --leading-heading: normal;
  --text-name: 16px;           --leading-name: normal;
  --text-body-lg: 16px;        --leading-body-lg: 25.6px;
  --text-body: 14px;           --leading-body: 22.4px;
  --text-label: 14px;          --leading-label: 16px;
  --text-ui: 13px;             --leading-ui: normal;
  --text-caption: 12px;        --leading-caption: 16.8px;

  /* Spacing */
  --spacing-none: 0px;
  --spacing-0-5: 4px;
  --spacing-1: 8px;
  --spacing-1-5: 12px;
  --spacing-2: 16px;
  --spacing-2-5: 20px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-10: 96px;
  --spacing-12: 168px;
  --spacing-13: 224px;
  --grid-gap: 32px;
  --container-width: 1204px;

  /* Border Radius */
  --rounding-none: 0px;
  --rounding-xs: 4px;
  --rounding-sm: 6px;
  --rounding-normal: 8px;
  --rounding-key: 11px;
  --rounding-md: 12px;
  --rounding-lg: 16px;
  --rounding-xl: 20px;
  --rounding-pill: 1000px;
  --rounding-full: 9999px;
}
```

### Tailwind v4
```css
@theme {
  --color-bg: #07080a;
  --color-grey-900: #07080a;
  --color-grey-800: #0c0d0f;
  --color-grey-700: #111214;
  --color-grey-600: #1b1c1e;
  --color-grey-500: #2f3031;
  --color-grey-400: #434345;
  --color-grey-300: #6a6b6c;
  --color-grey-200: #9c9c9d;
  --color-grey-100: #cdcece;
  --color-grey-50: #e6e6e6;
  --color-base-white: #ffffff;
  --color-base-black: #000000;
  --color-red-dark: #ff6363;
  --color-blue-dark: #56c2ff;
  --color-green: #59d499;
  --color-yellow: #ffc531;
  --color-violet: #db97ff;
  --color-rose-ring: #452324;
  --color-rose-fill: #130d0e;
  --color-line: rgba(255, 255, 255, 0.06);
  --color-line-soft: rgba(255, 255, 255, 0.05);
  --color-line-strong: rgba(255, 255, 255, 0.1);
  --color-ink-muted: rgba(255, 255, 255, 0.6);
  --color-ink-placeholder: rgba(255, 255, 255, 0.4);

  --font-main: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-monospace: 'JetBrains Mono', Menlo, Monaco, Courier, monospace;
  --font-geist-mono: 'GeistMono', 'SF Mono', ui-monospace, monospace;
  --font-sf-pro-text: 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-sf-pro: 'SF Pro', 'SF Pro Text', system-ui, sans-serif;

  --text-display: 80px;        --text-display--line-height: 86px;
  --text-headline: 64px;       --text-headline--line-height: 70.4px;
  --text-headline-light: 56px; --text-headline-light--line-height: 65.52px;
  --text-title: 48px;          --text-title--line-height: normal;
  --text-section: 40px;        --text-section--line-height: 46px;
  --text-statement: 32px;      --text-statement--line-height: 51.2px;
  --text-subheading: 24px;     --text-subheading--line-height: normal;
  --text-heading: 20px;        --text-heading--line-height: normal;
  --text-name: 16px;           --text-name--line-height: normal;
  --text-body-lg: 16px;        --text-body-lg--line-height: 25.6px;
  --text-body: 14px;           --text-body--line-height: 22.4px;
  --text-label: 14px;          --text-label--line-height: 16px;
  --text-ui: 13px;             --text-ui--line-height: normal;
  --text-caption: 12px;        --text-caption--line-height: 16.8px;

  --spacing-none: 0px;
  --spacing-0-5: 4px;
  --spacing-1: 8px;
  --spacing-1-5: 12px;
  --spacing-2: 16px;
  --spacing-2-5: 20px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-10: 96px;
  --spacing-12: 168px;
  --spacing-13: 224px;
  --container-width: 1204px;

  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-normal: 8px;
  --radius-key: 11px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 1000px;
  --radius-full: 9999px;
}
```