---
version: alpha
name: Ducati
description: Bolognese motorsport editorial — absolute black canvas, Ducati Red as the singular chromatic strike, DucatiStyle Condensed at extreme weight, razor-sharp corners, and cinematic full-bleed motorcycle photography as the primary visual material. /* estimated */

colors:
  # Brand accent
  primary: "#e2001a"           # Ducati Red — the singular brand colour /* estimated */
  primary-hover: "#b50015"     # Darkened Ducati Red for hover states /* estimated */
  primary-active: "#8c0010"    # Deep red for pressed/active states /* estimated */
  primary-container: "#2a0005" # Dark red tint for on-dark backgrounds /* estimated */

  # Surfaces / canvas
  background: "#ffffff"        # White — used on light editorial sections
  surface-dark: "#0a0a0a"      # Near-absolute black — dominant hero canvas /* estimated */
  surface-mid: "#181818"       # Dark surface for secondary sections /* estimated */
  surface-panel: "#242424"     # Elevated dark panel, card on dark canvas /* estimated */
  surface-light: "#f4f4f4"     # Off-white — specs, configurator sections /* estimated */

  # Text / ink
  ink: "#1a1a1a"               # Near-black body text on white surfaces /* estimated */
  ink-inverted: "#ffffff"      # Primary text on dark backgrounds
  ink-secondary: "#666666"     # Secondary body text on light surfaces /* estimated */
  ink-muted: "#999999"         # Tertiary / metadata text /* estimated */
  ink-on-dark-secondary: "#a0a0a0" # Secondary text on dark surfaces /* estimated */

  # Interactive / states
  focus-ring: "#e2001a"        # Focus ring inherits Ducati Red /* estimated */
  link-hover: "#e2001a"        # Links hover to Ducati Red /* estimated */

  # Semantic
  success: "#1d8a4a"           # Confirmation / form validation /* estimated */
  warning: "#e08000"           # Alert / caution state /* estimated */
  error: "#cc0000"             # Error / destructive action /* estimated */

  # Structural
  border: "#dddddd"            # Light-section borders and dividers /* estimated */
  border-dark: "#333333"       # Dark-section borders /* estimated */
  shadow-soft: "#000000"       # Shadow base — deep black, tight radius /* estimated */

typography:
  display-hero:
    fontFamily: "DucatiStyle, 'Univers Condensed', 'Neue Helvetica Condensed', Arial Narrow, sans-serif"
    fontSize: 96px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1px
  display:
    fontFamily: "DucatiStyle, 'Univers Condensed', 'Neue Helvetica Condensed', Arial Narrow, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "DucatiStyle, 'Univers Condensed', 'Neue Helvetica Condensed', Arial Narrow, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "DucatiStyle, 'Univers Condensed', 'Neue Helvetica Condensed', Arial Narrow, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "DucatiStyle, 'Univers', Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "DucatiStyle, 'Univers', Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  nav-link:
    fontFamily: "DucatiStyle, 'Univers Condensed', Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "DucatiStyle, 'Univers Condensed', Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px
  caption:
    fontFamily: "DucatiStyle, 'Univers', Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.5px
  label-upper:
    fontFamily: "DucatiStyle, 'Univers Condensed', Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.ink-inverted}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.ink-inverted}"

  button-secondary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink-inverted}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"

  button-outline-light:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    borderColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-outline-light-hover:
    backgroundColor: "{colors.ink-inverted}"
    textColor: "{colors.surface-dark}"

  card:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.none}"
    padding: 32px

  card-light:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.nav-link}"
    padding: 16px 40px

  tag:
    backgroundColor: "{colors.surface-panel}"
    textColor: "{colors.ink-on-dark-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 12px
---

# Ducati Design System

## Overview

Ducati's website is a raceway stripped of everything that isn't speed — a digital distillation of the most famous performance motorcycles to come out of Bologna. The page opens onto an absolute darkness, a canvas of near-black from which a full-bleed motorcycle emerges with museum-spotlight precision: painted Ducati Red against shadow, the machine photographed in the same language as concept-car launches at Geneva. There is no decorative welcome. There is only the motorcycle.

The color language is binary to the point of doctrine. The canvas is dark — almost always a near-absolute black (`{colors.surface-dark}`) or deep charcoal — and all chromatic content flows from one source: Ducati Red (`{colors.primary}`). This red is not softened or qualified. It's the same Rosso Ducati that covers the Panigale V4 fairing, applied to primary CTAs and brand moments with the same exactness as a factory paint booth. White (`{colors.ink-inverted}`) handles all text on dark surfaces; the light-section pages reverse to off-white backgrounds with near-black ink. The system permits no intermediate tones — no brand-tinted purples, no secondary greens, no decorative gradients.

Typography is built on DucatiStyle, a proprietary condensed grotesque in the tradition of Univers Condensed. At display scale it runs heavy — 700-weight italic-angle letterforms at 64–96px — with very tight negative leading (0.95–1.0 line-height) that creates the compressed energy of a redline tachometer. Buttons and labels use 1–1.5px letter-spacing in all-caps, a mechanical annotation register that mirrors race data overlays. The tight vertical rhythm of the type system is inseparable from the brand's association with performance hardware.

**Key Characteristics:**
- Near-absolute black (`{colors.surface-dark}`) as the dominant canvas — no softening to charcoal
- Ducati Red (`{colors.primary}`) as the singular chromatic accent — applied only to primary CTAs and critical brand moments
- DucatiStyle Condensed at extreme weight (700) and tight leading (0.95) for display headings
- All-caps button labels with 1px+ letter-spacing — race data notation logic
- Zero border-radius (`{rounded.none}`) on all interactive elements — the geometry of machined Italian alloy
- Full-bleed motorcycle photography as the primary visual medium — studio-grade, high contrast
- Light-section pages (specs, configurator, accessories) on `{colors.surface-light}` with compressed type
- Binary layout rhythm: dark cinematic hero sections alternate with white technical/spec panels
- Navigation anchored in absolute black with white condensed links and a red active indicator
- Minimal shadow system — depth through surface color contrast and photographic depth of field

## Colors

### Brand Accent
- **Ducati Red** (`{colors.primary}`): The immovable brand accent. Applied to primary CTA buttons, active navigation states, focus rings, and select feature highlights. The same factory Rosso Ducati worn by the Panigale, Streetfighter, and Monster — a red that signals race-readiness, not warmth.
- **Dark Red Hover** (`{colors.primary-hover}`): The primary red deepened by ~20% for hover states — maintains brand hue identity while signalling interactivity.
- **Deep Red Active** (`{colors.primary-active}`): The most saturated dark variant for pressed/active states — the color of stamped metal.

### Surfaces
- **Near-Black Canvas** (`{colors.surface-dark}`): The dominant background across hero sections, navigation, footer, and configurator chrome. Not pure black — a barely perceptible warmth distinguishes it from void.
- **Dark Surface** (`{colors.surface-mid}`): Secondary dark level for card backgrounds, drawer interiors, and section dividers on dark canvases.
- **Dark Panel** (`{colors.surface-panel}`): Slightly lifted dark surface for elevated components and content cards on dark backgrounds.
- **Off-White** (`{colors.surface-light}`): The light-mode surface for spec sheets, accessories grids, and technical documentation sections.

### Text / Ink
- **Near-Black** (`{colors.ink}`): Primary text on white and off-white surfaces — body copy, spec values, form labels.
- **Pure White** (`{colors.ink-inverted}`): All text on dark surfaces — headlines, CTAs, navigation links, card bodies.
- **Secondary Gray** (`{colors.ink-secondary}`): Subdued text on light surfaces — captions, metadata, secondary labels.
- **Muted Gray** (`{colors.ink-muted}`): Tertiary text — timestamps, footnotes, disabled states.

### Semantic
- **Success Green** (`{colors.success}`): Form validation and confirmation states — deliberately desaturated to avoid competing with red.
- **Warning Amber** (`{colors.warning}`): Alert and caution indicators.
- **Error Red** (`{colors.error}`): Destructive action warnings — near-identical hue to primary but reserved for system errors.

### Structure
- **Light Border** (`{colors.border}`): Hairline dividers on white sections — understated delineation without decoration.
- **Dark Border** (`{colors.border-dark}`): Structural lines on dark surfaces — barely perceptible, used for section edges and card frames.

## Typography

### Font Family
- **Primary / Display**: `DucatiStyle`, condensed grotesque in the lineage of Univers Condensed. Fallbacks: `'Univers Condensed'`, `'Neue Helvetica Condensed'`, `Arial Narrow`, `sans-serif`
- **Body**: `DucatiStyle` in its regular (non-condensed) variant for body copy. Fallbacks: `'Univers'`, `Helvetica Neue`, `Arial`, `sans-serif`

*DucatiStyle is a proprietary typeface. External implementations: Barlow Condensed 700 or Bebas Neue at display scale; Inter 400 for body text. Univers Condensed (Adobe Fonts) is the closest full-weight substitute.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 96px 700 — full-viewport hero headlines, model-name overlays on photography |
| `display` | 64px 700 — section-opening headlines, feature page titles |
| `heading-section` | 40px 700 — editorial sub-section anchors |
| `heading-sub` | 28px 700 — card titles, feature sub-heads |
| `body-large` | 18px 400 — intro paragraphs, feature descriptions |
| `body` | 16px 400 — primary body copy, spec descriptions, form content |
| `nav-link` | 14px 700 uppercase 0.5px tracking — navigation items |
| `button-ui` | 14px 700 uppercase 1px tracking — all CTA buttons |
| `caption` | 12px 400 — image credits, metadata, secondary labels |
| `label-upper` | 11px 700 uppercase 1.5px tracking — category tags, section markers |

### Principles
- **Condensed as compression energy**: The Condensed cut at weight 700 creates headlines that read like racing telemetry — maximum information in minimum horizontal space. This is not about economy; it is about density as a proxy for power.
- **All-caps at small scale, mixed case at large**: Display headings frequently run in sentence case at 64–96px. Buttons, labels, and nav items run uppercase — two registers with a clear division.
- **Tight leading at display scale**: `line-height: 0.95–1.0` on 64–96px type. Lines touch. The headline becomes a single visual mass rather than a column of text.
- **Letter-spacing as mechanical notation**: 1–1.5px tracking on buttons and labels creates the visual rhythm of instrument panel labeling — purposeful, not decorative.
- **Regular weight body**: Body copy at weight 400 provides the necessary breathing room that counters display-weight intensity.

## Layout

### Spacing System
The base unit is **8px**. Scale lives in the YAML `spacing:` block. The system's personality is generous at large scale (64–128px for section separation) and precise at small scale (8–16px for component internals), matching the dualism of Ducati's design: vast negative space in the cinematic hero, tight tolerances in the technical spec view.

### Grid & Container
- Max content width: approximately 1440px, centered with responsive padding
- Hero: full-viewport-width, full-viewport-height — the motorcycle owns the frame
- Product sections: 2-column (motorcycle left/content right) or single-column full-bleed
- Specifications: data-dense grid, typically 3–4 columns for tech specs
- Footer: multi-column link grid anchored in near-black
- Configurator: split layout — 3D or photography left, option panel right

### Whitespace Philosophy
- **Negative space is the brand**: hero sections breathe at 96–128px vertical padding. Space around the motorcycle is as deliberate as the composition in a factory press photo.
- **Technical sections compress**: Spec grids and configurator panels switch to tight 16–24px spacing — the user is here for data, not atmosphere. The contrast between generous cinematic space and dense technical space communicates context shift.
- **No decorative fill**: Empty dark sections are left empty. The darkness is the content.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | All primary content sections, hero, navigation |
| Surface (Level 1) | `1px solid {colors.border-dark}` | Card edges on dark surfaces — definition through delineation |
| Card (Level 2) | `0 4px 20px rgba(0,0,0,0.6)` approx `{colors.shadow-soft}` | Product cards and content panels on dark backgrounds |
| Overlay (Level 3) | Semi-opaque dark scrim | Lightbox and configurator option overlays |
| Focus Ring | `2px solid {colors.focus-ring}` offset 2px | Keyboard focus on interactive elements |

**Shadow Philosophy**: Ducati's elevation system is almost entirely flat — the photography provides all depth perception. On dark surfaces, depth is created by surface color layering (`{colors.surface-dark}` → `{colors.surface-mid}` → `{colors.surface-panel}`) rather than drop shadows. Where shadows do appear, they are deep black at low spread, never atmospheric or brand-tinted. The result feels like studio lighting on a motorcycle: harsh, directional, with no ambient fill.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default for all interactive and structural elements — buttons, cards, inputs, badges, nav |
| `sm` | 2px | Minimal softening for secondary utility elements (utility dialogs, tags) |
| `pill` | 9999px | Rare — circular icon buttons, carousel navigation dots |

Ducati's shape system is effectively binary: zero radius (`{rounded.none}`) for nearly all components, with `{rounded.sm}` appearing only in low-emphasis utility contexts. The zero-radius aesthetic evokes CNC-machined Italian components — no rounding, no compromise.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Ducati Red (`{colors.primary}`) fill, white text, zero radius, uppercase with 1px tracking. The brand's most authoritative action — used for "Explore," "Configure," and primary model CTAs.
- **`button-secondary`** — Near-black fill, white text, zero radius. Secondary actions on dark canvases. Hover reveals red.
- **`button-ghost`** — White fill on dark sections, near-black text. Tertiary actions or light-section contexts.
- **`button-outline-light`** — Transparent with 1px white border on dark backgrounds. Ghost action for overlay contexts such as full-bleed hero sections.

### Cards
- **`card`** — Dark panel (`{colors.surface-panel}`) on darker canvases. No radius, 32px padding. Used for model feature cards, accessories.
- **`card-light`** — White background on light sections. No radius, 24px padding. Spec cards, comparison grids.

### Inputs
- **`input`** / **`input-focus`** — White background, near-black text, zero radius. Focus state adds a `{colors.focus-ring}` border. Clean and functional — no decoration.

### Badges / Tags
- **`badge`** — Red background, white uppercase text, zero radius. High-emphasis labels such as "NEW," "MotoGP Edition," race series tags.
- **`tag`** — Dark panel fill, muted text, 2px radius. Low-emphasis categorization.

### Navigation
- **`nav-bar`** — Fixed-top, near-black background, white condensed links in uppercase. Active state switches link color to `{colors.primary}`. The nav is thin — approximately 56px — and the motorcycle content fills the viewport below.

## Do's and Don'ts

### Do
- Use Ducati Red (`{colors.primary}`) only for the primary CTA per screen — one red element maximum in any visual cluster
- Maintain zero border-radius on all interactive elements — the `{rounded.none}` aesthetic is the brand's geometric identity
- Run display headings at weight 700 condensed with tight leading (line-height 0.95–1.0) — the compression is intentional
- Apply uppercase with 1px letter-spacing (`{typography.button-ui}`) for all CTA labels and nav items — this is mechanical notation, not fashion
- Let full-bleed photography carry the emotional content of every section — white text on darkened imagery, no gradient scrims needed
- Use the dark surface layering system (`{colors.surface-dark}` / `{colors.surface-mid}` / `{colors.surface-panel}`) to create hierarchy — never box-shadows on dark content
- Keep body copy at weight 400 and regular (non-condensed) — the contrast with 700-condensed display text creates the system's typographic energy
- Use `{colors.surface-light}` and `{colors.ink}` for technical/spec sections — the context shift from dark editorial to light technical is meaningful

### Don't
- Don't scatter Ducati Red across background fills, text colors, or decorative elements — red is a CTA signal, not a theme color
- Don't introduce border-radius above 2px on buttons, cards, or inputs — the Italian alloy aesthetic requires sharp corners
- Don't use mid-weight (400–600) condensed type for headings — 700 or nothing at display scale
- Don't add decorative gradients, glows, or color blends to section backgrounds — solid surfaces only
- Don't use positive letter-spacing on body text — expanded tracking is reserved for uppercase labels and button copy
- Don't apply drop shadows to hero elements — photography creates depth; UI shadows flatten the cinematic quality
- Don't use system-blue or teal as interactive focus colors — Ducati Red (`{colors.focus-ring}`) is the focus accent
- Don't introduce secondary brand colors (orange, yellow, blue) as accent elements — the palette is red, black, and white

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤375px | Single-column, hero text scales to ~36px, stacked CTAs, hamburger nav |
| Mobile | 376–600px | Single-column, 40–48px hero text, full-width buttons |
| Tablet | 601–1024px | 2-column layouts begin for product/spec sections, condensed nav |
| Desktop | 1025–1440px | Full multi-column layout, 64–80px hero text, horizontal primary nav |
| Large Desktop | >1440px | Maximum content width, full 96px hero scale, generous section padding |

### Touch Targets
- Primary CTA buttons: minimum 48px height via 14px padding — meets WCAG 44px minimum
- Navigation links: 44px+ tap area through generous padding on condensed 14px text
- Configurator options: large touch-friendly tiles, minimum 64×64px
- Carousel navigation: minimum 44×44px target area around arrow controls

### Collapsing Strategy
- **Navigation**: Full horizontal nav collapses to hamburger menu on mobile; Ducati wordmark/shield remains visible at left
- **Hero carousel**: Full-viewport full-bleed at all breakpoints; headline scales proportionally; CTAs shift to stacked full-width on mobile
- **Product sections**: 2-column image+content collapses to single-column, image stacking above text
- **Spec grids**: 3–4 column data grids collapse to 2-column on tablet, single-column accordion on mobile
- **Configurator**: Split-layout collapses to stacked, option panel moves below visual
- **Typography scaling**: 96px hero → 64px → 36px across breakpoints; condensed and uppercase properties maintained throughout

### Image Behavior
- Hero photography maintains full-bleed at all breakpoints via `object-fit: cover`
- Dark overlay treatment on hero imagery adapts to ensure white headlines remain legible
- Product photography maintains aspect ratios; motorcycle subjects are never cropped at key angles
- Lazy loading for below-fold imagery in product grids and spec pages

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark): `{colors.surface-dark}`
- Background (light): `{colors.background}`
- Primary text on dark: `{colors.ink-inverted}`
- Primary text on light: `{colors.ink}`
- Secondary text on light: `{colors.ink-secondary}`
- Brand CTA: `{colors.primary}`
- CTA hover: `{colors.primary-hover}`
- Dark panel: `{colors.surface-panel}`
- Border (light): `{colors.border}`
- Border (dark): `{colors.border-dark}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Create a Ducati hero section on `{colors.surface-dark}` background with a full-bleed motorcycle photograph as the dominant visual. Overlay a white headline in DucatiStyle Condensed at 96px, `font-weight: 700`, `line-height: 0.95`, sentence case, positioned lower-left with 40px padding. Below: a short descriptor in DucatiStyle at 18px 400 weight `{colors.ink-inverted}` at 80% opacity. CTA button: `background: {colors.primary}`, `color: {colors.ink-inverted}`, `border-radius: 0px`, `padding: 14px 28px`, 14px DucatiStyle Condensed uppercase `letter-spacing: 1px`."
- "Design a Ducati model card on `{colors.surface-panel}` background. Model name in DucatiStyle Condensed 40px 700 uppercase, white. Short descriptor in DucatiStyle 16px 400, `{colors.ink-on-dark-secondary}`. A red CTA at bottom: `background: {colors.primary}`, `color: {colors.ink-inverted}`, `border-radius: 0`, `padding: 14px 28px`, uppercase 14px DucatiStyle 700. No border-radius anywhere. No shadow on the card — surface color contrast defines the layer."
- "Build a Ducati top navigation bar on `{colors.surface-dark}`. Left: Ducati shield logo in red and white SVG. Center: primary links — BIKES, APPAREL, ACCESSORIES, RACING, EXPERIENCE — in DucatiStyle Condensed 14px 700 uppercase `letter-spacing: 0.5px`, white. Active link color: `{colors.primary}`. Right: search icon + dealer locator icon in white. Nav height: 56px, padding: `0 40px`. Hover state: links transition to `{colors.primary}`."
- "Create a spec sheet section on `{colors.background}` with `{colors.ink}` text. Section heading in DucatiStyle Condensed 40px 700, near-black. Body copy at DucatiStyle 16px 400, `{colors.ink}`, `line-height: 1.60`. Spec grid: 4 columns, each cell with a DucatiStyle Condensed 11px 700 uppercase label (`letter-spacing: 1.5px`, `{colors.ink-secondary}`) and a DucatiStyle 24px 700 value in near-black. `border-bottom: 1px solid {colors.border}` between rows. Zero border-radius throughout."
- "Design a Ducati badge component for 'MotoGP Edition': `background: {colors.primary}`, `color: {colors.ink-inverted}`, `border-radius: 0px`, `padding: 4px 10px`, DucatiStyle Condensed 11px 700 uppercase `letter-spacing: 1.5px`. No shadow. Sits flush at the corner of product photography or card components."

### Iteration Guide

1. Start with `{colors.surface-dark}` as the base canvas — every hero section lives here; only spec/configurator sections flip to white
2. Ducati Red (`{colors.primary}`) appears once per visual cluster as the primary CTA — if it appears in two places, remove one
3. All display type runs at weight 700 condensed with line-height 0.95–1.0 — never reduce weight, never increase line-height on headings
4. All button labels and nav items are uppercase with 1px letter-spacing — this applies without exception
5. `border-radius: 0px` on every interactive element — no exceptions below the `{rounded.sm}` utility threshold
6. Surface layering creates depth on dark canvases: `{colors.surface-dark}` → `{colors.surface-mid}` → `{colors.surface-panel}` — never add drop shadows to dark-surface components
7. Photography is the emotional content — UI copy and type should be sparse, precise, and never compete with the machine

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Ducati. Brand names and trademarks belong to their respective owners.