--- version: alpha name: "GMC" website: "https://www.gmc.com" description: >- A GM truck-and-SUV brand whose marketing site runs on a near-black canvas with a single crimson red used exclusively for the badge, link accents, and border details — never as a fill. Display headlines appear in Stratum at weight 900 with tight -0.56px tracking, and the system deploys vehicle photography as the only decorative layer, with no gradient bling or hero illustrations. The color restraint and heavy-weight condensed type give the lineup pages a working-tough stance closer to industrial print than to consumer automotive brands like Toyota or Honda. seo: title: "GMC Design System for React — crimson red on near-black, Stratum, 15 components" metaDescription: "GMC's marketing-site design system as a DESIGN.md file. Near-black canvas, crimson red accent used only for links and borders, Stratum weight-900 display at 56px, 14 color tokens, 15 components. For React, Next.js, and AI coding tools." highlights: - "Red as border voltage — crimson 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 56px — the display headline runs at maximum condensed weight with -0.56px tracking, harder than any competitor in the truck segment" - "Photography-only decoration — no hero gradients, no brand illustrations; truck and SUV photography carries every above-fold visual job" - "Near-black dual canvas — charcoal 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 system — a named custom-property spacing scale (--gb-spacing-8 through --gb-spacing-240) drives all internal component rhythm" tags: - "Automotive" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. 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.gmc.com" title: "GMC — official site" description: "GMC'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: "gmc-primary-color" title: "What is GMC's primary brand color and how is it used?" answer: "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." - id: "gmc-typeface" title: "What typeface does GMC use, and what should I use as a substitute?" answer: "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." - id: "gmc-canvas" title: "Why does GMC use a near-black canvas instead of pure black?" answer: "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." - id: "gmc-radius" title: "What corner-radius style does GMC use?" answer: "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." - id: "gmc-spacing" title: "What spacing system does GMC use internally?" answer: "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." mockups: - "marketing-hero" - "media-grid" colors: primary: "#cc0000" ink: "#222222" ink-deep: "#060505" canvas: "#ffffff" canvas-dark: "#000000" hairline: "#ebebeb" typography: display-xl: fontFamily: "Stratum, Arial, sans-serif" fontSize: 56px fontWeight: 900 lineHeight: 56px letterSpacing: "-0.56px" display-md: fontFamily: "Stratum, Arial, sans-serif" fontSize: 40px fontWeight: 900 lineHeight: 40px letterSpacing: "-0.4px" heading-lg: fontFamily: "Stratum, Arial, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 26.88px letterSpacing: "-0.24px" heading-md: fontFamily: "Stratum, Arial, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 22.4px letterSpacing: "-0.2px" body-lg: fontFamily: "Stratum, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 22px letterSpacing: "-0.16px" body-md: fontFamily: "Stratum, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 20.16px letterSpacing: "-0.18px" body-md-bold: fontFamily: "Stratum, Arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 20.16px letterSpacing: "-0.18px" body-sm: fontFamily: "Stratum, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 17.92px letterSpacing: "-0.16px" label-md: fontFamily: "Stratum, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 21.6px letterSpacing: 0 caption: fontFamily: "Stratum, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 15.68px letterSpacing: "-0.14px" button-md: fontFamily: "Stratum, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: normal letterSpacing: 0 rounded: none: "0px" spacing: xs: "4px" sm: "8px" md: "12px" base: "16px" lg: "24px" xl: "32px" 2xl: "48px" 3xl: "64px" 4xl: "96px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "8px 32px" height: "36px" button-secondary: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "8px 0px" borderColor: "{colors.primary}" borderBottom: "1px solid" top-nav: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "0px 16px" height: "48px" nav-link: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-md}" padding: "8px 16px" hero-heading: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" subsection-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "0px" body-paragraph: backgroundColor: "transparent" textColor: "{colors.canvas}" typography: "{typography.body-md}" body-paragraph-ink: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" borderColor: "{colors.hairline}" card-dark: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "16px" financing-bar: backgroundColor: "{colors.ink}" textColor: "{colors.primary}" typography: "{typography.body-md-bold}" padding: "8px 24px" height: "40px" hero-section: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: "96px 0px" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "8px 16px" height: "40px" borderColor: "{colors.ink}" footer: backgroundColor: "{colors.ink}" textColor: "{colors.canvas}" typography: "{typography.caption}" padding: "48px 24px" --- ## 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 | Token | Size | Weight | Line Height | Use | |---|---|---|---|---| | `{typography.display-xl}` | 56px | 900 | 56px | Hero h2 ("EXPLORE THE GMC LINEUP") | | `{typography.display-md}` | 40px | 900 | 40px | Section h3 labels ("SIERRA", "CANYON", "HUMMER EV") | | `{typography.heading-lg}` | 24px | 700 | 26.88px | Sub-section titles in editorial band | | `{typography.heading-md}` | 20px | 700 | 22.4px | Card titles and financing data labels | | `{typography.body-lg}` | 20px | 400 | 22px | Lead body paragraph and modal copy | | `{typography.body-md}` | 18px | 400 | 20.16px | Default running text, nav links | | `{typography.body-md-bold}` | 18px | 700 | 20.16px | Financing bar primary figures, call-out values | | `{typography.body-sm}` | 16px | 400 | 17.92px | Caption-level body copy, card sub-labels | | `{typography.label-md}` | 18px | 500 | 21.6px | CTA link labels, active nav state | | `{typography.caption}` | 14px | 400 | 15.68px | Fine-print, disclaimer text, footer sub-labels | | `{typography.button-md}` | 14px | 400 | normal | Button labels (secondary actions) | ### 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.