What is Alfa Romeo's primary brand color?

Alfa Romeo's brand voltage is a deep crimson red at #ba0816, wired into the CSS as `--brand`, `--wlb-color-brand-1`, and `--wlb-component-button-accent-default-item`. Its hover state darkens to #8e0d25, wired as `--wlb-component-button-accent-hover-item`. The color does not appear as a rendered fill on the extracted market-selector page — it lives in CSS declarations and fires on accent CTA hover and active states. Against the charcoal canvas (#292b35), the deep crimson reads as urgency without the warmth of a Ferrari red, which sits at a brighter, more orange-shifted #da291c. Alfa Romeo's red pulls toward maroon, appropriate for the serpent-crest heritage dating to the 1910 Anonima Lombarda Fabbrica Automobili founding.

What typeface does Alfa Romeo use, and what are the key settings?

Alfa Romeo uses Sequel, a proprietary geometric sans with a single generic sans-serif fallback. Three distinctive settings appear in the captured surface: 11px / weight 400 / 1.5px letter-spacing on uppercase span labels (the dominant small-label treatment, 3 samples captured); 42px / weight 400 on the h1 hero heading; and 18px / weight 400 on h2 section headings. The uppercase tracking at 1.5px on small labels is the system's typographic signature — it reads like a data readout rather than an editorial headline. Inter at weight 400 with `letter-spacing: 0.14em` on small caps is the closest open-source substitute.

Why does Alfa Romeo use a charcoal canvas rather than pure black?

Alfa Romeo's canvas runs two charcoal tones — #292b35 (a warm dark navy-gray, wired as `--wlb-color-bg-6`, `--text-body`, and `--page-dark-mode`) and #1c1f2a (a slightly deeper near-black, wired as `--neutral-600`, `--wlb-color-text-heading`, and the gradient start-stop in `--wlb-gradient-black-left`). Neither is pure black. The dual-charcoal approach allows the page to layer depth — panels on the lighter #292b35 canvas, headings and borders on the darker #1c1f2a — without introducing a second chromatic tone. Ferrari uses a single near-black (#181818); Alfa Romeo uses two, creating a subtle tonal ladder invisible at casual glance.

What corner-radius style does Alfa Romeo use?

Sharp 0px, universally. The heroHeading extraction shows 0px border-radius, and no non-zero radius value appears in the captured component set. The Alfa Romeo CSS exposes no named radius token in the captured variables. Like Ferrari and Cadillac in this directory, the brand treats sharp geometry as the motorsport-precision signal — a soft-cornered button would conflict with the serpent-crest emblem's angular cross-and-serpent geometry.

Can I use this DESIGN.md to build a luxury automotive landing page?

Yes — feed the file to Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Alfa Romeo's discipline: two-tone charcoal canvas (#292b35 / #1c1f2a), Sequel at weight 400 with 1.5px uppercase tracking on labels, brand-red #ba0816 reserved for accent CTA and hover states only, and 0px sharp corners throughout. Note that the extraction captured the market-selector interstitial rather than the full model-page surface — the token set is built from CSS custom-property declarations, which are complete, but fewer rendered components were available than on a full brand homepage.

Alfa Romeo Design System

Alfa Romeo's marketing design system as a DESIGN.md file.

About Alfa Romeo DESIGN.md

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

Automotive

Alfa Romeo's marketing site occupies a distinctive position in the Italian luxury-automotive space: it reads darker and more technically austere than Ferrari or Maserati, closer in visual temperature to a motorsport broadcast graphic than to a Mediterranean road-trip poster. The charcoal canvas runs in two tones — a warm dark navy (#292b35) for panel backgrounds and a slightly deeper near-black (#1c1f2a) for headings and active states — with light text on top. The brand-red (#ba0816) is declared in the CSS as `--brand` and `--wlb-color-brand-1`, but the extraction hit the market-selector interstitial page, where the red appears in CSS custom properties rather than rendered fills. What renders is the type: Sequel, a proprietary geometric sans, at weight 400 with 1.5px letter-spacing on uppercase labels, giving every line item a timing-display precision that references the Giulia Quadrifoglio instrument cluster more than a brand brochure.

This DESIGN.md packages the Alfa Romeo design system tokens into a machine-readable spec. Inside: 14 color tokens derived from the full CSS custom-property declaration tree (canvas tones, brand-red and its hover-state hover-red, structural neutrals, state colors), 10 typography tokens running Sequel across display, body, label, and button tiers, a universal 0px border-radius, and 14 component definitions covering the market-selector landing, primary and accent buttons, top-nav, hero heading, and structural surfaces. The CSS exposes a fully-specified state system — success (#1d5b40), error (#eb143d), warning (#ff5c00), info (#0064cf) — alongside the brand-red accent, indicating the site carries a richer product-surface token set than the marketing capture alone shows.

Feed this spec to Claude or Cursor and it reproduces Alfa Romeo's discipline: two-tone charcoal canvas, Sequel at weight 400 with uppercase tracking, brand-red reserved for accent CTAs and hover states, and sharp 0px corners throughout. The move worth studying is the restraint on the red: Alfa Romeo's serpent-crest emblem is one of the most visually distinctive marks in automotive, yet the digital system treats the brand color as a rare perimeter accent rather than a surface-filling voltage — the same discipline Ferrari applies to Rosso Corsa, but with a deeper, darker canvas underneath.

What makes it distinct

Brand red at the perimeter#ba0816 wired as --brand appears only on accent CTAs and hover fills, never as the dominant surface; the canvas is charcoal
Sequel at weight 400 with 1.5px uppercase trackinga motorsport-label cadence rather than the editorial lightness of most Italian luxury brands
Charcoal canvas two-tone#292b35 (dark navy-gray) and #1c1f2a (deeper) layer the page rather than a single flat black
Near-zero color surfacethe market-selector page that extraction captured is functionally monochrome; brand red appears in CSS variables but not in captured rendered elements
Sharp 0px corners throughoutconsistent with the serpent-crest heritage brand's precision-geometry aesthetic

Live at alfaromeo.com

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

alfaromeo.com

Explore Alfa Romeo

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.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Alfa Romeo design system FAQ

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

Alfa Romeo — official site

Alfa Romeo'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.