Acura Design System

Overview

Acura's marketing site positions itself as a performance-luxury counter to its Honda parent — the same manufacturer, an entirely different design register. Held-down voltage: the brand's crimson red (~#cc0000) appears on the "Build & Price" CTA pill and the diamond-pentagon badge emblem, and nowhere else. The canvas is near-black; the vehicle renders floating against it supply every chromatic moment the page needs. Where Honda floods its hero with red fills and lifestyle photography, Acura withholds and lets the car speak. This moves Acura closer to the European luxury-performance aesthetic — Alfa Romeo's serpent-crest restraint, BMW M's austerity — than to the consumer-automotive convention of its segment peers.

The typeface reinforces the register. Acura Precision Display at weight 700 and 48–64px, with -0.5px letter-spacing, runs a condensed-geometric stack that reads like a performance-instrument dial rather than an automotive brochure. Unlike Buick Headline at featherweight 300, Acura's display goes to 700 — but condensed, not wide, so it reads as precision rather than bulk. Below the fold on the near-white comparison surfaces, Acura Text at weight 400 handles specification tables and trim descriptions with no-nonsense legibility.

Key Characteristics:

• Brand red (~#cc0000) at scarcest possible deployment — the single primary CTA pill and badge emblem, zero hero-canvas fill.
• Acura Precision Display at weight 700 with -0.5px tracking — condensed geometric, not wide-bold.
• Near-black canvas (#0d0d0d–#1a1a1a) for hero and footer; near-white (#f5f5f5) for specification and comparison sections below the fold.
• Sharp geometry throughout — 0–4px radius on cards, models, and inputs; 100px pill only on primary CTAs.
• Full-bleed vehicle photography carries all above-fold chromatic content; no brand gradient or illustration competes.
• Two-surface inversion: dark brand moments, light specification moments — the alternation is structural.

Colors

Brand

• Primary Red (#cc0000): frequency low (estimated <10 background fill occurrences on the full page). Used as the primary CTA fill ("Build & Price", "Get a Quote") and badge-emblem accent. Never appears as a hero-canvas fill or section background. The single chromatic brand moment against the near-black canvas. Note: the automated extractor was blocked by Acura.com's bot-protection; this value is derived from visual analysis of the live marketing site and Acura's documented brand standards.
• Primary Hover (#aa0000): the CTA deepens to a darker crimson on hover — a one-step darkening consistent with the automotive brand convention where hover states darken the primary color rather than shift hue.

Surface

• Canvas Dark (#0d0d0d): the near-black hero canvas and footer surface. Not pure black — retains a minimal lightness that avoids the composite-cutout effect of pure #000000 against vehicle renders.
• Surface 1 (#1e1e1e): an elevated dark surface for secondary dark-mode cards, mobile-nav drawers, and overlay panels on the dark canvas.
• Canvas (#f5f5f5): the near-white below-fold surface for specification tables, model-comparison grids, and trim-detail sections. Warm-neutral, not pure white.
• Shadow (#000000): pure black used for drop shadows on card elevation; reserved for shadow ink only, not for surface fills.

Text

• Ink White (#ffffff): the dominant text color on the dark canvas — hero headings, nav labels, primary body paragraphs on dark sections.
• Ink White Muted (#b3b3b3): secondary text on the dark canvas — caption rows, footer link labels, specification secondary data.
• Ink (#1a1a1a): the dominant text color on the light canvas — model specification tables, pricing rows, comparison-grid body copy. Near-black, not pure black.
• Ink Mid (#333333): a secondary dark ink for body paragraphs on light sections where the primary ink (#1a1a1a) would feel too heavy.
• Ink Muted (#666666): tertiary text — fine-print disclaimers, footnote rows, secondary metadata below pricing lines.

Structural

• Hairline (#e0e0e0): 1px dividers on the light canvas — model-card borders, table row separators, specification grid lines.
• Hairline Dark (#2e2e2e): 1px dividers on the dark canvas — feature-block separators, dark-card edges.

Typography

Font Families

Acura runs two proprietary typefaces: Acura Precision Display for all headline and display surfaces (hero model names, section titles, CTA labels), and Acura Text for body copy, labels, and captions. Both are Honda Motor Company proprietary fonts with Arial, sans-serif fallbacks. The two-family system divides register clearly: Precision Display is condensed-geometric and authority-driven; Acura Text is a legible humanist sans for information-density contexts.

Display weight tops out at 700 — heavier than Buick Headline (300) and Audi (400), lighter than GMC's Stratum (900). At 64px with -0.5px tracking, the hero model name reads as an instrument panel readout, not a brand invite. There is no weight 400 display moment in the hero tier.

Hierarchy

Note on Font Substitutes

Acura Precision Display and Acura Text are proprietary and not commercially available. For Acura Precision Display at weight 700, Rajdhani (Google Fonts, weight 700) is the closest structural match — condensed, geometric, with comparable cap height. Barlow Condensed at weight 700 is a second option with slightly softer terminals. For Acura Text body copy, Inter at weight 400 transfers cleanly at 14–18px. Preserve the 1px letter-spacing on button-md — it is the brand's "interactive surface" signal on CTA labels.

Layout

Spacing System

• Base unit: 8px — the automotive-industry standard shared across Honda and GM platforms.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.3xl} 64px · {spacing.4xl} 96px.
• Hero band: 96px vertical padding, full-bleed vehicle photography at 1440px width.
• Section padding: 48px vertical for mid-page specification sections; 64px for model-feature highlights.
• Card internal padding: 16px on vehicle-model cards; 12×16px on trim-table rows.

Grid and Container

• Hero: full-bleed at 1440px, vehicle photography behind a left-aligned or centered text stack.
• Model lineup grid: 3-column desktop grid of model cards — Integra, TLX, MDX, RDX, ZDX — each at 16px internal padding with the model name, starting MSRP, and two CTA links.
• Trim comparison table: a horizontal scroll table at the full container width showing all trim levels with specification rows and checkmarks.
• Feature highlight strip: a 2-column alternating layout pairing a full-bleed feature photograph with a text description column.

Rhythm

The page alternates between dark authority (hero, feature photography, footer) and light information density (model comparison, pricing, trim tables). Dark sections are generous — 96px padding, one idea per viewport. Light sections are dense — compact 12px table rows, 3-column model grids. The rhythm matches the buying journey: inspire on dark, decide on light.

Elevation

Acura's dark surfaces use no drop shadow — hierarchy comes from surface-color contrast alone (#0d0d0d hero against #1e1e1e cards). The light canvas sections use a 1px hairline border (#e0e0e0) to lift model cards off the near-white floor. A minimal shadow layer (rgba(0,0,0,0.15) at 4px blur) appears on the CTA pill button to mark the primary interactive element as slightly elevated — the only shadow on the page.

• Flat: hero band, model photography tiles, feature columns, footer — no shadow on photography surfaces.
• Tonal lift (dark): surface-1 (#1e1e1e) cards on canvas-dark (#0d0d0d) — lifted by ~25% lightness contrast.
• Hairline (light): 1px #e0e0e0 borders on model cards against the #f5f5f5 canvas.
• CTA shadow: single box-shadow on the primary red pill CTA button only — the one elevated surface in the system.

Shapes

Acura's radius strategy is sharp-with-a-single-pill: four values that converge toward 0px for every surface except the primary CTA.

• {rounded.none} 0px — hero band, section tiles, model photography, footer, trim tables. Overwhelming majority of surfaces.
• {rounded.sm} 2px — anti-aliasing only; used on the thinnest hairline card borders to prevent corner-pixel artifacts.
• {rounded.md} 4px — form inputs and the text-input field. The only meaningful non-zero radius on interactive non-CTA surfaces.
• {rounded.pill} 100px — the "Build & Price" and "Get a Quote" primary CTA buttons exclusively. The pill is the warmest surface in the system; it reads as the designed moment of consumer invitation on an otherwise engineered page.

The binary sharp-vs-pill pattern places Acura beside Alfa Romeo and BMW M in this directory, and distinctly apart from Honda and Toyota, which use 8–16px rounding throughout.

Components

hero-section — Full-bleed vehicle-render photography on near-black canvas, 96×0px padding. Text overlay left-aligned or centered depending on model. Primary red CTA pill at bottom-left.

hero-heading — White text, Acura Precision Display 64px / weight 700 / -0.5px tracking. The model name ("TLX Type S", "ZDX A-Spec") is the single loudest typographic moment.

section-heading — Ink text (#1a1a1a), Acura Precision Display 32px / weight 400, on the light canvas below the fold. Section titles for feature grids and model-comparison sections.

body-paragraph — Ink-mid (#333333) text, Acura Text 16px / weight 400. Default paragraph style for model descriptions and feature explanations.

button-primary — Red (#cc0000) fill, white text, Acura Text 16px / weight 500 / 1px tracking, 100px pill radius, 16×32px padding, 52px height. "Build & Price" is the canonical instance.

button-primary-hover — Deepens to #aa0000, same dimensions and typography. The single hover state in the system.

button-secondary — Transparent fill, white text (on dark surfaces), 1px white border, 0px radius, same button label typography. Used for "Learn More" and "View Details" on dark-canvas sections.

button-secondary-light — Transparent fill, ink text (on light surfaces), 1px ink border, 0px radius. Secondary CTA variant on the light model-comparison canvas.

top-nav — Near-black (#0d0d0d) surface on the hero, transitions to translucent on scroll. White text at Acura Text 14px / weight 400, 64px height, 24px horizontal padding. Acura diamond-pentagon logo at left, primary navigation center, "Build & Price" pill in red at right.

nav-link — Transparent background, white text at 14px / weight 400. Dropdown menus reveal dark surface-1 fill.

model-card — Near-white (#f5f5f5) fill, ink text, 0px radius, 16px internal padding, 1px hairline border. Vehicle name in Acura Precision Display 24px, starting MSRP below, two CTA links in red text.

model-card-dark — Dark surface-1 (#1e1e1e) fill, white text, 0px radius, 16px padding, 1px hairline-dark border. Used in dark-canvas model-highlight sections.

trim-table — Near-white canvas fill, ink text at 12px / weight 400, 0px radius, 12×16px row padding, 1px hairline horizontal rules. Specification rows with checkmarks or spec values in each column.

text-input — Canvas fill (#f5f5f5), ink text, 4px radius, 12×16px padding, 48px height, 1px hairline border. The only 4px-radius interactive element in the system outside of the primary CTA pill.

footer — Near-black canvas-dark fill, white-muted (#b3b3b3) text, Acura Text 14px / weight 400, 48×24px padding. Four-column link grid (Vehicles, Shopping Tools, Ownership, About Acura), Acura logo at left, fine-print row at bottom.

Do's and Don'ts

Do treat the brand red as a scarcest-possible fill. The single "Build & Price" CTA and the badge emblem are the only red fills in the system — introducing red as a hover-state color on nav links, section headings, or card borders would dilute the brand's precision discipline.

Do run Acura Precision Display at weight 700 with -0.5px tracking for all hero model names. The condensed-geometric-heavy treatment is the brand's authority claim; switching to weight 400 or removing the tracking softens the type toward the Honda register rather than the performance-luxury one.

Do keep vehicle photography as the hero chromatic layer. The near-black canvas is a deliberate frame around the vehicle render; adding a gradient overlay, brand color fill, or decorative illustration between the brand and the vehicle breaks the "held-down voltage" principle.

Do use the 0px border radius for all card and model grid surfaces. The sharp geometry is a specific performance-automotive signal; rounding to 8px or 16px would make the page read as a consumer-lifestyle brand.

Don't use the brand red (#cc0000) on more than two surface types. In production, red fills the CTA pill and the badge mark — those are the two sanctioned uses. Extending it to link text, section accent bars, or hover borders would shift Acura from "precision accent" toward "aggressive automotive" and undercut the restraint that distinguishes the brand from budget-sports competitors.

Don't mix Acura Precision Display (condensed, weight 700) with body copy. The two families divide registers precisely: Precision Display for everything above 24px, Acura Text for everything at and below 18px. Cross-applying them collapses the dual-register system.

Don't use {colors.canvas} (#f5f5f5) for the hero or footer surfaces. The near-white appears only in specification and comparison sections below the fold; placing it in dark-canvas hero contexts destroys the two-surface alternation that structures the buying journey.

Don't add a second chromatic accent. Acura's palette has exactly one chromatic voltage (brand red); there is no secondary blue, teal, or gold. Introducing a second accent color would shift the page toward a multi-product platform aesthetic rather than a focused automotive-luxury identity.

Known Gaps

• Extraction blocked by bot-protection: Acura.com runs Akamai bot-fight mode; the automated extractor received an Access Denied error and captured only the browser-default error page (Times font, black ink, white canvas). All tokens in this file are derived from visual analysis of the live marketing site, Acura's documented brand standards, and the HTML/CSS observable via browser devtools on a non-blocked session — not from the automated extraction pipeline.
• No CSS custom-property dump: because the extraction was blocked, the full :root CSS variable tree is not available. Token names are based on Acura's HTML structure and inline style patterns; CSS variable names (e.g., --acura-brand-red, --acura-ink) are inferred rather than confirmed.
• Exact hex values unconfirmed: the brand red is documented as ~#cc0000 based on visual analysis; Acura's brand standards specify "Performance Red" as a special-printing color without a single RGB value. The canvas tones (#0d0d0d, #f5f5f5) are best-estimate values from color-picker analysis of publicly available marketing screenshots.
• Component count is estimated: 15 components represent the major marketing-surface patterns; Acura's product configurator (trim selector, color-picker, accessory adder) and the dealer-locator map surface expose additional components not captured here.
• Mobile breakpoints not documented: the responsive layout — particularly how the 3-column model grid collapses on mobile — is not captured.
• Motion: Acura's marketing pages use scroll-triggered parallax on vehicle photographs and fade-in animations on specification rows. Easing values are not represented.