---
version: alpha
name: Genesis
description: Korean luxury refined to silence — near-black cinematic canvas, proprietary Genesis Sans in a single-weight restraint, pure white as the sole ink, and a muted sage-teal as the one chromatic gesture in an otherwise monochrome vocabulary.

colors:
  # Surface / canvas — almost entirely near-black with white sections for editorial
  background: "#1a1a1a"
  surface: "#1a1a1a"
  surface-light: "#2e2e2e"       # lifted dark surface — secondary panels, hover states
  surface-white: "#ffffff"       # white content sections, editorial blocks
  surface-pale: "#f1f1f1"        # was rgb(241,241,241) — pale off-white section banding

  # Ink / text
  ink: "#ffffff"                 # primary text on dark canvas
  ink-secondary: "#6e6e6e"       # mid-grey — captions, meta, secondary descriptors
  ink-dark: "#1a1a1a"            # text on white/pale sections
  ink-dark-secondary: "#6e6e6e"  # subdued text on white sections
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#ffffff"

  # Brand accent — sage teal from the gradient; used sparingly
  primary: "#1a1a1a"             # CTA fill on dark: near-black border + white text
  primary-light: "#ffffff"       # CTA fill variant on dark: white fill + dark text
  accent: "#79918c"              # was rgb(121,145,140) — sage-teal heritage accent

  # Interaction states
  hover-tint: "#1f1f1f"          # was rgb(26,26,26) at 8% lightening — subtle dark lift
  focus-ring: "#ffffff"          # white focus outline on dark surfaces

  # Borders — structured with near-black or white depending on surface
  border: "#1a1a1a"              # dark hairline on white/pale sections
  border-white: "#ffffff"        # white hairline on dark sections
  border-muted: "#3a3a3a"        # subtler dividers within dark surface

  # Shadow tints
  shadow-soft: "#000000"         # was rgba(0,0,0,0.2) — opaque approx; Google format requires hex

typography:
  # Genesis proprietary type system: Genesis Sans Head (display) + Genesis Sans Text (body)
  # Closest Google Font stand-ins: Cormorant Garamond (doesn't apply) → actually Libre Franklin or Barlow
  # The fonts are: GenesisSansHead-Regular.woff2, GenesisSansText-Regular/Medium/Bold.woff2
  display-hero:
    fontFamily: "Genesis-Sans-Head, Barlow, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  display:
    fontFamily: "Genesis-Sans-Head, Barlow, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1px
  heading-section:
    fontFamily: "Genesis-Sans-Head, Barlow, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 1px
  heading-sub:
    fontFamily: "Genesis-Sans-Head, Barlow, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 1px
  body-large:
    fontFamily: "Genesis-Sans-Text, Barlow, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Genesis-Sans-Text, Barlow, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Genesis-Sans-Head, Barlow, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 1px
  button-ui:
    fontFamily: "Genesis-Sans-Text, Barlow, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.5px
  caption:
    fontFamily: "Genesis-Sans-Text, Barlow, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  label-upper:
    fontFamily: "Genesis-Sans-Text, Barlow, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.13px
  ui-medium:
    fontFamily: "Genesis-Sans-Text-medium, Barlow, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 56px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  sm: 2px          # barest softening — cookie/utility controls only

components:
  # Navigation — dark surface, white links, winged logo
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 12px
  nav-link-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"

  # Primary CTA on dark — white outline on near-black: "EXPLORE THE GV70" style
  button-primary:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  button-primary-hover:
    backgroundColor: "{colors.surface-pale}"
    textColor: "{colors.ink-dark}"

  # Dark CTA — near-black fill with white border: "DISCOVER GENESIS" style
  button-dark:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  button-dark-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"

  # Outline button on light — dark border on pale/white section
  button-outline:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 40px
  button-outline-hover:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.surface-white}"

  # Vehicle / hero card — photography-led, no chrome
  card-vehicle:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-surface}"

  # Editorial content card on white section
  card-editorial:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 40px

  # Hero full-bleed section
  hero-section:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 80px 40px

  # Input field — used in search / configurator
  input:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-dark}"

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

# Genesis Design System

## Overview

Genesis's digital language is restraint weaponised as luxury — a design system that operates with the confidence of a brand that knows its vehicles do not need to compete for attention. The canvas is near-black (`{colors.background}`), continuous and unbroken, serving as a refined stage where vehicle photography delivers the full chromatic charge of each moment. This is not Porsche's zero-ornament dogma or BMW's alternating-surface drama; it is something more interior — a Korean luxury sensibility that prizes sculptural quiet over European aggression. The winged crest floats in white on dark, and everything else takes its cue from that: measured, never urgent.

The proprietary Genesis Sans type system carries two cuts — Genesis Sans Head for display hierarchy and Genesis Sans Text for body and utility. Both are rendered at regular weight (400), and the signature typographic gesture is 1px positive letter-spacing on Genesis Sans Head, giving headlines an airy, inscribed quality that recalls architectural lettering rather than automotive urgency. This is the inverse of the tight-tracked display text that defines most performance brands. Genesis tracks wide and floats tall; the type breathes even at 40px. Weight 600 and 700 appear only in tight utility contexts (labels, navigation subtext), never in display.

Color is sparse to the point of near-monochrome. The palette is three values observed — near-black (`{colors.background}`), white (`{colors.surface-white}`), and a mid-grey (`{colors.ink-secondary}`) — with the sage-teal accent (`{colors.accent}`) appearing in a gradient transition on certain content blocks, a muted mineral hue that reads as patinated metal rather than brand decoration. Buttons are zero-radius rectangles with a white-fill-on-dark or dark-fill-on-white binary — no intermediate hues, no pill softening, no gradient fills. Interaction language is geometrically honest.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) throughout, punctuated by white editorial sections for contrast rhythm
- Proprietary Genesis Sans Head (display) and Genesis Sans Text (body), both self-hosted at weight 400
- 1px letter-spacing on `{typography.display}` and `{typography.nav-link}` — the system's signature airy inscribed quality
- Sage-teal accent (`{colors.accent}`) used as a gradient stop and subtle tonal variation, never as a loud fill
- Zero-radius geometry (`{rounded.none}`) on all interactive elements — square edges throughout
- White-fill buttons and dark-fill buttons co-exist as the binary CTA language, no ghost or pill variants
- Vehicle photography as the primary emotional layer — all chrome defers to the image
- 8px-derived spacing scale with generous `{spacing.3xl}` and `{spacing.4xl}` increments for showroom pacing
- Breakpoints span 400px–2560px — ultra-wide support for large-format screens
- Motion at 0.2s/ease-in-out is the dominant timing — consistent, unhurried transitions

## Colors

### Primary Surfaces
- **Near-Black** (`{colors.background}`): The dominant canvas across hero, navigation, and footer zones. Not pure black — #1a1a1a carries a faint warmth that photographs better against car paint.
- **Lifted Dark** (`{colors.surface-light}`): Slightly elevated dark surface for hover states and secondary panels.
- **White** (`{colors.surface-white}`): Used for editorial content sections, light-surface CTAs, and form fields.
- **Pale Off-White** (`{colors.surface-pale}`): Subtle section banding, a gentle step below white.

### Text & Ink
- **Pure White** (`{colors.ink}`): All text on dark canvas — navigation, headlines, captions.
- **Mid-Grey** (`{colors.ink-secondary}`): Secondary descriptors, captions, metadata on both dark and light surfaces.
- **Near-Black Ink** (`{colors.ink-dark}`): Text on white or pale sections — mirrors the canvas for dark-on-light contexts.

### Brand Accent
- **Sage Teal** (`{colors.accent}`): The system's one chromatic gesture. A mineral, desaturated teal drawn from Korean lacquerware and the brand's Pebbled Green exterior hue. Applied as a gradient stop on specific content blocks, never as a standalone fill.

### Interaction & States
- **Focus Ring** (`{colors.focus-ring}`): White 2px outline on dark — keyboard accessibility preserved.
- **Hover Tint** (`{colors.hover-tint}`): Subtle dark lift on hover, perceptibly warmer than the base.

### Borders
- **Dark Border** (`{colors.border}`): Near-black 1px solid — button outlines and section dividers on white/pale surfaces.
- **White Border** (`{colors.border-white}`): White 1px solid — button outlines on dark sections.

## Typography

### Font Family
- **Display**: `Genesis-Sans-Head`, self-hosted via `GenesisSansHead-Regular.woff2` — used for all headings at weight 400 with positive letter-spacing
- **Body / UI**: `Genesis-Sans-Text`, self-hosted via `GenesisSansText-Regular.woff2`, `GenesisSansText-Medium.woff2`, `GenesisSansText-Bold.woff2`
- **Closest Google Font**: Barlow (geometric humanist sans, similar proportions; Libre Franklin is an alternative)
- **No Google Fonts, no Adobe Fonts at runtime** — fully proprietary

### 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` | 72px — monumental hero, full-bleed vehicle photography |
| `display` | 40px weight 400, 1px tracking — primary section headlines |
| `heading-section` | 32px, 1px tracking — content section titles |
| `heading-sub` | 24px, 1px tracking — subsection headings, model names |
| `body-large` | 20px — lead paragraphs, feature introductions |
| `body` | 16px — running body copy, link text |
| `nav-link` | 14px, 1px tracking — navigation items, header links |
| `button-ui` | 14px, 0.5px tracking — CTA labels, all-caps convention |
| `caption` | 12px — image captions, specification footnotes |
| `label-upper` | 13px weight 600, 0.13px tracking — utility labels, badge text |

### Principles
- **Wide tracking is the voice**: 1px letter-spacing on Genesis Sans Head creates an airy, inscribed quality — the opposite of the tight-tracked performance brand.
- **Single weight for display**: Weight 400 throughout all heading sizes; weight differentiation (600, 700) reserved for tight utility contexts only.
- **Two-cut discipline**: Genesis Sans Head for display hierarchy, Genesis Sans Text for everything else — the boundary is respected, not blurred.
- **Scale without weight**: Hierarchy is built on size and spacing, not ink density.
- **Measured minimalism**: The 72px hero scales down proportionally; type never feels crowded at any breakpoint.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` block above. Base unit: **8px**. The live system uses 8px, 12px, 16px, 24px, 40px, 56px, 80px, and 120px as primary increments — 120px appears on structural section padding, giving the design its showroom breathing room.

### Grid & Container
- Max content width: ~1440px (breakpoints extend to 2560px for ultra-wide support)
- Hero zones: full-bleed, edge-to-edge vehicle photography
- Vehicle model grid: typically 3–4 columns at desktop, collapsing to 2 and then 1
- Editorial content: two-column text + media layouts
- Footer: multi-column dark link grid

### Whitespace Philosophy
- **Space is the luxury signal**: `{spacing.3xl}` (80px) and `{spacing.4xl}` (120px) section increments give every vehicle its own gravitational field.
- **Low information density**: Genesis sets fewer, larger type blocks at generous line-height — the opposite of dense catalogue layouts.
- **Photography needs the entire frame**: Tiles and hero zones surrender all padding to the image; text overlays are positioned with generous internal offset.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Level 0 (Canvas) | `{colors.background}` flat | Entire page surface — no elevation baseline |
| Level 1 (Lifted) | `{colors.surface-light}` fill | Hover state surfaces, secondary panels |
| Level 2 (Photography) | Full-bleed imagery | Vehicles provide all chromatic depth |
| Level 3 (Gradient overlay) | Dark-to-transparent gradient | Text legibility over hero photography |
| Level 4 (White section) | `{colors.surface-white}` fill | Editorial surface, contrasts with dark field |
| Focus Ring | White 2px outline, offset | Keyboard navigation on dark surfaces |

**Shadow Philosophy**: Genesis uses no visible box-shadows in the system. The few detected shadows (`rgb(128,128,128) 0px 0px 5px`) appear in tertiary utility layers and carry very low confidence. Depth is achieved through the contrast between near-black and white surface layers, and through full-bleed photography that generates its own tonal depth. This is a shadowless luxury — confidence expressed as flatness.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, cards, inputs, nav, hero sections — the system default |
| `sm` | 2px | Barest softening on cookie/utility controls only |

The Genesis shape language is resolutely square. No pill, no mid-range radius. Buttons are rectangles; cards are rectangles; the entire system refuses softness as a design element. This is a deliberate stance: Genesis's form language in its vehicles favours crisp surfacing and precise shutlines — the digital system extends that geometric precision into UI chrome. The one 2px concession is for cookie consent utilities, not for brand-facing components.

## Components

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

### Button variants
- **`button-primary`** — White fill, near-black text, zero radius. 16px 40px padding gives a generous tactile weight. The light CTA on dark sections.
- **`button-dark`** — Near-black fill, white text, white 1px border, zero radius. The dark CTA for use on dark sections as a secondary action.
- **`button-outline`** — White fill with near-black border on light sections. Inverts to solid ink on hover.

### Cards
- **`card-vehicle`** — Full-bleed photographic tile, no radius, no padding. The vehicle image IS the card.
- **`card-editorial`** — White surface with 40px padding for text-forward content blocks on light sections.

### Navigation
- **`nav-bar`** — Near-black surface, Genesis Sans Head 14px white navigation links, Genesis winged crest logo. "MODELS / ELECTRIC / SHOP / DISCOVER" and right-aligned CTAs ("BUILD YOUR OWN / FIND A RETAILER"). Flat, no border below.

### Inputs
- **`input`** — White field, zero radius, no shadow. Square and minimal.

### Badges / Labels
- **`badge`** — Pale off-white fill, near-black `{typography.label-upper}` text, zero radius. Model designation labels.

## Do's and Don'ts

### Do
- Use `{colors.background}` (near-black `#1a1a1a`) as the dominant canvas — it is warmer than pure black and photographs better against vehicle paint
- Apply 1px letter-spacing to all `{typography.display}` and `{typography.nav-link}` settings — this is Genesis's signature typographic gesture
- Keep all interactive elements at `{rounded.none}` — the square geometry is the brand's shape identity
- Use `{colors.accent}` (sage teal) sparingly as a gradient stop or tonal accent; never as a solid button fill or dominant hue
- Apply weight 400 to all Genesis Sans Head display text — weight differentiation belongs to utility contexts only
- Set section spacing at `{spacing.3xl}` or `{spacing.4xl}` — the generous rhythm is the luxury signal
- Let vehicle photography absorb all chromatic richness; keep all UI chrome in the near-black/white binary
- Use the white-border button (`{components.button-dark}`) only as a secondary CTA alongside the white-fill primary

### Don't
- Don't introduce pill or mid-range border-radius — `{rounded.none}` is the only shape the brand permits for UI components
- Don't apply bold or heavy weights to Genesis Sans Head display text; weight 400 is fixed for all headings
- Don't use `{colors.accent}` (sage teal) as a primary CTA fill or prominent UI surface — it is a tonal accent, not an action color
- Don't compress letter-spacing on `{typography.display}` — tight tracking contradicts the brand's airy inscription quality
- Don't add drop-shadows to cards or buttons — the system is explicitly flat; shadows belong to tertiary utilities only
- Don't use pure black (`#000000`) as the canvas — Genesis's near-black `{colors.background}` has a deliberate warmth
- Don't alternate section backgrounds at high frequency — the dark / white / dark rhythm is deliberate and sparse
- Don't crowd type or components; the brand's spacing vocabulary requires `{spacing.xl}`+ breathing room at minimum

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <425px | Single column, minimal padding, stacked CTAs |
| Mobile | 425–768px | Single column, full-width vehicle imagery |
| Mobile Large | 768–1024px | 2-column grid begins, condensed nav |
| Tablet | 1024–1280px | 3-column vehicle grid, horizontal nav |
| Desktop | 1280–1920px | Full layout — 4-column grid, expanded navigation |
| Large Desktop | 1920–2560px | Ultra-wide support with generous gutter spacing |

### Touch Targets
- Primary buttons: 16px 40px padding achieves comfortable touch height
- Navigation links: 14px Genesis Sans Head with 8px 12px padding
- The zero-radius rectangle buttons have ample clickable area by design

### Collapsing Strategy
- **Navigation**: Full horizontal nav → hamburger icon + slide-in drawer on mobile
- **Vehicle grid**: 4 columns → 3 → 2 → 1 as viewport narrows
- **Hero headlines**: 72px display scales proportionally, maintaining wide tracking at all sizes
- **Section spacing**: `{spacing.4xl}` (120px) at desktop narrows toward `{spacing.2xl}` (56px) on mobile
- **CTAs**: Stacked vertically below mobile breakpoint; side-by-side above

### Image Behavior
- Hero photography: full-bleed `object-fit: cover` at every breakpoint, no cropping
- Vehicle tiles: aspect-ratio locked, scaling with column width
- Mobile: full-width imagery with proportional height — never arbitrarily cropped
- Lazy loading applied below the fold for model grid tiles

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — near-black #1a1a1a
- Text on dark: `{colors.ink}` — white
- Secondary text: `{colors.ink-secondary}` — mid-grey
- Accent: `{colors.accent}` — sage teal (tonal, not action)
- Light section: `{colors.surface-white}` — white
- CTA fill (on dark): `{colors.surface-white}` with `{colors.ink-dark}` text
- Border (on dark): `{colors.border-white}` — white 1px
- Border (on light): `{colors.border}` — dark 1px

### Example Component Prompts

- "Create a Genesis hero section on `{colors.background}` (#1a1a1a near-black) with full-bleed vehicle photography covering the viewport. Overlay a dark-to-transparent gradient from the bottom 40% for text legibility. Place the model name in Genesis Sans Head (fallback Barlow) at 40px weight 400, 1px letter-spacing, white (`{colors.ink}`), left-aligned with 40px left padding. Add a model year caption in Genesis Sans Head 14px white, 1px tracking (`{typography.nav-link}`) above the headline. Below: a white-fill CTA button (`{components.button-primary}`) — white bg, near-black text, 14px, 16px 40px padding, zero radius — and a dark ghost CTA (`{components.button-dark}`) alongside it."

- "Design a vehicle model navigation on `{colors.background}`: winged Genesis crest logo centred at top, horizontal nav links in Genesis Sans Head 14px weight 400, 1px letter-spacing (`{typography.nav-link}`), white text, 8px 12px padding. Left items: MODELS, ELECTRIC, SHOP, DISCOVER. Right items: BUILD YOUR OWN, FIND A RETAILER. No border below the bar — nav sits flush on the near-black plane. All caps for right-side action links."

- "Build a Genesis content card for an editorial section on `{colors.surface-white}` (white): 40px padding, zero radius, no shadow. Headline in Genesis Sans Head 32px weight 400, 1px tracking, near-black (`{colors.ink-dark}`), line-height 1.25 (`{typography.heading-section}`). Body text in Genesis Sans Text 16px weight 400 (`{typography.body}`) in `{colors.ink-secondary}`. A near-black outline button at the bottom: `{components.button-outline}`, 14px font (`{typography.button-ui}`), 16px 40px padding, zero radius, dark border. On hover, solid near-black fill with white text."

- "Create a Genesis model specification badge: `{colors.surface-pale}` (#f1f1f1) background, `{colors.ink-dark}` text, Genesis Sans Text 13px weight 600 (`{typography.label-upper}`), 4px 12px padding, zero radius (`{components.badge}`). Use all-caps for model designations like GV80, G90, GV70."

- "Build a Genesis responsive vehicle grid on `{colors.background}`: 4-column tile layout at desktop, each tile a full-bleed photograph with no chrome, no radius, no padding (`{components.card-vehicle}`). Below each image: model name in Genesis Sans Head 24px weight 400, 1px tracking, white (`{typography.heading-sub}`), and a subline in Genesis Sans Text 16px weight 400 `{colors.ink-secondary}`. On hover: subtle `{colors.surface-light}` surface lift. Above the grid: section title at 40px Genesis Sans Head weight 400 with `{spacing.3xl}` (80px) top padding."

- "Design a Genesis brand accent moment: a wide content block with a horizontal gradient from `{colors.surface-pale}` (#f1f1f1) at 50% to `{colors.accent}` (#79918c sage-teal) fading out to the right. Overlay editorial text in Genesis Sans Head 32px weight 400 near-black, 1px tracking. This gradient is the system's one chromatic gesture — use it once per long-form page, never as a repeating pattern."

### Iteration Guide
1. Start with `{colors.background}` (#1a1a1a near-black) — commit to the warm dark canvas before placing any element
2. Apply 1px letter-spacing to all Genesis Sans Head usage — this is the brand's defining typographic fingerprint
3. All corners are zero radius (`{rounded.none}`) — resist any impulse to soften buttons or cards
4. Vehicle photography carries all chromatic life — keep all UI chrome in the white/near-black binary
5. `{colors.accent}` (sage teal) is a tonal accent at gradient stops only — never use it as a solid button color
6. Weight hierarchy: 400 for all display and body; 600/700 only in utility labels and compact UI controls
7. Spacing rhythm: reach for `{spacing.3xl}` (80px) and `{spacing.4xl}` (120px) for section intervals — luxury is space
8. White sections (`{colors.surface-white}`) are editorial counterpoints; use them deliberately and sparingly, not as default alternation

---

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