Cadillac Design System

Overview

Cadillac's marketing site is the only luxury-automotive brand in this directory that treats ultra-light type as the primary authority signal. Whispered authority: where BMW grounds display in weight 700 and Mercedes reaches for serif gravitas, Cadillac runs CadillacGothic at weight 100 across the majority of its text surfaces, then pulls letter-spacing to 3.6–5px on section headings. The result sounds like a whisper that still fills the room. The system's near-black canvas (#282828) holds the typography in tension against full-bleed vehicle photography — the photography supplies emotional weight, the type supplies precision discipline.

The chromatic palette is deliberately thin. Two non-neutral colors share the entire page: electric citron (#e7e000), applied exclusively as borders and divider lines (235 border occurrences, zero background fills), and deep navy (#171473), reserved for the single primary CTA button. Unlike Ferrari, which holds Rosso Corsa for CTA fills and emotion, Cadillac places its brand color on the perimeter — structural rather than focal.

Shape language is unambiguously sharp. No border-radius value above 0px was captured across the entire marketing surface. Every button, card, vehicle tile, and input field carries square corners.

Key Characteristics:

• Near-black canvas at #282828 (907 combined occurrences as text and border) — not pure black; a slight warmth prevents the system from reading as a developer-tool dark theme.
• Electric citron (#e7e000) used only as structural accent — borders and dividers — never as a button fill or large surface color.
• CadillacGothic at weight 100 is the dominant type setting across labels and headings; the heaviest weight captured on most surfaces is 200.
• Letter-spacing at 3.6–5px on display headings — the widest tracked setting of any automotive brand in this directory.
• Universal 0px corner radius across every component.
• Deep navy (#171473) button carries just 20 total page occurrences — kept deliberately scarce.
• Photography-first layout: full-bleed hero and model-lineup shots supply all color and emotional energy; the typographic layer remains structurally thin.

Colors

Canvas & Surfaces

• Ink ({colors.ink} — #282828): frequency 907. Used as text (453), border (450), background (4). The near-black page canvas and primary text color — carries the site's entire dark chromatic mass. Wired from a single hex; not a mix of colors.
• Ink Deep ({colors.ink-deep} — #0d0d0d): frequency 14. Used as background only — the deepest floor tone applied to alternating section bands, slightly darker than the primary canvas.
• Ink Black ({colors.ink-black} — #000000): frequency 8. Used as border (3), shadow (1), bg (1), text (3). Pure black, used for minimal detail accents and one shadow instance.
• Canvas ({colors.canvas} — #ffffff): frequency 251. Used as text (109), border (106), background (8), gradient (28). The white contrast surface — appears on light editorial bands, model pricing tables, and featured-offer cards.
• Surface-1 ({colors.surface-1} — #f2f2f2): frequency 3. Used as background — a light off-white for card surfaces that need lift against the white canvas without going to a colored surface.
• Ink Muted ({colors.ink-muted} — #4b4b4b): frequency 5. Used as border (4), background (1). The mid-gray border tone for input fields and secondary dividers.
• Hairline ({colors.hairline} — #d3d5d6): frequency 1. A cool light-gray hairline tone for the finest dividers.

Brand Accents

• Citron ({colors.citron} — #e7e000): frequency 477. Used as text (242), border (235). Not a fill color — a perimeter accent. All 477 occurrences are either label text or structural borders; zero background fills. Citron is the page's electrical charge, applied in thin lines rather than surfaces.
• Primary ({colors.primary} — #171473): frequency 20. Used as border (10), text (9), background (1). The deep navy behind the primary CTA button — appears just 20 times across the entire page, making the button an unmistakable focal point.

Typography

Font Families

The system runs two members of the Cadillac proprietary type family: CadillacGothic for the primary voice (display, heading, body, button, label) and CadillacGothicNarrow for fine print and compact secondary labels. Fallbacks walk to Arial, NanumGothic (Korean script support), then generic sans-serif. No second non-Cadillac family appears in the marketing surface.

Hierarchy

Principles

Weight 100 is the system's dominant setting. The heaviest non-display weight in common use is 200, reserved for buttons and interactive labels. Display headings break to 400 — the only moment on the page that reads as conventional weight — but the letter-spacing at 4.32–5px compensates with air rather than mass. This is the opposite of how luxury brands typically signal authority: the discipline is in the space between letters, not the thickness of strokes.

Font Substitutes

CadillacGothic is proprietary. Inter at weight 100 with letter-spacing: 0.045em on headings and letter-spacing: 0.01em on body is the closest open-source approximation. The narrow variant maps to Inter Condensed or Barlow Condensed at matching weights.

Layout

Spacing System

• Base unit: 8px, consistent with the CSS variable ladder (--gb-spacing-8 through --gb-spacing-240).
• Tokens: {spacing.xs} 8px · {spacing.sm} 10px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 40px · {spacing.3xl} 64px · {spacing.4xl} 96px.
• Section padding: the CSS exposes --gb-spacing-96 (96px) and --gb-spacing-104 (104px) as major section cadence tokens.
• Card internal padding: 24px ({spacing.xl}) on featured-offer cards; 20px ({spacing.lg}) on model tiles.

Grid & Container

• Hero: full-bleed vehicle photography, 1440px wide, with the navigation overlay and offer copy centered within the image.
• Model lineup: horizontal scrolling row of vehicle thumbnail tiles at equal width, padding 0px 16px.
• Featured offers: centered section at max ~1280px, citron-border cards in a column layout.
• Icons/dealer locator: 4-column grid on desktop.

Rhythm

The page alternates between dark canvas sections (ink #282828 with white type) and white canvas sections (canvas #ffffff with ink type), with citron divider rules marking transitions. The rhythm is deliberate — two or three dark bands, one white band, repeat — so neither surface dominates monotonously.

Elevation

The captured surface shows essentially no shadow tier. The 4 background occurrences of #0d0d0d create visual depth between bands through surface-color contrast rather than shadow. One shadow occurrence of #000000 suggests a minimal tooltip or dropdown shadow, but it is not a system-wide elevation layer.

• Dark band vs. white band: the primary depth signal is section alternation — ink canvas vs. white canvas — rather than layered component elevation.
• Citron borders: the 1px citron rule acts as a separation signal rather than a depth signal.

Shapes

The radius scale is absolute zero. Every component in the extracted marketing surface carries 0px border-radius. This is the sharpest geometry among the automotive brands in the directory — Ferrari also uses sharp corners, but the extraction showed occasional 4px inputs. Cadillac's 0px includes inputs, buttons, cards, and all panels.

Sharp corners on luxury goods communicate precision-engineering heritage: the 1950s Cadillac tailfin is angular, not rounded. The digital system echoes that in every interactive surface.

Components

button-primary — Deep navy {colors.primary} fill (#171473), white text, CadillacGothic weight 200 at 14px / 1.6px tracking, 0px radius, 12×26px padding, 50px height. "VISIT IL SITE" is the canonical instance. The navy appears just 20 times on the page — the rarity is the CTA's authority.

button-secondary — Transparent fill, ink text, 1px ink border, 0px radius, 11×22px padding, 44px height. Used for secondary navigation actions.

button-citron — Transparent fill, citron text and citron border. Used for accent-CTA moments on dark-canvas bands where the electric yellow reads against the near-black.

top-nav — Ink canvas (#282828), 88px height, white text in label-md. The Cadillac crest centered above the nav links; the navigation is full-width with a 0px 16px horizontal gutter.

nav-link — Transparent background, white text, 14px / weight 200 / 1.6px tracking, 0px 16px padding. Ultra-light and widely-tracked, consistent with the body type system.

hero-heading — Ink (#282828) text on the photography overlay, CadillacGothic 28px / 400 / 5px letter-spacing. The display tier — confident through extreme tracking.

section-heading — White text on dark canvas, 24px / 400 / 4.32px — the section h2 treatment used on "FEATURED OFFERS" and similar panels.

body-paragraph — Ink text, 14px / 100 / 0.63px — the default body copy across white-canvas sections.

featured-offer-card — White canvas surface, 1px citron border on selected edges, ink text, 0px radius, 24px padding. Holds lease/finance rate, monthly payment, and CTA.

model-tile — White canvas, ink text, 0px radius, vehicle photograph top, label text below at 14px / 100.

dark-section — Ink canvas (#282828), white text, used for awards and dealer-locator bands.

card — Light surface-1 (#f2f2f2) fill, ink text, 0px radius, 24px padding.

citron-divider — 1px-height citron (#e7e000) horizontal rule used between sections and inside featured-offer cards.

text-input — White canvas, ink text, ink-muted border, 0px radius, 12×16px padding, 50px height.

footer — Ink canvas, white and light-gray text, body-sm narrow type, 40px padding.

Do's and Don'ts

Do apply citron (#e7e000) exclusively as a border and divider accent. The electric yellow reads against near-black precisely because it never fills a surface — the moment it appears as a background color, it reads as caution-tape rather than luxury trim.

Do hold display headings at weight 400 and increase letter-spacing to 4–5px rather than stepping to weight 700. The airiness of wide tracking is the system's authority signal; compressing it to a normal tracking at bold weight destroys the Cadillac cadence.

Do keep primary button (#171473) occurrences scarce. Its rarity (20 page occurrences) is what makes it legible as the single action that matters; multiply navy buttons across the page and the discipline collapses.

Do alternate dark (#282828) and white (#ffffff) section bands to create rhythm. The page's structural logic is surface alternation — the typography alone on a monotone canvas would lose its tension.

Don't introduce any corner radius above 0px. Adding even 4px rounding to a button or card softens the engineering-precision language the brand has built since the 1953 Eldorado. The system has no rounding anywhere; use {rounded.none} throughout.

Don't use the citron (#e7e000) for typographic emphasis in long-form body copy. At 14px / weight 100, citron text on white canvas fails WCAG AA contrast; it only passes against the near-black canvas where the system actually deploys it.

Don't render CadillacGothic at weight 600 or above on headings. The heaviest captured display weight is 400 on a 28px heading. Weight 600 would make the typography indistinguishable from any generic automotive brand and abandon the ultra-light-with-tracking identity.

Don't fill marketing hero sections with mid-gray placeholder backgrounds (#4b4b4b). The system depends entirely on vehicle photography for its emotional register; gray placeholders expose how thin the token system is without the photography layer.

Known Gaps

• EV-model surfaces: the Lyriq EV editorial reboot may expose additional brand tokens (accent tones, gradient treatments) not present in the general marketing homepage captured here.
• Hover and focus states: no hover captures were present in the extracted components; the state matrix (focus rings, button active-press colors) is undocumented.
• Mobile nav: the hamburger navigation on mobile likely collapses the wide-tracked headings into tighter spacing; those responsive breakpoints are not captured.
• Product configurator: the vehicle configurator at /configure/ uses a distinct interface with its own token layer — not represented here.
• Dark-mode offer modal: the offer modal visible in the hero uses overlay styles not fully captured in the static extraction.
• Dealer-locator inputs: the dealer search input likely carries different validation states than the resting input captured here.