Alfa Romeo Design System

Overview

Alfa Romeo's digital system occupies a tonal position unlike any other Italian automotive brand. Motorsport charcoal: where Ferrari's near-black is warmed to #181818 and carries Rosso Corsa at the focal point, Alfa Romeo layers two charcoal tones — the warm dark navy #292b35 and the deeper #1c1f2a — and holds the brand-red (#ba0816) almost entirely off the rendered marketing surface, wiring it instead into CSS hover and accent states. The page reads closer to a Formula 1 timing screen than a southern-European road-trip brochure.

The typographic signature is Sequel at a single weight (400) across every tier, differentiated entirely by size and tracking. Small-caps labels run at 11px with 1.5px letter-spacing — the same tracking interval a lap-time display uses. Display headlines run at 42px with normal tracking. There is no italic, no serif, no second family. Unlike the ultra-light weight-100 CadillacGothic approach or Ferrari's restrained 500 display, Alfa Romeo holds everything at 400 and uses tracking alone to create hierarchy between tiers.

The brand's CSS custom-property tree reveals a complete state-color set (success, error, warning, info) and a richly-specified button taxonomy (primary, secondary, tertiary, accent, info, success, error, warning, disabled states), indicating the marketing site surface is only a thin slice of a broader product design system.

Key Characteristics:

• Two-tone charcoal canvas: #292b35 (panel/background) and #1c1f2a (heading/border) — not a single flat dark, a tonal ladder.
• Brand-red #ba0816 wired as --brand in CSS but kept off the rendered marketing surface — reserved for accent CTAs and hover fills.
• Sequel at weight 400 across every typographic role, with 1.5px letter-spacing on all uppercase label contexts.
• Universal 0px corner radius on every interactive element.
• State-color system (success/error/warning/info) fully declared in CSS custom properties, indicating a product-surface token set beyond marketing.
• No gradient fills captured on the rendered surface, though CSS declares dark-to-transparent gradients for editorial overlays.
• Near-white canvas (#f4f4f4) used for the market-selector surface — not pure white; a cooler off-white consistent with the brand's technical rather than warm palette.

Colors

Brand

• Primary ({colors.primary} — #ba0816): frequency 0 rendered, but wired as --brand, --wlb-color-brand-1, and --wlb-component-button-accent-default-item. Deep crimson brand voltage — darker and more maroon-shifted than Ferrari's Rosso Corsa. Appears on accent button fills and fires on hover state transitions.
• Primary Hover ({colors.primary-hover} — #8e0d25): wired as --wlb-component-button-accent-hover-item. The darkened press-state variant — maroon deepened toward burgundy.

Canvas & Surfaces

• Canvas ({colors.canvas} — #f4f4f4): frequency 64. Used as text (32), border (32). The light page surface — a cool near-white that reads as technical rather than warm cream. Wired across 17 CSS variables including --wlb-color-bg-1, --neutral-100, and --white.
• Ink Charcoal ({colors.ink-charcoal} — #292b35): frequency 3. Background surface for dark panels and hover states. The dominant dark canvas color wired as --text-body, --wlb-color-bg-6, and --page-dark-mode.
• Ink Deep ({colors.ink-deep} — #1c1f2a): frequency 0 rendered; wired as --neutral-600, --wlb-color-text-heading, and gradient overlay colors. The deepest page tone.
• Surface-1 ({colors.surface-1} — #e5e5e5): wired as --neutral-200, --wlb-color-bg-2, and section background. The lightest elevated surface tone.

Text

• Ink ({colors.ink} — #000000): frequency 2. Primary text and border color on light surfaces. Wired as --wlb-color-brand-black, --wlb-component-teaser-heading, and --wlb-component-button-secondary-and-tertiary-default-text.
• Ink Muted ({colors.ink-muted} — #595959): wired as --wlb-generic-color-text-body, --neutral-400. Secondary text — captions, disabled labels, supporting copy.
• Disabled ({colors.disabled} — #686868): wired as --light-1-hover. Disabled-state text for buttons and inputs.

Hairlines

• Hairline ({colors.hairline} — #b6b6b6): wired as --light-2-hover, --grey-1. The mid-gray hairline tone for secondary borders and dividers.
• Hairline Light ({colors.hairline-light} — #c4c4c4): wired as --neutral-300, --wlb-component-button-*-disabled-item. Disabled-state fills and lighter dividers.

Semantic

• Info ({colors.info} — #0064cf): wired as --info, --light-accent-hover, --wlb-color-states-info-bkg. The informational state color.
• Success ({colors.success} — #1d5b40): wired as --success, --wlb-color-bg-5. The success/confirmed state color.
• Error ({colors.error} — #eb143d): wired as --error. The error/destructive state color.

Typography

Font Family

The system runs Sequel — a proprietary geometric sans — as the single typeface across every text role. The fallback is generic sans-serif only; no Arial, system-ui, or brand-specific intermediate. Sequel has proportions closer to geometric sans designs (Futura, Avenir) than to humanist sans; the 42px h1 captures confirm a tall x-height and even strokes consistent with geometric construction.

Hierarchy

Principles

Weight 400 is the only weight in use across every tier. The hierarchy is built entirely through size and tracking rather than weight variation. The 1.5px letter-spacing on small-caps and button labels is the typographic signature: at 11px, 1.5px tracking produces a spread that reads as a data-display rather than a marketing label. This is the inverse of how most automotive brands signal performance — instead of heavy weight, Alfa Romeo uses track width.

Font Substitutes

Sequel is proprietary. Futura PT at weight 400 with matching letter-spacing is the closest geometric substitute. Avenir Next at the same weight and tracking also works at body sizes. Avoid humanist sans (Inter, Neue Haas Grotesk) — the geometric construction is load-bearing for the motorsport-precision cadence.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 16px · {spacing.base} 17px · {spacing.lg} 24px · {spacing.xl} 25px · {spacing.2xl} 48px · {spacing.3xl} 54px.
• Button padding: 17px top/bottom, 24px sides — the 17px vertical produces a 48px natural button height at 14px type.
• Section padding: {spacing.2xl} (48px) as the standard vertical section gutter.

Grid & Container

• Market-selector page: centered column at roughly 800px max-width, with market-region buttons in a 2-column grid.
• Hero: full-bleed dark canvas, vehicle photograph behind, centered heading at {spacing.md} 0px 20px horizontal padding.

Rhythm

The captured market-selector page uses a single centered column — region buttons in rows, heading above. The full model-page surface (not captured due to cookie wall) would use the horizontal photography-first layouts typical of Alfa Romeo's editorial grid, as inferred from the full CSS custom-property set.

Elevation

The captured surface reveals no shadow layer. The CSS declares rgba(28, 31, 42, *) as gradient overlay components (the --wlb-gradient-black-left and --wlb-gradient-black-top variables), suggesting editorial photo overlays rather than UI component shadows. Depth on the charcoal canvas comes from the two-tone surface ladder (#292b35 over #1c1f2a) rather than from drop shadows.

Shapes

0px everywhere, universally. The heroHeading component carries borderRadius: 0px; no non-zero radius value was captured from the marketing surface or CSS custom properties. Unlike Bentley (which uses small 4px rounding on interior surfaces) or BMW (which uses a generous pill on CTAs), Alfa Romeo applies the same sharp geometry across every interactive element.

Components

button-primary — Black (#000000) fill, canvas (#f4f4f4) text, Sequel 14px / 400 / 1.5px tracking, 0px radius, 17px top/bottom padding. The base primary action for market selection.

button-primary-hover — Transitions fill to charcoal (#292b35) on hover, maintaining canvas text color.

button-secondary — Transparent fill, black text, 1px black border, 0px radius. Secondary alternative action.

button-secondary-hover — Fill transitions to charcoal (#292b35), text to canvas on hover.

button-accent — Brand-red (#ba0816) fill, canvas text, 1px brand-red border, 0px radius. The accent CTA treatment for primary brand moments.

button-accent-hover — Deepens to hover-red (#8e0d25) on hover.

top-nav — Canvas (#f4f4f4) surface, black text, Sequel nav-link 13px / 1.5px tracking, 64px height, 16px padding.

nav-link — Transparent, black text, 13px / 1.5px tracking, 16px × 8px padding.

hero-heading — Canvas text on dark overlay, Sequel 42px / 400, 0px 20px horizontal padding.

section-heading — Canvas text, 18px / 400 / normal tracking.

label-caps — The timing-display label tier: 11px / 400 / 1.5px tracking, uppercase, transparent background.

body-paragraph — Charcoal (#292b35) text on light surface, 16px / 400.

dark-surface — Charcoal (#292b35) fill, canvas text, 48px vertical padding.

card — Canvas surface-1 fill, ink text, 1px surface-1 border, 0px radius, 16px padding.

text-input — Canvas fill, ink text, hairline border, 0px radius, 16px padding, 48px height.

Do's and Don'ts

Do apply the 1.5px letter-spacing to every uppercase label and button text. The tracking is the typographic signature of the system; removing it and using normal tracking turns Sequel into a generic geometric sans that could belong to any brand.

Do use two charcoal tones in dark-canvas sections: #292b35 for the surface, #1c1f2a for headings and borders. The tonal ladder creates depth without introducing a second chromatic color; flattening to a single charcoal removes the subtle depth the system relies on.

Do restrict brand-red (#ba0816) to accent CTAs and hover-state fills. The system declares the red in CSS but does not render it on the primary marketing surface — it is a transition-state color, not a resting fill. Applying it to static surfaces would break the discipline the CSS architecture establishes.

Do hold Sequel at weight 400 for all tiers. The system has no weight variation — hierarchy is built through size and tracking alone. Introducing weight 700 on headings would conflict with the geometric-precision identity.

Don't use corner radius above 0px on interactive elements. Unlike Bentley, which uses 0px only on the primary CTA, Alfa Romeo applies sharp geometry to every component. Adding 4px rounding to inputs or cards would import a softness inconsistent with the serpent-crest precision language.

Don't substitute the near-white canvas (#f4f4f4) with pure white. The slight gray-cool offset of the canvas tone is a system-wide decision wired into 17 CSS custom properties; pure white reads warmer and would undercut the technical temperature of the surface.

Don't render the brand-red against the dark charcoal canvas on large surface fills. The #ba0816 against #292b35 achieves only 3.8:1 contrast ratio — insufficient for AA compliance on body text. The system uses the red only on button fills with white text on top, never as a text color on dark backgrounds.

Don't use weight 300 or weight 100 on Sequel. The geometric construction of Sequel at ultra-light weights reads as unfinished on digital screens at small sizes; the system holds weight 400 across every context for this reason.

Known Gaps

• Full model-page surface: the extraction captured the market-selector interstitial (132 elements scanned) rather than the full brand homepage, due to the cookie-consent overlay blocking further scroll. The token set is built from CSS custom-property declarations, which are complete, but fewer rendered components were captured than on a full marketing page.
• Brand-red renders: #ba0816 appears in CSS as the primary accent but was not rendered in the captured surface; the exact hover-state transitions and accent-button context are inferred from CSS variable semantics rather than captured component states.
• Vehicle photography surfaces: the full editorial photo-hero grid (Giulia, Stelvio, Tonale model pages) uses additional overlay gradients and full-bleed surfaces not captured here.
• Dark-mode toggle: the CSS declares --page-dark-mode and --page-light-mode tokens, suggesting a toggle exists in product surfaces not visible on the market-selector capture.
• Responsive breakpoints: the narrow mobile layout for the market-region button grid is not captured; the CSS rem-scale variables suggest a fluid type scale.
• Configurator surfaces: the car configurator interface (typically at /configuratore/) carries its own token layer — color swatches, trim selections, 3D viewer — not represented here.