# DESIGN.md: Ghost-style design system

Measured from https://ghost.org/ on 2026-10-15 by PikSpec (https://www.pikspec.com). An independent measurement of the rendered page, not Ghost's official design system, and not affiliated with Ghost.

Use it to build your own product in this design language: put this file in your project root and tell your AI tool (Claude Code, Cursor, Codex, Lovable, v0) to follow DESIGN.md. Never use the original's name, logo, copy or images; licensed fonts are replaced with the closest free Google Fonts.

To capture any other page, or get a ready project for your tool: https://www.pikspec.com/build-with-ai

HOW IT SHOULD LOOK
Build it in the design language of ghost.org, measured from the live site: it should feel designed by the same team as ghost.org — the same temperament, colour, type and density — for a different product. Never use ghost.org's name, logo, words or images.

Stack: use the one your project already has. Starting fresh: React + Vite + TypeScript + Tailwind CSS v4, with no UI kit (no shadcn/ui, MUI or Chakra) — their defaults would override this system. In a chat that shows one file (an artifact or canvas), build one HTML file instead, with the tokens below in its <style> block.
Use every value exactly as written. Do not round, rename, approximate or substitute a colour, size, radius, shadow or easing (fonts: see section 1). Anything not listed here does not exist in this system.

THE WEBSITE THIS SYSTEM COMES FROM
- Reference page: https://ghost.org/ — "ghost.org" (home page).
- Page frame: a top navigation bar and a persistent side panel beside the content. This is a tool- or docs-style layout, not a marketing page of stacked full-width bands.
- Content is grouped in cards (19 on the page). Keep cards for grouped content only, not for every section.
- It uses 188 images, 44 of them large. Large, real product imagery is part of the look — leave clearly labelled image slots at those sizes rather than stock photos or abstract 3D shapes.
- Interaction: 8 buttons on one page.
- The page runs about 16 screens long at 1440px wide.
- Density is low: few elements per screen, generous space around each one.

HOW IT LOOKS (WHAT MAKES IT LOOK LIKE ITSELF, BEYOND THE VALUES)
- Almost entirely neutral: 97% of the page is painted in #FFFFFF and #15171A.
- #F8A8DE is an accent: 1.4% of the page, as small fills such as buttons and badges. Keep it to small areas.
- #F8B1E2 is an accent: 1.2% of the page, as small fills such as buttons and badges. Keep it to small areas.
- The largest type (96px InterVariable) is bold (700), tracked to -0.025em.
- Open: text covers 12% of the page. Sections sit about 68px apart.
- Structure comes from thin grid lines, not from shadows or filled cards.
- Share of the painted page: #FFFFFF 61.7% (dominant, backgrounds); #15171A 12.3% (dominant, backgrounds); #0F172A 7.1% (supporting, backgrounds); #E2E8F0 5.9% (supporting, backgrounds); #101214 4.8% (supporting, backgrounds); #191E2F 1.5% (detail, backgrounds); #F8A8DE 1.4% (accent, backgrounds); #F8B1E2 1.2% (accent, backgrounds). Keep accents at these proportions; do not promote them to fills.
- Hairline grid: 1px lines in #222427 run both across and down the page (17 across, 7 down), dividing it into cells instead of cards.
- Small marks: 29 small decorative marks (dots, crosses or ticks under 16px) in #7C7E83 and #24A233, placed at corners and edges.
- Large images: Photographs, video or raster artwork cover about 21% of the page.
- Type as set (size, weight and tracking measured together; use these pairs): 96px weight 700 tracking -0.025em; 72px weight 700; 48px weight 700 tracking -0.025em; 46.25px weight 700 tracking -0.035em; 36px weight 700 tracking -0.025em; 32px weight 700 tracking -0.031em.

1. DESIGN TOKENS — PASTE INTO YOUR GLOBAL CSS
Allowed colours, with how the original uses each. Use no other colour, including in hover states:
- #FFFFFF — 61.7% · backgrounds (var(--color-background))
- #15171A — 12.3% · backgrounds (var(--color-text))
- #0F172A — 7.1% · backgrounds (var(--color-0f172a))
- #E2E8F0 — 5.9% · backgrounds (var(--color-e2e8f0))
- #101214 — 4.8% · backgrounds (var(--color-101214))
- #191E2F — 1.5% · backgrounds (var(--color-191e2f))
- #F8A8DE — 1.4% · backgrounds (var(--color-f8a8de))
- #F8B1E2 — 1.2% · backgrounds (var(--color-f8b1e2))
- #000000 — 0.9% · text
- #334155 — 0.7% · text
- #222427 — hairlines and grid lines
- #DADADC — hairlines and grid lines
- #DDDDDD — hairlines and grid lines
- #1F2937 — hairlines and grid lines
- #7C7E83 — small marks
- #24A233 — small marks
- #CDCFD2 — small marks
- #FAFAFB — small marks
- #E3E6E8 — Surface (var(--color-surface))
- #64748B — Text muted (var(--color-text-muted))
- #1A2E05 — Action (var(--color-action))
- #BEF264 — On action (var(--color-on-action))
- #5DCF1F — Positive (var(--color-positive))
- #FF0000 — Negative (var(--color-negative))
- #FEC137 — Warning (var(--color-warning))
Fonts — put these first in your global CSS (one import per font, so one that fails cannot stop the others):
```css
@import url("https://fonts.googleapis.com/css2?family=Gelasio:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
```
Gelasio, InterVariable (Google's Inter) and Inter are on Google Fonts and loaded from there.
Keep every size, weight, line height and tracking exactly as listed whichever font renders.
```css
:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #E3E6E8; /* Surface */
  --color-text: #15171A; /* Text */
  --color-text-muted: #64748B; /* Text muted */
  --color-border: #E3E6E8; /* Border */
  --color-action: #1A2E05; /* Action */
  --color-on-action: #BEF264; /* On action */
  --color-link: #64748B; /* Link */
  --color-positive: #5DCF1F; /* Positive */
  --color-negative: #FF0000; /* Negative */
  --color-warning: #FEC137; /* Warning */
  --color-0f172a: #0F172A; /* 7.1% of the page, as fills */
  --color-e2e8f0: #E2E8F0; /* 5.9% of the page, as fills */
  --color-101214: #101214; /* 4.8% of the page, as fills */
  --color-191e2f: #191E2F; /* 1.5% of the page, as fills */
  --color-f8a8de: #F8A8DE; /* 1.4% of the page, as fills */
  --color-f8b1e2: #F8B1E2; /* 1.2% of the page, as fills */
  --color-151719: #151719; /* 0.3% of the page, as fills */
  --font-body: "Gelasio", sans-serif; /* Gelasio */
  --font-display: "InterVariable", "Inter", sans-serif; /* InterVariable on the site; Inter renders */
  --font-interface: "Inter", sans-serif; /* Inter */
  --type-display-1: 96px; /* Display 1, weight 700 */
  --type-display-1-leading: 96px;
  --type-display-1-tracking: -0.025em;
  --type-display-2: 72px; /* Display 2, weight 700 */
  --type-display-2-leading: 72px;
  --type-display-3: 48px; /* Display 3, weight 700 */
  --type-display-3-leading: 64.8px;
  --type-display-3-tracking: -0.025em;
  --type-display-4: 46.25px; /* Display 4, weight 700 */
  --type-display-4-leading: normal;
  --type-display-4-tracking: -0.035em;
  --type-display-5: 36px; /* Display 5, weight 700 */
  --type-display-5-leading: 36px;
  --type-display-5-tracking: -0.025em;
  --type-headline-1: 32px; /* Headline 1, weight 700 */
  --type-headline-1-leading: normal;
  --type-headline-1-tracking: -0.031em;
  --type-headline-2: 30.38px; /* Headline 2, weight 600 */
  --type-headline-2-leading: 30.375px;
  --type-headline-2-tracking: 0.002em;
  --type-headline-3: 27px; /* Headline 3, weight 700 */
  --type-headline-3-leading: 27px;
  --type-headline-3-tracking: -0.015em;
  --type-headline-4: 24px; /* Headline 4, weight 400 */
  --type-headline-4-leading: 36px;
  --type-title-large: 20px; /* Title Large, weight 600 */
  --type-title-large-leading: 30px;
  --type-title-medium: 19px; /* Title Medium, weight 400 */
  --type-title-medium-leading: normal;
  --type-title-small: 18px; /* Title Small, weight 600 */
  --type-title-small-leading: 18px;
  --type-body-1: 17.88px; /* Body 1, weight 700 */
  --type-body-1-leading: 17.875px;
  --type-body-1-tracking: -0.011em;
  --type-body-2: 16.5px; /* Body 2, weight 700 */
  --type-body-2-leading: 16.5px;
  --type-body-3: 16px; /* Body 3, weight 400 */
  --type-body-3-leading: 16px;
  --type-body-4: 15px; /* Body 4, weight 400 */
  --type-body-4-leading: 18.75px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-27: 108px;
  --space-36: 144px;
  --space-48: 192px;
  --radius-xs: 2px;
  --radius-sm: 2.5px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 7px;
  --radius-3xl: 8px;
  --radius-full: 9999px;
  --radius-16: 16px; /* component radius */
  --radius-14: 14px; /* component radius */
  --radius-24: 24px; /* component radius */
  --elevation-1: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  --elevation-2: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  --elevation-3: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 2px 6px 0px;
  --elevation-4: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --elevation-5: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --elevation-6: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --elevation-7: rgba(0, 0, 0, 0.086) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 18px 45px 0px;
  --elevation-8: rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 18.8px 33.4px 0px, rgba(0, 0, 0, 0.02) 0px 5.6px 10px 0px;
  --elevation-9: rgba(0, 0, 0, 0.07) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.03) 0px 2.7px 4.4px 1.55px, rgba(0, 0, 0, 0.137) 0px 8px 44px -11.3px;
  --elevation-10: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --elevation-11: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  --duration-1: 0.3s;
  --ease-1: cubic-bezier(0.4, 0, 0.2, 1);
}
```
Tailwind CSS v4 (the default for new projects): put this after `@import "tailwindcss";`. It removes Tailwind's own palette, so only these colours exist as utilities:
```css
@theme {
  --color-*: initial;
  --color-background: #FFFFFF;
  --color-surface: #E3E6E8;
  --color-text: #15171A;
  --color-text-muted: #64748B;
  --color-border: #E3E6E8;
  --color-action: #1A2E05;
  --color-on-action: #BEF264;
  --color-link: #64748B;
  --color-positive: #5DCF1F;
  --color-negative: #FF0000;
  --color-warning: #FEC137;
  --color-0f172a: #0F172A;
  --color-e2e8f0: #E2E8F0;
  --color-101214: #101214;
  --color-191e2f: #191E2F;
  --color-f8a8de: #F8A8DE;
  --color-f8b1e2: #F8B1E2;
  --color-151719: #151719;
  --font-body: "Gelasio", sans-serif;
  --font-display: "InterVariable", "Inter", sans-serif;
  --font-interface: "Inter", sans-serif;
  --text-display-1: 96px;
  --text-display-1--line-height: 96px;
  --text-display-1--letter-spacing: -0.025em;
  --text-display-2: 72px;
  --text-display-2--line-height: 72px;
  --text-display-3: 48px;
  --text-display-3--line-height: 64.8px;
  --text-display-3--letter-spacing: -0.025em;
  --text-display-4: 46.25px;
  --text-display-4--letter-spacing: -0.035em;
  --text-display-5: 36px;
  --text-display-5--line-height: 36px;
  --text-display-5--letter-spacing: -0.025em;
  --text-headline-1: 32px;
  --text-headline-1--letter-spacing: -0.031em;
  --text-headline-2: 30.38px;
  --text-headline-2--line-height: 30.375px;
  --text-headline-2--letter-spacing: 0.002em;
  --text-headline-3: 27px;
  --text-headline-3--line-height: 27px;
  --text-headline-3--letter-spacing: -0.015em;
  --text-headline-4: 24px;
  --text-headline-4--line-height: 36px;
  --text-title-large: 20px;
  --text-title-large--line-height: 30px;
  --text-title-medium: 19px;
  --text-title-small: 18px;
  --text-title-small--line-height: 18px;
  --text-body-1: 17.88px;
  --text-body-1--line-height: 17.875px;
  --text-body-1--letter-spacing: -0.011em;
  --text-body-2: 16.5px;
  --text-body-2--line-height: 16.5px;
  --text-body-3: 16px;
  --text-body-3--line-height: 16px;
  --text-body-4: 15px;
  --text-body-4--line-height: 18.75px;
  --radius-xs: 2px;
  --radius-sm: 2.5px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-2xl: 7px;
  --radius-3xl: 8px;
  --radius-full: 9999px;
  --shadow-e1: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
  --shadow-e2: rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  --shadow-e3: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 2px 6px 0px;
  --shadow-e4: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-e5: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-e6: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  --shadow-e7: rgba(0, 0, 0, 0.086) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 18px 45px 0px;
  --shadow-e8: rgba(0, 0, 0, 0.18) 0px 0px 1px 0px, rgba(0, 0, 0, 0.03) 0px 18.8px 33.4px 0px, rgba(0, 0, 0, 0.02) 0px 5.6px 10px 0px;
  --shadow-e9: rgba(0, 0, 0, 0.07) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.03) 0px 2.7px 4.4px 1.55px, rgba(0, 0, 0, 0.137) 0px 8px 44px -11.3px;
  --shadow-e10: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
  --shadow-e11: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
  --ease-1: cubic-bezier(0.4, 0, 0.2, 1);
}
```
Tailwind CSS v3 only: extend the theme with these instead, and use no other palette:
```js
// tailwind.config — theme.extend
{
  colors: { "background": "var(--color-background)", "surface": "var(--color-surface)", "text": "var(--color-text)", "text-muted": "var(--color-text-muted)", "border": "var(--color-border)", "action": "var(--color-action)", "on-action": "var(--color-on-action)", "link": "var(--color-link)", "positive": "var(--color-positive)", "negative": "var(--color-negative)", "warning": "var(--color-warning)" },
  fontFamily: { "body": ["var(--font-body)"], "display": ["var(--font-display)"], "interface": ["var(--font-interface)"] },
  borderRadius: { "xs": "var(--radius-xs)", "sm": "var(--radius-sm)", "md": "var(--radius-md)", "lg": "var(--radius-lg)", "xl": "var(--radius-xl)", "2xl": "var(--radius-2xl)", "3xl": "var(--radius-3xl)", "full": "var(--radius-full)" },
  boxShadow: { "e1": "var(--elevation-1)", "e2": "var(--elevation-2)", "e3": "var(--elevation-3)", "e4": "var(--elevation-4)", "e5": "var(--elevation-5)", "e6": "var(--elevation-6)", "e7": "var(--elevation-7)", "e8": "var(--elevation-8)", "e9": "var(--elevation-9)", "e10": "var(--elevation-10)", "e11": "var(--elevation-11)" },
}
```

2. BASE STYLES
```css
html { background: var(--color-background); }
body { margin: 0; font-family: var(--font-body); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
a { color: var(--color-link); }
:focus-visible { outline: 2px solid var(--color-action); outline-offset: 2px; }
```

3. COMPONENTS — MATCH THESE EXACTLY
```css
.card { /* Default */
  background: var(--color-background);
  border-radius: var(--radius-16);
  color: #000000;
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 400;
  line-height: 22.5px;
}
.card-2 { /* Alternative 1 */
  background: var(--color-background);
  border-radius: var(--radius-14);
  box-shadow: var(--elevation-9);
  color: var(--color-101214);
  font-family: var(--font-interface);
  font-size: var(--type-body-3);
  font-weight: 400;
}
.card-3 { /* Alternative 2 */
  background: var(--color-f8b1e2);
  border-radius: var(--radius-16);
  color: #000000;
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 400;
  line-height: 22.5px;
}
.link { /* Inline */
  background: transparent;
  border: 1px solid #E3E6E8;
  border-radius: var(--radius-24);
  min-height: 96px;
  box-shadow: var(--elevation-3);
  color: #000000;
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 400;
  line-height: 22.5px;
}
.link-2 { /* Inline 2 */
  background: transparent;
  color: #000000;
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 500;
  line-height: 22.5px;
  /* recorded states: hover */
}
.link-3 { /* Strong */
  background: transparent;
  min-height: 54px;
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--type-display-5);
  font-weight: 600;
  line-height: 54px;
  /* recorded states: hover */
}
.nav-2 { /* Alternative 1 */
  background: transparent;
  color: #000000;
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 400;
  line-height: 22.5px;
}
.nav-3 { /* Alternative 2 */
  background: transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.button { /* Primary */
  background: var(--color-action);
  border-radius: var(--radius-3xl);
  padding: 8px 16px 8px 16px;
  min-height: 39px;
  color: var(--color-on-action);
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 600;
  line-height: 22.5px;
  /* recorded states: hover */
}
.button-2 { /* Secondary */
  background: #15171A;
  border-radius: var(--radius-xl);
  padding: 8px 16px 8px 16px;
  min-height: 39px;
  box-shadow: var(--elevation-3);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.button-3 { /* Secondary 2 */
  background: var(--color-warning);
  border-radius: 9999px;
  padding: 8px 3px 8px 3px;
  min-height: 39px;
  color: #000000;
  font-family: var(--font-display);
  font-size: var(--type-body-4);
  font-weight: 400;
  line-height: 22.5px;
}
```
Where a component lists recorded states, write those states using only the colours above; the capture saw that the state exists, not its values. Never invent a state colour.

4. PAGE COMPOSITION
- Light interface on #FFFFFF. Keep that ground; do not add a dark mode.
- Sections change ground between Background (#FFFFFF), Text (#15171A), #0F172A and #E2E8F0; use only those.
- #1A2E05 is the action colour. Fill the primary action with it and little else — at most one #1A2E05-filled element per screen; other accents keep to the uses listed above.
- Type: Gelasio for body; Inter for display; Inter for interface. Hierarchy comes from size and weight, not colour or decoration.
- Everything sits on a 4px grid.
- Corner radii are 2px, 2.5px, 3px, 4px, 6px, 7px, 8px, fully round (pill) — nothing else.
- Body text uses Gelasio at around 19px, weights 400, 700.
- Headings use InterVariable; the largest heading is 96px.
- Primary buttons are #1A2E05, 8px radius, weight 600.
- Cards use 16px 16px 0px 0px corners.
- Corner radii in use: 8px, 24px, 2.5px, 6px, 2px.

HOW THE ORIGINAL PACES ITS PAGE (BORROW THE RHYTHM — THE OPENING, THE COLOURED BANDS, THE CARD GRIDS — NOT THE LIST; BUILD THE SECTIONS YOUR PRODUCT NEEDS)
1. Hero — 243px tall, centred 96px heading (weight 700).
2. Full-bleed image — 850px tall, image behind the content, on #15171A.
3. Text — 621px tall, left-aligned 48px heading (weight 700), on #FFFFFF.
4. Split — 901px tall, split 5 / 7, 72px gap, left-aligned 48px heading (weight 700), image behind the content.
5. Text — 744px tall, image on the right.
6. Text — 251px tall, left-aligned 48px heading (weight 700).
7. Full-bleed image — 813px tall, image behind the content, on #FFFFFF.
8. Text — 1137px tall, left-aligned 36px heading (weight 700), image on the left.
9. Split — 944px tall, split 7 / 5, 36px gap, left-aligned 48px heading (weight 700), image on the left, on #0F172A.
10. Text — 179px tall, left-aligned 48px heading (weight 700).
11. Full-bleed image — 901px tall, image behind the content.
12. Text — 1137px tall, left-aligned 36px heading (weight 700), image on the left.
13. Statement — 574px tall, a strip of 16 small items (logos, links or icons), centred 36px heading (weight 700) set mid-band, on #FFFFFF.
14. Statement — 279px tall, centred 72px heading (weight 700).
15. Cards (×2) — 2 bands of 408px, 4 equal columns, 32px gap, left-aligned 36px heading (weight 700), image on the left.
16. Cards — 535px tall, 4 equal columns, 32px gap, left-aligned 36px heading (weight 700), image on the left.
17. Full-bleed image — 1169px tall, left-aligned 36px heading (weight 600), full-width image, on #FFFFFF.
18. Statement — 607px tall, centred 48px heading (weight 600), on #15171A.
19. Footer — 609px tall, split 3 / 3 / 2 / 2 / 2, 36px gap, left-aligned 15px heading (weight 500), on #15171A.
- Content sits in a 1280px container, 24px from the edge at 1440px wide.
- A 94px header scrolls away.
- The hero is 243px (0.3 screens): centred 96px heading (weight 700).
- Column splits on a 12-column grid: quarters (2×), 5/7, 7/5, 3/3/2/2/2; gaps of 36px.
- Headings align left (11 of 15 sections); centre only the occasional statement.
- Sections change background 11 times, between #15171A, #FFFFFF, #0F172A: colour comes in full-width bands; #FFFFFF is large rounded panels inside a section instead.
- A typical section is about 744px tall.

COPY SHAPE (MATCH THE LENGTH AND CASE; WRITE YOUR OWN WORDS)
- The main heading is 6 words long.
- Section headings are short: typically 3 words.
- Headings are in sentence case (only the first word capitalised).
- The page describes itself in about 22 words; keep your intro paragraph to about that length.

5. MOTION
Interactive elements change colour, background, border and opacity with the measured timing. Animate nothing else.
```css
a, button, [role="button"], input { transition: color var(--duration-1) var(--ease-1), background-color var(--duration-1) var(--ease-1), border-color var(--duration-1) var(--ease-1), opacity var(--duration-1) var(--ease-1); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
```
No scroll-triggered fade-ins, parallax, typewriter text or bouncing elements.

6. RESPONSIVE
- The design was measured at 1440px wide. Lay it out for that width first, then let it reflow down to 360px.
- Content sits in a column at most 680px wide, centred, with var(--space-4) (16px) side padding on small screens.
- The largest heading scales fluidly: font-size: clamp(48px, 6.7vw, 96px). Every other size stays fixed.
- Break on composition, not device names: a row of columns drops a column when any column would be narrower than 240px; side-by-side splits stack when either side would be narrower than 320px.
- Spacing steps never change between sizes; use smaller steps from the same list where space is tight.
- On touch screens, every link and button has a hit area of at least 44 × 44px without changing its drawn size.

7. ACCESSIBILITY
- Text pairs that pass for body copy: Text on Background (18:1), Text muted on Background (4.8:1), Action on Background (14.6:1), Link on Background (4.8:1), Text on Surface (14.3:1), Action on Surface (11.7:1) and On action on Action (11.2:1).
- Only for text 24px and up, or 18.66px bold: Negative on Background (4:1), Text muted on Surface (3.8:1), Link on Surface (3.8:1) and Negative on Surface (3.2:1).
- Use no other text-on-background pairing.
- One h1 per page, headings in order, landmarks (header, nav, main, footer), real buttons and links, a label on every field, alt text on every image, an aria-label on icon-only buttons.
- Every interactive element shows the :focus-visible outline above.

8. DO NOT (THESE ARE WHAT MAKE AI-BUILT SITES LOOK GENERIC)
- No gradients: not in backgrounds, text, buttons or borders. (No gradient was measured.)
- Only these colours: #FFFFFF, #15171A, #0F172A, #E2E8F0, #101214, #191E2F, #F8A8DE, #F8B1E2, #000000, #334155, #222427, #DADADC, #DDDDDD, #1F2937, #7C7E83, #24A233, #CDCFD2, #FAFAFB, #E3E6E8, #64748B, #1A2E05, #BEF264, #5DCF1F, #FF0000, #FEC137. No new tints, no Tailwind defaults (slate, indigo, violet). (They are every colour that covers a measurable part of the page, and the colours its lines and drawings use.)
- #F8A8DE only as small fills (buttons, badges) — never a section background or a large panel. (It covers 1.4% of the page.)
- #F8B1E2 only as small fills (buttons, badges) — never a section background or a large panel. (It covers 1.2% of the page.)
- Only the fonts in the tokens: Gelasio for body; Inter for display; Inter for interface. No other typeface, and no Inter, Roboto or system UI font unless it is one of these. (The page is set in InterVariable and Gelasio and InterG; the tokens carry what stands in for them.)
- Headings and large text never heavier than weight 700. Do not make headlines bold to add emphasis. (Every size from 24px up is set at weight 700 or lighter.)
- Large headlines tracked tight (letter-spacing -0.025em), not at the browser default. (The 96px headline is set at -0.025em.)
- No icon above every feature, no emoji, no decorative blobs, sparkles or glows. (None of these is part of the captured design; they are a coding model's defaults.)
- Build the sections your product needs, not the original's list. Give each one this system's look: its kinds of section (hero, image, text, split, statement, cards, footer), its colours, type, shapes and spacing. (The style carries to any kind of site; the original's page was for a different product.)
- No glassmorphism, backdrop blur, glowing orbs, noise blobs or neon outlines.
- No row of three identical feature cards as the default section. Vary the layout from section to section: a split, a list, a single large statement, a table.
- No centred-everything hero with a pill badge, a gradient headline and two buttons. Lead with the most specific thing about the product.
- No filler copy: no "Unlock your potential", "Revolutionize", "Seamless", "Elevate", "Supercharge", "Next-gen" or lorem ipsum. Write plain, specific sentences a real company would publish.
- No made-up statistics, testimonials or customer logos. Leave a clearly marked [content: …] slot instead.
- No radius larger than the largest one listed.
- No shadows other than the levels listed.
- Do not use ghost.org's name, logo, copy or images. This is its design system, not its content.

BEFORE YOU FINISH
- Search your code for every colour, font size, spacing value, radius, shadow and easing, and replace anything that is not a variable above.
- Check that no [content: …] slot has been filled with invented facts.
- Search your CSS for gradient(. There should be none.
- Every colour value in your CSS is one of the allowed colours. Nothing else, including in hover states.
- #F8A8DE covers about 1.4% of the page or less, as on the original.
- #F8B1E2 covers about 1.2% of the page or less, as on the original.
- No text 24px or larger has a font-weight above 700.
- The largest headline uses letter-spacing -0.025em.
- Every section, including ones the original does not have, uses only this system's colours, type, shapes and spacing.
- Content sits in a 1280px container with 24px side margins at 1440px.
- There is no placeholder copy (lorem ipsum, "Feature one", "Your headline here"). Every word is real.
- Take a screenshot at 1440px and put it beside the original. List every difference in colour, weight, spacing, alignment and imagery, and fix each before finishing. Then check 390px wide: nothing scrolls sideways and no heading runs off the screen.