---
version: alpha
name: "Chevrolet"
website: "https://www.chevrolet.com"
description: >-
  A mass-market American automotive brand whose marketing site runs two proprietary typefaces — ChevySans for all body and subhead copy, ChevySansBlack for hero headlines at 48–64px — against a near-monochrome palette of charcoal-black (#222222) canvas and graphite-gray (#333333) secondary, lit by a brushed-gold accent (#cd9834) used on 196 elements as the brand's structural voltage and a corporate cobalt blue (#0077d9) for links and secondary interactive elements; the system is full-bleed automotive photography against dark surfaces, with pill and soft-radius geometry at 8–48px and a spacing scale built on a 4px–96px ladder from named CSS custom properties.

seo:
  title: "Chevrolet Design System for React — brushed gold, ChevySansBlack, 18 components"
  metaDescription: "Chevrolet's marketing design system as a DESIGN.md file. Brushed gold #cd9834 on charcoal black, ChevySansBlack hero display at 64px, ChevySans body, 10 colors, 13 typography tokens, 18 components. For React and AI tools."
  highlights:
    - "Brushed gold as structural voltage — #cd9834 appears 196 times as text and border, carrying nav underlines, price callouts, and decorative elements; it is not a CTA accent but a pervasive tone"
    - "Two-weight type system in one family — ChevySans at 500–700 for body and subheads, ChevySansBlack at 900 for hero and promotional headlines; the jump from semibold to ultra-black is the brand's emphasis register"
    - "Photography-first canvas — dark charcoal (#222222) surfaces exist to frame full-bleed vehicle photography rather than as aesthetic choices in isolation"
    - "Named CSS spacing scale — `--gb-spacing-8` through `--gb-spacing-240` are the exact custom properties powering the layout; the naming convention reveals a Global Business design system underpinning shared across GM brands"
    - "Pill-dominant CTA geometry — border-radius at 20px (pill-adjacent) and 48px (full pill) on CTAs; the rounder the surface the more primary the action"
  tags:
    - "Automotive"
    - "E-commerce & Retail"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Chevrolet's marketing site is built on a two-tier weight system within a single type family: ChevySans at 500–700 for everything readable, ChevySansBlack at 900 for everything declarative. The jump from semibold body to ultra-black hero headline is larger than any weight ladder in the food, tech, or hospitality categories — ChevySansBlack at 64px weight 900 has the optical density of a cast-metal stamp. Where Toyota runs a single typeface at conservative weights and Ford uses a condensed face for announcements, Chevrolet achieves its authority through weight compression at a single size rather than through condensation or a separate display family. The hero headline "SUVs YOU CAN COUNT ON" takes up two-thirds of the viewport by mass alone.

    The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 10 color tokens built from a near-monochrome base (charcoal-black #222222 and graphite-gray #333333 carry 1028 of the 1480+ extracted occurrences) lit by brushed gold (#cd9834) at 196 appearances, corporate cobalt blue (#0077d9) at 72, and pure white at 149. Thirteen typography tokens span ChevySans and ChevySansBlack from 12px caption to 64px hero. Five radius tokens from 4px card rounding to 48px pill CTAs. A 17-step spacing scale sourced from the `--gb-spacing-*` CSS custom property family. Eighteen component definitions covering the full-bleed hero, the brushed-gold vehicle-card, the pill CTA button, the dealer-search input, and the promotional offer strip.

    Feed this file to Claude or Cursor and it will reproduce Chevrolet's specific moves: charcoal-black canvas sections framing full-bleed photography, ChevySansBlack at 64px / 900 for hero announcements, brushed gold (#cd9834) on nav underlines and price callouts rather than as a CTA fill, corporate blue for links and interactive affordances, and pill geometry graduating to near-full-pill (48px) for the most prominent CTAs. The system is an instructive study in how an American auto brand uses heavy typographic weight rather than chromatic drama as its primary confidence signal.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.chevrolet.com"
      title: "Chevrolet — official site"
      description: "Chevrolet's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Chevrolet's primary brand color and how is it used?"
      answer: "Chevrolet's most prevalent chromatic element in the captured marketing surface is brushed gold (#cd9834), appearing 196 times as text (98) and border (98). It is not a CTA fill — it functions as a structural accent tone, carried by the bowtie logo icon, navigation underlines, price callouts, decorative divider rules, and emphasis text within vehicle cards. The corporate cobalt blue (#0077d9) carries link text and interactive affordances at 72 occurrences (36 text, 36 border). The canonical Chevrolet gold bowtie emblem makes the gold pervasive; every element that carries the emblem or references the brand mark contributes to the 196 count. Neither gold nor blue fills primary CTAs — those use charcoal-black (#222222) fill with white text."
    - id: "typography"
      title: "What typefaces does Chevrolet use, and what are good substitutes?"
      answer: "Chevrolet runs two proprietary typefaces from the same family: ChevySans at weights 500, 600, and 700 for body copy, subheads, and supporting text; ChevySansBlack at weight 900 for hero headlines, promotional banners, and price-announcement displays at 32–64px. The distinction is not between two families — it is between the regular and the ultra-black cut of one family. ChevySans is the daily voice; ChevySansBlack is the shout. Both use Arial as the fallback. For open-source substitutes, Anton or Archivo Black at weight 900 approximate ChevySansBlack's compressed density at 64px; for ChevySans at 500–700, DM Sans or IBM Plex Sans transfer well at the same body sizes."
    - id: "gold-usage"
      title: "When should I use the brushed gold #cd9834 vs. the cobalt blue #0077d9?"
      answer: "Brushed gold (#cd9834) is the decorative and emblem-adjacent tone — it carries nav underlines, the bowtie logo, price-display supporting elements, and decorative divider rules. It is not a primary interactive color; there are no gold CTA buttons. Cobalt blue (#0077d9) is the interactive link and secondary-action tone — it carries body text links, 'View details' and 'Compare' style inline actions, and the dealer-search secondary button. The division is clear: gold = brand identity and decoration; blue = interactive affordance. Never swap them — gold on a button looks like a gold CTA from a luxury brand (Cadillac, BMW) and violates the Chevrolet mass-market positioning."
    - id: "spacing-system"
      title: "What spacing system does Chevrolet use, and what are the CSS custom properties?"
      answer: "Chevrolet's marketing site exposes a named spacing scale via CSS custom properties: `--gb-spacing-4` (4px), `--gb-spacing-8` (8px), `--gb-spacing-12` (12px), `--gb-spacing-16` (16px), `--gb-spacing-20` (20px), `--gb-spacing-24` (24px), `--gb-spacing-32` (32px), `--gb-spacing-40` (40px), `--gb-spacing-48` (48px), `--gb-spacing-56` (56px), `--gb-spacing-64` (64px), `--gb-spacing-72` (72px), `--gb-spacing-80` (80px), `--gb-spacing-88` (88px), `--gb-spacing-96` (96px), `--gb-spacing-104` (104px), `--gb-spacing-136` (136px), `--gb-spacing-240` (240px). The `--gb-` prefix indicates a Global Business design system token family shared across GM brands (Cadillac, Buick, GMC use the same system). The dominant spacing values in the captured surface are 8px (30 times), 16px (17 times), and 0×20px horizontal padding (35 times)."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build an automotive or product-showcase marketing page?"
      answer: "Yes — feed this file to Claude or an AI coding tool and it will reproduce Chevrolet's specific moves: charcoal-black sections framing full-bleed photography, ChevySansBlack at 64px / 900 for hero announcements, brushed-gold (#cd9834) decorative accents on nav elements and price callouts, cobalt blue for link interactions, and a pill-adjacent CTA geometry at 20–48px radius. The `--gb-spacing-*` custom property ladder maps to real section padding values. For open-source projects, substitute Anton for ChevySansBlack and DM Sans for ChevySans, both at matching weights. One caveat: the full-bleed photography is load-bearing in this system — the dark canvas surfaces read as intentional only when the vehicle image fills the viewport; without the photography, the charcoal surface reads as a dark dashboard rather than an automotive showcase."

mockups:
  - "marketing-hero"
  - "media-grid"

colors:
  primary: "#cd9834"
  secondary: "#0077d9"
  ink: "#222222"
  ink-dark: "#333333"
  ink-muted: "#666666"
  ink-faint: "#8c8c8c"
  canvas: "#ffffff"
  surface-1: "#f2f2f2"
  surface-2: "#e6e6e6"
  ink-black: "#000000"

typography:
  display-xl:
    fontFamily: "ChevySansBlack, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 900
    lineHeight: 51px
    letterSpacing: 0
  display-lg:
    fontFamily: "ChevySansBlack, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 38px
    letterSpacing: 0
  display-md:
    fontFamily: "ChevySansBlack, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 900
    lineHeight: 32px
    letterSpacing: 0
  heading-lg:
    fontFamily: "ChevySansBlack, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 900
    lineHeight: 26px
    letterSpacing: 0
  heading-md:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 32px
    letterSpacing: "-0.64px"
  subhead-lg:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 29px
    letterSpacing: 0
  subhead-md:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 28px
    letterSpacing: 0
  body-lg:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 22px
    letterSpacing: 0
  body-md:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22px
    letterSpacing: 0
  body-sm:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 17px
    letterSpacing: 0
  button-md:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: 0
  caption:
    fontFamily: "ChevySans, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 17px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  lg: "16px"
  xl: "20px"
  pill: "48px"

spacing:
  xs: "4px"
  sm: "8px"
  base: "16px"
  md: "20px"
  lg: "24px"
  xl: "32px"
  2xl: "48px"
  3xl: "64px"
  4xl: "80px"
  5xl: "96px"

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xl}"
    padding: "14px 32px"
    height: "56px"
  button-primary-hover:
    backgroundColor: "{colors.ink-dark}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.xl}"
    padding: "14px 32px"
    height: "56px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "14px 32px"
    height: "56px"
    borderColor: "{colors.ink}"
  button-cta-pill:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.pill}"
    padding: "14px 32px"
    height: "56px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px 20px"
    height: "56px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    padding: "14px 0"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "0"
  hero-section:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    rounded: "{rounded.none}"
    padding: "0px 100px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-faint}"
    typography: "{typography.caption}"
    padding: "0"
  vehicle-card:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "12px 32px"
  offer-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: "0px 0px 20px"
    borderColor: "{colors.surface-2}"
  price-display:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
    padding: "0"
  text-input:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: "0px 0px 0px 30px"
    height: "56px"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "12px 32px"
    borderColor: "{colors.surface-2}"
  feature-label:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    padding: "0"
  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.caption}"
    padding: "20px 100px"
  promo-banner:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0px 20px"
    height: "48px"
---

## Overview

Chevrolet's marketing site declares authority through typographic weight rather than chromatic drama. **Weight as brand voice.** ChevySansBlack at weight 900 — the ultra-black cut of the proprietary ChevySans family — carries every hero headline, every vehicle announcement, and every promotional price display at 32–64px. The jump from ChevySans 500 (body) to ChevySansBlack 900 (headline) is larger than any weight ladder in the consumer brand directory; the system has no intermediate 600–800 display step. Where Toyota applies a single conservative typeface across all scales, and where Ford uses condensed faces to compress announcements, Chevrolet achieves authority through raw weight at the single hero font size.

The brushed gold (#cd9834) is the brand's structural accent — not a CTA fill, not a hero background, but a pervasive decorative tone. **Gold as decoration, blue as interaction**: gold (#cd9834) appears 196 times across nav underlines, the bowtie emblem, price-callout supporting elements, and rule lines; cobalt blue (#0077d9) carries link text and interactive affordances at 72 occurrences. Unlike brands that hold their accent color for CTAs, Chevrolet distributes the gold broadly, which means it reads more like a surface property than a signal — the gold tones the environment, the charcoal-black-and-white performs the actions.

**Key Characteristics:**
- ChevySansBlack at 900 weight for hero and promotional headlines — 64px for the above-fold banner, 48px for offer announcements, 32–40px for secondary display.
- ChevySans at 500–700 for all body, nav, and subhead copy — the same family covering the full reading spectrum below headline scale.
- Charcoal-black (`{colors.ink}` — #222222) and graphite-gray (`{colors.ink-dark}` — #333333) account for 1028 of 1480+ measured occurrences; the canvas is dark-neutral, not white.
- Brushed gold (`{colors.primary}` — #cd9834) at 196 occurrences — pervasive decorative accent, never a CTA fill.
- Cobalt blue (`{colors.secondary}` — #0077d9) at 72 occurrences — the interactive link and secondary-action color.
- Light-gray surfaces (`{colors.surface-1}` — #f2f2f2 and `{colors.surface-2}` — #e6e6e6) carry vehicle card backgrounds and section alternation.
- Named CSS spacing ladder (`--gb-spacing-*`) spanning 4px to 240px — a Global Business design system shared across GM brands.
- Pill-adjacent radius at 20px for primary CTAs, full pill at 48px for the most prominent actions.

## Colors

### Brand

- **Brushed Gold** (`{colors.primary}` — #cd9834): frequency 196. Used as text (98), border (98). The Chevrolet bowtie emblem and every decorative accent in the system. Not a button fill; it carries the nav bowtie logo, underlines, price-annotation elements, and decorative dividers throughout the page. The most-used chromatic element by far.
- **Cobalt Blue** (`{colors.secondary}` — #0077d9): frequency 72. Used as text (36), border (36). The interactive link tone — carries every 'View details,' 'Compare,' and body-copy link on the page. Wired as a hard-coded value rather than a CSS custom property on this surface.

### Text

- **Ink** (`{colors.ink}` — #222222): frequency 544. Used as text (270), border (270), background (4). The dominant charcoal-black — the primary text color for every heading, body, and nav element below the hero photography. The extraction's `mergedFrom` array consolidates two near-identical charcoals into this single token.
- **Ink Dark** (`{colors.ink-dark}` — #333333): frequency 484. Used as text (242), border (242). The graphite-gray secondary — shares almost equal frequency with ink at body scale. A slightly lighter charcoal for secondary and supporting text.
- **Ink Muted** (`{colors.ink-muted}` — #666666): frequency 12. Used as text (6), border (6). Mid-gray for caption-level annotations, regulatory fine print, and supplementary labels.
- **Ink Faint** (`{colors.ink-faint}` — #8c8c8c): frequency 2. Light gray for the finest body text — legal disclaimers and MSRP footnotes (rendered in ChevySans 12px / 500).

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 149. Used as text (68), background (13), border (68). Pure white — the primary card fill and the text color on dark hero surfaces.
- **Surface 1** (`{colors.surface-1}` — #f2f2f2): frequency 6, background only. Light gray used for vehicle card backgrounds and section fills that need a subtle departure from white.
- **Surface 2** (`{colors.surface-2}` — #e6e6e6): frequency 6, background only. A slightly darker gray used for card borders and active-state backgrounds on vehicle-selector tabs.
- **Ink Black** (`{colors.ink-black}` — #000000): frequency 6. Pure black for the darkest shadow and occasional deep text moments — distinct from the softer charcoal ink.

## Typography

### Font Families

The system runs two weights of the same proprietary family: **ChevySans** at weights 500, 600, and 700 for body, label, button, and nav text, and **ChevySansBlack** at weight 900 for every headline and display tier. Both use `Arial, sans-serif` as fallback. The family covers the full typographic range without a second design family — differentiation comes from the extreme weight jump at headline scale, not from a display-vs-body family split.

This single-family, dual-weight model is ChevySans's most unusual structural feature. The brand runs 19 distinct typography signatures in the extraction; 15 of them are variations of ChevySans / ChevySansBlack across sizes, and 4 use ChevySansBlack at 900 weight for the heaviest display moments. There is no light or thin variant — the minimum weight in the system is 500.

### Hierarchy

| Token | Size | Weight | Family | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 64px | 900 | ChevySansBlack | 51px | Hero h2 ("SUVs YOU CAN COUNT ON") |
| `{typography.display-lg}` | 48px | 900 | ChevySansBlack | 38px | Offer section headlines |
| `{typography.display-md}` | 40px | 900 | ChevySansBlack | 32px | Feature announcements |
| `{typography.heading-lg}` | 32px | 900 | ChevySansBlack | 26px | Promotional sub-headlines |
| `{typography.heading-md}` | 32px | 500 | ChevySans | 32px | Section heading ("EVERY DRIVE STARTS HERE") |
| `{typography.subhead-lg}` | 24px | 500 | ChevySans | 29px | Vehicle name subheads |
| `{typography.subhead-md}` | 20px | 700 | ChevySans | 28px | Offer label headers |
| `{typography.body-lg}` | 16px | 600 | ChevySans | 22px | Primary body copy and card headers |
| `{typography.body-md}` | 16px | 500 | ChevySans | 22px | Standard body and nav links |
| `{typography.body-sm}` | 14px | 500 | ChevySans | 20px | Supporting labels and list items |
| `{typography.label-md}` | 12px | 500 | ChevySans | 17px | Small metadata labels and fine print |
| `{typography.button-md}` | 16px | 600 | ChevySans | 20px | CTA button labels |
| `{typography.caption}` | 12px | 500 | ChevySans | 17px | Disclaimers, legal footnotes |

### Principles

The weight gap between `{typography.body-md}` (ChevySans 500) and `{typography.display-xl}` (ChevySansBlack 900) is the system's signature. There is no 600–800 display step — a heading either stays in the readable register (500–700) or tips into the announcement register (900). Display weight at 64px / 900 with tight 51px line-height (0.8 ratio) creates a condensed, stamp-like appearance without using a condensed typeface. The tight line-height on the hero heading means stacked two-line headlines have nearly no inter-line gap.

### Note on Font Substitutes

ChevySans and ChevySansBlack are proprietary GM brand typefaces, not publicly available. **Anton** or **Bebas Neue** approximate ChevySansBlack 900 at 64px for headline use in open-source projects; the condensed geometry differs but the optical weight is comparable. For ChevySans at 500–600 body sizes, **DM Sans** or **IBM Plex Sans** transfer well. Maintain the extreme weight gap: do not introduce a 700-weight display step between body and headline — the gap is the brand signal.

## Layout

### Spacing System

- **Base unit:** 8px — 30 occurrences in the captured surface.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.base}` 16px · `{spacing.md}` 20px · `{spacing.lg}` 24px · `{spacing.xl}` 32px · `{spacing.2xl}` 48px · `{spacing.3xl}` 64px · `{spacing.4xl}` 80px · `{spacing.5xl}` 96px.
- **CSS custom property source:** `--gb-spacing-8` through `--gb-spacing-240` — the Global Business design system token names from the `:root` declarations. These are exactly the values powering section padding and layout rhythm.
- **Hero horizontal padding:** 0×100px on the full-bleed hero section and footer.
- **Vehicle card padding:** 12×32px on the vehicle-card grid items.
- **Promo banner height:** 48px for the APR announcement strip at the page top.

### Grid & Container

- **Max content width:** approximately 1280–1400px on vehicle card grids and promotional strips.
- **Hero:** full-bleed dark photography with the headline and CTA stack overlaid at centered max-width.
- **Vehicle-selector grid:** horizontally scrollable card row for model categories (Bolt, Equinox EV, Silverado, etc.) with left/right navigation arrows.
- **Offer cards:** a 2-column grid pairing the current offer rate (2.9% APR / 72 months) with the vehicle imagery at full bleed.
- **Feature tiles:** responsive grid of editorial photography sections below the vehicle selector.

### Rhythm

The page alternates between dark photography-framed hero bands and light-surface card sections. The APR promo banner strip (48px, dark fill) anchors the top; the main hero follows full-bleed; then the page opens to white and light-gray for the vehicle selector and offer card grid. The dark canvas re-enters for the "Hands-Free Driving" feature section before the footer. The alternation is not visual decoration — each dark section frames a new photography hero.

## Elevation

The system runs a **surface-contrast elevation model** with no meaningful shadow tier. The captured surface (2444 elements scanned) shows zero shadow occurrences in the extracted color data. Depth comes from:

- **Photography contrast:** vehicle images photographed against outdoor environments on dark or neutral backgrounds read as the primary elevated surface.
- **Surface tones:** `{colors.surface-1}` (#f2f2f2) for vehicle card backgrounds lifted off the white page canvas; `{colors.surface-2}` (#e6e6e6) for borders and active-state tabs.
- **Radius-as-elevation signal:** pill-radius CTAs at 48px read as the most "elevated" interactive elements by virtue of their curvature versus the square or lightly-rounded surrounding surface.

## Shapes

The radius scale follows a **functional gradient**: smaller radius for content surfaces, larger for interactive surfaces, pill for the most prominent actions.

- `{rounded.none}` 0px — hero section, full-bleed photography bands, promo banner strip.
- `{rounded.sm}` 4px — text input field (dealer search, zip-code entry).
- `{rounded.md}` 8px — standard card containers, vehicle card grid items. Most frequent radius in the captured surface (15 occurrences).
- `{rounded.lg}` 16px — offer cards and larger content modules (8 occurrences).
- `{rounded.xl}` 20px — primary CTA button "Continue" and modal-style action containers (12 occurrences).
- `{rounded.pill}` 48px — the most prominent CTA buttons, dealer-select actions, and pill-badge elements (6 occurrences).

The scale reads as: the more a surface asks you to act, the rounder it gets.

## Components

**`button-primary`** — Charcoal-black `{colors.ink}` fill, white text, ChevySans bold label, 20px radius, 14×32px padding, 56px height. "Continue" is the canonical extraction instance; on the live homepage "Shop Now" and "Get Offers" use the same treatment.

**`button-primary-hover`** — Flips to the slightly darker graphite `{colors.ink-dark}` (#333333). The visual change is subtle — one step darker in the charcoal range.

**`button-secondary`** — White `{colors.canvas}` fill, charcoal text, charcoal border, pill radius (48px), same 14×32px / 56px sizing. Used for "Build & Price" and secondary vehicle-action CTAs.

**`button-cta-pill`** — Charcoal-black fill with the maximum 48px pill radius. The highest-prominence CTA shape — "Shop Silverado" or "View All Offers" style actions.

**`top-nav`** — White `{colors.canvas}` surface, 56px height, 0×20px padding. Chevrolet bowtie wordmark flush left in gold; search icon flush right. No product sub-nav in the captured surface — the primary nav is iconographic rather than text-link based.

**`nav-link`** — Transparent background, charcoal ink at `{typography.body-md}`, 14px vertical padding, 0 horizontal. Used for interior navigation links beneath the primary nav bar.

**`hero-heading`** — Transparent background on a full-bleed photography section, white text in `{typography.display-xl}` (ChevySansBlack, 64px / 900). The hero headline renders in all-caps in the captured example.

**`hero-section`** — Charcoal-black fill framing full-bleed photography, 0×100px padding, no radius. The photography either fills the section as a background-image or sits as a foreground figure centered in the dark canvas.

**`section-heading`** — Transparent background, charcoal ink in `{typography.heading-md}` (ChevySans 32px / 500). Used for "EVERY DRIVE STARTS HERE" and similar section titles.

**`body-paragraph`** — Faint gray `{colors.ink-faint}` (#8c8c8c) text in `{typography.caption}` (12px / 500). The legal disclaimer and MSRP footnote style.

**`vehicle-card`** — Light-gray `{colors.surface-1}` fill, charcoal text, 8px radius, 12×32px padding. The horizontally-scrollable vehicle model cards (Bolt, Equinox EV, Silverado, etc.).

**`offer-card`** — White fill with light-gray border, charcoal text in `{typography.body-lg}`, 16px radius, 0×0px 20px bottom padding. Offer cards carrying APR rates, month terms, and the "Learn more" link.

**`price-display`** — Transparent background, charcoal text in `{typography.display-md}` (ChevySansBlack 40px / 900). Price announcements like "2.9% APR for 72 Months."

**`text-input`** — Light-gray `{colors.surface-1}` fill, charcoal text, 4px radius, left-padded 30px for icon, 56px height. The dealer-search / ZIP-code input on the "Find a Dealer" module.

**`card`** — White fill, light-gray border, 16px radius, 12×32px padding. The general content card used in the feature section grid.

**`feature-label`** — Transparent background, charcoal text in `{typography.label-md}` (12px / 500). Category labels above vehicle cards ("Build & Price," "Current Offers," "Search Inventory," "Find a Dealer").

**`footer`** — Charcoal-black `{colors.ink}` fill, white text in `{typography.caption}`, 20×100px padding. Legal copy, brand links, and fine-print disclaimers in the dark-canvas footer.

**`promo-banner`** — Charcoal-black fill, white text in `{typography.body-md}`, 48px height, no radius. The APR-announcement strip running across the top of the page above the hero.

## Do's and Don'ts

**Do** use ChevySansBlack at 900 weight for any headline or announcement headline. The weight gap between body (500) and display (900) is the system's confidence signal — a 700-weight display step would collapse the gap and flatten the hierarchy.

**Do** use brushed gold (`{colors.primary}` — #cd9834) as a decoration and emblem tone, not as a CTA fill. On a CTA button, gold reads as luxury (Cadillac, Genesis) rather than mass-market Chevrolet; the CTA fill is always charcoal-black.

**Do** use cobalt blue (`{colors.secondary}` — #0077d9) for all interactive link text and secondary button borders. The gold-vs-blue division is clear: gold annotates, blue interacts.

**Do** maintain full-bleed photography in every dark-canvas hero section. The charcoal-black `{colors.ink}` surface reads as intentional framing only when a vehicle photograph fills it; an empty dark canvas reads as an unfinished hero.

**Don't** apply `{colors.primary}` (#cd9834) to button fills or CTA backgrounds. It has 196 occurrences in the system and all of them are text and border roles — a gold CTA button violates the brand's democratic positioning.

**Don't** use `{rounded.none}` on CTA buttons. Square-corner buttons exist only in the hero photography overlay context and the full-bleed promo banner; interactive buttons always carry at least `{rounded.xl}` 20px radius.

**Don't** introduce a body weight below 500. ChevySans has no light or thin variant in this system; text at weight 400 would look like a fallback rendering of Arial rather than the brand typeface.

**Don't** use `{colors.surface-2}` (#e6e6e6) as a text color. It is a background-only token (6 occurrences, all background); used as text it would be illegible at small sizes against white surfaces.

## Known Gaps

- **Model-detail and configurator pages:** the captured surface is the chevrolet.com homepage. The Build & Price configurator, model-detail pages (trim selectors, color swatches, feature accordions), and the dealer-inventory search results carry a richer component set not represented here.
- **Hover and focus states:** documented for `{component.button-primary-hover}` only; focus rings, active press states, and disabled-button treatment (common in configurator forms) are not captured.
- **The bowtie emblem color:** the gold bowtie logo is an SVG with a specific fill matching `{colors.primary}` — but the exact gradient or multi-color interior of the logo is not captured as a flat hex; it is treated here as the `{colors.primary}` gold approximation.
- **Dark mode:** the captured surface is light-white and dark-photography alternating; no explicit dark-mode CSS declaration is present.
- **Mobile layout:** the captured viewport is desktop-width (1280px). The vehicle-card row collapses to a single-card swipe carousel and the hero typography scales down significantly; mobile type tokens are not represented.
- **Animation and transitions:** vehicle-card scroll animations, hero crossfade transitions, and the APR banner ticker are live behaviors not captured in the static token spec.