Chevrolet Design System

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

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.