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

GMC's brand voltage is crimson red (the ink token in the system), which appears 319 times in the captured marketing page — 161 as text, 158 as border, and 0 as background fill. This is the distinctive move: the crimson never fills a surface. It runs as link underlines, active nav indicators, financing-bar text, and card border accents. Where most automotive brands use their red for CTA button fills (Jeep, Ford) or hero band fills, GMC holds crimson in the border and text registers only. The overall effect reads as industrial edge-marking rather than marketing urgency.

What typeface does GMC use, and what should I use as a substitute?

GMC's marketing site runs Stratum across every typographic tier — display, heading, body, button, and caption all share the same condensed geometric. Display headlines run at 56px in weight 900 with -0.56px tracking; subheadings at 40px / weight 900; body text at 18px / weight 400 with -0.18px tracking; nav labels at 18px / weight 500. Stratum is a licensed typeface from Font Bureau. For an open-source substitute, Barlow Condensed at weight 800-900 replicates the narrow proportions and hard terminals reasonably well. Industry from Google Fonts is a looser alternative that works at the body sizes.

Why does GMC use a near-black canvas instead of pure black?

GMC's primary dark surface is a charcoal near-black at approximately 13% lightness (the ink token in the system), not pure black. The distinction matters for photography: vehicle photographs rendered over pure black look like cutout composites, while the 13%-lightness charcoal creates a slight ambient tone that lets the vehicle photography read as naturally lit rather than studio-cut. The near-white sections below the fold use the canvas token (approximately 96% lightness) rather than pure white for the same softening reason. Pure white against the dark brand moments would feel too clinical for a truck brand targeting working-trade buyers.

What corner-radius style does GMC use?

The captured GMC marketing surface shows zero extracted corner radii — the radius extraction returned an empty array. This reflects the visual reality: the hero photography tiles, the lineup card grid, and the editorial band below are all sharp-cornered rectangles. The shape language is rectilinear throughout, consistent with a working-truck identity that leans on industrial geometry rather than the rounded-soft treatment that consumer brands (Rivian, Toyota) use. Buttons have no visible radius either; the financing bar and CTA links are flat rectangular surfaces.

What spacing system does GMC use internally?

GMC exposes a named custom-property spacing system with the prefix --gb-spacing-, running from 0 to 240px in documented increments: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px, 88px, 96px, 104px, 136px, and 240px. The dominant padding value across extracted components is 8px (22 occurrences) and 24px (13 occurrences), suggesting an 8px base unit. Section-level padding runs to 96px on the hero band. The scale is continuous rather than exponential — every 8px step is represented, unlike Tailwind's default doubling ladder.

GMC Design System

GMC's marketing-site design system as a DESIGN.md file.

About GMC DESIGN.md

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

Automotive

GMC.com opens on a full-bleed truck photograph — a Sierra or Canyon filling the viewport edge to edge — with the GMC badge mark at top left and a crimson-red financing offer bar pinned to the top. There is no decorative hero layer between the brand and the vehicle: the truck IS the background, shot from the three-quarter front angle that every truck buyer recognizes. Below the fold the page drops to near-white for the "Explore the GMC Lineup" section, then returns to dark for the editorial "Latest from GMC" band, then back to near-white for Owner Resources. The alternation is structural, not atmospheric — dark surfaces belong to brand moments, light surfaces belong to information density.

The crimson red that signals GMC's identity does something unusual: it almost never fills a surface. Across 319 total occurrences in the captured page, 158 are borders and 161 are text links — the red is a contour color and a link accent, not a canvas. Where Jeep uses their red for full CTA fills and Ford uses a blue for hero bands, GMC keeps its voltage entirely in outlines and underlines. The Stratum typeface — a condensed geometric with hard terminals — reinforces the working posture; at weight 900 and -0.56px tracking the "EXPLORE THE GMC LINEUP" hero headline reads like a placard bolted to a vehicle rather than a marketing invitation.

Feed this file to an AI coding tool and it will reproduce GMC's specific moves: near-black canvas, crimson red reserved exclusively for link and border accents, Stratum at maximum weight for display moments, and vehicle photography carrying the decorative load. The approach bets everything on the product's visual appeal; there is no safety net of branded illustration or gradient if the photography fails. That gamble pays off in the truck segment precisely because the hardware is built to be photographed.

What makes it distinct

Red as border voltagecrimson appears 158 times as a border and 161 times as text, never as a background fill; the surface always stays dark
Stratum weight 900 at 56pxthe display headline runs at maximum condensed weight with -0.56px tracking, harder than any competitor in the truck segment
Photography-only decorationno hero gradients, no brand illustrations; truck and SUV photography carries every above-fold visual job
Near-black dual canvascharcoal ink-black for hero and footer, near-white for the explore lineup section; the page alternates between dark truck-yard and light editorial
GB spacing systema named custom-property spacing scale (--gb-spacing-8 through --gb-spacing-240) drives all internal component rhythm

Live at gmc.com

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

gmc.com

Explore GMC

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.

Borders & Hairlines

Dividers, outlines, structural rules.

GMC design system FAQ

Common questions about GMC'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.

GMC — official site

GMC'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.