--- version: alpha name: "Pagani" website: "https://www.pagani.com" description: >- An Italian hypercar maison whose marketing site treats the homepage as a single full-bleed cinematic plate — a deep-oxblood Utopia Roadster photographed against a near-black studio, with a 36px Istok Web wordmark in weight 100 small-caps stamped across the centerline of the car. The chrome is monochrome to the millimetre: pure white ink on pure black canvas, with one short white wordmark in the top bar and a single 40px-rounded modal button as the only soft corner in the entire system. There is no brand color, no CTA pill, no gradient — every chromatic note comes from the car itself. seo: title: "Pagani Design System for React — white-on-black, Istok Web ultra-light, 14 components" metaDescription: "Pagani's marketing site as a DESIGN.md file — full-bleed hypercar photography, white-on-black chrome, Istok Web at weight 100 with wide tracking. Tokens for React, Next.js, and AI coding tools." highlights: - "Photograph as canvas — the Utopia Roadster fills the full viewport, with chrome stamped directly over the metal rather than framed beside it" - "Ultra-light Istok Web — display sits at 36px in weight 100 with 3.6px tracking and uppercase casing, an editorial-fashion treatment foreign to the supercar category" - "Zero brand voltage — no orange, no red badge, no chrome-blue accent; the only color anywhere on the page is whatever the metallic paintwork reflects" - "Wide letter-spacing as identity — headlines run at 3.6px, h3 at 4px, h4 at 1.3px tracking; the tracking IS the brand" - "One radius, used once — a single 40px rounding sits on the cookie modal button, and nothing else on the page bends a corner" tags: - "Automotive" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Pagani's homepage looks more like a Milan fashion-house lookbook than a car-manufacturer site. A single deep-oxblood Utopia Roadster sits dead-centre on a near-black studio plate, photographed at three-quarter front with the gullwing door raised; the script "Act Three, Scene Two" is painted in white directly across the bodywork as if etched on the metal. The Pagani wordmark hovers at top-centre in weight-100 small-caps. No CTA pill, no hero gradient, no scrolling-news ticker — just one photograph, one wordmark, one inline caption. Where Ferrari leans on a bright red brand band and McLaren on papaya-orange voltage chips, Pagani refuses to put any colour at all between the visitor and the car. The site IS the press still. The DESIGN.md packages this restraint into a machine-readable spec. Inside: a three-token monochrome palette of canvas black, ink white, and a single deep-charcoal alt-black for emphasis bands; an Istok Web type stack running at weight 100 across every display tier, with 3.6px tracking on the h1 and 4px tracking on h3, plus Arial as a fallback button face; a near-empty radius scale where only one surface — the cookie-modal button — uses a 40px rounding; an extra-airy spacing system whose dominant tokens are 60px (top section), 25px (block padding), and 200px (horizontal gutter). Roughly 14 components cover the wordmark nav, the inline-caption headline ("Discover more | Press release"), the full-bleed photo hero, and a single white-text footer line. Feed this file to Claude or Cursor and it reproduces moves no other automotive system in this directory uses: the photograph occupies the entire above-fold canvas, no CTA competes with the car, the typography stays at weight 100 instead of the usual 700 supercar-shout, and the colour palette stays at three structural values. Borrow the spec only when your product is itself photogenic enough to carry the page — Pagani gets away with the silence because the Utopia is the headline. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.pagani.com" title: "Pagani — official site" description: "Pagani's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Pagani's primary brand color?" answer: "Pagani's marketing site has no brand voltage in the conventional sense — no signature red, no chrome-blue badge, no orange accent. The captured palette is three structural tokens: pure white ink (frequency 210 across the page), pure black canvas (frequency 23), and a near-black charcoal (frequency 4) reserved for emphasis bands. Every chromatic note visible on the homepage comes from the photographed car itself — the oxblood paintwork of the Utopia Roadster, the brushed silver of the wheels, the warm tan stitching of the cabin. The system is a deliberate refusal of the supercar-category convention where Ferrari uses bright red and McLaren uses papaya orange as identity chips." - id: "typography" title: "What typeface does Pagani use, and what should I use as a substitute?" answer: "Pagani runs Istok Web — a free Latin/Cyrillic sans designed by Andrey V. Panov — across every display tier of the site, at weight 100 with uppercase casing and wide letter-spacing. The h1 sits at 36px / 100 with 3.6px tracking. h3 at 20px / 100 with 4px tracking. h4 at 13px / 100 with 1.3px tracking. Buttons fall back to plain Arial at 20px / 400. The closest open-source substitute is Barlow Condensed Thin or Inter at weight 100 with manual tracking added; the ultralight grade is the move to preserve, not the family itself. Avoid bumping to weight 300 or above — the editorial-fashion silhouette collapses immediately." - id: "canvas-color" title: "Why is the page background pure black?" answer: "The captured canvas is pure pixel-black, used as a studio plate rather than a UI surface. Pagani photographs every vehicle against a controlled near-black backdrop so the metallic paint reads as colour and the carbon-fibre details read as texture; the marketing site simply continues that backdrop into the viewport. A softer charcoal would mute the contrast between the oxblood bodywork and the floor, and any background tint other than neutral would shift the perceived paint colour. The result is closer to an automotive press still than to a typical homepage hero — the page IS the photo booth." - id: "rounded-style" title: "What is Pagani's corner-radius philosophy?" answer: "There is essentially no radius system. The captured page exposes exactly one rounded value — 40px, used once, on the cookie-consent modal button. Every other surface in the captured render uses 0px corners: the wordmark, the nav strip, the inline caption rows, the footer text band. This is the inverse of the soft 12-16px scale that Stripe and Linear lean on, and even sharper than the 4-8px small-step systems of dev-infra brands. The hard corners reinforce the photographic-studio feel of the page; rounded chrome would interrupt the cinematic plate." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own automotive marketing site?" answer: "Yes — the tokens resolve cleanly for Claude, Cursor, or any AI tool that reads structured design specs. The agent will reproduce Pagani's specific moves: full-bleed photographic hero, white-on-black monochrome chrome, Istok Web at weight 100 with wide tracking, zero brand voltage, hard 0px corners on every surface except a single modal button. The token references in the components block all resolve to declared values. One caveat: the spec only carries weight if the photography behind it is genuinely cinematic. Pagani can hold an empty hero because the Utopia is the headline; on a flat product render the silence would read as a missing CTA instead of as restraint." mockups: - "marketing-hero" - "editorial-article" colors: canvas: "#000000" surface-1: "#141414" ink: "#ffffff" typography: display-xl: fontFamily: "\"Istok Web\", sans-serif" fontSize: 36px fontWeight: 100 lineHeight: 42px letterSpacing: 3.6px heading-md: fontFamily: "\"Istok Web\", sans-serif" fontSize: 20px fontWeight: 100 lineHeight: 28px letterSpacing: 4px heading-sm: fontFamily: "\"Istok Web\", sans-serif" fontSize: 13px fontWeight: 100 lineHeight: 23px letterSpacing: 1.3px body-md: fontFamily: "\"Istok Web\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px letterSpacing: 0 body-sm: fontFamily: "\"Istok Web\", sans-serif" fontSize: 13px fontWeight: 100 lineHeight: 20px letterSpacing: 0.65px caption: fontFamily: "\"Istok Web\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 12px letterSpacing: 0 quote: fontFamily: "\"Istok Web\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 23px letterSpacing: 0 nav-link: fontFamily: "\"Istok Web\", sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 20px letterSpacing: 0 micro-label: fontFamily: "\"Istok Web\", sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 20px letterSpacing: 0 button-md: fontFamily: "Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 24px letterSpacing: 0 button-sm: fontFamily: "Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 60px letterSpacing: 1.2px rounded: none: "0px" pill: "40px" spacing: xs: "8px" sm: "10px" md: "18px" base: "25px" lg: "30px" xl: "35px" 2xl: "40px" 3xl: "60px" hero-gutter: "200px" components: button-primary: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "10px 25px" height: "44px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.none}" padding: "0px 15px" height: "60px" borderColor: "{colors.ink}" top-nav: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 15px" height: "20px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "0px 15px" height: "20px" wordmark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.none}" padding: "0px" hero-section: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "60px 200px 0px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "0px" inline-caption: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" pull-quote: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.quote}" rounded: "{rounded.none}" emphasis-band: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "25px 60px" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "25px" borderColor: "{colors.ink}" text-input: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "10px 0px" height: "44px" borderColor: "{colors.ink}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: "20px 25px" --- ## Overview Pagani's marketing surface refuses every convention of the supercar category. **Photograph as canvas.** A single deep-oxblood Utopia Roadster fills the full viewport, photographed against a near-black studio plate, with the Pagani wordmark stamped at top-centre in weight-100 small-caps and the script "Act Three, Scene Two" painted across the bodywork. There is no hero CTA, no chrome strip of brand colour, no scrolling-news rail. Where Ferrari runs its homepage on a saturated brand red and McLaren on a papaya-orange voltage block, Pagani holds the page in pure monochrome and lets the photograph do every chromatic and emotional job. The site reads more like a Milan fashion-house lookbook than an automotive product page. The chromatic discipline is total. The captured palette is three structural tokens — pure white ink (`{colors.ink}` — #ffffff, frequency 210), pure black canvas (`{colors.canvas}` — #000000, frequency 23), and a near-black `{colors.surface-1}` (#141414) used only on emphasis bands. There is no brand red, no logo gold, no metallic-silver accent token. Every chromatic note visible on the homepage is borrowed from the photographed car itself: the oxblood paintwork, the brushed-silver wheels, the warm tan stitching of the cabin. This is the inverse of single-voltage discipline elsewhere in the directory — instead of holding one brand colour against a neutral floor, Pagani holds zero brand colours and lets the subject carry the palette. Typography is **ultralight Istok Web with wide tracking** at every display tier. The h1 sits at 36px / 100 with 3.6px letter-spacing; h3 at 20px / 100 with 4px tracking; h4 at 13px / 100 with 1.3px tracking. There is no weight 400+ moment in the display stack — even body small-caps stay at weight 100. The closest neighbour in the directory is the editorial display weight at Cloudflare (500), but Cloudflare looks downright bold next to this. Istok Web at 100 is closer to the fashion-house masthead grades used on Yves Saint Laurent or Bottega Veneta product pages than to any other automotive site. **Key Characteristics:** - Three-token monochrome palette (`{colors.canvas}`, `{colors.surface-1}`, `{colors.ink}`) — no brand voltage anywhere; chromatic interest comes from the photograph alone. - Full-bleed photographic hero — the Utopia Roadster fills the viewport, with chrome stamped directly across the metal rather than framed beside it. - Istok Web at weight 100 across every display tier — the editorial-fashion silhouette is unprecedented in the supercar category. - Wide letter-spacing as identity — `{typography.display-xl}` runs at 3.6px tracking, `{typography.heading-md}` at 4px, `{typography.heading-sm}` at 1.3px. - Hard 0px corners on every surface except one — the only rounded value in the system is the 40px cookie-modal button. - Uppercase casing on every display, heading, and nav-link tier — the body stays mixed-case for legibility but the chrome is small-caps end-to-end. - Generous gutter spacing — the hero uses 200px horizontal padding (`{spacing.hero-gutter}`) and 60px top padding, leaving the photograph to occupy nearly the entire viewport. - Arial as the button face — the only non-Istok type token in the system, used at 10–20px for the cookie button and any modal CTA. ## Colors ### Surface - **Canvas** (`{colors.canvas}` — #000000): frequency 23 — used as background (20), text (1), border (1), and shadow (1). The page floor; the studio plate behind the Utopia photograph; the footer band. Pure pixel-black, deliberately not softened to charcoal because the metallic paintwork needs maximum contrast to register as colour rather than as flat illustration. - **Surface-1** (`{colors.surface-1}` — #141414): frequency 4 — used as text (2) and border (2). The single elevated dark tone, reserved for emphasis bands below the fold where a vehicle-spec strip needs to separate itself from the canvas without breaking the monochrome scheme. The 8-point lightness lift reads as a panel without ever being a fill. ### Text - **Ink** (`{colors.ink}` — #ffffff): frequency 210 — used as text (113), border (97), background (0). The dominant ink across every tier: hero h1, wordmark, nav links, inline caption, footer attribution, button text on the cookie-modal CTA. Also carries the entire border budget on the page — 97 of the 99 captured borders are white-on-black hairlines. Pure white, never softened to bone or cream; the contrast with the studio plate is uncompromising. ### Note on the Absence of a Brand Hex The system captures zero colour tokens at the brand layer. The page exposes a WordPress preset palette (vivid amber, vivid red, vivid cyan-blue, vivid purple, pale pink, luminous orange) inherited from the platform's default theme.json, but none of those values render anywhere on the captured homepage — they are theme defaults left unused. Pagani's identity colour, in any meaningful sense, is whatever the next vehicle's paintwork happens to be. The Utopia Roadster currently on the homepage carries the page in deep oxblood; the previous Huayra Codalunga carried it in silver-pearl. ## Typography ### Font Family The system runs **Istok Web** for every display, heading, body, and nav tier — a free Latin/Cyrillic sans designed by Andrey V. Panov. Fallback walks straight to `sans-serif`; no system-ui safety stack is declared. **Arial** appears as a second face on exactly two surfaces: the cookie-modal button (20px / 400) and a small-caps in-page caption (10px / 400 / 1.2px tracking). The pairing — Istok Web ultralight for everything spoken, Arial regular for the modal-button vernacular — is unusual but mechanical: the modal HTML is injected by a third-party cookie banner that ships its own Arial fallback. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 36px | 100 | 42px | 3.6px | Hero h1 ("Act Three, Scene Two: Pagani Utopia Roadster.") | | `{typography.heading-md}` | 20px | 100 | 28px | 4px | Section h3 — sub-headlines and product titles | | `{typography.heading-sm}` | 13px | 100 | 23px | 1.3px | h4 labels above feature rows | | `{typography.body-md}` | 16px | 400 | 20px | 0 | Default running text, nav-link rest state | | `{typography.body-sm}` | 13px | 100 | 20px | 0.65px | Inline caption ("Discover more \| Press release") | | `{typography.caption}` | 12px | 400 | 12px | 0 | Footer attribution, legal-copy strip | | `{typography.quote}` | 16px | 400 | 23px | 0 | Pull-quotes inside editorial bands | | `{typography.nav-link}` | 16px | 400 | 20px | 0 | Top-nav link labels | | `{typography.micro-label}` | 12px | 400 | 20px | 0 | Small spans inside the inline caption row | | `{typography.button-md}` | 20px | 400 | 24px | 0 | Cookie-modal CTA label (Arial) | | `{typography.button-sm}` | 10px | 400 | 60px | 1.2px | Small-caps inline caption span (Arial) | ### Principles The display stack lives at weight 100 — the loudest type on the page is also the thinnest. The wide letter-spacing across `{typography.display-xl}` (3.6px), `{typography.heading-md}` (4px), and `{typography.heading-sm}` (1.3px) is the typographic signature: confidence by tracking, not by weight or by size. Uppercase casing carries every chrome-tier surface (wordmark, nav, hero h1, h3, h4); the only mixed-case tiers are the body, caption, and quote, which run at weight 400 for legibility. There is no weight 500 or 700 anywhere on the captured surface — even the cookie-button face stays at weight 400. ### Note on Font Substitutes Istok Web is free and ships on Google Fonts under the SIL Open Font License — you can pull it directly. If you need a tighter alternative, **Barlow Condensed** at weight 100 has a similar editorial silhouette; **Inter** at weight 100 with manual letter-spacing added is the closest geometric substitute but reads noticeably less editorial. Avoid bumping past weight 300 — the fashion-house feel collapses the moment the strokes thicken. ## Layout ### Spacing System - **Base unit:** there is no single base unit; the system uses a non-modular set built around 25px (the dominant block padding, appearing 11 times in the captured page). - **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 18px · `{spacing.base}` 25px · `{spacing.lg}` 30px · `{spacing.xl}` 35px · `{spacing.2xl}` 40px · `{spacing.3xl}` 60px · `{spacing.hero-gutter}` 200px. - **Section padding (vertical):** 60px top, 0px bottom — the dominant section opener ("60px 0px 0px") appears 17 times in the captured page. - **Hero horizontal gutter:** 200px on each side, leaving the photograph to occupy the centre of the viewport surrounded by deep margin. - **Footer padding:** 20px / 25px — the only place 20px appears. ### Grid & Container - **Max content width:** the hero photograph stretches edge-to-edge of the viewport (1440px in the captured render); typographic content sits inside a centred ~1040px column. - **Hero:** full-bleed photograph behind a centred 1040px text column; the h1 floats over the bodywork at roughly the centreline of the car. - **Nav strip:** 296px-wide centred wordmark cluster at top, with link items at 0px / 15px horizontal padding. - **Footer:** single 1440px-wide attribution line — no columns, no sitemap, no link grid. ### Rhythm The page is a sequence of **single full-bleed plates** rather than a stacked feature catalogue. The hero is one photograph. Section 2 is another photograph with a single h3 caption. Section 3 is another photograph. There is no 3-up feature row, no logo wall, no pricing strip — every band is one image plus one line of type, with 60px of black between. The vertical rhythm is set by the photographs themselves, not by a measured baseline grid. ## Elevation The system has **no shadow tier at all**. The captured page has 1 occurrence of `#000000` used as shadow ink, and it sits on a single low-priority modal — the cookie consent panel. Everywhere else, depth comes from the photographic perspective inside the hero plates, not from any layered UI elevation. Hairlines (`{colors.ink}` at low opacity, 97 occurrences) carry the work that shadows would carry on a dashboard product: dividing the nav from the photograph, separating the footer band from the canvas, outlining the cookie-button border. - **Flat (no shadow):** hero, nav, footer, editorial bands — 99% of surfaces. - **Photographic depth:** the Utopia Roadster sits in three-quarter perspective with the gullwing door raised, casting its own studio shadow on the floor of the plate — the only "shadow" visible on the page is inside the image, not under any UI element. - **Hairline outlines:** 1px white-on-black rules separate the nav strip from the photograph and the footer from the canvas. ## Shapes The radius scale is **essentially a single value** — and that value is used exactly once. - `{rounded.none}` 0px — every surface in the captured render: wordmark, nav links, inline caption, h1, h3, h4, footer, body, editorial bands. Sharp corners end-to-end. - `{rounded.pill}` 40px — the only rounded value in the system. Used on a single surface: the cookie-consent modal button at the bottom of the page. The 40px rounding is large enough to render as a full pill at the button's 44px height. There is no 4px / 6px / 8px small-step ladder, no 12px / 16px / 24px middle tier. The system is binary: 0px or pill, and the pill appears once. The hard-corner discipline reinforces the photographic-studio feel of the page; soft chrome would interrupt the cinematic plate. ## Components **`button-primary`** — White `{colors.ink}` fill, black text, 40px pill rounding, Arial 20px / 400, 10×25 padding, 44px height. Appears only on the cookie-consent modal; there is no primary CTA elsewhere on the page. **`button-secondary`** — Transparent fill with white text, 0px corners, Arial 10px / 400 with 1.2px tracking, 0×15 padding, 60px height. The small-caps inline caption span used inside the "Discover more | Press release" row. **`top-nav`** — Transparent background, white text in `{typography.nav-link}` (16px / 400), 0×15 padding, 20px height. Floats above the photograph rather than sitting on a coloured surface. The wordmark sits centred; nav items align around it at 296px container width. **`nav-link`** — Identical to `{component.top-nav}` at the item level — transparent background, white text, 0×15 padding, no hover background visible in the captured surface. **`wordmark`** — White text on the transparent nav, `{typography.heading-md}` (20px / 100) with 4px tracking, uppercase. The brand mark itself; the only typographic surface that consistently anchors the top of every plate. **`hero-section`** — Pure-black `{colors.canvas}` floor, 60px top / 200px horizontal padding, 0 bottom. Holds the full-bleed photograph and the centred h1 stamped across the bodywork. **`hero-heading`** — White text on the transparent hero, `{typography.display-xl}` (36px / 100) with 3.6px tracking, uppercase. The only display moment on the page; deliberately measured so the photograph remains visually dominant. **`inline-caption`** — White text in `{typography.body-sm}` (13px / 100 / 0.65px tracking). The "Discover more | Press release" row that sits beneath the h1 — Pagani's substitute for a conventional CTA pair. **`body-paragraph`** — Default white text at `{typography.body-md}` (16px / 400). Used inside editorial bands below the fold where descriptive copy explains a vehicle or programme. **`pull-quote`** — White text at `{typography.quote}` (16px / 400 / 23px line-height). The only mixed-case display moment in the system, used for owner-and-designer quotes inside editorial sections. **`emphasis-band`** — `{colors.surface-1}` (#141414) fill, white text, 25×60 padding, 0px corners. A subtle elevation strip used to separate a vehicle-spec table from the surrounding photograph; reads as a panel without ever competing with the image. **`card`** — `{colors.surface-1}` fill, white text, 25px padding, 0px corners, 1px white hairline. The default content card for spec rows; the hairline carries the elevation work. **`text-input`** — Transparent fill, white text, white bottom-hairline border, 0px corners, 44px height. Used inside the contact/newsletter strip on inner pages — a single underlined line, not a boxed field. **`footer`** — Pure-black canvas, white text at `{typography.caption}` (12px / 400 / 12px line-height), 20×25 padding, single 52px-tall band carrying the legal attribution ("© 2026 Pagani S.P.A. — rights reserved — credits"). No columns, no sitemap. ## Do's and Don'ts **Do** keep the chrome at three monochrome tokens (`{colors.canvas}`, `{colors.surface-1}`, `{colors.ink}`). Adding any brand-coloured accent — even a single red stripe — collapses the entire "page IS the photo booth" premise. **Do** hold display weight at 100 with wide letter-spacing. The hero h1 at 36px / 100 / 3.6px tracking is the system's editorial signature; reaching for weight 400 to "fix the contrast" replaces the fashion-house silhouette with a generic supercar shout. **Do** let the photograph fill the full viewport at the hero. The 60px top padding and 200px horizontal gutter (`{spacing.hero-gutter}`) are designed so the photograph occupies almost the entire frame — chrome lives at the edges, never beside the subject. **Do** keep every surface at 0px corners except the single cookie-modal button. The hard-corner discipline is what holds the page reading as a photographic plate rather than as a UI layout. **Don't** insert a CTA pill below the hero h1. The page has no primary CTA — the "Discover more | Press release" inline caption (`{component.inline-caption}`) is the entire substitute. Dropping a 56px filled button into the hero would betray the editorial reading of the layout. **Don't** swap `{colors.canvas}` from pure #000000 to a softer charcoal. The pure-black studio plate is calibrated to make the photographed paint colours read as colour — softening it tints the perceived bodywork hue. **Don't** introduce a middle-radius tier (8px / 12px / 16px) on cards or inputs. The system is binary — 0px everywhere or a single 40px pill on one button. Adding a 12px softness to cards reads as an Airbnb / Stripe import and breaks the photographic feel. **Don't** add a brand-coloured nav underline or active-state pill. The captured nav (`{component.nav-link}`) has no fill, no underline, no chip — the only indicator of the current page is the wordmark position. Adding a coloured active state would put a chromatic accent where the system has deliberately refused one. ## Known Gaps - **Brand colour:** the system exposes no brand-layer hex at all. If you need to surface a vehicle-specific accent (oxblood for Utopia, silver for Huayra Codalunga), you'll have to pull it from the photograph itself rather than from the captured tokens. - **Primary CTA:** there is no captured filled-button primary action — only the inline-caption row and the cookie-modal button. State variants (hover, active, focus, disabled) for any primary CTA are not exposed. - **Form input states:** `{component.text-input}` carries only the resting underlined state. Error, focus-ring, disabled, and password-field variants are not represented on the marketing surfaces. - **Dark / light variants:** the captured surfaces are dark-only. A light-on-light press-kit layout exists on inner pages but is not represented in the homepage extraction. - **Motion:** the hero photograph fades and parallaxes on scroll, but the spec captures static end-state values only. Easing curves, duration, and crossfade timing live in the live runtime. - **Configurator and dealer surfaces:** this DESIGN.md captures the public homepage only. The vehicle configurator (`utopia.pagani.com`) and the dealer-locator screens carry richer surface tokens and component sets that are not represented here. - **Inner editorial pages:** the homepage is the single-photograph plate; vehicle detail pages add long-form spec tables, multi-column gallery grids, and PDF-download chips that are not captured in the homepage tokens.