n8n.io

DESIGN.md

Narrative design system document — paste directly into Claude Code, Cursor, or Bolt.

---
version: alpha
name: n8n.io
description: "Dark-canvas product system built on #0e0918 with #a3a3a3 as the single brand accent. Type anchored in geomanist at 54px / weight 400. Extracted automatically from https://n8n.io/ — rendered styles via getComputedStyle() + CSS custom properties (token-only values may not be painted)."
narrative: |
  n8n.io is built on a near-black canvas (rgb(14, 9, 24)).
  The system uses rgb(163, 163, 163) as the singular interactive color.
  Sharp 0px corners on CTAs — architectural restraint, engineering precision alongside geomanist as the primary typeface.
  A layered elevation system (6 distinct shadows) building a clear front-to-back hierarchy.
  Motion is a first-class concern — 10 keyframe animations plus transition-driven interactions.

colors:
  canvas: "#0e0918"
  surface-1: "#0e0918"
  surface-2: "#1b1728"
  ink: "#d1cece"
  ink-muted: "#7a7a7a"
  ink-subtle: "#9d9797"
  primary: "#a3a3a3"
  on-primary: "#111111"
  primary-hover: "#ff492c"
  hairline: "rgba(13, 10, 25, 0.28)"
  primary-focus: "#101010"

typography:
  display-xl:
    fontFamily: "geomanist, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.96px
  display-md:
    fontFamily: "geomanist, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.48px
  body:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0
  caption:
    fontFamily: "geomanist, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0
  button:
    fontFamily: "geomanist, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0
  mono:
    fontFamily: "Open Sans, 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 0px
    letterSpacing: 0

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

spacing:
  xxs: 2px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 24px
  xl: 32px
  xxl: 64px

components:
  button-ghost:
    backgroundColor: "transparent"
    textColor: "#ffffff"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 12px
  button-ghost-2:
    backgroundColor: "transparent"
    textColor: "#ffffff"
    typography: "{typography.mono}"
    rounded: "{rounded.sm}"
    padding: 0px 12px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    typography: "{typography.mono}"
    rounded: "{rounded.sm}"
    padding: 0px 20px
  navigation-main-nav:
    backgroundColor: "transparent"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0px 40px
  testimonial-quote-card:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 64px 0px
  status-badge-neutral-dark:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.xs}"
  tab-ghost-tab:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 64px 32px

extracted_at: "2026-06-11T06:12:58.814Z"
completeness: 94
scoreVersion: "v2"

---

# Design System — n8n.io
> Extracted automatically by Prism from https://n8n.io
> Date: 2026-06-11
> Viewport: Desktop 1440x900 + Mobile 390x844
> Values are extracted, not hand-written: rendered styles via getComputedStyle() + colors declared in CSS custom properties (token-only values are marked `(token)` and may not be painted).


## 0. Design DNA

**Density**: moderate  |  **Motion**: expressive  |  **Weight**: medium  |  **Aesthetic**: dark-premium

| Dimension | Value | Signal |
|---|---|---|
| Canvas | dark | `#0e0918` |
| Type posture | sans-led (geomanist) | "Simple enough to see.Powerful " |
| Color assertion | dual-accent | #a3a3a3 |
| Whitespace | moderate | section rhythm 40px |
| Interaction | expressive | 10 keyframes, 19 transitions |
| Radius language | 8px-rounded | from token scale |

**Prism fingerprint**: `dark-canvas · sans-display · dual-accent · 8px-rounded · expressive-motion`

> **🤖 TL;DR for AI agents** (read this first — saves you scanning the full doc):
>
> - **Canvas**: `rgb(14, 9, 24)` is the page background. Every component composits against this.
> - **Accent**: `rgb(163, 163, 163)` for primary CTAs ONLY. Never decorative.
> - **Body type**: 16px (token: `typography.body`). Default for ALL text not in a heading role.
> - **Section rhythm**: 40px between major bands. Card padding: 24px.
> - **Default radius**: 8px on buttons/inputs. Pills (`9999px`) only for icon-buttons or status chips.
>
> **Before generating UI**: import this DESIGN.md, scan §2 (Color Palette) + §4 (Components) + §10 (Agent Guide). Skip §11–12 unless extending.

## 1. Visual Theme & Atmosphere

n8n.io commits fully to dark-mode as the native medium, not as a toggled alternative. The canvas is an inky black surface (`#0e0918`) where elevation is communicated through subtle white-opacity gradations rather than traditional shadows — semi-transparent white borders act as the primary depth indicator, like wireframes etched in moonlight. 

Typography is anchored in **geomanist**. Negative letter-spacing at display sizes (-0.96px at 48px) compresses headlines into engineered blocks, dense and authoritative. 

Body text reads in Light Grey (`#d1cece`) — slightly under-bright, preventing eye strain on the dark surface. **Grey** (`#a3a3a3`) provides interactive distinction without visual aggression. Elevation is built from multi-layer shadow stacks (6 distinct) — each combines several blurred layers at varying offsets to build a clear front-to-back hierarchy. 
Motion design uses smooth easing curves for polished state transitions. 

**Key Characteristics:**
- Background: Jet Black (`#0e0918`)
- Primary typeface: geomanist
- Primary text: Light Grey (`#d1cece`)
- Accent: Grey (`#a3a3a3`)
- Display: 48px weight 400, letter-spacing -0.96px
- Shadow system: 6 distinct elevation levels
- Custom fonts loaded: geomanist, geomanist-book

## 2. Color Palette & Roles

### Background & Surface
- **Jet Black** (`#0e0918`): Page background (primary)
- **Bg To** (`transparent`): Surface / elevated background (CSS var)
- **Black** (`#000000`): Surface / elevated background
- **Translucent Jet Black (28%)** (`rgba(13, 10, 25, 0.28)`): Surface / elevated background
- **Near Black** (`#1b1728`): Surface / elevated background

### Text & Content
- **Light Grey** (`#d1cece`): Primary body text
- **Grey** (`#b6b5b9`): Secondary text
- **Grey** (`#9d9797`): Secondary text
- **Translucent Silver (40%)** (`rgba(193, 193, 193, 0.4)`): Secondary text

### Accent & Interactive
- **Primary 900** (`#b83617`): Accent / interactive (CSS var)
- **Primary 400** (`#f96e49`): Accent / interactive (CSS var)
- **Primary 700** (`#e04722`): Accent / interactive (CSS var)
- **Primary 600** (`#ee4f27`): Accent / interactive (CSS var)
- **Vermillion** (`#ff492c`): Interactive / accent
- **Cherry** (`#ea4b71`): Interactive / accent
- **Slate** (`#48556a`): Interactive / accent

### Border & Divider
- **Near Black** (`#1f192a`): Borders / dividers
- **Near Black** (`#1a1624`): Borders / dividers
- **Charcoal** (`#4b4b4b`): Borders / dividers

### Full Extracted Palette
**22 colors rendered on the page** + **19** more declared in design tokens (CSS custom properties — not necessarily painted). (19 categorized above + 22 additional below.)
Rendered values are read via `getComputedStyle()`; token values come from CSS variable declarations. Third-party logo colors are filtered out.

- `#7a7a7a` — Slate Grey
- `#ffffff` — White
- `#e4e4e4` — Whitesmoke
- `rgba(7, 122, 199, 0.26)` — Translucent M Tricolor Blue (26%)
- `#fefefe` — Pure White
- `#f5f5f5` — Off-White
- `#6f6f6f` — Slate Grey
- `#783200` — Chocolate *(token)*
- `#bcbcbc` — Light Grey *(token)*
- `#ffcf23` — Gold *(token)*
- `#fd8925` — #fd8925 *(token)*
- `#ff9b26` — #ff9b26 *(token)*
- `#d91616` — M Tricolor Red *(token)*
- `#040506` — Pure Black *(token)*
- `#ff0c00` — Red *(token)*
- `#35a670` — #35a670 *(token)*
- `#f7f6fa` — Off-White *(token)*
- `#272333` — Warm Brown *(token)*
- `#6b21ef` — Violet *(token)*
- `#186f44` — #186f44 *(token)*
- `#a3a3a3` — Grey *(token)*
- `#464646` — Charcoal *(token)*

### CSS Custom Properties (Design Tokens)

**Shadow Token**
- `--tw-inset-shadow-alpha`: `100%`
- `--tw-ring-shadow`: `0 0 #0000`
- `--tw-drop-shadow-alpha`: `100%`
- `--tw-inset-ring-shadow`: `0 0 #0000`

**Border Radius Token**
- `--radius-default`: `1.5rem`
- `--radius-sm`: `.25rem`
- `--radius-2xl`: `1rem`
- `--radius-md`: `.375rem`

**Warning**
- `--color-yellow-600`: `oklch(68.1% .162 75.834)`

**Primary Brand Color**
- `--color-primary-900`: `#b83617`
- `--color-primary-400`: `#f96e49`
- `--color-primary-700`: `#e04722`
- `--color-primary-600`: `#ee4f27`

**Secondary Color**
- `--color-secondary-500`: `#ff9b26`

**Error / Destructive**
- `--color-red-500`: `oklch(63.7% .237 25.331)`
- `--color-red-700`: `oklch(50.5% .213 27.518)`

**Font Weight Token**
- `--font-weight-light`: `300`
- `--font-weight-normal`: `400`
- `--font-weight-medium`: `500`

**Spacing Token**
- `--tw-space-x-reverse`: `0`
- `--vc-pgn-gap`: `6px`
- `--spacing`: `.25rem`

**Motion Token**
- `--default-transition-duration`: `.15s`
- `--default-transition-timing-function`: `cubic-bezier(.4,0,.2,1)`
- `--tw-duration`: `.2s`

**Success**
- `--color-green-2`: `#35a670`
- `--color-green-1`: `#186f44`

**Other tokens**
- `--text-headline-sm--line-height`: `100%`
- `--color-winners-third`: `#783200`
- `--text-headline-lg--line-height`: `100%`
- `--text-lg`: `18px`
- `--vc-nav-color-hover`: `#090f207f`
- `--vc-clr-primary`: `#000`
- `--color-button-tertiary`: `#bcbcbc`
- `--text-headline-md--line-height`: `100%`

## 3. Typography Rules

### Font Families
- **Primary**: `geomanist`
- **Secondary**: `geomanist-book`
- **Font 3**: `ui-sans-serif`
- **Font 4**: `Open Sans`

### Custom Fonts Loaded
- **geomanist** weight 300 (normal)
- **geomanist** weight 400 (normal)
- **geomanist** weight 500 (normal)
- **geomanist** weight 700 (normal)
- **geomanist-book** weight 400 (normal)

### Typography Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | geomanist | 48px | 400 | 1 | -0.96px | Main headline (div) |
| Sub-heading | geomanist | 24px | 400 | 1.2 | -0.48px | Third-level heading (h3) |
| Card Title | geomanist | 16px | 400 | 1.5 | normal | Card headings |
| Button | geomanist | 15px | 400 | 1 | normal | Button label (15px) |
| Button | geomanist | 14px | 400 | 1.5 | normal | Button label (14px) |
| Input | Open Sans | 14px | 400 | 0px | normal | Form input (14px) |
| Caption / Badge | geomanist | 12px | 400 | 1.7 | normal | small text (12px) |
| Table Header | Open Sans | 11px | 600 | 1.5 | normal | Column heading |

### Font Weight Scale

CSS custom properties define 3 explicit weight steps:
- `--font-weight-light`: `300` — Light
- `--font-weight-normal`: `400` — Regular
- `--font-weight-medium`: `500` — Medium

### Full Font Size Scale

Sizes detected in the design (descending): `54px`, `48px`, `24px`, `20px`, `18px`, `16px`, `15px`, `14px`, `12px`, `11px`, `8px`

> 4 size(s) detected outside the sampled hierarchy (54px, 20px, 18px, 8px). These appear on elements not in the sampled set — likely additional display sizes, marketing-section overrides, or third-party-widget styles.

## 4. Component Stylings

### Buttons

**Ghost**
- Background: `transparent`
- Text: `#ffffff`
- Padding: 12px
- Radius: 0px
- Font: 15px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Ghost**
- Background: `transparent`
- Text: `#ffffff`
- Padding: 0px 12px
- Radius: 8px
- Font: 14px weight 400
- Use: Subtle action, toolbar, nav button
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Secondary**
- Background: `#a3a3a3` `{colors.primary}`
- Text: `#ffffff`
- Padding: 0px 20px
- Radius: 8px
- Font: 14px weight 400
- Use: Secondary action
- Focus: outline: `rgb(16, 16, 16) auto 1px`

**Subtle**
- Background: `rgba(13, 10, 25, 0.28)` `{colors.hairline}`
- Text: `#d1cece` `{colors.ink}`
- Padding: 14px
- Radius: 8px
- Border: 1px solid rgba(255, 255, 255, 0.1)
- Shadow: `rgba(0, 0, 0, 0.26) 0px 0px 8px 0px`
- Font: 16px weight 400
- Use: Quiet action against page bg
- Focus: outline: `rgb(16, 16, 16) auto 1px`

### Navigation

**Main Nav**
- Background: `transparent`
- Padding: 0px 40px
- Radius: none
- Font: 16px weight 400
- Use: Fixed/sticky flex nav — N/A items

### Testimonials

**Quote Card**
- Background: `transparent`
- Text: `#d1cece` `{colors.ink}`
- Padding: 64px 0px
- Radius: 0px
- Font: 16px weight 400
- Use: Customer quote with avatar + company attribution

### Status Badges

**Neutral Dark**
- Background: `transparent`
- Text: `#d1cece` `{colors.ink}`
- Padding: 0px
- Radius: 6px
- Font: 16px weight 400
- Use: Status indicator, label, pill

### Tabs

**Ghost Tab**
- Background: `transparent`
- Text: `#d1cece` `{colors.ink}`
- Padding: 64px 32px
- Radius: 0px
- Font: 16px weight 400
- Use: Navigation tabs, filter tabs


## 4b. Component Behaviors (State Matrix)

### Interaction State Narrative


*State transitions extracted via Playwright simulation — exact values in the YAML matrix below.*

```yaml
component-behaviors:
  button:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(255, 255, 255)"
    focus:
      bg: "transparent"
      fg: "inherit"
  link:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(209, 206, 206)"
  card:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(209, 206, 206)"
  navLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(209, 206, 206)"
  tab:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(209, 206, 206)"
  badge:
    default:
      bg: "oklab(0.999994 0.0000455678 0.0000200868 / 0.15)"
      fg: "rgb(255, 255, 255)"
      border: "1px solid oklab(0.999994 0.0000455678 0.0000200868 / 0.2)"
  footerLink:
    default:
      bg: "rgba(0, 0, 0, 0)"
      fg: "rgb(157, 151, 151)"
```

**Agent usage**: Validate generated components against this matrix. If your output's `:hover` state changes properties not listed here, you are off-brand.


## 4c. Component Vocabulary (Closed System)

*This brand uses ONLY the following component vocabulary. Introducing new variants without justification breaks the system's tonal coherence.*

### Buttons
- **3 shape(s)** in this system: `Ghost`, `Secondary`, `Subtle`
- **DO NOT introduce new buttons variants** without justification

### Navigation
- **1 shape(s)** in this system: `Main Nav`
- **DO NOT introduce new navigation variants** without justification

### Testimonials
- **1 shape(s)** in this system: `Quote Card`
- **DO NOT introduce new testimonials variants** without justification

### Status Badges
- **1 shape(s)** in this system: `Neutral Dark`
- **DO NOT introduce new status badges variants** without justification

### Tabs
- **1 shape(s)** in this system: `Ghost Tab`
- **DO NOT introduce new tabs variants** without justification

## 5. Layout Principles

### Layout Type
**top-nav + content**

### Grid
Single column, centered content

### Max Width
1200px

### Spacing System
Compact spacing — information density prioritized

| Token | Value |
|-------|-------|
| xxs | 2px |
| xs | 4px |
| sm | 8px |
| md | 12px |
| base | 16px |
| lg | 24px |
| xl | 32px |
| 2xl | 40px |
| 3xl | 64px |

### Border Radius Scale
| Name | Value | Use |
|------|-------|-----|
| None | 0px | No rounding |
| Xs | 4px | Tiny corners (badges, micro elements) |
| Sm | 8px | Buttons, inputs, small elements |
| Md | 12px | Cards, containers |
| Lg | 16px | Large rounded elements, pill segments |
| Xl | 24px | Category strips, featured containers |
| Full | 9999px | Pills, avatars, circular elements |

### Shape Language

| Component | Border Radius |
|-----------|---------------|
| Buttons | `0px` |
| Navigation | `none` |
| Testimonials | `0px` |
| Status Badges | `6px` |
| Tabs | `0px` |
| Page Body | `0px` |

**Shape Personality**: Moderate Rounding — Medium corners (4–12px). Modern SaaS standard, neither sharp nor pill.

**Full Radius Spectrum**: 0px, 4px, 6px, 7px, 8px, 12px, 16px, 24px (from `allBorderRadii` scan)


## 5b. Spacing Rhythm Names

**Measured section padding**: bands use ~64px internal vertical padding (up to 116px) — **generous**. (Distinct from the gap *between* sections above.) Reproduce this generous vertical breathing room; cramped spacing is the #1 tell of a cheap clone.

*Named spacing tokens with explicit use cases. Use these names in YOUR code instead of raw pixels for consistency.*

| Name | Value | Use case |
|------|-------|----------|
| **hero** | `64px` | Top/bottom of full-bleed hero sections |
| **section** | `32px` | Between major bands (color change, content shift) |
| **subsection** | `24px` | Within a section, between content groups |
| **card** | `12px` | Card padding, list-item spacing |
| **compact** | `8px` | Form fields, tight clusters, badge padding |
| **micro** | `4px` | Icon-text gap, tag inner padding |

**Agent rule**: NEVER hardcode raw pixel values for spacing in generated UI. Always reference these named tokens (`spacing-rhythm.section`, etc.).

## 5c. Widget & Structure Library

Structural patterns extracted from the page DOM — these are the **blueprints** an agent should follow to reproduce the page architecture (not just CSS values).

**4/8 structural patterns detected.**

### Navigation Pattern

- **Position:** static (scrolls with page)
- **Layout:** logo-left-links-left — Logo and links both on the left (CTAs typically right)
- **Height:** 58px
- **Logo:** ✓ present
- **Nav links:** 7 primary items
- **CTAs in nav:** 1
- **Clone instruction:** Build a static logo left links left navigation. Reserve 1 slot for primary CTA.

### Card Grid Pattern

- **Card count:** 5 cards detected
- **Columns (desktop):** 1-up grid
- **Card dimensions:** 984×575px (aspect 1.71:1)
- **Gap:** 0px between cards
- **Content:** ✓ image
- **Image position:** top
- **Clone instruction:** Build a 1-column grid (desktop) with cards at ~1.71:1 aspect ratio. Each card has an image at the top.

### Testimonial Pattern

- **Count:** 1 testimonial blocks
- **Layout:** single-feature
- **Avg quote length:** 500 chars (long-form story)
- **Includes:** ✓ avatars | ✗ no logos | ✗ no ratings
- **Clone instruction:** Build a single-feature of 1 testimonials. Each includes an avatar.  

### Footer Pattern

- **Columns:** 1
- **Links:** 68 total
- **Height:** 1754px
- **Includes:** ✗ no newsletter | ✓ social icons |  ✓ copyright
- **Clone instruction:** Build a 1-column footer with ~68 links per column, social media links, and a copyright line.

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, content blocks |
| Layered (Level 1) | <br>`rgba(0, 0, 0, 0.26) 0px 0px 8px 0px` | Cards, elevated surfaces |
| Inset (Level 2) | <br>`rgba(255, 255, 255, 0.2) 0px 1px 1px 0px inset`,<br>`rgba(8, 8, 8, 0.2) 0px 1px 2px 0px`,<br>`rgba(8, 8, 8, 0.08) 0px 4px 4px 0px`,<br>`rgb(7, 122, 199) 0px 7px 0px -12px`,<br>`rgba(255, 255, 255, 0.12) 0px 6px 12px 0px inset` | Buttons, pressed-state elements |
| Layered (Level 3) | <br>`rgba(0, 0, 0, 0.44) 0px 0px 0px 1px` | Cards, elevated surfaces |
| Inset (Level 4) | <br>`rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset`,<br>`rgba(0, 0, 0, 0.23) 0px 4px 16px -8px` | Buttons, pressed-state elements |

**Shadow Philosophy**: Multi-layered shadow system creating natural, atmospheric depth. Each shadow level combines multiple layers for realistic elevation.

## 7. Motion & Interaction

### Easing System

| CSS Variable | Curve | Semantic Name |
|--------------|-------|---------------|
| `--ease-in` | `cubic-bezier(.4,0,1,1)` | Custom Ease — Balanced |
| `--ease-in-out` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
| `--default-transition-timing-function` | `cubic-bezier(.4,0,.2,1)` | Ease Out — Decelerating |
| `--tw-ease` | `cubic-bezier(.25,.46,.45,.94)` | Custom Ease — Balanced |

### Duration Scale

| CSS Variable | Value | Tier |
|--------------|-------|------|
| `--default-transition-duration` | `.15s` | Fast |
| `--tw-duration` | `.2s` | Normal |

### Copy-Paste Transition Snippets

**Transform**
```css
transition: transform 0.1s, height 0.4s, opacity 0.4s;
```

**Transform**
```css
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), scale 0.3s cubic-bezier(0.4...;
```

**Color / Background**
```css
transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-c...;
```

**Color / Background**
```css
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-...;
```

### Keyframe Animation Catalog

| Animation Name | Type | Animated Props | Use Hint |
|----------------|------|----------------|----------|
| `marquee-796daa67` | Slide | transform | UI transition |
| `tooltipFadeIn` | Fade | opacity | Element entrance |
| `tooltipFadeOut` | Fade | opacity | Element exit |
| `spin` | Rotate / Spin | transform | Loading indicator |
| `skeleton` | Slide | transform | Loading placeholder |
| `spinny-91b8f811` | Rotate / Spin | transform | Loading indicator |
| `mdc-ripple-fg-radius-in` | Scale | animation-timing-function, transform | UI transition |
| `mdc-ripple-fg-opacity-in` | Fade | animation-timing-function, opacity | UI transition |
| `mdc-ripple-fg-opacity-out` | Fade | animation-timing-function, opacity | UI transition |

### Motion Fingerprint

- **Speed Character**: Deliberate & Calm (median duration: `300ms`)
- **Dominant Easing**: custom cubic-bezier curves
- **Animation Library**: 9 unique animations (10 total including variants)

> This design moves with deliberate & calm timing using custom cubic-bezier curves, creating a UI that feels calm and controlled.

## 8. Do's and Don'ts

### Do
- Use dark background (`#0e0918`) as the foundation — this is a dark-mode-native design
- Use geomanist as the primary typeface — it defines the brand personality
- Keep font weights between 300-500 — the system uses a narrow weight range for subtle hierarchy
- Use negative letter-spacing (-0.96px) at display sizes for compressed, editorial headlines
- Use the extracted shadow patterns for elevation — they are tuned to match the brand palette
- Use Grey (`#a3a3a3`) as the primary accent — it's the brand's signature interactive color
- Use 8px border-radius on buttons — the standard corner rounding for interactive elements
- Maintain nav height at 58px — consistent vertical space for the navigation bar
- Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room
- Each card includes a top image — imagery is part of the card identity, not optional
- Show person avatars with testimonials — social proof is human-centric here

### Don't
- Don't use light backgrounds — the dark canvas is the native medium
- Don't substitute with generic sans-serif or serif — the custom font carries the brand
- Don't use weight 700 (bold) or above — 500 is the maximum weight in this system
- Don't increase letter-spacing on headings — the type is designed to run tight at scale
- Don't invent new shadow values — use only the extracted shadow levels
- Don't introduce additional saturated accent colors — the palette is intentionally controlled
- Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence
- Don't make the nav sticky — this design lets it scroll away to maximize content focus


## 7b. Enforceable Brand Rules

*Structured Do/Don't with reasoning and validation tests. Agents can programmatically verify generated UI.*

```yaml
rules:
  - id: brand-canvas-001
    type: do
    rule: "Always use the page background `rgb(14, 9, 24)` as the base canvas"
    why: "Every component is designed to composit against this exact tone"
    test: "document.body.style.backgroundColor === 'rgb(14, 9, 24)'"
  - id: brand-accent-001
    type: do
    rule: "Reserve `rgb(163, 163, 163)` for primary CTAs and brand-mark signals only"
    why: "Single chromatic assertion device — overuse dilutes meaning"
    test: "querySelectorAll('[style*=\"rgb(163, 163, 163)\"]').length <= 3 per fold"
```

## 9. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | 390px | Single column, compact spacing |
| Mobile | 440px | Single column, compact spacing |
| Mobile Large | 700px | Expanded mobile layout |
| Tablet | 1024px | Multi-column grids begin |
| Large Desktop | 1440px | Maximum content width |
| Ultra-wide | 1920px | Maximum content width |

### Token Diff — Desktop vs Mobile

| Element | Property | Desktop | Mobile |
|---------|----------|---------|--------|
| heading | font-size | `48px` | `32px` |
| heading | line-height | `48px` | `32px` |
| heading | letter-spacing | `-0.96px` | `-0.64px` |
| button | padding | `12px` | `0px` |
| button | font-size | `15px` | `14px` |
| button | width | `108px` | `32px` |
| card | width | `112px` | `96px` |

### Collapsing Strategy
- Headlines: 48px → 32px on mobile
- Navigation: horizontal links → hamburger menu on mobile
- Cards: multi-column → stacked vertical on mobile
- Footer: multi-column → stacked single column on mobile

### Touch Targets
- Buttons: 12px padding
- Navigation: adequate spacing between items
- Interactive elements: minimum 44px touch target recommended

### Collapsing Narrative

How the structural patterns adapt from desktop to mobile (extracted from both viewport extractions):

- **Navigation collapses to hamburger** — 7 links visible on desktop, 2 on mobile (the rest hide behind a menu toggle).
- **Nav CTAs reduced** on mobile (1 → 0) — the design prioritizes content over conversion buttons at small sizes.


## 7c. Visual Effects & Dynamic Behavior

*The live/dynamic layer beyond static CSS — reproduce these, not flat substitutes. This is often what separates a faithful clone from a wireframe.*

- **Glassmorphism** — 5 frosted/blur layer(s) (e.g. `blur(22px)`).
- **Mesh gradients** — 5 multi-stop organic color field(s) as background atmosphere.
- **Clip-path shapes** — 3 non-rectangular cut(s).
- **Blend modes** — 2 mix-blend layer(s).
- **Scroll-driven reveals** — content animates in on scroll (CSS scroll-timeline). Build fade/translate reveal-on-scroll for below-fold bands.

> **Motion fingerprint**: glassmorphism (6 layers), mesh gradients, non-rectangular shapes (3), blend modes, CSS scroll-driven animations

## 9b. Visual Tone & Photography

**Tone:** Mixed photography + illustration

A balanced mix of photographic content and vector graphics. Photos likely carry product/lifestyle context while SVG handles icons, logos, and decorative accents.

**Canonical Brand Image (OG):**
- https://n8niostorageaccount.blob.core.windows.net/n8nio-strapi-blobs-stage/assets/og_image_website_3_afd66761a9.png
  *This is the image shown when the site is shared on social media — represents the brand visual essence.*

**Hero Image (above-fold dominant visual):**
- Aspect: 2.64:1 (ultra-wide cinematic)
- Rendered size: 1896×719px
- Alt text: "Hero image"
- *Use this aspect ratio + composition for your clone's hero — mimicking the proportion preserves the visual hierarchy.*

**Aspect Ratio Distribution:**
- Landscape (1.15–2.3): 3 (50%)
- Portrait (<0.87): 0 (0%)
- Square (0.87–1.15): 2 (33%)
- Ultra-wide (>2.3): 1 (17%)

**Media Format Mix:**
- WebP: 1 (optimized photo/illustration hybrid)
- PNG: 2 (logos, transparent UI elements, mockups)
- SVG: 4 (icons, illustrations, decorative geometry)

**Average rendered image size:** 777×436px
**Above-fold image count:** 3 / 6

**Decorative Patterns Detected:**
- 48 multi-stop linear gradients (mesh-like, 3+ color stops) — the brand leans on rich color transitions for visual depth
- 38 radial gradients — circular color blooms used for spotlight/glow effects
- 1 large decorative SVG shape (≥200×200px, non-icon) — likely blob/illustration accents
- **Glassmorphism** detected (`backdrop-filter: blur`) — layered transparent surfaces with blur, modern OS-like aesthetic

**Clone instruction for decorative work:** This is a gradient-rich design — invest in multi-stop CSS gradients (3+ color stops), not solid backgrounds.

**Imagery Guidance for clones:**
- Mix photography and illustration intentionally: photos for product/context, vectors for icons + decorative accents.
- Respect the format split — replacing JPGs with illustrations (or vice versa) will shift the brand tone.

## 10. Agent Prompt Guide

### Quick Reference
- Background: Jet Black (`#0e0918`)
- Primary text: Light Grey (`#d1cece`)
- Accent: Grey (`#a3a3a3`)
- Border: Translucent Jet Black (28%) (`rgba(13, 10, 25, 0.28)`)
- Font: geomanist
- Body: 16px weight 400

### Example Component Prompts
- "Create a hero section on Jet Black background (#0e0918). Headline at 48px geomanist weight 400, line-height 1, letter-spacing -0.96px, color #d1cece."
- "Create the primary CTA button: `#a3a3a3` background, `#ffffff` text, 9999px border-radius, 12px padding, 600 weight, geomanist font."
- "Design a card on `transparent` background. Border: none. Radius: 0px. Shadow: none. Padding: 0px."
- "Build navigation: static on `#0e0918`. geomanist 16px weight 400 for links."

### Iteration Guide
1. **Canvas**: Set the dark canvas to Jet Black (`#0e0918`) — every component is composited against this exact base.
2. **Typography**: All type in geomanist, weight range 300–500. Never exceed 500 — heavier weights break the brand's tonal restraint.
3. **Accent**: Grey (`#a3a3a3`) is the sole interactive color. On hover → Vermillion (`#ff492c`). Use CSS transitions, not opacity/brightness filters.
4. **Motion**: All transitions use `cubic-bezier(0.4,0,0.2,1)`. Timing: 150ms for micro-interactions, 200ms for layout changes. Never use linear for UI transitions — preserve the brand's easing personality.
5. **Shape**: CTAs at `0px`, cards at `0px`. Apply border-radius from the extracted scale only — don't invent intermediate values.
6. **Spacing**: Use the `--ca-space-*` token scale (4px–32px). All padding, margin, and gap values are multiples from this scale — no magic numbers.
7. **Tokens**: Import from §11 CSS Export (`--ca-*` vars). Never hardcode hex values — always reference a token so theming remains consistent.

## 11. CSS Design Tokens Raw Export

*Copy-paste ready `:root {}` block — all values extracted directly from the live site.*

```css
/* Colors */
:root {
  --ca-surface-1: #0e0918;
  --ca-surface-2: #1b1728;
  --ca-ink: #d1cece;
  --ca-ink-muted: #7a7a7a;
  --ca-ink-subtle: #9d9797;
  --ca-primary: #a3a3a3;
  --ca-on-primary: #111111;
  --ca-primary-hover: #ff492c;
  --ca-hairline: #0d0a19;
  --ca-primary-focus: #101010;
}

/* Typography */
:root {
  --ca-font-primary: "geomanist", system-ui, sans-serif;
  --ca-text-display: 48px;
  --ca-text-body: 11px;
  --ca-text-caption: 12px;
  --ca-text-button: 15px;
  --ca-text-mono: 14px;
}

/* Spacing & Radius */
:root {
  --ca-space-xxs: 2px;
  --ca-space-xs: 4px;
  --ca-space-sm: 8px;
  --ca-space-md: 12px;
  --ca-space-base: 16px;
  --ca-space-lg: 24px;
  --ca-space-xl: 32px;
  --ca-space-2xl: 40px;
  --ca-space-3xl: 64px;
  --ca-radius-none: 0px;
  --ca-radius-xs: 4px;
  --ca-radius-sm: 8px;
  --ca-radius-md: 12px;
  --ca-radius-lg: 16px;
  --ca-radius-xl: 24px;
  --ca-radius-full: 9999px;
}

/* Motion */
:root {
  --ca-ease-in: cubic-bezier(.4,0,1,1);
  --ca-ease-in-out: cubic-bezier(.4,0,.2,1);
}
```


## 13. Page Structure Skeleton

*The actual layout the source site uses. Reproduce these sections in order to match the site structure.*

```yaml
page-skeleton:
  - section: hero
    tag: div
    height: 8342px
    width: full-bleed
    layout: block
    children: 12
    vertical-padding: ~64px (generous)
  - section: hero
    tag: section
    classes: ["w-full", "opacity-0"]
    height: 719px
    width: full-bleed
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["mx-auto", "w-full", "max-w-section-wide"]
    height: 719px
    width: 1312px
    layout: block
    children: 1
  - section: navigation
    tag: div
    classes: ["bg-shades-midnight-navy", "px-section-gap-x", "md:px-section-gap-x-md", "lg:px-section-gap-x-lg"]
    height: 719px
    width: 1312px
    layout: block
    children: 2
    bg: "rgb(14, 9, 24)"
    tone: dark
    vertical-padding: ~116px (airy)
    padding: "0px 32px"
  - section: feature-section
    tag: div
    classes: ["max-w-section-default", "relative", "z-20", "mx-auto"]
    height: 719px
    width: 1120px
    layout: flex-column justify=normal
    children: 2
    vertical-padding: ~116px (airy)
    padding: "192px 0px 40px"
  - section: header
    tag: header
    classes: ["flex", "w-full", "flex-col", "gap-6"]
    height: 296px
    width: 500px
    layout: flex-column justify=normal
    children: 3
  - section: section
    tag: section
    classes: ["w-full", "px-section-gap-x", "md:px-section-gap-x-md", "lg:px-section-gap-x-lg"]
    height: 703px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 32px"
  - section: unknown
    tag: div
    classes: ["mx-auto", "w-full", "max-w-section-wide"]
    height: 575px
    width: 1312px
    layout: block
    children: 1
  - section: section
    tag: section
    classes: ["w-full", "px-section-gap-x", "md:px-section-gap-x-md", "lg:px-section-gap-x-lg"]
    height: 239px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 32px"
  - section: unknown
    tag: div
    classes: ["mx-auto", "w-full", "max-w-section-default"]
    height: 111px
    width: 1120px
    layout: block
    children: 1
  - section: unknown
    tag: div
    classes: ["section-grid", "flex", "flex-col", "items-center"]
    height: 111px
    width: 1120px
    layout: flex-row justify=center
    children: 3
  - section: feature-section
    tag: section
    classes: ["w-full", "py-section-gap-y", "md:py-section-gap-y-md", "lg:py-section-gap-y-lg"]
    height: 596px
    width: 1296px
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 32px"
  - section: header
    tag: header
    classes: ["section-header", "flex", "flex-col", "mb-12"]
    height: 136px
    width: 1232px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: div
    classes: ["mx-auto", "w-full", "max-w-section-widest"]
    height: 468px
    width: 1232px
    layout: block
    children: 4
  - section: logo-strip
    tag: div
    classes: ["marquee-wrapper", "overflow-hidden"]
    height: 180px
    width: 1232px
    layout: block
    children: 1
  - section: feature-section
    tag: section
    classes: ["w-full", "px-section-gap-x", "md:px-section-gap-x-md", "lg:px-section-gap-x-lg"]
    height: 1076px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 32px"
  - section: header
    tag: header
    classes: ["section-header", "flex", "flex-col", "mb-12"]
    height: 136px
    width: 1120px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: div
    classes: ["mx-auto", "w-full", "max-w-section-default"]
    height: 948px
    width: 1120px
    layout: block
    children: 3
  - section: header
    tag: header
    classes: ["order-last", "flex", "flex-col", "justify-center"]
    height: 368px
    width: 371px
    layout: flex-column justify=center
    children: 3
    padding: "0px 0px 0px 40px"
  - section: header
    tag: header
    classes: ["mb-12", "flex", "flex-col", "gap-2"]
    height: 186px
    width: 286px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: section
    classes: ["w-full", "px-section-gap-x", "md:px-section-gap-x-md", "lg:px-section-gap-x-lg"]
    height: 1376px
    width: full-bleed
    layout: block
    children: 1
    vertical-padding: ~64px (generous)
    padding: "64px 32px"
  - section: feature-section
    tag: div
    classes: ["mx-auto", "w-full", "max-w-section-wide"]
    height: 1248px
    width: 1312px
    layout: block
    children: 1
  - section: feature-section
    tag: div
    classes: ["parallax-cards-wrapper", "relative", "flex", "flex-col"]
    height: 1248px
    width: 1312px
    layout: flex-column justify=normal
    children: 2
  - section: feature-section
    tag: div
    classes: ["scrollable-container", "custom-scroll", "custom-scroll-vertical", "overflow-y-auto"]
    height: 379px
    width: 559px
    layout: flex-column justify=normal
    children: 1
    padding: "0px 16px 0px 0px"
  - section: feature-section
    tag: div
    classes: ["scrollable-container", "custom-scroll", "custom-scroll-vertical", "overflow-y-auto"]
    height: 311px
    width: 559px
    layout: flex-column justify=normal
    children: 2
    padding: "0px 16px 0px 0px"
```

**Agent rule**: rebuild sections in this order (sorted by vertical position). Match the layout primitive (grid N-col / flex direction / block).


## 14. Copy Library (Real Content from Source)

*Actual text content extracted from the live page. Use these strings verbatim when reproducing the site — they carry the brand voice.*

```yaml
copy:
  section-headings:
    - "AI agents and workflows you can see and control"
    - "Code when you need it, UI when you don't"
    - "Move fast. Break nothing."
    - "Case Studies"
    - "Simple enough to see. Powerful enough to ship."
  sub-headings:
    - "Build complex AI without getting boxed in"
    - "Runs where you decide"
    - "Let people and logic guide AI decisions"
    - "Security and control"
    - "Developer experience"
    - "AI governance"
  ctas:
    - "Use cases"
    - "191,871"
    - "Sign in"
    - "Get started for free"
    - "Talk to sales"
    - "IT Ops can On-board new employees"
    - "Dev Ops can Convert natural language into API calls"
    - "Browse all integrations"
  navigation:
    - "n8n.io"
    - "Product"
    - "Docs"
    - "191,871"
    - "Get started for free"
    - "Explore AI"
    - "Enterprise"
    - "Pricing"
    - "Sign in"
    - "Get Started"
  footer-links:
    - "@igordisco"
    - "Start building"
    - "n8n.io"
    - "Careers Hiring"
    - "Contact"
    - "Google Sheets"
```

**Agent rule**: reuse these exact strings when generating UI. Do NOT translate or rephrase — brand voice is preserved through the original wording.


## 15. Asset Inventory (Image Roles & Ratios)

*Image inventory classified by role and aspect ratio. When reproducing the site, allocate this number of assets per role.*

```yaml
assets:
  logo:
    count: 10
    avg-ratio: 2.55
    common-aspect: "~16:6 banner"
  hero:
    count: 1
    avg-ratio: 2.64
    common-aspect: "~16:6 banner"
    sample-alts:
      - "Hero image"
  thumbnail:
    count: 36
    avg-ratio: 1.00
    common-aspect: "~1:1 square"
```

**Agent rule**: when generating placeholder images, match these counts and aspect ratios. Use neutral placeholder backgrounds for `product` (e.g. `#f5f5f5`), full-color photography hints for `hero` and `editorial`.


## 16. Component HTML Templates

*Suggested HTML markup for reproducing the key components — based on what was detected in the source DOM.*

### Button (primary action)
```html
<button class="btn btn-primary">
  Use cases
</button>
```
_Source pattern detected: padding `12px` · radius `0px` · weight `400`_

### Generic Card
```html
<div class="card">
  <!-- content -->
</div>
```
_Source pattern detected: padding `0px` · radius `0px` · shadow `none`_

**Agent rule**: use these markup skeletons as the structural baseline. Apply tokens from §2-3 for visual styling.


## 17. Content Architecture & Resources (Links by Purpose)

*The page's links classified by purpose — the information architecture to reproduce. Categories, featured images, devices and projects are extracted from the rendered DOM, not guessed.*

**By purpose:** **nav** 3 · **cta** 3 · **auth** 1 · **product** 3 · **pricing** 1 · **docs** 1 · **project** 4 · **social** 17 · **legal** 2 · **footer** 21 · **other** 4

**Primary actions (conversion path):**
- Primary call-to-action — "Get started for free" (the conversion path) → `https://app.n8n.cloud/register`
- Primary call-to-action — "Start building" (the conversion path) → `https://app.n8n.cloud/register`
- Account access — "Sign in" (login/signup) → `https://app.n8n.cloud/login`
- Primary call-to-action — "Get Started" (the conversion path) → `https://app.n8n.cloud/register`

**Projects / case studies detected** (clustered by URL + featured image):

*In* — medium confidence, 4 items:

| Title | Featured image | Link |
|---|---|---|
| @Luiza Vidal | `Luiza_Vidal_Icatu_00f78cb493.jpeg` (ar 1) | https://www.linkedin.com/in/luiza-vidal-po/ |
| @olliescheers | `Oliver_Zoom_d4152b86d2.PNG` (ar 1) | https://www.linkedin.com/in/olliescheers/ |
| @felixleber | `Felix_Leber_f7a5b3c776.jpeg` (ar 1) | https://www.linkedin.com/in/felixleber/ |
| @francois-laßl | `Francois_lassl_d5cfb504c7.jpeg` (ar 1) | https://www.linkedin.com/in/francois-la%C3%9Fl-817937243/ |

*Case-Studies* — high confidence, 3 items:

| Title | Featured image | Link |
|---|---|---|
| Read Case Study | `Huel_logo_grey_bee3133af2.png` (ar 2.64) | https://n8n.io/case-studies/huel/ |
| Read Case Study | `Vodafone_2017_logo_svg_4daa8bbecc.pn` (ar 3.76) | https://n8n.io/case-studies/vodafone/ |
| See the case | `Martino_Bonfiglioni_2ac104e00c.jpeg` (ar 1) | https://n8n.io/case-studies/musixmatch/ |

*N8n-Io* — medium confidence, 1 items:

| Title | Featured image | Link |
|---|---|---|
| 191,871 | — | https://github.com/n8n-io/n8n |

**Signals:** 29/60 links carry a featured image · dominant link roles: footer-link (30), content-card (21), inline-link (4).


---
## Extraction Completeness: 94/100 (A)

| Category | Score | Max | Detail |
|----------|-------|-----|--------|
| Colors & Palette | 25 | 25 | 19 named colors |
| Typography | 20 | 20 | 8 roles defined |
| Components | 20 | 20 | 5 specs extracted |
| Motion & Interaction | 15 | 15 | Keyframes, easing vars |
| CSS Custom Properties | 9 | 10 | 179 vars |
| Responsive Breakpoints | 5 | 5 | 6 breakpoints |
| Variable Fonts | 0 | 5 | None detected |

## 12. Known Gaps & Confidence

Explicit list of what this extraction could NOT capture. Agents should not invent values for these — either skip the feature or use the documented baseline + heuristic fallback.

*Auto-detected extraction limitations — understand before building:*

- **Licensed web fonts (geomanist, geomanist-book)** — detected but not downloaded. Substitute with your licensed copy or a close fallback (see Typography section for metrics).
- **1 parasitic shadow(s) detected** — colored box-shadows (not near-black) found in allShadows. These likely originate from browser extensions or third-party injected widgets (e.g. Grammarly, chat overlays), not from the site's own design system. Discard them when building.

| Category | What's missing | Fallback strategy |
|----------|----------------|-------------------|
| **Form inputs** | No text input fields detected on this page | Use the documented border-radius + accent border on focus; 12-16px padding inside |

### Per-section confidence

| Section | Confidence | Reason |
|---------|------------|--------|
| §1 Visual Theme | High | Body bg extracted via getComputedStyle() |
| §2 Colors | High | 179 CSS vars (semantic naming requires ≥20 for high) |
| §3 Typography | High | 8 typography roles inferred |
| §4 Components | High | 5 component variants captured |
| §7 Motion | High | Keyframes + transitions |
| §8 Do's/Don'ts | High | 19 rules generated; design-decisions.json has evidence per rule |
| §9 Responsive | High | 6 breakpoints detected |
| §9b Photography | High | 6 images, hero present |

## 11.1 CSS Implementation Guide (CSS Interception Engine v2.15+)

*Ready-to-use CSS from Prism's CSS Interception Engine — intercepted directly from the site's CSS files (bypasses CORS). Copy-paste into your `<style>` block.*

### Font Loading

3 font file(s) captured (83KB total). When running `prism add`, fonts are saved to `extractions/n8n.io/fonts/` and embedded as base64 in the output HTML.

**@font-face declarations to use:**
```css
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist';
  /* src: url('/fonts/geomanist.woff2') format('woff'); */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist-book';
  /* src: url('/fonts/geomanist-book.woff2') format('woff'); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'geomanist-book';
  /* src: url('/fonts/geomanist-book.woff2') format('woff'); */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
```

### Keyframe Animations (Intercepted from CSS)

**7 @keyframes found** — these are the real animation definitions:

```
@keyframes skeleton-68663900 { ... }
@keyframes marquee-796daa67 { ... }
@keyframes spinny-91b8f811 { ... }
@keyframes tooltipFadeIn { ... }
@keyframes tooltipFadeOut { ... }
@keyframes spin { ... }
@keyframes skeleton { ... }
```

<details><summary>Full keyframes CSS (7 animations)</summary>

```css
@keyframes skeleton-68663900{0%{transform:translate(-100%)}
@keyframes marquee-796daa67{0%{transform:translate(0)}
@keyframes spinny-91b8f811{0%{transform:rotate(0)}
@keyframes tooltipFadeIn{0%{opacity:0}
@keyframes tooltipFadeOut{0%{opacity:1}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes skeleton{0%{transform:translate(-100%)}
```
</details>

### Brand Gradient Palette

**20 complex gradients captured** from the site's CSS. The first few are the most prominent visual decorations:

```css
/* Gradient 1 */
background: radial-gradient(circle farthest-side at 100% -80%,#af6a8c75 0,#62415361 39%,#0000 55%);

/* Gradient 2 */
background: radial-gradient(circle farthest-side at 0 100%,#b200ff26 0,#fff0 56%);

/* Gradient 3 */
background: radial-gradient(circle farthest-side at 20% 100%,#ffffff1a 0,#0000 43%);

/* Gradient 4 */
background: radial-gradient(circle at 50% 100%,#a3643a87 0,#2a192963);

/* Gradient 5 */
background: radial-gradient(circle at 50% 100%,#4b397a6e 0,#2a192963);

```

### Hover State CSS (Intercepted)

**6 hover rule lines** captured from CSS files. Key interactive transitions from real CSS (not inferred):

```css
.card--default[data-v-59e5b355]:hover{background-color:var(--color-shades-dark-navy-lighten,#272333)}

.card--rusty[data-v-59e5b355]:hover{--bg-from:#ee4f2740}

[data-v-40427a4b] a:hover{border-color:#0000}

@supports (color:color-mix(in lab,red,red)){[data-v-40427a4b] a:hover{border-color:color-mix(in oklab,var(--color-white,#fff) 0%,transparent)}

[data-v-40427a4b] a:hover:before{opacity:1}

.logo[data-theme=mono]:hover .path-icon[data-v-64adc7f1]{fill:var(--color-base-pink)}

.submenu-item[data-v-3982f011]:hover{--bg-top:#554d5f99;--bg-bottom:#a6375599}

.submenu-item[data-v-3982f011]:hover:before{border-color:#fff3}

@supports (color:color-mix(in lab,red,red)){.submenu-item[data-v-3982f011]:hover:before{border-color:color-mix(in oklab,var(--color-white,#fff) 20%,transparent)}

@media(hover:hover){.footer-bottom-links[data-v-abeb49b8] a:hover{opacity:1}

.nav-internal-link[data-v-ed32c8fe]:hover{--gradient-start:#ffffff12;--gradient-stop:#ffffff12}

.pricing-plan-item-options .dropdown-option[data-v-af1df3a3]:not(:last-child):hover:after{width:100%}

.tab-trigger[data-v-19ab2422]:hover:not([data-state=active]){--color-linear-top:#ffffff0d;--color-linear-bottom:#fff0}
```

> **Note**: All values above are extracted from the live site's CSS files. The font files are saved locally by Prism and embedded in the output HTML. Use them as-is for maximum fidelity.

## 11.2 Measured Reality (CDP Engine)

Captured directly from Chrome's engine across **all 1836 rendered nodes** — not a sample. These are the values the page *actually paints*, weighted by how often they appear.

### Real Responsive Breakpoints
**6 breakpoints** read from the live `@media` rules (not guessed):
`390px` · `440px` · `700px` · `1024px` · `1440px` · `1920px`

### Measured Design Scale
**Type scale by usage** (× = paint count): `16px`×747 · `11px`×487 · `14px`×295 · `12px`×84 · `18px`×83 · `20px`×69 · `24px`×27 · `48px`×20

**Radius scale** (× = paint count): `12px`×80 · `8px`×45 · `16px`×15 · `40px`×12 · `24px`×11 · `6px`×6 · `50%`×6 · `4px`×1

**Weights** (× = paint count): `400`×1633 · `600`×127 · `700`×53 · `300`×17 · `500`×4

**Layout gaps** (× = paint count): `8px`×42 · `4px`×32 · `16px`×15 · `20px`×15 · `5px`×12 · `40px normal`×11 · `24px`×7 · `8px 32px`×6

**Elevation (real shadows)**:
```css
rgba(0, 0, 0, 0.44) 0px 0px 0px 1px
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
rgba(255, 255, 255, 0.05) 0px 4px 12px 0px inset, rgba(0, 0, 0, 0.23) 0px 4px 16px -8px
rgba(0, 0, 0, 0.26) 0px 0px 8px 0px
```

### Provenance — measured styles on key elements
Read from the live CSSOM (includes runtime-injected CSS). This is *what actually styles the page*, by element:

```css
body { background-color:var(--color-shades-midnight-navy); color:var(--color-base-text-primary) }
body { font-family:var(--font-geomanist) }
h2 { font-size:var(--text-headline-lg) }
h2 { font-family:var(--font-geomanist) }
h2 { font-size:var(--text-headline-xs) }
@media (min-width: 48rem) h2 { font-size:var(--text-headline-md) }
h2 { font-family:var(--font-geomanist,geomanist,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji") }
h2 { color:var(--color-base-heading-primary,#fff) }
h2 { color:var(--color-base-heading-secondary,#b6b5b9) }
button { gap:calc(var(--spacing)*1) }
button { font-size:var(--text-nav-link) }
button { color:var(--color-white) }
```

> Selectors normalised to their semantic element — source class names are often build-hashed (`.bgDIHX`) and not reusable. The declarations + CSS vars are the transferable part.

---
*Generated by Prism — automated Playwright extraction + design analysis.*
*Source: https://n8n.io | 2026-06-11T06:12:58.858Z*
*Values extracted via getComputedStyle() (rendered) + CSS custom properties (tokens, marked `(token)`). Token-only values may not be painted — verify against the live site before shipping.*