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

Buick's sole chromatic accent is an antique gold at #cd9834, appearing 368 times across the captured marketing page — 189 as text and 179 as border. Critically, it never appears as a background fill: the gold runs as CTA link text, card border rules, section divider lines, and active-state indicators. This differs from consumer-automotive competitors like Toyota, which uses its red for full CTA button fills, and from Cadillac within the GM portfolio, which uses a gold-adjacent tone at much lower frequency. Buick's gold does more decorative work per page than most automotive accent colors while staying entirely in the line-and-text registers.

What typefaces does Buick use, and what should I substitute?

Buick runs two proprietary typefaces from GM: Buick Headline for display and section titles, and Buick Text for body, labels, and CTA links. Buick Headline appears at 56px / weight 500 on the hero h1, at 32px / weight 300 and 24px / weight 500 on section headings — the weight 300 display is the brand's typographic signature, lighter than any other truck or SUV brand in the directory. Buick Text runs at 20px / weight 500 for h2 labels, 16px / weight 400 for body paragraphs, and 14px / weight 400 for fine print. Both fonts fall back to Arial, sans-serif. Open-source substitutes: Libre Baskerville is too serif; try Outfit at weight 300 for Buick Headline display sizes and Inter at weight 400 for Buick Text body.

What is the page's canvas color strategy?

Buick's page alternates between two surfaces: a dark charcoal (#222222) for the hero band and footer, and a warm off-white (#f6f5f4) for the vehicle lineup grid, special-offers section, and editorial content. The off-white clusters near-white (#ffffff) and light gray (#f0f0f0) into a single warm token — the extractor merged these three near-duplicate light values into #f6f5f4 with 35 total occurrences. The alternation follows a structural pattern: dark surfaces belong to full-bleed photography moments, light surfaces carry card grids and comparison content. Pure black appears at only 7 occurrences — reserved for the nav text and a single background element.

What corner-radius scale does Buick use?

Buick's radius scale has two dominant values: 16px (24 occurrences — used on vehicle trim cards, modal overlays, and the region-selector drawer) and 100px (4 occurrences — the fully-rounded pill for primary CTA buttons like 'View Our Lineup'). A 50% radius appears twice for circular avatar or icon elements, 8px appears once on a secondary button, and 4px once on a tag chip. The scale is effectively binary between content cards (16px) and CTA pills (100px), with no middle tier at 24px or 32px. This matches the pattern in neighboring GM brand GMC, which uses a similar sharp-vs-pill binary, but Buick's 16px default is softer than GMC's sharp-cornered approach.

What spacing system does Buick use?

Buick exposes the GM shared --gb-spacing-* custom-property ladder, running from --gb-spacing-0 (0) through --gb-spacing-240 (240px) at documented increments: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px, 88px, 96px, 104px, 136px, and 240px. The dominant extracted padding values are 8px (22 occurrences) and 16px (10 occurrences), confirming an 8px base unit. Section-level vertical padding runs at 48px for most content bands; the hero band sits at 96px. Card internal padding runs 16px on all sides, with button padding at 16px × 32px (height 48px). This ladder is shared across Buick, GMC, and Chevrolet within the GM design-system framework.

Buick Design System

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

About Buick DESIGN.md

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

Automotive

Buick's marketing site occupies an unusual slot in the GM portfolio: it aims for near-luxury aspiration without the full-black austerity of Cadillac or the working-truck hardness of GMC. The hero is a full-bleed vehicle photograph — the 2026 Enclave filling the viewport on a palm-lined boulevard — with a near-white text overlay and a search bar centered below. The headline runs Buick Headline at 56px in weight 500, but the dominant display treatment below the fold drops to weight 300 at 32px, the lightest typographic weight in the system. Where GMC pushes Stratum at weight 900 and Cadillac runs sharp black geometry, Buick lands on a warm-editorial register: antique gold accents, light headline weights, 16px card rounding, and photography that leans toward aspirational lifestyle rather than raw capability.

The DESIGN.md file packages 15 color tokens, 13 typography tokens, and 17 component definitions drawn from Buick's captured marketing surface. The palette is effectively monochromatic — charcoal dark (#222222) and near-white (#f6f5f4) handle nearly every surface, with antique gold (#cd9834) as the single chromatic accent across 368 occurrences, split evenly between text and border roles. Typography spans two families: Buick Headline (display tier, weight 300–500) and Buick Text (body tier, weight 400–500), both proprietary GM fonts with Arial fallbacks. The spacing system exposes the GM shared --gb-spacing-* ladder from 4px to 240px; section padding runs at 96px vertical, card internal padding at 16px.

Feed this file to an AI coding tool and it will reproduce Buick's specific moves: full-bleed vehicle photography as the hero surface, antique gold reserved for link accents and card borders rather than CTA fills, light-weight display headlines (300) for editorial warmth, and 16px card rounding with pill CTAs at 100px. The one move worth studying is the gold's role: it does 368 jobs across the page as text and border color without ever filling a button — the discipline keeps the automotive chrome feeling luxurious rather than promotional.

What makes it distinct

Antique gold as sole chromatic accent#cd9834 appears 368 times (189 text, 179 border), never as a background fill; the canvas stays charcoal or near-white
Display at weight 300, not weight 700Buick Headline runs at 32–56px in light 300 rather than bold, signaling aspirational restraint rather than truck-segment dominance
Two-typeface systemBuick Headline for all display and section titles, Buick Text for body, labels, and buttons; both proprietary with Arial fallback
16px default roundingcard tiles and modal surfaces all round at 16px, while pill CTA buttons reach 100px for a fully-rounded treatment
GB spacing laddera GM shared --gb-spacing-* custom-property system runs from 4px to 240px at documented increments, shared across GMC, Chevy, and Buick

Live at buick.com

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

buick.com

Explore Buick

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.

Buick design system FAQ

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

Buick — official site

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