---
version: alpha
name: Cadillac
description: American luxury rendered as monochrome authority — pure black canvas and bright white, proprietary Cadillac Gothic for all display text, angular zero-radius geometry, and the platinum crest as the singular accent in an otherwise achromatic system.
# NOTE: cadillac.com is WAF-protected (Akamai EdgeSuite "Access Denied") — dembrandt
# and WebFetch both returned 403/block pages. Tokens below are authored from Cadillac's
# documented 2021 brand refresh (Cadillac Gothic typeface introduction, monochrome rebrand),
# Art and Science design language, and well-known digital brand assets.
# All values marked /* estimated */ where not directly observed.

colors:
  # Surface / canvas — binary monochrome: pure black or pure white
  background: "#000000"                   # /* estimated */ primary dark canvas (hero, default dark mode)
  background-light: "#ffffff"             # light-mode sections and content areas
  surface: "#0a0a0a"                      # /* estimated */ lifted dark card surface
  surface-light: "#f5f5f5"               # /* estimated */ light section banding / grey panels

  # Ink / text
  ink: "#ffffff"                          # primary text on dark canvas
  ink-dark: "#0a0a0a"                     # /* estimated */ primary text on light sections
  ink-secondary: "#999999"               # /* estimated */ metadata, captions, labels on dark
  ink-secondary-light: "#5c5c5c"         # /* estimated */ secondary text on light sections
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#000000"

  # Brand accent — platinum/silver as the one chromatic gesture
  primary: "#b8b8b8"                      # /* estimated */ Cadillac platinum/silver — crest-derived metallic accent
  primary-dark: "#888888"                 # /* estimated */ deeper silver on hover

  # Interaction states
  hover-tint: "#1a1a1a"                   # /* estimated */ subtle dark hover wash
  focus-ring: "#b8b8b8"                   # /* estimated */ platinum focus outline
  text-hover: "#cccccc"                   # /* estimated */ text link hover on dark

  # Borders — hairlines only
  border: "#2a2a2a"                       # /* estimated */ dark-mode divider
  border-light: "#d4d4d4"                # /* estimated */ light-mode divider

  # Shadow tint
  shadow-soft: "#000000"                  # /* estimated */ used at low opacity for subtle lifts

typography:
  # Cadillac Gothic — proprietary grotesque, introduced 2021 rebrand (extended from Laca typeface).
  # Self-hosted; closest Google Font substitute: Josefin Sans or Raleway (geometric grotesque).
  # Per brand guidelines: wide tracking, all caps for display, light/regular weights.
  display-hero:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 80px                        # /* estimated */
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: 4px                    # wide tracking — brand signature
  display:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 52px                        # /* estimated */
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 3px
  heading-section:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px                        # /* estimated */
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2px
  heading-sub:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px                        # /* estimated */
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 1.5px
  body-large:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px                        # /* estimated */
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0.5px
  body:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.3px
  nav-link:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px                        # /* estimated */
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2px
  button-ui:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px                        # /* estimated */
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 2.5px                  # wide tracking on buttons — hallmark Cadillac gesture
  caption:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px                        # /* estimated */
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 1px
  label-upper:
    fontFamily: "Cadillac Gothic, Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px                        # /* estimated */
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 2px

spacing:
  # 8px base — generous and deliberate, luxury-grade breathing room
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  # Angular by design — Art and Science means sharp edges, no softness
  none: 0px                               # default for everything
  full: 9999px                            # circular icon controls only

components:
  # Navigation — dark surface, wide-tracked Gothic links, platinum crest logo
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 20px 40px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  nav-link-hover:
    backgroundColor: "{colors.hover-tint}"
    textColor: "{colors.text-hover}"

  # Primary CTA — white fill on black, all-caps Gothic, sharp rectangle
  button-primary:
    backgroundColor: "{colors.background-light}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-primary}"
  button-primary-focus:
    backgroundColor: "{colors.background-light}"
    textColor: "{colors.on-primary}"

  # Outline / ghost CTA — platinum or white hairline border on black
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-outline-hover:
    backgroundColor: "{colors.hover-tint}"
    textColor: "{colors.text-hover}"
  button-outline-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Platinum accent button
  button-accent:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-accent-hover:
    backgroundColor: "{colors.hover-tint}"
    textColor: "{colors.primary-dark}"

  # Dark content card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 40px

  # Vehicle / media tile — image-led, no chrome
  card-vehicle:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.hover-tint}"
    textColor: "{colors.ink}"

  # Light-mode card for alternating sections
  card-light:
    backgroundColor: "{colors.background-light}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 40px

  # Hero — full-bleed black, cinematic automotive photography
  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 96px 40px

  # Form input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Badge / label
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 4px 12px

  # Chip / filter
  chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 8px 20px
  chip-active:
    backgroundColor: "{colors.background-light}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 8px 20px
---

# Cadillac Design System

## Overview

Cadillac's digital design language is American luxury translated into pure monochrome restraint. Where European luxury marques — Mercedes, BMW — position themselves through refined engineering signals, Cadillac commits to a different register: the authority of absolute black (`{colors.background}`) as the dominant canvas, punctuated by pure white content moments and the platinum shimmer of the brand crest (`{colors.primary}`). The result is a high-contrast, gallery-dark aesthetic that positions the brand less as precision engineering and more as composed American confidence.

The typographic centrepiece is Cadillac Gothic, a proprietary geometric grotesque introduced in the 2021 brand refresh (developed from the Laca typeface). It runs at weight 300 with aggressive wide letter-spacing — `{typography.display-hero}` at 4px tracking, buttons at 2.5px — which gives every word an architectural quality, each character separated into a monumental procession. This is the opposite of tight Germanic efficiency; Cadillac's letters breathe wide, a visual statement that says quality through space rather than compression. All-caps display text (`{typography.display}`) reinforces the effect.

The Art and Science design language, introduced in 2000 and evolved across subsequent decades, declares itself through geometric precision: zero border-radius everywhere (`{rounded.none}`), hard angles, no softness. Components are milled rectangles. The platinum-silver accent (`{colors.primary}`) appears selectively — in the iconic crest, in hairline borders, in focus states — as the one chromatic gesture against an otherwise achromatic system. Full-bleed automotive photography on black backgrounds channels a cinematic quality, as though each vehicle exists in a private viewing room lit only from above.

**Key Characteristics:**
- Pure black (`{colors.background}`) as the dominant canvas — the system's defining commitment
- Cadillac Gothic at weight 300 with wide tracking (`{typography.display-hero}`) — architectural letter-spacing is the brand signature
- Zero border-radius (`{rounded.none}`) across all components — Art and Science angular geometry
- Platinum silver (`{colors.primary}`) as the singular accent colour — crest-derived, used only for accents and focus states
- All-caps display text — monumental, deliberate, slow to read by design
- White fill buttons (`{components.button-primary}`) on black backgrounds — maximum contrast, no hue in the CTA
- Full-bleed automotive photography on dark backgrounds — cinematic private-viewing atmosphere
- Hairline-only borders (`{colors.border}`) instead of drop-shadows for component separation
- Generous spacing scale (`{spacing.3xl}`+) for section breathing room — luxury through spatial hierarchy
- Binary surface strategy: pure black hero zones / pure white content alternation
- `{typography.button-ui}` at 2.5px tracking — buttons that command attention through letterform, not size
- Near-absolute restraint with colour — any hue would break the system

## Colors

### Primary Surfaces
- **Pure Black** (`{colors.background}`): The dominant canvas — hero sections, navigation, the default dark surface.
- **Pure White** (`{colors.background-light}`): Content sections, light-mode alternations, filled CTA backgrounds.
- **Lifted Dark** (`{colors.surface}`): Dark card surfaces slightly elevated above the pure-black canvas.
- **Light Grey** (`{colors.surface-light}`): Banding in light sections, secondary panel surfaces.

### Text & Ink
- **White Ink** (`{colors.ink}`): Primary text on dark surfaces — pure white against black.
- **Near-Black Ink** (`{colors.ink-dark}`): Primary text on light sections — just off pure black for legibility.
- **Secondary Ink** (`{colors.ink-secondary}`): Metadata, captions, labels on dark — mid-grey.
- **Secondary Light** (`{colors.ink-secondary-light}`): Metadata and supporting text on light sections.

### Brand Accent
- **Cadillac Platinum** (`{colors.primary}`): The single chromatic gesture — derived from the crest's metallic finish. Applied to hairline dividers, focus rings, accent buttons, and decorative metallic details, never as a large fill.
- **Deep Silver** (`{colors.primary-dark}`): Platinum hover state — darkens on interaction.

### Interaction States
- **Hover Tint** (`{colors.hover-tint}`): Subtle dark wash behind interactive elements on black surfaces.
- **Focus Ring** (`{colors.focus-ring}`): Platinum keyboard-focus outline — the brand's only accessible-colour moment.
- **Text Hover** (`{colors.text-hover}`): Link text hover on dark backgrounds, softened to a mid-white.

### Borders
- **Dark Border** (`{colors.border}`): Hairline divider on dark surfaces.
- **Light Border** (`{colors.border-light}`): Hairline divider in light-mode sections.

> All values are opaque 6-digit hex. cadillac.com is WAF-protected (Akamai); tokens are authored from the 2021 Cadillac brand refresh, Art and Science design language documentation, and brand knowledge. Values marked `/* estimated */` in YAML.

## Typography

### Font Family
- **Primary**: `Cadillac Gothic` (proprietary, introduced 2021), with fallbacks: `Josefin Sans, Raleway, Helvetica Neue, Arial, sans-serif`
- **Cadillac Gothic** is a geometric grotesque commissioned for the brand's global identity refresh — an extended variant developed from the Laca typeface. Self-hosted; not available on Google Fonts or Adobe Fonts at runtime.
- **Closest Google Font substitute**: Josefin Sans (geometric sans, similar wide-tracking character) or Raleway (light weights, similar letterform quality).

### Hierarchy

The complete type scale is declared in the `typography:` block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | 80px weight 300, 4px tracking — monumental full-bleed hero headlines |
| `display` | 52px weight 300, 3px tracking — section-level display headings |
| `heading-section` | 32px weight 400, 2px tracking — content section titles |
| `heading-sub` | 22px weight 400, 1.5px tracking — sub-section and card headings |
| `body-large` | 18px weight 300 — lead paragraphs, feature descriptions |
| `body` | 16px weight 300 — body copy, default running text |
| `nav-link` | 13px weight 400, 2px tracking — navigation items, all-caps |
| `button-ui` | 13px weight 400, 2.5px tracking — CTA labels, all-caps |
| `caption` | 12px weight 300, 1px tracking — image captions, specs |
| `label-upper` | 11px weight 400, 2px tracking — chips, tags, utility labels |

### Principles
- **Wide tracking is the signature**: Positive letter-spacing at every level — 4px at display-hero down to 0.3px at body. No other auto brand in the corpus uses this much tracking as a system-wide rule.
- **Light weights carry luxury**: Weight 300 throughout display and body. The system never reaches 700 — confidence expressed through lightness, not density.
- **All-caps display text**: Hero and nav text is typically uppercase — architectural, deliberate, slow to scan in the best sense.
- **One family, all weights**: Cadillac Gothic handles every context from 80px hero to 11px label, differentiating by weight and tracking only.
- **Scale before weight for hierarchy**: The 80px → 11px range builds visual order; weight differences are subtle (300 → 400).

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` block above. Base unit: **8px** (detected by dembrandt from the block-page response).

Cadillac's spacing is cinematic and generous. Section breaks use `{spacing.3xl}`–`{spacing.4xl}` of vertical air — the digital equivalent of a showroom where each vehicle is given its own zone of space. Content never crowds. The message is legibility through separation.

### Grid & Container
- Max content width: ~1440px (estimated), with full-bleed photography and video breaking the container
- Vehicle model grids: typically 2–3 column layouts collapsing to 1 on mobile
- Alternating full-bleed black hero zones and white content sections
- Footer: multi-column on dark background, condensed to single column on mobile

### Whitespace Philosophy
- **Space is the luxury signal**: Generous `{spacing.2xl}`+ margins make every element feel considered and positioned.
- **Dark canvas amplifies separation**: Black backgrounds make white type and platinum accents float — depth through colour contrast, not structural density.
- **Photography needs room**: Automotive imagery is always given full-bleed or near-full-bleed treatment; the car is never constrained by a container edge.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Photography (Level 0) | Full-bleed dark automotive imagery | Hero backgrounds, vehicle showcases |
| Flat (Level 1) | No shadow, pure black surface | Default for all components |
| Card (Level 2) | `{colors.surface}` lifted dark background | Dark cards, panels |
| Overlay (Level 3) | `0 4px 24px {colors.shadow-soft}` at ~20% /* estimated */ | Modals, navigation flyouts |
| Focus Ring | `2px {colors.focus-ring}` outline, offset | Keyboard accessibility — platinum outline |

**Shadow Philosophy**: Cadillac's system is virtually shadowless. Depth comes from the binary black/white surface contrast and from full-bleed automotive photography — the darkness of the canvas creates the depth. Box-shadows are reserved only for modal overlays. The hard-edge geometry of `{rounded.none}` elements never needs a blur to announce itself.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every component — buttons, cards, inputs, nav, hero sections |
| `full` | 9999px | Circular icon controls (close, play, scroll-indicator) only |

Cadillac is binary and absolute: components are either perfect rectangles or perfect circles. There is no 4px, no 8px, no mid-range softening. The system's Art and Science vocabulary is built on hard angles — every edge is a statement of geometric precision. Rounding would contradict the brand's fundamental design proposition.

## Components

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

### Button variants
- **`button-primary`** — White fill, near-black label, zero radius. The maximum-contrast CTA on the dark canvas; softens to light grey on hover (`{components.button-primary-hover}`).
- **`button-outline`** — Transparent fill with a white hairline border on black. Dark hover wash on interaction.
- **`button-accent`** — Platinum text on black background, referencing the crest. Used for secondary/exploratory CTAs.

### Cards
- **`card`** — Lifted dark surface (`{colors.surface}`), 40px padding, pure rectangle. Separated from the canvas by surface-colour contrast, no border or shadow.
- **`card-vehicle`** — Image-led media tile, no chrome, no padding. The photograph carries everything; the component is a framing device.
- **`card-light`** — White surface for light-mode sections; mirrors `card` but inverted.

### Navigation
- **`nav-bar`** — Pure black surface, Cadillac Gothic 13px weight 400 at 2px tracking, white links. Typically includes the platinum-metal crest logo. No hairline divider — the edge of the page is the boundary.

### Hero
- **`hero-section`** — Full-bleed black, 80px Gothic at 4px tracking over automotive photography. 96px vertical padding. The system's cinematic centrepiece.

### Inputs
- **`input`** — Black background, white text, hairline border, zero radius. Focus state (`{components.input-focus}`) lifts to the dark surface colour.

### Badges & Chips
- **`badge`** — Dark surface, mid-grey text, Gothic uppercase at 2px tracking. Minimal, categorical.
- **`chip`** — Dark surface filter control; active state inverts to white fill and near-black text.

## Do's and Don'ts

### Do
- Keep pure black (`{colors.background}`) as the dominant canvas — it is Cadillac's most distinctive spatial choice
- Apply wide tracking at every level: use `{typography.display-hero}` (4px) for heroes and step down gracefully through the scale
- Keep all corners sharp (`{rounded.none}`) — angular geometry is the Art and Science foundation, non-negotiable
- Use Cadillac platinum (`{colors.primary}`) only for hairlines, crest accents, and focus rings — preserve its metallic rarity
- Set CTAs as white-fill rectangles on black (`{components.button-primary}`) — resist adding any hue to the interactive layer
- Deploy full-bleed automotive photography as the primary visual element — the car IS the design
- Alternate black hero zones with white content sections to create cinematic breathing rhythm
- Keep font weights at 300–400 — the system's elegance is quiet, not bold

### Don't
- Don't introduce a saturated brand colour — Cadillac's colour discipline is its identity; one brand hue breaks the achromatic spell
- Don't round corners — `{rounded.none}` is absolute; even 2px softening would undermine the Art and Science language
- Don't increase font weights above 400 — no 700, no bold, no black weight anywhere in the system
- Don't shrink the letter-spacing — wide tracking (`{typography.button-ui}` at 2.5px) is mandatory, not decorative
- Don't use the platinum (`{colors.primary}`) as a large-area fill — it is an accent, not a surface colour
- Don't crowd components — the luxury signal is space; tight layouts read as budget
- Don't add drop-shadows to cards or buttons — depth comes from the black canvas and surface-lift, not blur
- Don't set body text in all-caps — uppercase is reserved for display headings and navigation; body is sentence case

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, condensed nav |
| Mobile | 375–600px | Single column, stacked CTAs, full-width media |
| Tablet | 600–1024px | 2-column vehicle grids, condensed nav |
| Desktop | 1024–1440px | Full multi-column, horizontal nav, wide hero type |
| Large Desktop | >1440px | Max content width, full-bleed photography |

### Touch Targets
- Primary and outline buttons: 16px 32px padding, meeting the 44px minimum height target
- Nav links: 13px text with 8px 16px padding plus nav-bar height buffer
- Chips: 8px 20px padding, comfortable touch area

### Collapsing Strategy
- **Navigation**: Horizontal dark nav → hamburger + slide-in dark drawer on mobile
- **Hero headlines**: 80px display scales down toward ~36px on mobile, tracking proportionally reduced
- **Vehicle grids**: 3-column → 2-column → 1-column as viewport narrows
- **CTAs**: Side-by-side button pairs → stacked full-width on mobile
- **Footer**: Multi-column link grid → stacked single column on mobile

### Image Behavior
- Hero and vehicle photography: full-bleed `object-fit: cover`, dark overlay for text legibility
- Lazy-loaded below the fold; aspect-ratio locked on tiles
- Mobile: full-width, uncropped; dark canvas background for any aspect-ratio gaps

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — pure black
- Light sections: `{colors.background-light}` — pure white
- Text on dark: `{colors.ink}` — white
- Text on light: `{colors.ink-dark}` — near-black
- Secondary text: `{colors.ink-secondary}` — mid-grey
- Accent: `{colors.primary}` — Cadillac platinum/silver
- CTA fill: `{colors.background-light}` — white
- CTA label: `{colors.on-primary}` — near-black
- Border: `{colors.border}` — dark hairline

### Example Component Prompts

- "Create a Cadillac hero section on `{colors.background}` (pure black), full-bleed automotive photography covering the viewport. Overlay the headline in Cadillac Gothic (fallback Josefin Sans) 80px weight 300, line-height 1.05, letter-spacing 4px, uppercase, white (`{colors.ink}`), left-aligned with `{spacing.3xl}` bottom padding (`{components.hero-section}`). Below it, a white-fill primary button (`{components.button-primary}`): 13px Cadillac Gothic weight 400, 2.5px tracking, all-caps, near-black label, 16px 32px padding, zero radius."

- "Build a Cadillac navigation bar on `{colors.background}` (pure black): Cadillac crest logo left-aligned, nav links in Cadillac Gothic 13px weight 400, 2px tracking, uppercase, white (`{colors.ink}`), 8px 16px padding (`{components.nav-link}`). On hover: subtle `{colors.hover-tint}` background wash, text softens to `{colors.text-hover}`. No divider below the bar — the dark canvas edge is boundary enough."

- "Design two Cadillac CTA buttons side by side: primary (`{components.button-primary}`) — white fill, near-black Gothic label, 16px 32px padding, zero radius, hovers to `{colors.surface-light}`; outline (`{components.button-outline}`) — transparent with white 1px hairline border, same padding, dark hover wash. Both use `{typography.button-ui}` (13px, 2.5px tracking, weight 400) in uppercase."

- "Create a Cadillac vehicle model grid on `{colors.background}` using 3-column `{components.card-vehicle}` tiles. Each tile is a full-bleed vehicle photograph, zero radius, no padding, no border, no chrome. Below each image: model name in Cadillac Gothic 22px weight 400, 1.5px tracking (`{typography.heading-sub}`) in `{colors.ink}`; starting price in `{typography.caption}` (`{colors.ink-secondary}`). On hover: `{colors.hover-tint}` wash over the image."

- "Build a Cadillac content section alternating to white (`{colors.background-light}`). Section heading in Cadillac Gothic 32px weight 400, 2px tracking (`{typography.heading-section}`) in `{colors.ink-dark}`. Body text in Gothic 16px weight 300, 0.3px tracking (`{typography.body}`) in `{colors.ink-dark}`. A 1px `{colors.border-light}` hairline divider separates sub-sections. No shadows, no radius."

- "Create a Cadillac status badge: `{colors.surface}` (lifted dark) background, `{colors.ink-secondary}` text, Cadillac Gothic 11px weight 400 with 2px tracking (`{typography.label-upper}`), 4px 12px padding, zero radius (`{components.badge}`). Pair with a filter chip row (`{components.chip}`) that activates to a white fill with near-black text (`{components.chip-active}`)."

### Iteration Guide

1. Start on pure black (`{colors.background}`) — commit fully to the dark canvas before placing anything else
2. Wide tracking is mandatory at every level: `{typography.display-hero}` (4px) → `{typography.button-ui}` (2.5px) → `{typography.body}` (0.3px). Never tighten to 0
3. Zero radius everywhere (`{rounded.none}`) — no exceptions; angular geometry is Art and Science
4. White-fill CTAs (`{components.button-primary}`) on black: maximum contrast, no hue, no colour
5. Cadillac platinum (`{colors.primary}`) touches only accents — crest, hairlines, focus states
6. Alternate dark hero zones with white content sections for cinematic breathing rhythm
7. Let automotive photography carry emotion — UI chrome is achromatic support, not the star

---

## 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 Cadillac. Brand names and trademarks belong to their respective owners.