---
version: alpha
name: n8n
description: "Midnight navy, hairline rings, and a sunrise burning up behind the footer."
colors:
  on-surface-variant: "#9D9797"
  surface: "#0E0918"
  primary: "#FD8925"
  on-surface: "#FFFFFF"
  card-navy: "#1B1728"
  blank-card: "#1A1624"
  warm-grey: "#D1CECE"
  heading-mute: "#B6B5B9"
  red: "#FF0C00"
  electric-blue: "#077AC7"
  violet: "#6B21EF"
  rust: "#EE4F27"
  base-red: "#FF492C"
  slate-blue: "#48556A"
  hairline: "rgba(255, 255, 255, 0.1)"
  chip-white: "rgba(255, 255, 255, 0.07)"
typography:
  display:
    fontFamily: Geomanist
    fontSize: 54px
    fontWeight: 400
    lineHeight: 54px
    letterSpacing: -1.08px
  headline-lg:
    fontFamily: Geomanist
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -0.96px
  headline-md:
    fontFamily: Geomanist
    fontSize: 38px
    fontWeight: 400
    lineHeight: 38px
    letterSpacing: -0.76px
  headline-sm:
    fontFamily: Geomanist
    fontSize: 32px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.64px
  headline-xs:
    fontFamily: Geomanist
    fontSize: 28px
    fontWeight: 400
    lineHeight: 33.6px
    letterSpacing: 0em
  title:
    fontFamily: Geomanist
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: -0.48px
  lead:
    fontFamily: Geomanist
    fontSize: 24px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0em
  subheading:
    fontFamily: Geomanist
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.4px
  card-title:
    fontFamily: Geomanist
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: -0.36px
  body:
    fontFamily: Geomanist
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  nav-link:
    fontFamily: Geomanist
    fontSize: 15px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0em
  label:
    fontFamily: Geomanist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  badge:
    fontFamily: Geomanist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 17.5px
    letterSpacing: 0em
rounded:
  node-icon-chip-active-tab-rail: 4px
  tab-trigger-and-its-indicator: 6px
  button-integration-card-github-badge: 8px
  logo-tile-integration-icon-well: 12px
  card-nav-wrapper-category-tile: 16px
  card-category-icon-well: 24px
  hiring-badge: 24px
  toggle-shell: 25px
  footer-shell: 24px
  media-corner: 24px
  avatar-pill-badge-filter-radio: 9999px
spacing:
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 44px
  5xl: 48px
  6xl: 64px
  7xl: 80px
  section-tall: 144px
  section-hero: 192px
---
# n8n — Style Reference

> Midnight navy, hairline rings, and a sunrise burning up behind the footer.

**Theme:** dark

n8n paints almost everything on one near-black violet canvas, `#0E0918`, then refuses to lighten it: card fills land barely above the ground, so what separates a card from the page is the hairline white border around it, not a surface step. The palette is austere — warm grey body ink, white for headings and controls, and a single saturated moment, the amber-to-red gradient the primary button wears on every page. Type is Geomanist at one weight across every heading the census measures; hierarchy comes from size and from tracking that tightens as size climbs, and emphasis switches family to Geomanist Book rather than adding weight. Content lives inside cards rather than full-bleed bands, on a 64px section beat that opens when a statement needs room. Depth is borders and inset rings; a real drop shadow is a rarity spent on the announcement button.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Navy | `#0E0918` | `--color-canvas` | The canvas — `body` fill and section ground on every page, and the dark stop of `.card.card--brown-gradient`, so it is a fill as well as a ground. |
| Card Navy | `#1B1728` | `--color-surface-card` | The workhorse card fill — `.card.card--dark-navy`, `.integration-card`, `.card.card--default`, `.tile-link` — at 101 fill observations, more than any other opaque fill in the capture. |
| Blank Card | `#1A1624` | `--color-surface-blank` | The quote card's fill (`.card.card--blank`) — a hair darker than Card Navy, which is what separates two adjacent card families. |
| Warm Grey | `#D1CECE` | `--color-text-primary` | Body ink: paragraphs, list items, input text, card descriptions. Its 2093 observations are all text, which makes it the most-painted colour here by a wide margin. |
| White | `#FFFFFF` | `--color-text-strong` | Headings, nav links, button labels, `strong` emphasis. Eight of its 513 observations are fills on `.badge-info.border-shades-soft-gray.text-shades-slate-blue.rounded-3xl`, and a ninth on the 32px `a` "AI" on the workflows page. |
| Muted Grey | `#9D9797` | `--color-text-muted` | The third ink: role labels, the logo-banner lead-in ("AI agents and workflows for technical teams at"), secondary links. It sits under body copy — the heading census paints `#FFFFFF` and `#B6B5B9`. |
| Heading Mute | `#B6B5B9` | `--color-heading-mute` | Editorial: the 48px h2 rows sampling "AI agents and workflows you can see and control", whose white twin samples "you can see and control" — one sentence split into setup and payoff. |
| Amber | `#FD8925` | `--color-accent-amber` | Top stop of the primary CTA gradient. Its ten observations are all gradient stops: five on `.btn.relative.cursor-pointer.flex` ("Get Started") and five on `.badge.flex.h-8.w-fit` ("Monitor"). |
| Red | `#FF0C00` | `--color-accent-red` | Bottom stop of the same gradient, on the same carrier and the same ten stop observations. Amber and Red travel as a pair. |
| Electric Blue | `#077AC7` | `--color-link-blue` | Top stop of the announcement gradient on `.btn.relative.cursor-pointer.flex` (sample text "Get your ticket →") and `.btn.relative.cursor-pointer.items-center`, and the fourth layer of that button's shadow. |
| Violet | `#6B21EF` | `--color-link-violet` | Bottom stop of that same gradient, on `.btn.relative.cursor-pointer.flex` and `.btn.relative.cursor-pointer.items-center`, and a stop in `.section-background-glow-effect`. |
| Rust | `#EE4F27` | `--color-accent-rust` | The selected radio's ring on the integrations filter (`.border-primary-600`); at 20% it tints `.card.card--rusty`. A state colour. |
| Base Red | `#FF492C` | `--color-base-red` | A single 4px rail — `.bg-base-red.drop-shadow-red-glow` — marking the active use-case tab. |
| Slate Blue | `#48556A` | `--color-badge-ink` | Ink of `.badge-info.border-shades-soft-gray.text-shades-slate-blue.rounded-3xl`, the badge that inverts to a white fill; at 20% it fills the `.segment-tabs-control.bg-shades-slate-blue/20.flex.flex-row` track. |
| Hairline | `rgba(255, 255, 255, 0.1)` | `--border-hairline` | The structural line of the system: 84 of its observations are borders, and cards and tiles get exactly 1px. |
| Chip White | `rgba(255, 255, 255, 0.07)` | `--fill-chip` | The fill under small icon chips and the category tile's icon well — faint enough to read as a cut-out. |

## Tokens — Typography

### Geomanist — every heading and nearly all body copy; hierarchy from size and negative tracking, not weight · `--font-display`

- **Substitute:** Aeonik, Neue Haas Grotesk Display, `ui-sans-serif`
- **Weights:** 300, 400, 500
- **Sizes:** 14px, 15px, 16px, 18px, 20px, 24px, 28px, 32px, 38px, 48px, 54px
- **Line height:** 15px at 15px (nav links) up to 36px at 24px — 1.0 at the display end, 1.5 in reading copy
- **Letter spacing:** −1.08px at 54px, −0.96px at 48px, −0.76px at 38px, −0.64px at 32px, −0.48px at 24px, −0.4px at 20px, −0.36px at 18px; normal at 16px and below
- **Role:** every heading and nearly all body copy; hierarchy from size and negative tracking, not weight

### Geomanist Book — the emphasis face: `strong` inside a paragraph, names under a quote, feature labels · `--font-book`

- **Substitute:** Geomanist, Aeonik, `ui-sans-serif`
- **Weights:** 400
- **Sizes:** 14px, 16px, 18px, 20px, 24px
- **Line height:** 18px at 18px (the author name) up to 36px at 24px
- **Letter spacing:** −0.12px at 18px; normal at every other size
- **Role:** the emphasis face: `strong` inside a paragraph, names under a quote, feature labels

### ui-sans-serif — the declared system fallback behind both brand faces · `--font-system`

- **Substitute:** `system-ui`, `-apple-system`, `sans-serif`
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** the declared system fallback behind both brand faces

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display | 54px | 54px | −1.08px | `--text-display` |
| Headline lg | 48px | 48px | −0.96px | `--text-headline-lg` |
| Headline md | 38px | 38px / 47.5px | −0.76px | `--text-headline-md` |
| Headline sm | 32px | 32px / 40px | −0.64px | `--text-headline-sm` |
| Headline xs | 28px | 33.6px | normal | `--text-headline-xs` |
| Title | 24px | 28.8px | −0.48px | `--text-title` |
| Lead | 24px | 36px | normal | `--text-lead` |
| Subheading | 20px | 30px | −0.4px / normal | `--text-subheading` |
| Card title | 18px | 27px | −0.36px / normal | `--text-lg` |
| Body | 16px | 24px | normal | `--text-body` |
| Nav link | 15px | 15px | normal | `--text-nav` |
| Label | 14px | 21px | normal | `--text-label` |
| Badge | 14px | 17.5px | normal | `--text-badge` |

## Tokens — Spacing & Shapes

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

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 4px | `--spacing-2xs` |
| xs | 8px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 16px | `--spacing-md` |
| lg | 20px | `--spacing-lg` |
| xl | 24px | `--spacing-xl` |
| 2xl | 32px | `--spacing-2xl` |
| 3xl | 40px | `--spacing-3xl` |
| 4xl | 44px | `--spacing-4xl` |
| 5xl | 48px | `--spacing-5xl` |
| 6xl | 64px | `--spacing-6xl` |
| 7xl | 80px | `--spacing-7xl` |
| section-tall | 144px | `--spacing-section-tall` |
| section-hero | 192px | `--spacing-section-hero` |

### Border Radius

| Element | Value |
|---------|-------|
| Node icon chip, active-tab rail | 4px |
| Tab trigger and its indicator | 6px |
| Button, integration card, GitHub badge | 8px |
| Logo tile, integration icon well | 12px |
| Card (small), nav wrapper, category tile | 16px |
| Card (default), category icon well | 24px |
| Hiring badge | 24px |
| Toggle shell | 25px |
| Footer shell | 24px 24px 0 0 |
| Media corner (features page) | 24px 0 0 |
| Avatar, pill badge, filter radio | 9999px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Ring (warm) | `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 142, 93, 0.3) 0px 1px 0px 0px inset` | `--shadow-ring` |
| Announcement button | `rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(8, 8, 8, 0.2) 0px 1px 2px 0px, rgba(8, 8, 8, 0.08) 0px 4px 4px 0px, rgb(7, 122, 199) 0px 7px 0px -12px, rgba(255, 255, 255, 0.12) 0px 6px 12px 0px inset` | `--shadow-button` |
| Chat bubble | `rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset, rgba(0, 0, 0, 0.23) 0px 4px 16px -8px` | `--shadow-bubble` |
| Toggle | `rgba(0, 0, 0, 0.2) 1px 2px 8px 0px` | `--shadow-toggle` |
| Gradient tile | `rgba(0, 0, 0, 0.26) 0px 0px 8px 0px` | `--shadow-tile` |

### Layout

- **Page max-width:** `not measured` — the census names the wrappers (`.max-w-section-layout`, `.max-w-section-default`) but no width; the widest measured box is the 1120px `.card.card--brown-gradient`.
- **Section gap:** 64px is the default beat (35 rows, all pages); 144px on the tall statement sections; 192px once, on `.max-w-section-default`; 48px for inner blocks.
- **Card padding:** 24px on `.card.card--dark-navy` and `.card.card--default`; 48px top / 44px side on `.card.card--blank`; 28px top / 16px side on `.integration-card`; 12px on `.tile-link`.
- **Element gap:** 8px is the most-painted gap (190 rows), then 16px (146), 4px (71), 20px (50), 40px (44), 24px (41), 32px (21) — every step in the gap census is a multiple of 4px.

## Components

### Navigation Bar

**Role:** A floating pill that rides over the hero instead of sitting on a band of its own.

Built from `.navbar-wrapper.max-w-section-layout.bg-shades-midnight-navy/70.lg:bg-shades-midnight-navy/20`: fill `rgba(14, 9, 24, 0.2)`, radius 16px, on every page. Links are `.text-nav-link.relative.z-10.flex` — Geomanist 15px/400, line-height equal to size, normal tracking, `#FFFFFF`, 4px between label and chevron. The near-transparent fill is the idea: the bar borrows the hero's colour instead of declaring one.

### Primary CTA Button

**Role:** The one saturated object on the page — "Get Started", "Get started for free".

The class is `.btn.relative.cursor-pointer.flex`, and the amber-to-red gradient `#FD8925 → #FF0C00` sits on the row whose sample text is "Get Started" (five links on `.btn.relative.cursor-pointer.flex`; the other five gradient observations are divs on `.badge.flex.h-8.w-fit`, sample text "Monitor", features page). Geometry from the same class: Geomanist 14px/400/21px, ink `#FFFFFF`, radius 8px, `padding not measured`, no border, box `not measured` — the census emits no row for this variant. Physically small, and with no rival saturated fill it still wins the page.

### Announcement Button

**Role:** The lit button in the top bar — the one element the system allows to look three-dimensional.

Also `.btn.relative.cursor-pointer.flex`, the variant measured across seven links on home and features, whose exemplar reads "Get your ticket →". Same geometry — 14px/400/21px, `#FFFFFF`, radius 8px, padding 0 20px — over the `#077AC7 → #6B21EF` gradient, with a five-layer shadow: `rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(8, 8, 8, 0.2) 0px 1px 2px 0px, rgba(8, 8, 8, 0.08) 0px 4px 4px 0px, rgb(7, 122, 199) 0px 7px 0px -12px, rgba(255, 255, 255, 0.12) 0px 6px 12px 0px inset`. Two inset highlights, two soft drops, a coloured under-glow — eight observations across home and features, on two carrier classes — `.btn.relative.cursor-pointer.flex` and `.btn.relative.cursor-pointer.items-center`.

### Secondary Button

**Role:** The quieter partner beside the CTA — "Talk to sales", "Load more".

Fill `rgba(163, 163, 163, 0.2)`, text `#FFFFFF` at 14px/400, padding 0 20px, radius 8px, **no border and no shadow**, carried by `.btn.relative.cursor-pointer.flex` as "Talk to sales" on the home page and as a `button` twice, on the integrations and workflows pages, the measured exemplar labelled "Load more". The grey is translucent, so it takes a tint from whatever sits behind it, and its 8px radius matches the primary: only colour separates intent.

### GitHub Star Badge

**Role:** Social proof parked in the nav, styled as a control rather than a graphic.

`.github-badge.flex.flex-col.justify-center` — fill `rgba(255, 255, 255, 0.15)`, border 1px `rgba(255, 255, 255, 0.2)`, text `#FFFFFF` at 14px/400, padding 0 6px, radius 8px, four links across the pages. The brightest translucent fill here, with a border a step brighter still.

### Hiring Badge

**Role:** The light-on-dark inversion, attached to the footer's Careers link.

`.badge-info.border-shades-soft-gray.text-shades-slate-blue.rounded-3xl`: fill `#FFFFFF`, ink `#48556A`, border 1px `#E4E4E4`, 14px/400 on a 17.5px line, padding 4px 10px, radius 24px, two box sizes, 58×28px and 78×28px, eight across the pages. Everything else is a pale mark on a dark ground; this one flips, so the label "Hiring" reads before the headings above it. Reserve the inversion for status.

### Integration Card

**Role:** One entry in the integrations catalogue — icon, name, one truncated line of description.

`.integration-card.bg-shades-dark-navy.flex.flex-col`: fill `#1B1728`, border 1px `rgba(255, 255, 255, 0.1)`, radius 8px, padding 28px top / 16px side, text `#D1CECE` at 16px/400, boxes 268×247px, fifty in the grid. The icon sits in `.flex.size-14.flex-col.items-center` — an 88×88px well filled `rgba(255, 255, 255, 0.1)` at radius 12px, no border. Names are Geomanist 18px/400/27px with −0.36px tracking in `#FFFFFF`.

### Template Card

**Role:** A workflow template in the browse grid — title, the node icons it uses, an author avatar.

`.card.card--default.rounded-small.p-6`, in two measured variants: twenty-four on the workflows page at 352×166px, six on the features page at 352×160–166px. Both paint fill `#1B1728`, border 1px `rgba(255, 255, 255, 0.05)` — half the strength the integration card uses — radius 16px, padding 24px, text `#D1CECE` at 16px/400. Node icons are `.flex.size-8.shrink-0.items-center`: 32×32px, `rgba(255, 255, 255, 0.07)`, radius 4px, no border, the overflow count in an identical chip.

### Feature Card

**Role:** The large two-up narrative card on the features page — image, headline, paragraph, text link.

`.card.card--dark-navy.overflow-hidden.rounded-default`: fill `#1B1728`, border 1px `rgba(255, 255, 255, 0.1)`, radius 24px, padding 24px, boxes 544×564px, six across the page. Its headline is Geomanist 32px/400 on a 32px line with −0.64px tracking in `#FFFFFF` — leading equal to size, so a two-line title sets as a tight block. The 24px radius leans toward a top-level surface, but it does not rank the class: `.card.card--default` paints 16px and 24px.

### Quote Card

**Role:** A customer or community voice, with the person's face and handle beneath it.

`.card.card--blank.overflow-hidden.rounded-small`: fill `#1A1624`, border 1px `rgba(255, 255, 255, 0.05)`, radius 16px, padding 48px top / 44px side, a 40px internal gap, boxes 650×364px, forty across the pages. The quote is Geomanist 20px/400/30px in `#D1CECE`, its emphasised clause swapped to Geomanist Book at the same 20px/30px in `#FFFFFF`. Avatars are round cover images, 46×46px at radius 9999px, 20px from the name.

### Gradient Social-Proof Tile

**Role:** Three tinted stat strips on the home page — stars, rating, community size.

`.gradient-tile.gradient-tile--default.px-3.5.py-3.5`: fill `rgba(13, 10, 25, 0.28)`, border 1px `rgba(255, 255, 255, 0.1)`, radius 8px, padding 14px, 24px internal gap, text `#D1CECE` at 16px/400, outer shadow `rgba(0, 0, 0, 0.26) 0px 0px 8px 0px`. Each variant gets its own wash: `--default` runs `rgba(175, 106, 140, 0.46) → rgba(98, 65, 83, 0.38) → rgba(122, 57, 109, 0.29)`, `--purple` adds `rgba(255, 79, 49, 0.12)`, `--orange` adds `rgba(178, 0, 255, 0.15)`. The names and hues are crossed; read the values.

### Footer

**Role:** The closing shell — logo, tagline, four link columns, legal rule.

`.footer-main-inner.rounded-t-default.bg-shades-midnight-navy/50.relative`: fill `rgba(14, 9, 24, 0.5)` with a 24px 24px 0 0 radius, on every page. Half-opacity midnight navy lets the sunrise bloom through, so the shell reads as smoked glass. Link columns are `.footer-links-group.flex.flex-1.flex-col` at an 8px gap; links sit at 16px/400 in `#FFFFFF`. The page ends on a card, not an edge.

## Do's and Don'ts

### Do

- Separate surfaces with a 1px `rgba(255, 255, 255, 0.1)` border before reaching for a lighter fill — 84 of its observations are borders.
- Keep display type at the painted weight: every heading row the census measures, from the 54px "Think it. Build it. Extend it." to the 18px "AI agent chat", is 400.
- Tighten tracking as size climbs — −0.36px at 18px through −1.08px at 54px — and set leading equal to size at 48px and 54px.
- Emphasise by switching to Geomanist Book and lifting the ink from `#D1CECE` to `#FFFFFF`, the way `strong` does at 20px/30px.
- The radius ladder runs 4px chip, 8px control and catalogue entry, 12px icon well, 16px list card, 24px top-level surface — but it does not rank a class: `.card.card--default` paints 16px and 24px, and 24px also carries the hiring badge and a 96×96px icon well.

### Don't

- Don't introduce a second filled accent. Amber and Red are the two stops of the gradient on `.btn.relative.cursor-pointer.flex` ("Get Started") and `.badge.flex.h-8.w-fit` ("Monitor"); apart from the `#FF492C` tab rail, every other saturated hex in the inventory is a gradient stop or a border.
- Don't bold a heading. No heading row in the census paints above 400.
- Don't scatter drop shadows: the pages paint five shadow values, four tied to one element type each. Depth is the inset ring `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 142, 93, 0.3) 0px 1px 0px 0px inset`.
- Don't lighten the canvas for hierarchy. `#1A1624` and `#1B1728` sit a few points above `#0E0918`, and that gap is the whole ladder.
- Don't put `#9D9797` in a heading or `#FFFFFF` behind a large surface: white's fill observations are eight on `.badge-info.border-shades-soft-gray.text-shades-slate-blue.rounded-3xl` and a ninth on a 32px boxed word.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#0E0918` | The `body` fill and every section ground. |
| 1 | Blank Card | `#1A1624` | Quote cards (`.card.card--blank`). |
| 2 | Card Navy | `#1B1728` | Feature, template, integration and category cards. |
| 3 | Deep Navy | `#1F192A` | `.parallax-card.parallax--orange`; at 50% it is the chat bubble's fill. |
| Overlay | Smoked shell | `rgba(14, 9, 24, 0.5)` | Footer shell; `rgba(14, 9, 24, 0.2)` for the nav. |
| Inlay | Chip well | `rgba(255, 255, 255, 0.07)` | Icon chips and category icon wells. |

## Elevation

Depth is edges. The most-painted shadow is not a shadow but a ring — `rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 142, 93, 0.3) 0px 1px 0px 0px inset`, sixteen observations across three pages — a 1px inset outline with a warm highlight on the top edge, so the card reads as lit from above rather than lifted. The fill ladder below it is shallow, which is why the hairline border does the work.

## Imagery

Rendered 3D is the signature, used sparingly: a chrome-and-fire lightning bolt with chromatic fringing and a warm bloom spilling onto the canvas dominates the home hero, and a purple-ringed core on a circuit field anchors the speed section. Product appears as the real canvas UI — node graphs on a dotted dark grid, tilted in perspective for the features hero, flat inside feature cards at a 16px corner. Logos come two ways: greyed wordmarks in the trust band, and full-colour app icons in translucent wells on the integrations grid, where saturated colour may multiply. Faces are small, round and photographic at 46px. Above the footer every page paints an orange-to-black sunrise scattered with small `×` marks.

## Layout

Everything is contained. No full-bleed colour band appears in the capture: exactly one section paints a fill (`#0E0918`, `.w-full.px-section-gap-x.md:px-section-gap-x-md.lg:px-section-gap-x-lg`, features page) and it matches the canvas; the rest paint nothing at all, so the shape you see is a card. The nav is a fixed floating pill at 16px radius; the footer a shell with 24px top corners. Vertical rhythm runs on 64px, opening to 144px for the tall statement sections and once to 192px on the home page's widest block, with 48px for inner blocks; horizontal inset steps 48px, 64px, 80px. The pitch pages carry the wide cards — 544×564px on features, 650×364px for the quote card on every page — and the catalogue pages the narrow ones, 268×247px on integrations and 352×166px on workflows. Column counts are `not measured`.

## Typography Voice

The type has two modes and little middle ground. Display mode sets leading equal to size — 54px on 54px, 48px on 48px, 32px on 32px — and pulls tracking to −1.08px, −0.96px, −0.64px, so a two-line headline compresses into a solid block. Reading mode does the opposite: 16px on 24px, 20px on 30px, 14px on 21px, normal tracking, a clean 1.5. The exception is 38px on 47.5px, where a card headline needs room inside a fixed box. The character comes from emphasis: `strong` does not get heavier, it gets a different face.

## Agent Prompt Guide

## Quick Color Reference

- background: `#0E0918`
- text: `#D1CECE`
- surface: `#1B1728`
- border: `rgba(255, 255, 255, 0.1)`
- accent: `#FD8925`
- primary action: `linear-gradient(#FD8925, #FF0C00)`

## Example Component Prompts

1. **Primary CTA Button**: A button with a top-to-bottom gradient `#FD8925` → `#FF0C00`, label Geomanist 14px/400 on a 21px line in `#FFFFFF`, border-radius 8px, no border, no shadow, box not measured; let the label set the width. The gradient belongs to `.btn.relative.cursor-pointer.flex` (sample text "Get Started").
2. **Integration Card**: A 268×247px card, fill `#1B1728`, 1px border `rgba(255, 255, 255, 0.1)`, border-radius 8px, padding 28px block / 16px inline. Inside: an 88×88px icon well filled `rgba(255, 255, 255, 0.1)` at border-radius 12px, the name in Geomanist 18px/400 on a 27px line with −0.36px letter-spacing in `#FFFFFF`, two lines of description at 16px/400 on 24px in `#D1CECE`.
3. **Quote Card**: A 650×364px card, fill `#1A1624`, 1px border `rgba(255, 255, 255, 0.05)`, border-radius 16px, padding 48px block / 44px inline, 40px gap between blocks. Quote in Geomanist 20px/400 on a 30px line in `#D1CECE`, emphasised clause in Geomanist Book at the same size in `#FFFFFF`. Footer row: 46px circular avatar, 20px gap, name in Geomanist Book 18px/400 on 18px with −0.12px letter-spacing in `#FFFFFF`, handle `#9D9797` at 14px/400 on 21px.
4. **Floating Nav Bar**: A fixed nav pill, fill `rgba(14, 9, 24, 0.2)`, border-radius 16px, over the hero with no opaque band behind it. Links in Geomanist 15px/400 on a 15px line at normal tracking in `#FFFFFF`, 4px between label and chevron. Right side: a badge filled `rgba(255, 255, 255, 0.15)`, 1px border `rgba(255, 255, 255, 0.2)`, border-radius 8px, padding 0 6px, 14px/400 `#FFFFFF`; a text link; the gradient CTA.

## Similar Brands

- **Linear** — the same near-black violet ground, hairline-bordered cards and single-weight display type carrying the whole hierarchy.
- **Supabase** — a dark developer canvas that spends its one saturated colour on the primary action and leaves the rest in neutral surface steps.
- **Raycast** — translucent chips and wells over a dark base, with rounded-square icon tiles carrying full-colour third-party marks.
- **Railway** — contained cards rather than full-bleed bands, a shallow surface ladder, rendered 3D reserved for one hero object.
- **Vercel** — one accent, a monochrome text ramp, and rank separated by radius instead of shadow.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-canvas: #0E0918;
  --color-surface-blank: #1A1624;
  --color-surface-card: #1B1728;
  --color-surface-deep: #1F192A;
  --color-text-primary: #D1CECE;
  --color-text-strong: #FFFFFF;
  --color-text-muted: #9D9797;
  --color-text-dim: #999999;
  --color-heading-mute: #B6B5B9;
  --color-badge-ink: #48556A;
  --color-badge-border: #E4E4E4;
  --color-ring-gray: #7A7A7A;
  --color-hairline-hard: #464646;
  --color-accent-amber: #FD8925;
  --color-accent-red: #FF0C00;
  --color-accent-rust: #EE4F27;
  --color-base-red: #FF492C;
  --color-glow-amber: #FF9B26;
  --color-link-blue: #077AC7;
  --color-link-violet: #6B21EF;
  --color-card-brown: #432D33;
  --color-btn-stop-1: #17121F;
  --color-btn-stop-2: #251E32;
  --color-black: #000000;
  --border-hairline: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.05);
  --border-ring: rgba(255, 255, 255, 0.15);
  --border-badge: rgba(255, 255, 255, 0.2);
  --fill-chip: rgba(255, 255, 255, 0.07);
  --fill-tile: rgba(255, 255, 255, 0.03);
  --fill-ghost: rgba(163, 163, 163, 0.2);
  --fill-navbar: rgba(14, 9, 24, 0.2);
  --fill-footer: rgba(14, 9, 24, 0.5);
  --fill-bubble: rgba(31, 25, 42, 0.5);
  --fill-tabs: rgba(72, 85, 106, 0.2);
  --gradient-cta: linear-gradient(#FD8925, #FF0C00);
  --gradient-announce: linear-gradient(#077AC7, #6B21EF);
  --gradient-brown: linear-gradient(#432D33, #0E0918);

  /* Typography — Families */
  --font-display: 'Geomanist', ui-sans-serif, system-ui, sans-serif;
  --font-book: 'Geomanist Book', 'Geomanist', ui-sans-serif, system-ui, sans-serif;
  --font-system: ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display: 54px;        --leading-display: 54px;
  --text-headline-lg: 48px;    --leading-headline-lg: 48px;
  --text-headline-md: 38px;    --leading-headline-md: 47.5px;
  --text-headline-sm: 32px;    --leading-headline-sm: 40px;
  --text-headline-xs: 28px;    --leading-headline-xs: 33.6px;
  --text-title: 24px;          --leading-title: 28.8px;
  --text-lead: 24px;           --leading-lead: 36px;
  --text-subheading: 20px;     --leading-subheading: 30px;
  --text-lg: 18px;             --leading-lg: 27px;
  --text-body: 16px;           --leading-body: 24px;
  --text-nav: 15px;            --leading-nav: 15px;
  --text-label: 14px;          --leading-label: 21px;
  --text-badge: 14px;          --leading-badge: 17.5px;
  --tracking-display: -1.08px;
  --tracking-headline-lg: -0.96px;
  --tracking-headline-md: -0.76px;
  --tracking-headline-sm: -0.64px;
  --tracking-title: -0.48px;
  --tracking-subheading: -0.4px;
  --tracking-lg: -0.36px;
  --tracking-book-lg: -0.12px;

  /* Spacing */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 44px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;
  --spacing-7xl: 80px;
  --spacing-section-tall: 144px;
  --spacing-section-hero: 192px;

  /* Border Radius */
  --radius-chip: 4px;
  --radius-tab: 6px;
  --radius-control: 8px;
  --radius-well: 12px;
  --radius-small: 16px;
  --radius-default: 24px;
  --radius-toggle: 25px;
  --radius-footer: 24px 24px 0 0;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-ring: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 142, 93, 0.3) 0px 1px 0px 0px inset;
  --shadow-button: rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(8, 8, 8, 0.2) 0px 1px 2px 0px, rgba(8, 8, 8, 0.08) 0px 4px 4px 0px, rgb(7, 122, 199) 0px 7px 0px -12px, rgba(255, 255, 255, 0.12) 0px 6px 12px 0px inset;
  --shadow-bubble: rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset, rgba(0, 0, 0, 0.23) 0px 4px 16px -8px;
  --shadow-toggle: rgba(0, 0, 0, 0.2) 1px 2px 8px 0px;
  --shadow-tile: rgba(0, 0, 0, 0.26) 0px 0px 8px 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-canvas: #0E0918;
  --color-surface-blank: #1A1624;
  --color-surface-card: #1B1728;
  --color-surface-deep: #1F192A;
  --color-text-primary: #D1CECE;
  --color-text-strong: #FFFFFF;
  --color-text-muted: #9D9797;
  --color-text-dim: #999999;
  --color-heading-mute: #B6B5B9;
  --color-badge-ink: #48556A;
  --color-badge-border: #E4E4E4;
  --color-ring-gray: #7A7A7A;
  --color-hairline-hard: #464646;
  --color-accent-amber: #FD8925;
  --color-accent-red: #FF0C00;
  --color-accent-rust: #EE4F27;
  --color-base-red: #FF492C;
  --color-glow-amber: #FF9B26;
  --color-link-blue: #077AC7;
  --color-link-violet: #6B21EF;
  --color-card-brown: #432D33;
  --color-btn-stop-1: #17121F;
  --color-btn-stop-2: #251E32;
  --color-black: #000000;
  --color-border-hairline: rgba(255, 255, 255, 0.1);
  --color-border-soft: rgba(255, 255, 255, 0.05);
  --color-border-ring: rgba(255, 255, 255, 0.15);
  --color-border-badge: rgba(255, 255, 255, 0.2);
  --color-fill-chip: rgba(255, 255, 255, 0.07);
  --color-fill-tile: rgba(255, 255, 255, 0.03);
  --color-fill-ghost: rgba(163, 163, 163, 0.2);
  --color-fill-navbar: rgba(14, 9, 24, 0.2);
  --color-fill-footer: rgba(14, 9, 24, 0.5);
  --color-fill-bubble: rgba(31, 25, 42, 0.5);
  --color-fill-tabs: rgba(72, 85, 106, 0.2);

  --font-display: 'Geomanist', ui-sans-serif, system-ui, sans-serif;
  --font-book: 'Geomanist Book', 'Geomanist', ui-sans-serif, system-ui, sans-serif;
  --font-system: ui-sans-serif, system-ui, sans-serif;

  --text-display: 54px;
  --text-display--line-height: 54px;
  --text-display--letter-spacing: -1.08px;
  --text-headline-lg: 48px;
  --text-headline-lg--line-height: 48px;
  --text-headline-lg--letter-spacing: -0.96px;
  --text-headline-md: 38px;
  --text-headline-md--line-height: 47.5px;
  --text-headline-md--letter-spacing: -0.76px;
  --text-headline-sm: 32px;
  --text-headline-sm--line-height: 40px;
  --text-headline-sm--letter-spacing: -0.64px;
  --text-headline-xs: 28px;
  --text-headline-xs--line-height: 33.6px;
  --text-title: 24px;
  --text-title--line-height: 28.8px;
  --text-title--letter-spacing: -0.48px;
  --text-lead: 24px;
  --text-lead--line-height: 36px;
  --text-subheading: 20px;
  --text-subheading--line-height: 30px;
  --text-subheading--letter-spacing: -0.4px;
  --text-lg: 18px;
  --text-lg--line-height: 27px;
  --text-lg--letter-spacing: -0.36px;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-nav: 15px;
  --text-nav--line-height: 15px;
  --text-label: 14px;
  --text-label--line-height: 21px;
  --text-badge: 14px;
  --text-badge--line-height: 17.5px;

  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 44px;
  --spacing-5xl: 48px;
  --spacing-6xl: 64px;
  --spacing-7xl: 80px;
  --spacing-section-tall: 144px;
  --spacing-section-hero: 192px;

  --radius-chip: 4px;
  --radius-tab: 6px;
  --radius-control: 8px;
  --radius-well: 12px;
  --radius-small: 16px;
  --radius-default: 24px;
  --radius-toggle: 25px;
  --radius-pill: 9999px;

  --shadow-ring: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(255, 142, 93, 0.3) 0px 1px 0px 0px inset;
  --shadow-button: rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset, rgba(8, 8, 8, 0.2) 0px 1px 2px 0px, rgba(8, 8, 8, 0.08) 0px 4px 4px 0px, rgb(7, 122, 199) 0px 7px 0px -12px, rgba(255, 255, 255, 0.12) 0px 6px 12px 0px inset;
  --shadow-bubble: rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset, rgba(0, 0, 0, 0.23) 0px 4px 16px -8px;
  --shadow-toggle: rgba(0, 0, 0, 0.2) 1px 2px 8px 0px;
  --shadow-tile: rgba(0, 0, 0, 0.26) 0px 0px 8px 0px;
}
```