GMC Design System

Overview

GMC's marketing site bets entirely on the product. Industrial-contour restraint. The hero is a full-bleed truck photograph — no gradient overlay, no brand illustration, no decorative chrome — and the crimson red that marks GMC's identity appears in 319 locations on the page without once filling a surface. Where Ford uses a blue hero band and Jeep fills CTAs with their Wrangler red, GMC keeps crimson strictly in the border and text registers: it is an edge-marking color, not a canvas color. Stratum at weight 900 — the heaviest condensed geometric in the extracted typography — carries the entire display tier from the "EXPLORE THE GMC LINEUP" hero h2 down to the "SIERRA" and "CANYON" model labels.

Key Characteristics:

• Near-black charcoal canvas ({colors.ink} — #222222) carries the hero, navigation, and footer; near-white {colors.canvas} (#ffffff) handles the lineup and editorial sections below the fold.
• Crimson red ({colors.primary} — #cc0000): 161 text occurrences, 158 border occurrences, zero background fills — used as link and border voltage only.
• Stratum condensed geometric at weight 900 for all display moments; weight 400 for body; no intermediate display weight exists.
• Strictly rectilinear — zero captured border radii across the entire marketing surface; every card, button, and hero tile is sharp-cornered.
• Named GB spacing custom-property system (--gb-spacing-8 through --gb-spacing-240) with 8px base unit.
• Vehicle photography is the only decorative layer above and below the fold — no hero gradients, no brand-colored background fills.
• Financing figures (APR, months, price) set in bold Stratum render as a text-based data display rather than a styled promotional graphic.
• Footer returns to the charcoal canvas with the GMC badge mark and category link columns in caption-size Stratum.

Colors

Brand

• Crimson Red ({colors.primary} — #cc0000): frequency 319. Used as text (161), border (158). Zero background fills. The GMC voltage — runs as link accents, active nav-state indicators, financing bar text, and card border marks. Never fills a surface; always marks an edge or activates a link.

Surface

• Ink ({colors.ink} — #222222): frequency 515. Used as text (253), border (253), background (9). The primary dark canvas — hero, top nav, footer, editorial band. Merges with a nearby charcoal variant in the extraction; effectively one dark-canvas tone throughout.
• Ink Deep ({colors.ink-deep} — #060505): frequency 63. Used as text (32), border (31). A near-pure-black variant that appears on deeply shadowed card elements and active nav states.
• Canvas ({colors.canvas} — #ffffff): frequency 301. Used as text (144), border (143), background (14). The light surface for the lineup section and owner resources band. Pure white.
• Canvas Dark ({colors.canvas-dark} — #000000): frequency 23. Used as background (17). The deepest dark — appears on the hero photograph overlay and certain full-bleed section backgrounds.

Hairline

• Hairline ({colors.hairline} — #ebebeb): frequency 1. The sole captured light-mode border tone. Used sparingly — the system relies on the ink/canvas contrast for most surface separation rather than drawn hairlines.

Typography

Font Family

The system runs Stratum (from Font Bureau) across every tier — display, heading, body, button, nav, and caption all use the same condensed geometric. Fallbacks walk to Arial, sans-serif. There is no second typeface voice. The entire system is mono-family, and the weight range runs from 400 (body, caption) to 900 (display) — a five-step weight spread that does the work a multi-family pairing would do elsewhere.

Hierarchy

Principles

Stratum at weight 900 is the loudest move in the system — deliberately condensed and heavy, it reads as industrial stencil rather than advertising display. No separate heading typeface exists; weight alone distinguishes display from body. The -0.56px tracking on the 56px display tier tightens the already-narrow Stratum glyphs into a block-letter density that Jeep's display type (a wider slab) and Toyota's (a lighter sans) don't approach.

Note on Font Substitutes

Stratum is a licensed Font Bureau face. Barlow Condensed at weight 800-900 replicates the narrow proportions and hard terminals at the display sizes. Industry (Google Fonts) is a looser alternative suitable for body sizes. At weight 900 the key metric to preserve is the condensed x-width — avoid substitutes whose normal variant is merely narrow, as the true condensed cut reads very differently at 56px.

Layout

Spacing System

• Base unit: 8px — dominant padding across the extracted component set (22 occurrences at 8px).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px · {spacing.4xl} 96px.
• Named properties: the GB spacing system exposes custom properties from --gb-spacing-0 to --gb-spacing-240; the full scale includes 56px, 72px, 80px, 88px, 104px, and 136px intermediate steps.
• Section padding (vertical): ~96px on the hero and editorial bands.
• Card internal padding: {spacing.lg} (24px) on the dark editorial cards; {spacing.base} (16px) on the lineup tiles.

Grid & Container

• Max content width: ~1280px on the hero; ~1080px on the lineup grid and editorial band.
• Hero: full-bleed vehicle photography, content pinned to left-center with the financing offer in the upper third.
• Lineup grid: 4-column horizontal scroll at desktop — each tile shows the model photograph, model name at {typography.display-md}, starting-MSRP price, and a red-link CTA.
• Editorial band: 3-column grid of editorial tiles ("The Latest from GMC") with dark backgrounds and link titles in Stratum 18px/400.
• Owner Resources: 5-column icon-and-label grid on white canvas.

Rhythm

The page alternates between dark-canvas brand moments and light-canvas information moments: hero (dark) → lineup (light) → editorial (dark) → news (light) → owner resources (light) → footer (dark). Each band terminates cleanly at the next; there is no atmospheric cross-fade or gradient transition between bands.

Elevation

The GMC marketing surface shows no shadow tier. Depth comes entirely from canvas-color contrast — the charcoal dark bands and the white light bands create a high-contrast alternating structure that defines section boundaries without any drawn elevation. The single exception is vehicle photography, which carries implied depth from studio or location lighting.

• Flat (no shadow): 100% of declared surfaces — cards, nav, hero, footer.
• No blur or glow treatments: the dark-on-light / light-on-dark contrast does all elevation work.

Shapes

The shape language is strictly rectilinear. The extraction returned zero border-radius values from the marketing surface. Every card, hero tile, button, financing bar, nav, and editorial block is sharp-cornered. This is a deliberate truck-segment choice — the rounded-soft treatment that Ford Explorer and Rivian use reads as approachable and consumer-friendly; GMC's flat corners read as tool-and-job.

• {rounded.none} 0px — the only radius in the system.

Components

button-primary — Crimson {colors.primary} fill, white text, no border-radius, 8x32px padding, 36px height. Used for "Build & Price" and "Shop Now" primary actions throughout the lineup grid.

button-secondary — Transparent fill, crimson text, no border-radius, bottom-border only in crimson. The inline link-style CTA used for "View Details," "Learn More," and editorial article links.

top-nav — Charcoal {colors.ink} surface, white text, no border-radius, 48px height. Houses the GMC badge mark flush left, model nav links (Trucks, SUVs, Crossovers, Vans, EVs, Electric), and the search / account cluster right.

nav-link — Transparent background, white text at {typography.body-md}, 8x16px padding. Active nav state shows crimson underline border.

hero-section — Full-bleed vehicle photography with charcoal {colors.ink} overlay gradient on the left-side text zone. The display h2 and financing offer sit in the overlay zone; the vehicle occupies the right two-thirds of the frame.

hero-heading — White text, {typography.display-xl} (56px / 900), 0 horizontal padding. Set entirely in uppercase by the font's native glyph forms rather than CSS text-transform.

section-heading — Ink-colored text on white canvas, same {typography.display-xl} token, used for "EXPLORE THE GMC LINEUP" and "THE LATEST FROM GMC" headers.

subsection-heading — Ink text at {typography.display-md} (40px / 900) — the model name labels ("SIERRA T1," "CANYON," "HUMMER EV") in the lineup carousel.

body-paragraph — White text on dark canvas, {typography.body-md} (18px / 400). The hero text and editorial body copy.

body-paragraph-ink — Ink text on white canvas, same {typography.body-md}. For lineup card descriptions and owner resource labels.

card — White canvas fill, ink text, no border-radius, 16px padding, hairline border. Used in the owner resources grid and news editorial cards on white bands.

card-dark — Charcoal {colors.ink} fill, white text, no border-radius, 16px padding. The editorial "Latest from GMC" tiles.

financing-bar — Charcoal {colors.ink} background, crimson {colors.primary} text for the offer figures (APR rate, months, conditions). A persistent strip that sits between the hero and the vehicle image.

text-input — White canvas fill, ink text and border, no border-radius, 8x16px padding, 40px height. The search bar in the top nav.

footer — Charcoal {colors.ink} canvas, white caption text, 48x24px padding. Houses GMC badge mark, category link columns (Vehicles, Electric Vehicles, Shopping Tools, Owner Resources), and social icon row.

Do's and Don'ts

Do keep crimson reserved for text links and border accents only. The system's discipline is that {colors.primary} never fills a background surface — it marks edges and activates links. Filling a card or section with crimson would import the Jeep/Ford "CTA fill" convention that GMC deliberately avoids.

Do use weight 900 Stratum for any display moment. The condensed heavy weight at 56px is the typographic identity of the brand; lighter weights at display sizes look borrowed from a different vehicle category.

Do alternate dark-canvas and light-canvas bands to create structural rhythm. The page's section logic is charcoal for brand, white for information — mixing both on the same band breaks the structural signal.

Do use full-bleed vehicle photography as the hero visual. The brand's decorative strategy is entirely photographic; introducing illustrated icons or brand-colored shapes above the fold would undermine the "truck-as-hero" proposition.

Don't add border radius to buttons or cards. The strictly rectilinear geometry is the shape identity of the brand — {rounded.none} 0px is not an oversight but a decision. Any rounded element reads as borrowed from Toyota, Ford, or Rivian.

Don't use {colors.primary} (#cc0000) as a background fill for sections or CTA buttons. The 158 border occurrences and 161 text occurrences exist precisely because the brand holds crimson away from fills; a crimson-filled hero band would read as an emergency alert, not as a truck brand.

Don't introduce a second typeface family. Stratum carries every tier — display, body, button, and caption. Pairing it with a secondary serif or humanist sans dilutes the industrial mono-family identity.

Don't use soft radius values (8px, 12px, 16px) anywhere in the system. The zero-radius shape language is load-bearing; the moment a card or button gets rounded corners the brand reads as consumer-soft rather than trade-grade.

Known Gaps

• Button hover states: no hover, active, or focus state information is captured from the marketing surface; the crimson CTA button's hover behavior is not represented here.
• Form validation: the text input carries resting state only; error, success, and disabled variants are not exposed in the captured marketing surface.
• Light mode / dark mode toggle: the brand does not appear to expose a mode toggle; the two-canvas system (charcoal and white) is structural, not a theme switch.
• Mobile responsive tokens: the CSS variable spacing system (--gb-spacing-*) does not expose breakpoint-specific overrides in the captured surface; mobile type sizing and padding are not documented.
• Configurator surface: the Build & Price configurator at gmc.com/build likely carries a richer interactive token system (color swatches, option selectors, 3D viewer controls) that is not represented here.
• EV-specific palette: the Hummer EV and Sierra EV listings may carry additional badge-color and accent tokens specific to the electric lineup.