What is Chevrolet's primary brand color and how is it used?

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.

What typefaces does Chevrolet use, and what are good substitutes?

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.

When should I use the brushed gold #cd9834 vs. the cobalt blue #0077d9?

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.

What spacing system does Chevrolet use, and what are the CSS custom properties?

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).

Can I use this DESIGN.md to build an automotive or product-showcase marketing page?

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.

Chevrolet Design System

Chevrolet's marketing design system as a DESIGN.md file.

About Chevrolet DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source chevrolet.com

Automotive
E-commerce & Retail

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.

What makes it distinct

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 familyChevySans 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 canvasdark 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 geometryborder-radius at 20px (pill-adjacent) and 48px (full pill) on CTAs; the rounder the surface the more primary the action

Live at chevrolet.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

chevrolet.com

Explore Chevrolet

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Chevrolet design system FAQ

Common questions about Chevrolet's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Chevrolet — official site

Chevrolet's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.