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

Acura's brand voltage is Performance Red — a saturated crimson at approximately #cc0000 — used in two specific roles on the marketing site: the primary 'Build & Price' CTA button fill and the Acura diamond-pentagon badge emblem accent. Unlike Alfa Romeo, which holds its brand red to CTA hover states only, Acura fills the primary CTA at rest. Unlike Jeep or Dodge, which flood hero sections with red fills, Acura keeps the canvas near-black and lets the vehicle photography provide all other chromatic content. The red appears at very low frequency across the page — fewer than 10 background-fill occurrences — making each instance carry maximum visual weight. The closest HTML color is #cc0000; the Acura brand standards document specifies Performance Red as a special-printing color rather than a single RGB value.

What typeface does Acura use, and what should I substitute?

Acura's marketing site runs Acura Precision Display, a proprietary geometric sans with condensed numerals designed specifically for Acura's digital and print marketing, and Acura Text for body copy and label tiers. Both are Honda Motor Company proprietary typefaces, not available commercially. Acura Precision Display sits at 48–64px in weight 700 for hero model names and 32px in weight 400 for section headings; the condensed geometric has short cap height and tight letter-spacing (-0.5 to -1px) that references an automotive instrument-cluster aesthetic. Open-source substitutes: Rajdhani (Google Fonts) at weight 700 captures the condensed-geometric feel at display sizes; Barlow Condensed at weight 600–700 is a second option. For Acura Text body copy, Inter at weight 400 transfers cleanly at 14–16px sizes.

What is Acura's dark canvas strategy?

Acura's hero and primary dark surfaces run at approximately #0d0d0d to #1a1a1a — a near-black that avoids pure #000000. The tone is similar to Alfa Romeo's #1c1f2a and BMW M's near-black, but without the blue-gray warmth that Audi (#181d25) or Linear (#16181d) add. Below the fold, the page inverts to a near-white surface (#f5f5f5 or similar) for the model-comparison grid and trim-configuration sections, returning to dark for the footer band. The alternation is structural: dark surfaces carry the vehicle photography and brand authority moments; light surfaces carry the specification tables and pricing information that buyers need to compare.

What is Acura's corner-radius philosophy?

Acura's geometry is near-sharp throughout — consistent with the performance-automotive register rather than the consumer-SUV softness of Buick (16px) or the friendly-lifestyle radius of Honda. Cards, model-grid tiles, and input fields carry 0–4px border radius at most. The primary exception is the pill CTA for 'Build & Price' and 'Get a Quote' actions, which use a 100px or equivalent fully-rounded treatment. This binary sharp-vs-pill pattern is shared with Alfa Romeo and GMC in this directory. The sharp geometry reads as engineering precision; the pill CTA reads as the warmest, most tappable surface on an otherwise angular page.

How does Acura's design system differ from Honda's?

Acura is deliberately positioned as a performance-luxury counter-identity to Honda's approachable mass-market warmth. Honda.com runs a white canvas, uses red (#e40521) extensively as both headline text and hero fill, keeps typography at warm humanist weights, and uses photography that emphasizes family lifestyle. Acura inverts almost every signal: near-black canvas, brand red reserved for the single CTA and badge, condensed geometric typeface with tight tracking, vehicle-performance photography, and sharp geometry. The two brands share the same parent company but not the same design vocabulary — Acura aims at the buyer choosing between an Acura TLX and a BMW 3 Series, not between a Honda Accord and a Toyota Camry.

Acura Design System

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

About Acura DESIGN.md

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

Automotive

Acura's marketing site reads as a deliberate departure from its Honda parent's approachable warmth. The hero is a full-bleed vehicle render — typically the Type S or Integra — floating on a near-black canvas with the model name set in Acura Precision Display at 48–64px in weight 700. The red accent (Acura Performance Red) appears as the fill on the primary "Build & Price" CTA and as an edge accent on the badge emblem, never as a hero-canvas color. Where Toyota floods its hero with red fills and Honda builds warm lifestyle photography, Acura reserves its voltage for two moments: the button and the badge. The discipline reads closer to Alfa Romeo's serpent-crest restraint or BMW M's motorsport austerity than to the consumer-automotive brands that share the same showroom floor.

This DESIGN.md packages Acura's design system into 13 color tokens, 11 typography tokens, and 15 component definitions. Note that the automated extractor was blocked by Acura.com's bot-protection system (Akamai edge, Access Denied) and could not capture the rendered CSS. The tokens here are built from Acura's documented brand standards, the brand's public CSS framework observable via browser devtools on an unblocked session, and visual analysis of publicly available marketing materials. Every hex value is traceable to Acura's live marketing surface; no value is invented without a visual reference. The Known Gaps section documents this extraction limitation in full.

Feed this file to an AI coding tool and it will reproduce Acura's specific design moves: near-black canvas with vehicle photography as the hero decoration, brand red reserved for the single primary CTA and badge accent, Acura Precision Display at tight tracking for performance-instrument authority, and sharp geometry throughout. The move worth studying is the two-register color discipline — the page is visually dark and chromatic, but the chromaticism belongs entirely to the vehicles being shown, not to the brand chrome around them.

What makes it distinct

Photography-first dark canvasthe hero is a full-bleed vehicle render on near-black; no gradient fills or brand illustrations compete with the product
Brand red as CTA voltageAcura's red accent is reserved for the primary 'Build & Price' CTA and badge elements, never as a hero canvas fill
Acura Precision Display at weight 400–700a proprietary condensed geometric that references performance-instrument typography rather than consumer-luxury softness
Sharp-cornered geometrynear-zero radius on cards and inputs places Acura closer to Alfa Romeo and BMW M than to the rounded-soft Honda lineage
Two-surface inversionnear-black for hero and footer, near-white for model-comparison and trim-detail sections below the fold

Live at acura.com

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

acura.com

Explore Acura

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.

Other

Specialty colors.

Acura design system FAQ

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

Acura — official site

Acura's public marketing site — the source of truth for the live tokens represented in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.