---
version: alpha
name: Railway
description: "Infrastructure documented like a travel poster: painted dusk, serif calm, quiet chrome."
colors:
  on-surface: "#F7F7F8"
  surface: "#13111C"
  outline: "#33323E"
  primary: "#2057C5"
  band: "#181622"
  card: "#1C1A28"
  chip: "#211F2D"
  ink-strong: "#FFFFFF"
  ink-muted: "#DCDCE0"
  ink-dim: "#A1A0AB"
  ink-quiet: "#6C6B7B"
  deploy-purple: "#553F83"
  signal-green: "#42946E"
  plan-tints: "#0B1428"
  white-wash: "rgba(255, 255, 255, 0.05)"
typography:
  display:
    fontFamily: IBM Plex Serif
    fontSize: 72px
    fontWeight: 400
    lineHeight: 76px
    letterSpacing: -1.8px
  headline-xl:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 400
    lineHeight: 70px
    letterSpacing: -1.4px
  hero:
    fontFamily: IBM Plex Serif
    fontSize: 54px
    fontWeight: 400
    lineHeight: 60.48px
    letterSpacing: -1.96px
  headline-l:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.8px
  headline-m:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: -1px
  heading:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.72px
  heading-sans:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: 0em
  subhead:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 38.5px
    letterSpacing: -0.7px
  price:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 400
    lineHeight: 50px
    letterSpacing: 0em
  title:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 27.5px
    letterSpacing: 0em
  card-title:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  small:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  label:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0em
  micro:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  mono:
    fontFamily: ui-monospace
    fontSize: 40px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: 0em
rounded:
  flap-cell-small-inset-border: 4px
  flap-top-bottom-cap: 4px
  chip-nav-trigger-plan-cta: 6px
  hero-button-terminal-frame-palette-row: 8px
  console-screenshot: 10px
  card-agent-card-plan-panel-logo-tile: 12px
  plan-panel-left-right-cap: 12px
  section-panel: 16px
  avatar-plan-dot-icon-container: 9999px
spacing:
  4xs: 4px
  3xs: 6px
  2xs: 8px
  xs: 12px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 48px
  2xl: 64px
  3xl: 80px
  4xl: 96px
  5xl: 128px
---
# Railway — Style Reference

> Infrastructure documented like a travel poster: painted dusk, serif calm, quiet chrome.

**Theme:** dark

Railway paints one near-black canvas, `#13111C`, and lets every other surface be a small step off it rather than a different material. Two systems share that canvas: the marketing pages — home, pricing and agents — run a sticky opaque nav over illustrated full-bleed panels and close on a link-column footer, while the New Project screen drops all of that for a product frame with a command palette centred on a dim halftone wallpaper. The signature move is the serif: IBM Plex Serif carries the display lines in regular and medium, tracking tightening as the type grows, so size and compression do the work weight usually does. Inter runs everything a person operates — nav, body, prices, labels — and a monospace face is kept for machinery. Depth is a luminance ladder with a hairline on top; the few real shadows go to the product artwork.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#13111C` | `--color-canvas` | Body, sticky nav bar and the `.pt-24.bg-oatmeal` hero section. |
| Band | `#181622` | `--color-band` | The `.px-4.my-24.py-24.md:px-8` pricing band and the Free and Enterprise panels. |
| Card | `#1C1A28` | `--color-card` | Agent-card and secondary-button fill. |
| Chip | `#211F2D` | `--color-chip` | Chip fill, the New Project menu row, the rule between pricing comparison rows. |
| Hairline | `#33323E` | `--color-hairline` | Agent-card border, the 24×2px plan divider, the terminal frame. |
| Ink | `#F7F7F8` | `--color-ink` | The default marketing foreground. |
| Ink Strong | `#FFFFFF` | `--color-ink-strong` | Display headings, button labels, card titles. |
| Ink Muted | `#DCDCE0` | `--color-ink-muted` | Nav links ("Product", "Pricing") and pricing comparison body copy. |
| Ink Dim | `#A1A0AB` | `--color-ink-dim` | Supporting paragraphs, "Watch the film →", icon ink in `.icon-container.icon-xs.text-lg.text-gray-600`. |
| Ink Quiet | `#6C6B7B` / `#878593` | `--color-ink-quiet` / `--color-ink-faint` | Fine print; the fainter value takes "© 2026 Railway Corp. All rights reserved." |
| Deploy Purple | `#553F83` | `--color-accent` | Fill of the hero "Deploy →". |
| Plan Actions | `#2057C5` / `#853BCE` / `#545260` | `--color-action-hobby` / `-pro` / `-neutral` | Plan CTAs coloured to their column. |
| CTA Gradient | `linear-gradient(#B301B3, #381DBD)` | `--gradient-cta` | "Deploy a new project" and "Deploy Now", bordered `#8043C8`. The page's other gradient runs `#1C1A28 → #1C1A28`. |
| Signal Green | `#42946E` | `--color-signal` | "All systems operational" and the "Network and connect" eyebrow. |
| Plan Tints | `#0B1428` / `#1E132A` | `--color-plan-hobby` / `--color-plan-pro` | Hobby and Pro panel fills, bordered `#183367` and `#3D2259`. |
| White Wash | `rgba(255, 255, 255, 0.05)` / `rgba(255, 255, 255, 0.1)` | `--color-card-wash` / `--color-border-wash` | The softest surface and the default translucent line; `0.5`, `0.65` and `0.8` are the same idea as ink. |

## Tokens — Typography

### IBM Plex Serif — the display voice, 28px and up, in regular and medium, tracking tightening with size · `--font-display`
- **Substitute:** IBM Plex Serif (Google Fonts), Source Serif 4, Noto Serif
- **Weights:** 400, 500
- **Sizes:** 28px, 32px, 36px, 40px, 54px, 56px, 72px
- **Line height:** 38.5px at 28px through 76px at 72px — about 1.38 at the small end, 1.06 at the largest
- **Letter spacing:** −0.7px at 28px, −0.8px at 32px and 40px, −0.72px at 36px, −1px at 40px/500, −1.4px at 56px, −1.8px at 72px, −1.96px on "Ship software peacefully" at 54px
- **Role:** The display voice, 28px and up, in regular and medium, tracking tightening with size.

### Inter — the operating voice: nav, body, labels, prices and card titles, 12px to 40px · `--font-sans`
- **Substitute:** Inter (Google Fonts), ui-sans-serif, system-ui
- **Weights:** 400, 500, 600, 700
- **Sizes:** 12px, 14px, 16px, 18px, 20px, 32px, 40px
- **Line height:** 18px at 12px, 20px at 14px, 24–26px at 16px, 27px at 18px, 27.5px at 20px, 44px at 32px, 50px at 40px
- **Letter spacing:** normal at every size the census measures, 12px through 40px
- **Role:** The operating voice: nav, body, labels, prices and card titles, 12px to 40px.

### ui-monospace — machinery type: the install command, the status line, the flap characters · `--font-mono`
- **Substitute:** ui-monospace, SFMono-Regular, JetBrains Mono
- **Weights:** 400, 500
- **Sizes:** 40px measured, on `.flap-char`; the footer status line and terminal command carry `font-mono` classes at sizes the census does not measure — `not measured`
- **Line height:** 56px at 40px
- **Letter spacing:** normal
- **Role:** Machinery type: the install command, the status line, the flap characters.

### Inter Tight — in the font inventory at one weight; no census row names its size or carrier · `--font-sans-tight`
- **Substitute:** Inter Tight, Inter, ui-sans-serif
- **Weights:** 400
- **Sizes:** `not measured`
- **Line height:** `not measured`
- **Letter spacing:** `not measured`
- **Role:** In the font inventory at one weight; no census row names its size or carrier.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 72px / 500 | 76px | −1.8px | `--text-display` |
| Headline XL | 56px / 500 | 70px | −1.4px | `--text-headline-xl` |
| Hero | 54px / 500 | 60.48px | −1.96px | `--text-hero` |
| Headline L | 40px / 400 | 48px | −0.8px | `--text-headline-l` |
| Headline M | 40px / 500 | 50px | −1px | `--text-headline-m` |
| Heading | 36px / 400 | 48px | −0.72px | `--text-heading` |
| Heading Sans | 32px / 600 | 44px | normal | `--text-heading-sans` |
| Subhead | 28px / 500 | 38.5px | −0.7px | `--text-subhead` |
| Price | 40px / 600 | 50px | normal | `--text-price` |
| Title | 20px / 600 | 27.5px | normal | `--text-title` |
| Card Title | 18px / 500 | 27px | normal | `--text-card-title` |
| Body | 16px / 400 | 24px | normal | `--text-body` |
| Small | 14px / 400 | 20px | normal | `--text-small` |
| Label | 14px / 500 | 20px | normal | `--text-label` |
| Micro | 12px / 500 | 18px | normal | `--text-micro` |
| Mono | 40px / 400 | 56px | normal | `--text-mono` |

## Tokens — Spacing & Shapes

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

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4xs | 4px | `--spacing-4xs` |
| 3xs | 6px | `--spacing-3xs` |
| 2xs | 8px | `--spacing-2xs` |
| xs | 12px | `--spacing-xs` |
| sm | 16px | `--spacing-sm` |
| md | 24px | `--spacing-md` |
| lg | 32px | `--spacing-lg` |
| xl | 48px | `--spacing-xl` |
| 2xl | 64px | `--spacing-2xl` |
| 3xl | 80px | `--spacing-3xl` |
| 4xl | 96px | `--spacing-4xl` |
| 5xl | 128px | `--spacing-5xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Flap cell, small inset border | 4px |
| Flap top / bottom cap | `4px 4px 0px 0px` / `0px 0px 4px 4px` |
| Chip, nav trigger, plan CTA | 6px |
| Hero button, terminal frame, palette row | 8px |
| Console screenshot | 10px |
| Card, agent card, plan panel, logo tile | 12px |
| Plan panel left / right cap | `12px 0px 0px 12px` / `0px 12px 12px 0px` |
| Section panel | 16px |
| Avatar, plan dot, icon container | 9999px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Ring | `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px` | `--shadow-ring` |
| Inset Hairline | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` | `--shadow-inset` |
| Inset Hairline Strong | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset` | `--shadow-inset-strong` |
| Warm Bloom | `rgba(62, 45, 45, 0.24) 0px 100px 191px 0px, rgba(62, 45, 45, 0.165) 0px 36.5016px 69.7181px 0px, rgba(62, 45, 45, 0.133) 0px 17.7209px 33.8469px 0px, rgba(62, 45, 45, 0.106) 0px 8.6871px 16.5924px 0px, rgba(62, 45, 45, 0.075) 0px 3.43489px 6.56065px 0px` | `--shadow-bloom` |
| Blue Uplight | `rgba(65, 78, 166, 0.1) 0px -12px 127px 0px, rgba(65, 78, 166, 0.07) 0px -4.38px 46.357px 0px, rgba(65, 78, 166, 0.06) 0px -2.127px 22.506px 0px, rgba(65, 78, 166, 0.04) 0px -1.042px 11.033px 0px, rgba(65, 78, 166, 0.03) 0px -0.412px 4.362px 0px` | `--shadow-uplight` |
| Code Drop | `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` | `--shadow-code` |
| Palette Stack | `rgba(20, 17, 29, 0.15) 0px 13px 29px 0px, rgba(20, 17, 29, 0.13) 0px 53px 53px 0px, rgba(20, 17, 29, 0.08) 0px 119px 71px 0px, rgba(20, 17, 29, 0.02) 0px 211px 84px 0px` | `--shadow-palette` |

### Layout
- **Page max-width:** content sits in `.max-w-container.w-full.mx-auto` and `.max-w-7xl.mx-auto.pt-12.pb-24` wrappers; the widest measured box is the 1288px agent comparison row, with the pricing comparison row at 1160px.
- **Section gap:** 64px and 128px are the two most-painted vertical rhythms, with 48px, 80px and 96px between them.
- **Card padding:** 24px on agent cards, 32px on plan panels, 48px on the Pro panel and the large testimonial box.
- **Element gap:** 6px inside chips, 8px in the nav, 12px in lists, 16px in header rows, 24px in card columns, 32px across three-up grids.

## Components

### Sticky Nav Bar
**Role:** The fixed top rail carrying the wordmark, the menu triggers and the two account actions on every marketing page.
`.sticky.top-0.z-[9999].py-4` paints `#13111C` with 16px top padding, 0px sides, radius 0px, no border and no shadow. Each trigger is `.group.flex.items-center.gap-2`: a transparent button, 6px 12px padding, radius 6px, no border, an 8px gap between label and chevron, at 97–120×32px. Label ink is `#DCDCE0` at Inter 14px/500/20px on "Product".

### Hero Button Pair
**Role:** The two first-screen actions, one filled and one outlined, side by side under the hero line.
"Deploy →" is `.px-6.py-3.rounded-[8px].bg-sl-accent`: fill `#553F83`, `#FFFFFF` text at 20px/500, padding 12px 24px, radius 8px, border 1px `rgba(255, 255, 255, 0.15)`, no shadow. "Agents" is `.px-6.py-3.rounded-[8px].text-white`: fill `rgba(0, 0, 0, 0.35)`, the same white 20px/500 label, the same padding and radius, border 1px `rgba(255, 255, 255, 0.25)`.

### Section Eyebrow Chip
**Role:** The small tinted label that names each home-page chapter above its headline.
`.inline-flex.items-center.justify-center.px-3` measures three ways: "Build and deploy" fills `rgba(255, 255, 255, 0.08)`; "Network and connect" fills `rgba(66, 148, 110, 0.1)` with `#42946E` ink; "Scale and grow" fills `rgba(237, 133, 47, 0.12)` with `#EAB38A` ink. Padding and radius for this row are `not measured`. The tint is the chapter's colour key, repeated in the 6px rail beside the copy — `rgba(255, 255, 255, 0.1)`, `rgba(66, 138, 114, 0.2)` and `rgba(156, 112, 22, 0.2)` over 381–765px of height.

### Console Screenshot Frame
**Role:** The rounded window that holds a product screenshot inside a marketing chapter.
`.w-full.aspect-[1442/1026].overflow-hidden.rounded-[10px]` fills `#0D0C14` at radius 10px with a `rgba(255, 255, 255, 0.1)` border, and its wrapper `.relative.h-full.w-full.aspect-[1442/1026]` carries the warm five-stop bloom, `rgba(62, 45, 45, 0.24) 0px 100px 191px 0px` down to `rgba(62, 45, 45, 0.075) 0px 3.43489px 6.56065px 0px`.

### Pricing Plan Panel
**Role:** The four plan cards — Free above, then Hobby, Pro and Enterprise fused into one bar.
`.free.w-full.flex.flex-col` fills `#181622`, 32px padding, radius 12px, border 1px `#33323E`. `.hobby.self-stretch.flex-1.flex` fills `#0B1428`, 32px padding, radius `12px 0px 0px 12px`, border 1px `#183367`. `.pro.self-stretch.flex-1.flex` fills `#1E132A`, 48px top and 32px side padding, radius 12px, border 1px `#3D2259`. `.enterprise.self-stretch.flex-1.flex` fills `#181622`, 32px padding, radius `0px 12px 12px 0px`, border 1px `#33323E`. Squared inner corners fuse three cards into one bar; 16px of extra top padding lifts Pro out of it.

### Plan CTA Button
**Role:** The action at the foot of each plan column, coloured to the plan rather than to the brand.
`.group/button.flex.items-center.justify-center` measures three ways at 16px/500 with 8px 12px padding, radius 6px and border 1px `rgba(255, 255, 255, 0.1)`: fill `#2057C5`, `#853BCE` or `#545260`, all with `#FFFFFF` text and no shadow. A second row, `.group/button.items-center.justify-center.transform`, repeats those three fills, that border and that padding at 14px/500. Above them, "Deploy a new project" and "Deploy Now" carry the `#B301B3 → #381DBD` gradient with a 1px `#8043C8` border; padding and radius for that row are `not measured`.

### Agent Card
**Role:** The directory tile for one coding agent: mark, name, vendor, surface chips, description, feature list, integration footer.
`.flex.flex-col.p-6.rounded-xl` is an anchor filling `#1C1A28` with 24px padding, radius 12px, border 1px `#33323E`, no shadow, at 310×501px. One variant swaps the border for 1px `rgba(217, 119, 87, 0.2)`. The title is Inter 18px/500/27px in `#FFFFFF` on "Grok Build"; ticks sit in `.inline-flex.items-center.justify-center.w-6`, a 24×24px span at radius 9999px inked `#367859` or `#D97757`. The footer `.mt-auto.pt-4.border-t.border-black/5` puts 16px of padding over a 1px `rgba(255, 255, 255, 0.05)` rule at 260×77–115px.

### Capability Chip
**Role:** The small tag that says where an agent runs and what it plugs into.
Two rows, not interchangeable. `.inline-flex.items-center.gap-1.5.px-2.5` is an anchor: fill `#211F2D`, ink `#545260`, 12px/500/18px, padding 6px 10px, radius 6px, no border, no shadow, box 59–155×30px, text "Skills". `.inline-flex.items-center.gap-1.px-2` is a static span: same `#211F2D` fill and 6px radius, ink `#6C6B7B`, padding 4px 8px, box 53–99×26px, text "Terminal". The clickable chip is 4px taller and a shade brighter in its ink.

### Agent Logo Tile
**Role:** The square button in the vendor strip under the install command, holding one agent's mark.
`.flex.items-center.justify-center.rounded-xl` is a 64×64px button with no fill, no padding, radius 12px, no border, and `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px` as its shadow. The marks inside keep their own colours, `#D97757`, `#EDECEC` and `#6E31AA` among them.

### Terminal Block
**Role:** The copyable install command under the agents hero, tabbed between a CLI form and a prompt form.
`.mt-8.2xl:mt-12.w-[607px].2xl:w-[768px]` fills `#0C0C0E` under `rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` — the single-layer drop among the seven shadows the pages paint. Its tab strip is `.flex.items-center.gap-1.border-b` at `rgba(255, 255, 255, 0.03)` with a 4px gap; the inactive tab "Prompt" is `.relative.px-4.py-3.font-mono` in `rgba(255, 255, 255, 0.4)`, and the active tab is underlined by `.absolute.inset-x-2.-bottom-px.h-0.5` in `#82AAFF`. In the command line the `$` is `rgba(255, 255, 255, 0.3)` and "curl" is `#A78BFA`.

### Command Palette
**Role:** The centred launcher on the New Project screen — a prompt field above a list of project sources.
The field is `.palette-input.bg-secondaryBg.focus:bg-pink-50.dark:bg-secondaryB` at `#1E132A`. Its list is `.overflow-hidden.mt-4.rounded-xl.text-sm`, filled with the `#2D2A3C → #292538` gradient and floated on the Palette Stack, four stops from `rgba(20, 17, 29, 0.15) 0px 13px 29px 0px` out to `rgba(20, 17, 29, 0.02) 0px 211px 84px 0px`. The selected row `.group.mx-2.p-3.rounded-lg` fills `#211F2D` at 12px padding and radius 8px, its contents on a 16px column gap.

### Site Footer
**Role:** The closing block: featured announcements beside columns of links, then a status line and a copyright.
The band is `.bg-sl-footer.border-t.border-sl-border/10` — separated from the page by 1px of `rgba(51, 50, 62, 0.1)`. Its inner block `.max-w-7xl.mx-auto.pt-12.pb-24` carries 48px of vertical padding. Featured copy is Inter 14px/500/20px in `#C4C4CA` on "The peaceful way to ship software is here", the trailing clause in `#A78BFA`. The bottom rail pairs "All systems operational" in `#42946E` on `.text-xs.font-mono.group-hover:underline.text-green-500` with the copyright in `#878593` on `.text-xs.text-gray-500`; sizes there are `not measured`.

## Do's and Don'ts

### Do
- Build surfaces from the ladder — `#13111C` canvas, `#181622` band, `#1C1A28` card, `#211F2D` chip — and let a new surface be a step on it.
- Separate planes with one pixel: `#33323E` opaque, `rgba(255, 255, 255, 0.1)` translucent, `rgba(255, 255, 255, 0.05)` inside a card.
- Set display type in IBM Plex Serif at 400 or 500 and tighten tracking as size grows: −0.72px at 36px, −1.4px at 56px, −1.8px at 72px.
- Keep Inter untracked — every Inter row the census measures is `normal`, 12px through 40px.
- Give a chapter one temperature and repeat it in the eyebrow fill, the 6px rail and the section panel.
- Colour an action to its context: `#553F83` in the hero, `#2057C5`, `#853BCE` and `#545260` down the plan columns.
- Keep the 9999px radius for round things — the 40×40px `.h-10.w-10.rounded-full.object-cover` avatars, the 18×18px plan dots, the 24×24px tick holders.

### Don't
- Don't reach for a drop shadow to raise something. Of the seven measured shadows four are rings or insets, and the drops belong to the console screenshot, the agents code block and the New Project panel.
- Don't put a border on the nav bar: `.sticky.top-0.z-[9999].py-4` paints `#13111C` with no border and no shadow.
- Don't bolden the serif. The census paints IBM Plex Serif at 400 on "161.7M+ deploys per month (and counting)" and at 500 on "Ship software peacefully", at no weight above that.
- Don't spend Inter 700. The census paints it on the author name "Thales Gelinger" at 14px/700/20px; spreading it flattens the 500/600 distinction.
- Don't mix radius languages in one block — panels 16px, cards and tiles 12px, chips and small controls 6px, with the plan bar squaring its inner corners on purpose.
- Don't brighten the accent. `#553F83` is a dusk purple; the saturated `#853BCE` belongs to a plan column.
- Don't let green become an action: `#42946E` is status on "All systems operational" and tint on the "Network and connect" eyebrow.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| −2 | Well | `#0B0B0F` | The `.empty-flap` cells. |
| −1 | Code Well | `#0C0C0E` | The agents terminal block; `#0D0C14` does the same for the console screenshot frame. |
| 0 | Canvas | `#13111C` | Body, nav bar, hero section. |
| 1 | Band | `#181622` | Pricing band, Free and Enterprise panels. |
| 2 | Card | `#1C1A28` | Agent cards, secondary buttons. |
| 3 | Chip | `#211F2D` | Chips, palette rows, comparison rules. |
| 4 | Hairline | `#33323E` | Borders and dividers. |

## Elevation

Depth is luminance plus one pixel: `#13111C` to `#181622` is a few points of lightness, and the climb to `#211F2D` spans less than a tenth of the range. The hairline does the real work, and where a ring replaces a border it is drawn as a shadow: `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset` on the 16px-radius section panels, `rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset` on the tallest, the two-layer ring on the logo tiles. Real elevation goes to four things: the warm bloom under the console screenshot, the blue uplight rising from `.relative.mx-auto.max-w-full.w-fit`, the `0px 25px 50px -12px` drop under the agents code block, the four-stop stack under the New Project palette.

## Imagery

The home page opens on painted illustration rather than photography: a night sky of clouds and stars, then a bullet train crossing a mountain range at dusk in mauve and slate. The same artwork returns on the New Project screen as a dot-screened wallpaper dimmed to near-canvas. Everything else is product — screenshots framed at 10px radius on `#0D0C14` with a `rgba(255, 255, 255, 0.1)` border — plus a customer logo wall of monochrome marks in a grid ruled `rgba(255, 255, 255, 0.2)`. Icons are thin single-weight line drawings in `.icon-container` at 20px and 24px.

## Layout

Marketing pages are contained rather than full-bleed: content sits inside `.max-w-container.w-full.mx-auto` wrappers. The home page runs a twelve-column grid with 32px column gaps and a vertical rail down the left of each chapter, which is why its hero block carries a 159px horizontal inset while the testimonial box carries 48px. Chapters alternate between bare canvas and a tinted 16px-radius slab. The agents page drops the rail for a centred column: hero, command block, logo-tile strip, four-across card grid. The New Project screen is the other system: a slim bar with the mark, a coloured dot, "New project" and "Login", no menus and no footer, one palette floated dead centre.

## Typography Voice

The system runs in two registers and does not blend them. The serif behaves like a poster face — 54px on the home hero at 60.48px leading with −1.96px tracking, roughly −0.036em, and 72px on the agents hero at 76px leading, so the bigger it gets the tighter it packs. The sans behaves like an interface: untracked at every measured size, on comfortable line heights, leaning on 500 and 600 for hierarchy. Between them sits "Compare features" in Inter at 32px/600 — the sans takes over once a heading labels a table instead of opening a chapter. Mono is the third register and stays functional: the flap characters at 40px/400/56px.

## Agent Prompt Guide

## Quick Color Reference
- background: `#13111C`
- text: `#F7F7F8`
- surface: `#1C1A28`
- border: `#33323E`
- accent: `#853BCE`
- primary action: `#553F83`

## Example Component Prompts
1. **Hero Button Pair**: Two side-by-side anchors, 12px 24px padding, 8px radius, 20px/500 `#FFFFFF` labels. Primary fills `#553F83` with a 1px `rgba(255, 255, 255, 0.15)` border; secondary fills `rgba(0, 0, 0, 0.35)` with a 1px `rgba(255, 255, 255, 0.25)` border. No shadow on either.
2. **Agent Card**: 310×501px anchor, fill `#1C1A28`, 24px padding, 12px radius, 1px `#33323E` border, no shadow. Title Inter 18px/500/27px in `#FFFFFF`; 24×24px round tick holders inked `#367859`; footer with 16px top padding above a 1px `rgba(255, 255, 255, 0.05)` rule.
3. **Pricing Plan Bar**: Three fused panels, each 32px padding with a 1px border — Hobby `#0B1428` / `#183367` at radius `12px 0px 0px 12px`, Pro `#1E132A` / `#3D2259` at 48px top padding and 12px radius, Enterprise `#181622` / `#33323E` at radius `0px 12px 12px 0px`. Plan dots 18×18px at 9999px radius in each column's border colour.
4. **Capability Chip Row**: A 6px-gap row of spans, fill `#211F2D`, ink `#6C6B7B`, 12px/500/18px, 4px 8px padding, 6px radius, no border, 26px tall. Interactive variant: anchor, 6px 10px padding, 30px tall, ink `#545260`.
5. **Console Screenshot Frame**: A 1442:1026 window, fill `#0D0C14`, 10px radius, 1px `rgba(255, 255, 255, 0.1)` border, on a `#13111C` canvas under the five-stop Warm Bloom shadow.

## Similar Brands
- **Linear** — a near-black canvas with surfaces a few points apart and hairlines doing the separating, with the same refusal to let shadows imply depth.
- **Supabase** — dark developer marketing that frames product screenshots as artwork and keeps a monospace register for anything you would type.
- **The Browser Company** — painterly artwork used as atmosphere behind interface chrome rather than as decoration beside it.
- **Ghost** — a serif display voice over a dark editorial ground, with a sans doing the interface work beneath it.
- **37signals** — plainspoken copy set large in a book face, illustration standing in for photography throughout.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #13111C;
  --color-well: #0B0B0F;
  --color-code-well: #0C0C0E;
  --color-screenshot-well: #0D0C14;
  --color-band: #181622;
  --color-card: #1C1A28;
  --color-chip: #211F2D;
  --color-hairline: #33323E;
  --color-ink: #F7F7F8;
  --color-ink-strong: #FFFFFF;
  --color-ink-muted: #DCDCE0;
  --color-ink-soft: #C4C4CA;
  --color-ink-dim: #A1A0AB;
  --color-ink-quiet: #6C6B7B;
  --color-ink-faint: #878593;
  --color-ink-flap: #6B7280;
  --color-accent: #553F83;
  --color-action-pro: #853BCE;
  --color-action-hobby: #2057C5;
  --color-action-neutral: #545260;
  --color-plan-hobby: #0B1428;
  --color-plan-pro: #1E132A;
  --color-plan-hobby-border: #183367;
  --color-plan-pro-border: #3D2259;
  --color-panel-cool: #1B2132;
  --color-panel-green: #1F2B2E;
  --color-signal: #42946E;
  --color-signal-fill: #26543F;
  --color-signal-ink: #DFF1E9;
  --color-violet: #A78BFA;
  --color-violet-deep: #6E31AA;
  --color-orchid: #A667E4;
  --color-orchid-soft: #BF93EC;
  --color-pink: #F9A8D4;
  --color-tick-green: #367859;
  --color-tick-clay: #D97757;
  --color-tab-underline: #82AAFF;
  --color-eyebrow-clay: #EAB38A;
  --color-card-wash: rgba(255, 255, 255, 0.05);
  --color-border-wash: rgba(255, 255, 255, 0.1);
  --color-rule-wash: rgba(255, 255, 255, 0.09);
  --color-ink-wash-80: rgba(255, 255, 255, 0.8);
  --color-ink-wash-65: rgba(255, 255, 255, 0.65);
  --color-ink-wash-50: rgba(255, 255, 255, 0.5);
  --color-ink-wash-40: rgba(255, 255, 255, 0.4);
  --color-ink-wash-30: rgba(255, 255, 255, 0.3);
  --color-scrim: rgba(0, 0, 0, 0.35);
  --gradient-cta: linear-gradient(#B301B3, #381DBD);
  --gradient-palette: linear-gradient(#2D2A3C, #292538);

  /* Typography — Families */
  --font-display: 'IBM Plex Serif', 'Source Serif 4', Georgia, serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans-tight: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;

  /* Typography — Scale */
  --text-display: 72px;        --leading-display: 76px;
  --text-headline-xl: 56px;    --leading-headline-xl: 70px;
  --text-hero: 54px;           --leading-hero: 60.48px;
  --text-headline-l: 40px;     --leading-headline-l: 48px;
  --text-headline-m: 40px;     --leading-headline-m: 50px;
  --text-heading: 36px;        --leading-heading: 48px;
  --text-heading-sans: 32px;   --leading-heading-sans: 44px;
  --text-subhead: 28px;        --leading-subhead: 38.5px;
  --text-price: 40px;          --leading-price: 50px;
  --text-title: 20px;          --leading-title: 27.5px;
  --text-card-title: 18px;     --leading-card-title: 27px;
  --text-body: 16px;           --leading-body: 24px;
  --text-small: 14px;          --leading-small: 20px;
  --text-micro: 12px;          --leading-micro: 18px;
  --text-mono: 40px;           --leading-mono: 56px;
  --tracking-display: -1.8px;
  --tracking-headline-xl: -1.4px;
  --tracking-hero: -1.96px;
  --tracking-headline-l: -0.8px;
  --tracking-headline-m: -1px;
  --tracking-heading: -0.72px;
  --tracking-subhead: -0.7px;

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

  /* Border Radius */
  --radius-flap: 4px;
  --radius-control: 6px;
  --radius-button: 8px;
  --radius-screenshot: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-ring: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
  --shadow-inset: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-inset-strong: rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset;
  --shadow-code: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #13111C;
  --color-well: #0B0B0F;
  --color-code-well: #0C0C0E;
  --color-screenshot-well: #0D0C14;
  --color-band: #181622;
  --color-card: #1C1A28;
  --color-chip: #211F2D;
  --color-hairline: #33323E;
  --color-ink: #F7F7F8;
  --color-ink-strong: #FFFFFF;
  --color-ink-muted: #DCDCE0;
  --color-ink-soft: #C4C4CA;
  --color-ink-dim: #A1A0AB;
  --color-ink-quiet: #6C6B7B;
  --color-ink-faint: #878593;
  --color-ink-flap: #6B7280;
  --color-accent: #553F83;
  --color-action-pro: #853BCE;
  --color-action-hobby: #2057C5;
  --color-action-neutral: #545260;
  --color-plan-hobby: #0B1428;
  --color-plan-pro: #1E132A;
  --color-plan-hobby-border: #183367;
  --color-plan-pro-border: #3D2259;
  --color-panel-cool: #1B2132;
  --color-panel-green: #1F2B2E;
  --color-signal: #42946E;
  --color-signal-fill: #26543F;
  --color-signal-ink: #DFF1E9;
  --color-violet: #A78BFA;
  --color-violet-deep: #6E31AA;
  --color-orchid: #A667E4;
  --color-orchid-soft: #BF93EC;
  --color-pink: #F9A8D4;
  --color-tick-green: #367859;
  --color-tick-clay: #D97757;
  --color-tab-underline: #82AAFF;
  --color-eyebrow-clay: #EAB38A;
  --color-card-wash: rgba(255, 255, 255, 0.05);
  --color-border-wash: rgba(255, 255, 255, 0.1);
  --color-rule-wash: rgba(255, 255, 255, 0.09);
  --color-ink-wash-80: rgba(255, 255, 255, 0.8);
  --color-ink-wash-65: rgba(255, 255, 255, 0.65);
  --color-ink-wash-50: rgba(255, 255, 255, 0.5);
  --color-ink-wash-40: rgba(255, 255, 255, 0.4);
  --color-ink-wash-30: rgba(255, 255, 255, 0.3);
  --color-scrim: rgba(0, 0, 0, 0.35);

  --font-display: 'IBM Plex Serif', 'Source Serif 4', Georgia, serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans-tight: 'Inter Tight', 'Inter', ui-sans-serif, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', monospace;

  --text-display: 72px;
  --text-display--line-height: 76px;
  --text-display--letter-spacing: -1.8px;
  --text-headline-xl: 56px;
  --text-headline-xl--line-height: 70px;
  --text-headline-xl--letter-spacing: -1.4px;
  --text-hero: 54px;
  --text-hero--line-height: 60.48px;
  --text-hero--letter-spacing: -1.96px;
  --text-headline-l: 40px;
  --text-headline-l--line-height: 48px;
  --text-headline-l--letter-spacing: -0.8px;
  --text-headline-m: 40px;
  --text-headline-m--line-height: 50px;
  --text-headline-m--letter-spacing: -1px;
  --text-heading: 36px;
  --text-heading--line-height: 48px;
  --text-heading--letter-spacing: -0.72px;
  --text-heading-sans: 32px;
  --text-heading-sans--line-height: 44px;
  --text-subhead: 28px;
  --text-subhead--line-height: 38.5px;
  --text-subhead--letter-spacing: -0.7px;
  --text-price: 40px;
  --text-price--line-height: 50px;
  --text-title: 20px;
  --text-title--line-height: 27.5px;
  --text-card-title: 18px;
  --text-card-title--line-height: 27px;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-small: 14px;
  --text-small--line-height: 20px;
  --text-micro: 12px;
  --text-micro--line-height: 18px;
  --text-mono: 40px;
  --text-mono--line-height: 56px;

  --spacing-4xs: 4px;
  --spacing-3xs: 6px;
  --spacing-2xs: 8px;
  --spacing-xs: 12px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 96px;
  --spacing-5xl: 128px;

  --radius-flap: 4px;
  --radius-control: 6px;
  --radius-button: 8px;
  --radius-screenshot: 10px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-pill: 9999px;

  --shadow-ring: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
  --shadow-inset: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  --shadow-inset-strong: rgba(255, 255, 255, 0.2) 0px 0px 0px 1.5px inset;
  --shadow-code: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
```