Buick Design System

Overview

Buick's marketing site occupies the aspirational-but-accessible tier of the GM portfolio — warmer than Cadillac's cold black precision, softer than GMC's industrial weight. Whispered gold: the antique gold (#cd9834) accent does not fill buttons or hero panels; it traces the edges — border rules on vehicle cards, link text in the offers strip, divider lines between sections. At 368 total occurrences it is omnipresent, yet always subordinate to the charcoal-and-cream base. Where Toyota and Honda deploy their brand colors as CTA fills that shout for attention, Buick's gold whispers from the margin.

The display typeface reinforces the register. Buick Headline at weight 300 and 32px — lighter than any competing truck or SUV brand in this directory — is the brand's editorial signal. GMC runs Stratum at weight 900; Buick counters with a featherweight 300 that reads closer to a Condé Nast caption than a horsepower spec. The hero h1 climbs to 56px / weight 500, the single bold moment, but the section-level display returns to 300 throughout. Buick Text handles body and CTA labels in weights 400–500, and both fonts share an Arial fallback.

Key Characteristics:

• Antique gold (#cd9834) as the sole chromatic token — 189 text occurrences and 179 border occurrences, zero background fills.
• Buick Headline at weight 300 for section display — the lightest display weight in the GM portfolio.
• Two-surface canvas: charcoal (#222222) for hero and footer, warm near-white (#f6f5f4) for lineup grids and editorial bands.
• 16px default card rounding, pill CTAs at 100px — a binary scale without a middle tier.
• Full-bleed vehicle photography carries every decorative job above the fold; no brand illustrations or gradient overlays.
• GM shared --gb-spacing-* custom-property ladder drives all spacing, 4px to 240px on an 8px base.
• Vehicle lineup grid renders trim names in Buick Text weight 500 at 20px with gold-colored offer labels above.

Colors

Brand

• Antique Gold (#cd9834): frequency 368. Used as text (189) and border (179), never as background fill. Runs as vehicle-card border rules, offer-label text, link accents, and section divider lines. The single chromatic moment on a page that is otherwise charcoal and near-white. Not a warm yellow — the oklch hue sits at 79°, closer to a muted honey than to a saturated Buick-of-the-1970s gold.

Surface

• Canvas (#f6f5f4): frequency 35 as background. The warm near-white that hosts the vehicle lineup grid, special-offers section, and editorial content bands. The extractor merged #ffffff, #f0f0f0, and #f6f5f4 into this single token — all three are near-identical in practice.
• Canvas Dark (#000000): frequency 7, primarily the hero band overlay and nav background on scroll. Absent from most surfaces but structurally important for the full-bleed photography treatment.
• Hairline (#f0f0f0): captured within the canvas cluster. Used as 1px card border rules on the vehicle trim cards, separating vehicle rows on the near-white canvas.

Text

• Ink (#222222): frequency 601 total (301 text, 300 border). The dominant dark tone — nav labels, section headings, and all body text on the near-white canvas. Not pure black; at lightness 25% it reads slightly warmer.
• Ink Secondary (#333333): frequency 347 (173 text, 173 border, 1 shadow). The rendering tone for hero-overlay body text and most paragraph content — slightly lighter than ink, visually indistinguishable to most readers but consistently used across component extractions.
• Ink Muted (#6f6f6d): frequency 2. Reserved for fine-print captions, disclaimer text, and secondary metadata. A warm gray with a hint of sage (oklch hue 107°).

Typography

Font Families

The system runs two proprietary GM typefaces: Buick Headline for every display and section-heading surface, and Buick Text for body, label, button, and link text. Both fall back to Arial, sans-serif. There is no web-font stack beyond Arial — if Buick's fonts fail to load, the page degrades to system Arial rather than a web-safe fallback.

The pairing divides labor clearly: Buick Headline handles the three display sizes and section h3 titles; Buick Text handles the remaining ten token slots. Weight strategy is the distinctive move — Buick Headline at 300 is lighter than Cadillac (400), GMC (900), and Toyota (700) at their respective display tiers.

Hierarchy

Note on Font Substitutes

Buick Headline and Buick Text are proprietary GM fonts, not available via Google Fonts or open-source channels. For Buick Headline at weight 300, Outfit at weight 300 or Nunito at weight 300 replicates the light editorial feel at display sizes. For Buick Text body copy, Inter at weight 400 transfers cleanly at 14–16px. Preserve the 1px letter-spacing on label-md and button-md tokens — that tracked weight-500 treatment is the brand's CTA identity signal and cannot be dropped.

Layout

Spacing System

• Base unit: 8px, consistent with the exposed --gb-spacing-8 custom property.
• 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.
• Hero vertical padding: 96px top and bottom, giving the photography full breathing room.
• Card internal padding: 16px on all sides for vehicle trim cards; 32px for the Enclave feature-detail panel.
• Button padding: 16px × 32px (height 48px) — the primary CTA is notably tall for an automotive button, likely driven by touch-target accessibility on the mobile-first SUV buyer experience.

Grid and Container

• Hero: full-bleed at 1440px width with vehicle photography behind a centered text stack.
• Vehicle lineup grid: 3-column at desktop, showing trim-level cards for Encore GX, Envista, Envoy, Enclave. Each card carries a vehicle photograph, trim name, MSRP, and 2–3 CTA links in antique gold.
• Special offers strip: 3-column grid of offer cards, each in warm near-white with fine-print disclaimers.
• News / editorial section: 2-column or 3-column card grid showing editorial photography and article titles.

Rhythm

The page alternates between dark hero photography (charcoal canvas, white text) and light information architecture (near-white canvas, charcoal text). The transition is abrupt — no gradient transition band — which reads as deliberate sectional clarity. Section vertical padding anchors at 48px for light editorial sections and 96px for full-bleed dark moments.

Elevation

Buick's system uses no visible shadow tier. The 1px antique gold border rule on vehicle-trim cards does the elevation job: against the near-white (#f6f5f4) canvas, a hairline border in gold reads as a contained surface rather than a flat tile. The modal overlay (the market-selector drawer) uses a 16px-rounded white surface over a dark scrim — no shadow, just high surface-color contrast.

• Flat: hero, section bands, footer — no shadow rendered.
• Card surface: 1px gold hairline border at {rounded.lg} on white canvas. The gold border is both the elevation signal and the brand accent simultaneously.

Shapes

The radius scale is binary with a pronounced jump:

• {rounded.none} 0px — hero band edges, section dividers, footer.
• {rounded.sm} 4px — tag chips, fine-print badges.
• {rounded.md} 8px — secondary buttons and form inputs.
• {rounded.lg} 16px — the dominant surface rounding (24 occurrences). Vehicle trim cards, modal overlays, offer cards, news cards.
• {rounded.pill} 100px — primary CTA buttons only ("View Our Lineup", "Explore Offers"). The pill jumps from 16px card rounding to full-pill at 100px with no middle tier.

The 16px-to-100px jump is the same binary pattern seen in GMC and Chevrolet within the GM portfolio. Consumer SUV buyers see cards at 16px and CTA buttons as pill-shaped interactive elements — the radius shift signals affordance.

Components

hero-section — Full-bleed vehicle photography canvas at charcoal/black (#000000 overlay on photo), 96×0px padding. Holds the hero heading, a search-bar module, and scroll-down indicators.

hero-heading — White text on the photography canvas, Buick Headline 56px / weight 500. "2026 Enclave" is the canonical instance, rendered at the center-bottom of the hero photograph.

section-heading — Ink-secondary (#333333) text in Buick Headline 32px / weight 300. Used for "Find your perfect Buick", "2026 Enclave", and editorial section titles on the near-white canvas.

body-paragraph — Ink-secondary text at Buick Text 16px / weight 400. Default running text for offer descriptions, editorial blurbs, and disclaimer paragraphs.

button-primary — Near-white (#f6f5f4) fill, ink-secondary text, 8px radius, 16×32px padding, 48px height. No border — the button sits against white canvas and relies on fill contrast alone.

button-pill — Same near-white fill, ink-secondary text, at 100px pill radius. The dominant CTA treatment on lineup pages: "View Our Lineup", "Explore Offers", "Build & Price".

button-secondary — Transparent fill, ink-secondary text, 1px ink border, 8px radius. Used for secondary actions like "Learn More" on vehicle detail cards.

top-nav — Transparent on the hero photograph; white on scroll. Holds the Buick tricolor shield at left, 5 top-level links center, and "Find a Dealer" + "Login" at right. Height 64px with 16px horizontal padding.

nav-link — Transparent background, charcoal ink text at 16px / weight 400. No hover background visible in the captured surface.

vehicle-card — Near-white canvas fill, 16px radius, 1px hairline (#f0f0f0) or gold (#cd9834) border, 16px internal padding. Holds vehicle photograph at top (no padding), trim name, MSRP, and 2–3 CTA links in antique gold.

vehicle-card-title — Ink-secondary text in Buick Text 20px / weight 500. The trim name label ("Encore GX", "Envoy") above the MSRP line.

offer-label — Antique gold (#cd9834) text in Buick Text 16px / weight 500 with 1px letter-spacing. The APR or financing teaser ("0.9% APR for well-qualified buyers") above offer card details.

card-grid — Near-white surface, 16px radius, 16px padding. Container for editorial news cards and ownership-benefit tiles below the vehicle lineup.

section-light — Near-white (#f6f5f4) surface, charcoal text, 48px vertical padding. Information-density sections for the lineup grid and offers band.

section-dark — Charcoal (#222222) surface, white text, 48px vertical padding. Used for footer and editorial "Latest from Buick" news band.

caption-fine-print — Muted ink (#6f6f6d) text at Buick Text 12px / weight 400. Disclaimer rows, MSRP footnotes, legal fine print below offer cards.

footer — Charcoal (#222222) surface, white text, Buick Text 14px, 48px vertical padding. Four-column link grid (Vehicles, Shopping Tools, Customer Support, My Buick) with the tricolor Buick shield at right.

Do's and Don'ts

Do treat antique gold as a border and text color, not a fill. The 368 occurrences of #cd9834 are split between text links and 1px card borders — placing it as a button fill or background panel would contradict the system's entire gold-as-edge discipline.

Do use Buick Headline at weight 300 for section-level display. The light weight is deliberate aspiration signaling — bumping to weight 500 on section h2s would push the page toward a GMC or Chevrolet register.

Do keep the hero at full-bleed vehicle photography width (1440px). The system's hero has no decorative layer between the brand and the product; adding a gradient overlay or brand illustration over the photography would break the compositional discipline.

Do maintain the 16px card radius throughout the lineup grid. The 16px rounding reads as approachable consumer-SUV warmth; dropping to 4px or 0px would read as truck-segment industrial.

Don't use #cd9834 as a button fill or hero-band background. Unlike competitors that use their brand color for primary CTAs, Buick's gold is reserved entirely for edges and links. A gold-filled CTA button would read as promotional rather than aspirational.

Don't drop the 1px letter-spacing from {typography.button-md} and {typography.label-md}. The tracked weight-500 treatment (1px spacing) is what distinguishes the button label from body text at the same 16px size; removing it collapses the visual hierarchy on the CTA.

Don't introduce a shadow tier. The card border (1px antique gold or hairline) is the elevation signal; adding a drop shadow would double-mark the card edge and feel inconsistent with the flat near-white canvas.

Don't use {colors.ink} (#222222) directly on the near-white canvas for display headlines — the captured extraction shows all section headings use ink-secondary (#333333). The #222222 token is the nav and border color; the slightly lighter #333333 is the display text color.

Known Gaps

• Bot-blocked on first extraction attempt: the acura.com extractor captured an Access Denied page; this note applies only to Buick — Buick.com extracted successfully.
• Hover states: documented for none of the button components; the marketing-surface extraction does not expose CSS :hover rendering. The gold border on vehicle cards is likely the hover signal for nav links.
• Dark mode: the marketing site appears light-mode-only; no dark-surface CSS custom properties were exposed in the extraction beyond the charcoal canvas variables.
• Mobile breakpoints: the --gb-spacing-* custom-property system has mobile variants not captured in the desktop extraction. The vehicle lineup likely shifts from 3-column to 1-column at mobile.
• Form components: no input, select, or form extraction was available from the marketing surface. The search bar in the hero uses undocumented internal components.
• Motion and animation: the hero has a scroll-triggered fade on the headline text overlay; easing values are not captured.
• Dealership-finder components: the map and filter surfaces on the dealer-locator page expose a richer component set not represented here.