---
version: alpha
name: Lexus
description: Japanese luxury restraint made digital — absolute white canvas, Nobel proprietary sans-serif at featherweight 300 for hero text, a warm champagne gold as the sole accent, and razor-edged rectangular CTAs that communicate precision over approachability.

colors:
  # Primary surfaces — white-dominant, light and refined
  background: "#ffffff"
  surface: "#ffffff"
  surface-alt: "#f5f5f5"          # Subtle section alternation, model grid backgrounds
  surface-dark: "#000000"         # Dark hero overlays, inverted sections
  surface-overlay: "#222222"      # opaque approx of rgba(34,34,34,0.35) dark overlay — Google format requires hex

  # Ink — near-black primary, graded hierarchy
  ink: "#000000"
  ink-secondary: "#767676"        # Mid gray — subdued labels, meta text, legal copy (was #adadad, 2.24:1 — darkened to pass AA 4.5:1)
  ink-inverted: "#ffffff"         # Text on dark/black surfaces
  on-background: "#000000"
  on-surface: "#000000"
  on-primary: "#000000"

  # Brand accent — warm champagne gold
  primary: "#b6a171"              # Gold accent — reserved for editorial links, trim details
  primary-hover: "#9d8a5c"        # Deeper gold on hover
  primary-container: "#f0e9d8"    # Very light gold tint for subtle container fills

  # Interactive states
  button-hover: "#333333"         # Black CTA darkens slightly on hover
  focus-ring: "#b6a171"           # Gold focus ring — brand-consistent

  # Borders — hairline and structural
  border: "#000000"               # 2px solid black — primary button borders
  border-subtle: "#e0e0e0"        # Light structural dividers, card edges
  border-light: "#adadad"         # Mid-gray borders, input underlines

  # Shadow tints — near-flat system
  shadow-soft: "#000000"          # Placeholder — system uses minimal shadow

typography:
  display-hero:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 0.75
    letterSpacing: 0.96px
  display:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0.64px
  heading-section:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.96px
  heading-sub:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.64px
  body-large:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.64px
  body:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  nav-link:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.56px
  button-ui:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 1.3px
  label-upper:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 1.6px
  caption:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.27
    letterSpacing: 1.1px
  micro:
    fontFamily: "Nobel, Barlow, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.4px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 25px
  xl: 40px
  2xl: 45px
  3xl: 96px

rounded:
  none: 0px
  md: 20px           # Filter/category tabs, segmented controls
  lg: 24px           # Chip badges, model selector pills
  pill: 9999px       # Carousel navigation buttons only

components:
  # Navigation — transparent or white, black links
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 15px 25px

  nav-link:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 15px
  nav-link-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"

  # Primary CTA — sharp-edged black filled rectangle
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 30px
  button-primary-hover:
    backgroundColor: "{colors.button-hover}"
    textColor: "{colors.ink-inverted}"

  # Secondary CTA — white filled with black border
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 30px
  button-secondary-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"

  # Ghost/outline button — transparent with border
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 30px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"

  # Filter/model selector chips
  filter-chip:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.md}"
    padding: 8px 16px
  filter-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.md}"
    padding: 8px 16px

  # Vehicle card tile
  card-vehicle:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 0px
  card-vehicle-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.on-surface}"

  # Editorial content card
  card-editorial:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 25px

  # Hero section — dark overlay variant
  hero-section:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.none}"
    padding: 96px 25px

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 15px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Gold accent link
  link-accent:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px 0px
  link-accent-hover:
    textColor: "{colors.primary-hover}"

  # Caption metadata
  caption-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Lexus Design System

## Overview

Lexus operates at the intersection of Japanese minimalism and global luxury — a design language that earns its authority through omission rather than assertion. The canvas is white (`{colors.background}`), as clean and relentless as a showroom floor, and the system resists ornamentation at every turn. The only chromatic gesture is a warm champagne gold (`{colors.primary}`) that appears precisely where the brand wants the eye to linger: editorial links, subtle trim details, and the occasional accent that communicates craftsmanship without competing with the vehicle imagery. Everything else is black and white, a system of maximum contrast and zero noise.

The typography is Nobel — a proprietary geometric humanist sans-serif that carries Lexus's Japanese luxury sensibility in Latin letterform. At 300 weight, the 40px hero display text achieves something rare: presence without heaviness. The tracking at 0.96px opens the letterforms just enough to feel aerated, almost meditative. Nobel-Book and Nobel-Regular handle body work with equal composure at 16px, and the uppercase label treatment (`{typography.label-upper}` at 1.6px tracking) gives CTAs and navigation items a measured formality — more civic signage than marketing speak. This is typography that communicates quality by declining to shout.

The defining structural choice is the zero-radius rectangular CTA button: no rounded corners, no pill shapes, just clean 90-degree angles that echo the Lexus grille's sharp geometric spindle. Buttons feel like components of the car itself — machined, deliberate, unmistakably automotive. The 20–24px radius appears only in filter chips and model selectors, where the softening reads as interactive warmth against the otherwise angular grid. The result is a coherent visual grammar: rectangles for action, chips for selection, pills only for carousel controls at the periphery.

**Key Characteristics:**
- Absolute white (`{colors.background}`) canvas — no dark mode, no section inversions on primary content
- Nobel proprietary sans-serif at weight 300 for hero display — lightness as a luxury signal
- Warm gold accent (`{colors.primary}`) used with extreme restraint — links, trim, editorial highlights only
- Zero-radius rectangular CTAs (`{rounded.none}`) as the primary interactive language — machined precision
- `{typography.button-ui}` uses uppercase with 1.3px tracking — civic formality, not aggression
- `{typography.label-upper}` at 1.6px tracking for category filters — maximum letterform separation
- Vehicle photography dominates composition; UI chrome is deliberately subordinate
- Mid-gray (`{colors.ink-secondary}`) for secondary metadata, legal text, and specification details
- Filter/model selector chips use 20–24px radius (`{rounded.md}`, `{rounded.lg}`) — the system's only soft shapes
- Full-bleed hero imagery with text overlay on dark surface sections
- Motion vocabulary: 0.2s ease for primary interactions, 0.3s for modals, custom cubic-bezier for link transitions
- 13 responsive breakpoints from 400px to 1440px — dense coverage across device sizes

## Colors

### Primary Surfaces
- **White** (`{colors.background}`): The universal canvas. Every page, section, and component originates here.
- **Surface Alt** (`{colors.surface-alt}`): Subtle off-white for section alternation, background behind model grids.
- **Surface Dark** (`{colors.surface-dark}`): Hero sections with full-bleed vehicle photography and inverted text.
- **Surface Overlay** (`{colors.surface-overlay}`): Opaque approximation of the dark overlay used on translucent hero UI elements.

### Text & Ink
- **Ink Black** (`{colors.ink}`): Primary text, navigation, buttons, headings. The default type color.
- **Ink Secondary** (`{colors.ink-secondary}`): Mid-gray for subdued labels, specifications, metadata, legal copy. Token updated to `#767676` for minimum AA contrast.
- **Ink Inverted** (`{colors.ink-inverted}`): White text on dark backgrounds and black-filled CTAs.

### Brand Accent
- **Champagne Gold** (`{colors.primary}`): The sole brand accent. Used in editorial links, hover states on nav items in certain contexts, and subtle decorative trim. Its restraint is the message — gold only appears when Lexus means it.
- **Primary Hover** (`{colors.primary-hover}`): A richer, slightly deeper gold for hover states on gold-accented elements.
- **Primary Container** (`{colors.primary-container}`): Whisper-light gold tint for container highlights where gold presence is needed without saturation.

### Interactive States
- **Button Hover** (`{colors.button-hover}`): Black CTA shifts from absolute black to a very dark gray on hover — subtle confirmation.
- **Focus Ring** (`{colors.focus-ring}`): Gold outline for keyboard navigation — brand-consistent and distinguishable from content.

### Borders
- **Border** (`{colors.border}`): 2px solid black used for CTA button outlines in secondary and ghost variants.
- **Border Subtle** (`{colors.border-subtle}`): Light structural hairlines for card separators and grid division.
- **Border Light** (`{colors.border-light}`): Mid-gray borders for input underlines and tertiary dividers.

## Typography

### Font Family
- **Primary**: `Nobel`, self-hosted proprietary geometric humanist sans-serif. Variants hosted: `nobel-light.woff` (300), `nobel-book.woff` (400 Book), `nobel-regular.woff` (400 Regular), `nobel-bold.woff` (700). Closest Google Font substitute: `Barlow`.
- **Secondary UI**: `tcomSans` (Toyota platform sans) used for certain utility UI contexts with fallbacks `Helvetica Neue, Helvetica, Arial`.
- **Italic**: `nobel-book-italic.woff` — available for editorial use.
- **No Google Fonts, no Adobe Fonts** — fully self-hosted, confirming Nobel's proprietary brand-exclusive status.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 40px / 300 weight — monumental hero text, 0.75 line-height, 0.96px tracking |
| `display` | 32px / 300 weight — section-level display headings |
| `heading-section` | 24px / 400 — primary content section titles |
| `heading-sub` | 16px / 400 — subsection titles, model category headers |
| `body-large` | 16px / 500 — lead body text, feature descriptions |
| `body` | 16px / 400 — standard body text, navigation, link text |
| `nav-link` | 14px / 400 — navigation items, secondary links |
| `button-ui` | 13px / 400, 1.3px tracking — CTA labels, uppercase tone |
| `label-upper` | 16px / 400, 1.6px tracking, uppercase — filter tabs, category labels |
| `caption` | 11px / 500, 1.1px tracking — image captions, fine specs |
| `micro` | 10px / 400 — legal text, fine print, footnotes |

### Principles
- **Weight 300 as a luxury signal**: The lightest Nobel variant at display sizes communicates that the brand needs no heavy-handedness to command attention. Fragile-looking text on a white field is a deliberate confidence play.
- **Tracking over weight for emphasis**: Where another brand might reach for bold, Lexus reaches for letter-spacing. The 1.3px CTA tracking and 1.6px filter label tracking are the primary emphasis tools.
- **Uppercase for formality**: CTA buttons and filter labels use uppercase transforms — not for energy, but for the composed legibility of civic display typography.
- **Scale economy**: The system works in a relatively compressed range (10–40px) compared to brands that push 80–120px display headlines. Lexus prefers measured authority over cinematic scale.
- **Single family throughout**: Nobel handles every context from 10px legal fine print to 40px display. There is no secondary display face or decorative typeface.

## Layout

### Spacing System
Base unit: **4px** with a strong preference for 15px and 25px as primary rhythm increments — appearing 57 and 13 times respectively in computed layouts. The system does not follow a strict powers-of-two scale; instead it reflects the sensibility of automotive design where dimensions are chosen for rightness, not algorithmic purity.

### Grid & Container
- Maximum content width: approximately 1440px (largest tracked breakpoint)
- Hero sections: Full-bleed edge-to-edge vehicle photography
- Model grid: Typically 3–4 columns on desktop, collapsing to 2 and then 1
- Content sections: Centered or left-aligned text blocks with generous lateral breathing room
- Footer: Multi-column link grid with black/white high-contrast treatment

### Whitespace Philosophy
- **White space is product**: On a white canvas, empty space is not absence — it is the luxury. Lexus uses generous vertical padding (96px section tops, 40px component gaps) as a statement of confidence.
- **Horizontal restraint**: Content rarely runs full page width. The lateral margins exist even at desktop, keeping compositions from feeling crowded.
- **Photography breathing room**: Vehicle images are never cropped tightly or crowded by adjacent content — the subject matter demands its own air.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}` white | Entire primary canvas |
| Alt Surface (Level 1) | `{colors.surface-alt}` off-white | Model grid backgrounds, subtle section shifts |
| Dark Inversion (Level 2) | `{colors.surface-dark}` black | Hero photography overlays, dark-mode sections |
| Photography (Level 3) | Full-bleed vehicle imagery | The primary depth layer — cars provide visual mass |
| Modal/Overlay (Level 4) | 0.3s ease opacity transition | Model specification panels, filter drawers |
| Focus Ring | 2px `{colors.focus-ring}` gold outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: The Lexus system uses no box-shadows in its measured interaction vocabulary. The shadowless, flat white canvas reinforces the showroom metaphor — surfaces are clean, light is ambient and even, and depth is introduced only through photography. The absence of shadows is not an omission; it is a deliberate statement that Lexus surfaces do not need to be propped up with visual tricks.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary CTAs, cards, structural containers, nav, hero sections |
| `md` | 20px | Model filter tabs, segmented controls |
| `lg` | 24px | Category chip badges, model selector pills |
| `pill` | 9999px | Carousel navigation arrow buttons only |

The radius grammar is layered and purposeful. Zero radius belongs to action: every button that demands a decision, every card that presents a vehicle, every structural container uses sharp corners. The mid-range radiuses (20–24px) soften the browse and filter interactions, signaling "these are choices, not commitments." The full pill appears only in carousel navigation — circular arrow buttons that live at the edges of the photography slider, spatially separated from the primary decision-making UI. The system communicates through radius: sharp = consequential, soft = exploratory, round = peripheral.

## Components

The complete component spec lives in the `components:` block above.

### Buttons
- **`button-primary`** — Black fill, white text, zero radius, 13px 1.3px-tracked uppercase Nobel. The signature Lexus CTA — machined, edge-to-edge rectangular, unmistakably automotive.
- **`button-secondary`** — White fill, black text, 2px solid black border (`{colors.border}`), zero radius. Equal visual weight to primary in outline form.
- **`button-ghost`** — Transparent fill with black border, inverts to black on hover. Used in dark-surface hero sections.

### Filter Chips
- **`filter-chip`** — 20px radius, white fill, black text, 14px Nobel. Model category browsing (SUV, Sedan, Hybrid & Electric, Performance).
- **`filter-chip-active`** — Inverts to black fill, white text. Selected state uses maximum contrast to confirm selection.

### Cards
- **`card-vehicle`** — Zero radius, no padding, full-bleed photography as content. The image is the card.
- **`card-editorial`** — White surface, zero radius, 25px padding. Text-forward content sections.

### Navigation
- **`nav-bar`** — White background, Nobel 14px black links, 15px 25px padding. Minimal chrome; the car imagery behind it provides all visual richness.

### Inputs
- **`input`** — White fill, no radius, bottom-border treatment implied. Clean and unobtrusive.

### Gold Accent Links
- **`link-accent`** — Gold text (`{colors.primary}`) for editorial inline links, hover states. The only instance of brand color in text.

## Do's and Don'ts

### Do
- Use `{colors.background}` white as the universal canvas — no dark mode, no aggressive section color alternation
- Keep Nobel at weight 300 for all display and hero text — lighter weight signals luxury over brute force
- Apply zero radius (`{rounded.none}`) to all primary CTAs — the sharp corner is the brand's interactive signature
- Reserve `{colors.primary}` gold strictly for links, hover states, and trim details — it loses meaning when applied broadly
- Use `{typography.label-upper}` with uppercase transform and 1.6px tracking for all filter and category labels
- Let vehicle photography dominate composition — UI chrome should always feel subordinate to the cars
- Maintain 15px and 25px as primary spacing rhythm increments — the system's spacing DNA
- Use `{colors.ink-secondary}` for all specification copy, metadata, legal text — protect the hierarchy between primary and secondary information

### Don't
- Don't round the primary CTA buttons — even a 4px radius breaks the automotive edge language
- Don't use Nobel weight 700 for display or body text — bold is reserved for tight 13px specification labels only, not headlines
- Don't introduce colors beyond the black/white/gold triad — the system's restraint is its identity
- Don't apply the gold (`{colors.primary}`) as a background fill — it reads as a warning color at full saturation; Lexus uses it in text form only
- Don't crowd vehicle photography with overlapping UI elements — images need lateral and vertical breathing room
- Don't substitute the sharp rectangular button with pill shapes for primary actions — pills are reserved for carousel navigation only
- Don't use mid-tone background surfaces (warm grays, warm whites) — `{colors.surface-alt}` is the maximum divergence from pure white
- Don't stack multiple font weights in a single heading — Lexus uses weight as punctuation, not decoration

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <400px | Single column, minimal padding, stacked nav |
| Mobile | 400–550px | Standard mobile, hamburger menu |
| Mobile Large | 550–650px | Slightly wider model tiles |
| Tablet Small | 650–768px | Two-column model grid begins |
| Tablet | 768–1000px | Three-column grid, expanded nav begins |
| Tablet Large | 1000–1200px | Full nav visible, wider content margins |
| Desktop | 1200–1440px | Four-column grid, full layout |
| Large Desktop | >1440px | Maximum content width with centered columns |

### Touch Targets
- Filter chips: 20–24px radius with 8px 16px padding — minimum 44px touch height maintained
- Primary buttons: Zero radius with 0px 30px padding — minimum touch height from content + padding
- Navigation links: 14px Nobel with 8px 15px padding per link

### Collapsing Strategy
- **Navigation**: Full horizontal nav with model megamenu → hamburger drawer on mobile
- **Vehicle grid**: 4 columns → 3 → 2 → 1 as viewport narrows
- **Hero text**: 40px display → scales down to approximately 24px on mobile
- **Filter chips**: Horizontal scroll row on mobile, full row visible on desktop
- **Button widths**: Fixed-width rectangular CTAs → full-width on mobile below 400px

### Image Behavior
- Hero photography: full-bleed `object-fit: cover` at all breakpoints
- Vehicle tiles: aspect-ratio locked with consistent gutter spacing
- Lazy loading for below-fold model grid imagery
- Dark overlay text sections use CSS background-blend or pseudo-element overlay for legibility

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` — pure white
- Primary text: `{colors.ink}` — absolute black
- Secondary text: `{colors.ink-secondary}` — mid gray
- Brand accent: `{colors.primary}` — champagne gold
- CTA background: `{colors.ink}` — black-filled buttons
- CTA text: `{colors.ink-inverted}` — white on black buttons
- Border: `{colors.border}` — 2px black for outlined buttons

### Example Component Prompts

- "Create a Lexus hero section on a full-bleed dark vehicle photograph (`{colors.surface-dark}` background fallback). Position a white Nobel headline at 40px weight 300, line-height 0.75, letter-spacing 0.96px, left-aligned with 25px left padding and 96px bottom padding. Below the headline, a primary CTA button: Nobel 13px weight 400 uppercase, 1.3px tracking, white text on `{colors.ink}` black background, zero border-radius, 0px top/bottom padding and 30px left/right padding. A secondary CTA beside it: same typography, white background `{colors.background}`, black text `{colors.ink}`, 2px solid black border `{colors.border}`, zero radius, same padding."

- "Design a Lexus vehicle model grid on `{colors.background}` white canvas. Filter chips above: Nobel 14px weight 400, 20px border-radius `{rounded.md}`, 8px 16px padding. Inactive chip: white fill, black text. Active chip: `{colors.ink}` black fill, `{colors.ink-inverted}` white text. Below, a 4-column vehicle tile grid. Each tile: full-bleed photography, no radius, no padding. Below the image: vehicle name in Nobel 16px weight 400 `{colors.ink}`, model tagline in Nobel 11px weight 500 `{colors.ink-secondary}` with 1.1px tracking. Two zero-radius CTAs: LEARN MORE (white/bordered) and EXPLORE (black/filled), Nobel 13px uppercase 1.3px tracked."

- "Build a Lexus navigation bar on `{colors.background}` white. Lexus logo (gray spinner mark) left-aligned. Navigation links: Nobel 14px weight 400 `{colors.ink}`, 8px 15px padding, 0px radius, no hover background — underline or color shift on hover. Right side: SIGN IN / CREATE MY ACCOUNT as small uppercase labels in Nobel 13px tracked. No border-bottom between nav and page content — the nav sits on the same white plane."

- "Create a Lexus specification detail card on `{colors.surface}` white, zero radius, 25px padding. Vehicle name: Nobel 24px weight 400 `{colors.ink}`, letter-spacing 0.96px. Specification rows: label in Nobel 11px weight 500 `{colors.ink-secondary}`, 1.1px tracking, uppercase; value in Nobel 16px weight 400 `{colors.ink}`. Horizontal rule: 1px `{colors.border-subtle}` between rows. Bottom: two CTAs — black-filled primary and white-bordered secondary, both zero-radius, 13px Nobel uppercase 1.3px tracked."

- "Design a Lexus editorial content section with a gold accent. Section on `{colors.background}` white. Eyebrow label: Nobel 16px weight 400 `{colors.primary}` gold, uppercase, 1.6px tracking. Headline: Nobel 24px weight 400 `{colors.ink}`. Body: Nobel 16px weight 400 `{colors.on-surface}`, line-height 1.5. An inline link: Nobel 14px `{colors.primary}` gold with underline on hover (`{colors.primary-hover}` deeper gold). Zero-radius black CTA below body text."

- "Build a Lexus model comparison carousel. Container: `{colors.background}` white. Navigation arrows: pill-shaped (`{rounded.pill}` 9999px) circles, `{colors.ink}` black fill with white arrow icon, 40px × 40px. Carousel items: vehicle photography, no radius. Below each: name in Nobel 16px `{colors.ink}`, category chip in Nobel 14px 20px-radius `{rounded.md}`, caption in Nobel 11px `{colors.ink-secondary}` 1.1px tracking."

### Iteration Guide
1. Start with `{colors.background}` white — commit to the bright, airy canvas before adding any element
2. Nobel weight 300 for display text communicates the luxury positioning — never substitute a heavier weight for hero headlines
3. Zero-radius (`{rounded.none}`) is the default for every interactive element except filter chips (20–24px) and carousel arrows (pill)
4. Gold (`{colors.primary}`) is a punctuation mark, not a design tool — one or two instances per composition maximum
5. `{typography.button-ui}` (13px, 1.3px tracking, uppercase) is the CTA voice — formal but not aggressive
6. Vehicle photography provides all the drama; the UI's job is to curate, not compete
7. `{colors.ink-secondary}` gray separates primary from secondary information — maintain a clear two-tier text hierarchy

---

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