What is Maserati's primary brand color?

Maserati's brand voltage is amber gold at #ffc845, wired into the CSS as --c-accent, --yellow, and --warning. It appears 12 times in the captured marketing page — 4 as text, 3 as background fill, 5 as border — making it a perimeter accent rather than a fill color. The amber gold surfaces as underline accents beneath CTA links, border highlights on model-year badges, and section divider lines between the dark and light canvas bands. It never fills a button background — the system uses link-style CTAs with amber underlines rather than the pill-CTA convention that most SaaS brands follow. Ferrari uses Rosso Corsa as a fill voltage; Maserati uses amber gold as a detail accent. The distinction is intentional: the trident badge's gold finish is a craft signal, not a brand shout.

What typeface does Maserati use and what are the key settings?

Maserati runs the Everett family in three optical weights: Everett-Light (weight 300, declared as a separate font-face variant) for the largest display headlines at 60-92px; Everett (weight 400 at body sizes, 500 at labels) for body copy, nav labels, and the 11-22px uppercase label tier; and Everett-Medium (weight 500, separate font-face) for the smallest caps at 11px. The hero h2 extraction is Everett-Light at 92px / weight 300 / -3.68px tracking / uppercase — an extreme tracking at this scale. Section headings drop to 64px / weight 300 / -1.92px tracking, also uppercase. Labels run at 11px / weight 500 / 1px tracking uppercase — the opposite end of the scale. The closest open-source substitute for Everett-Light at the display tier is Neue Haas Grotesk Display Pro at weight 300; at the label tier, Helvetica Neue or Inter at weight 500 uppercase with 0.09em letter-spacing.

Why does Maserati use two different canvas colors on the same page?

The near-black canvas (#02070d) and the pure-white canvas (#ffffff, with #000000 ink) are structural rather than decorative — the dark canvas carries night-photography hero sections and the white canvas carries the full-daylight model-range gallery. The cut between them is hard: no gradient, no transitional band. The extracted hero heading ('An extraordinary model range') is in black ink on white, while the above-fold hero imagery and 'The Year of the Trident' headline sit on near-black with white text. Ferrari holds a single near-black register across its entire marketing surface; Alfa Romeo uses a two-tone charcoal; Maserati makes the inversion explicit by going to pure white. The move lets model photography render at full color fidelity on white — car photography looks different on white than on dark, and Maserati's model-range section is explicitly a product catalog.

What corner-radius style does Maserati use?

Maserati uses near-zero rounding throughout. The extracted radius values are: 50% (6 occurrences — circular elements like the audio-play button), 66.67px (2 occurrences — a specific pill-radius on a small badge element), and 2px (1 occurrence — a hairline-radius for subtle surface softening). There is no general-purpose 4, 8, or 16px card radius. Structural cards, image frames, and CTA elements are sharp-cornered. Like Ferrari, Alfa Romeo, and Cadillac in this directory, Maserati treats 0px corners as the luxury-automotive default — a connection to the hard-edge geometry of precision-machined surfaces. The 66.67px value is a specific badge element rather than a general button radius.

Can I use this DESIGN.md to build a luxury automotive marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Maserati's specific moves: near-black-to-white two-canvas inversion, amber-gold as a perimeter accent rather than a fill, Everett-Light with -3.68px tracking at 92px for the headline moment, uppercase typography at every scale from 11px to 92px, and 0px corners throughout. The pattern most worth adapting independently of the brand is the two-canvas inversion: dark canvas for photography-first hero sections, white canvas for product-range galleries. The amber-gold CTA underline (replacing the conventional filled pill button) is the second distinctive move — it works in luxury contexts where a filled CTA button would read as too transactional.

Maserati Design System

Maserati's marketing design system as DESIGN.md.

About Maserati DESIGN.md

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

Automotive

Maserati's marketing site is built as a two-canvas film: a near-black (#02070d) opening section carries full-bleed car photography with white Everett-Light headlines at 64-92px in uppercase — the trident-badge hero sequence — and then the page cuts to pure white for the model-range reveal, where large mixed-case headlines in the same Everett-Light family render in black ink at 92px / -3.68px tracking. The inversion is not a mode-toggle or a decorative band — it is a structural act, the dark section representing night-time performance and the white section representing the day-lit "extraordinary model range" gallery. Where Ferrari keeps its marketing in a single near-black register and Alfa Romeo stays in charcoal, Maserati treats the two canvases as a cinematic cut.

This DESIGN.md packages Maserati's marketing system into a machine-readable spec. Inside: 15 color tokens drawn from the two-canvas system (near-black family for the dark sections, pure white and near-black ink for the light sections), a single amber-gold voltage at #ffc845 (wired as --c-accent and --yellow) appearing 12 times as accent borders and underlines, three Everett optical-weight cuts (Light at 64-92px for display, regular at 11-22px for labels, Medium for the smallest caps), a near-zero radius scale (only 2px for subtle surface edge-softening), and 12 component definitions covering the dark hero, model-card gallery, amber-gold CTA link, and the light-canvas section.

Feed this file to Claude or Cursor and it reproduces Maserati's specific moves: two-canvas dark-to-light inversion rather than a single surface, amber-gold reserved as a perimeter accent rather than a fill, Everett-Light with extreme -3.68px tracking at 92px for the full-bleed uppercase moment, and sharp 0px corners throughout. The most transferable pattern for other luxury brands is the two-canvas inversion: it lets a dark-photography hero section coexist with an editorial product-range section without either feeling like a compromise.

What makes it distinct

Two-canvas inversionthe hero section runs near-black (#02070d) with white text; the model-range reveal section flips to pure white with black ink; no other luxury automotive brand in this directory uses the full inversion on the same page
Amber gold as perimeter accent#ffc845 (wired as --c-accent) appears at section underlines, model badge borders, and CTA link decorations, never as a filled button surface
Everett-Light at 92px uppercasethe dominant display moment, with -3.68px letter-spacing on full-bleed section headlines; smaller section headings drop to 60-64px with similar tracking
Uppercase typography at every scalefrom 92px Everett-Light headlines to 11px Everett label caps, the system uses uppercase tracking as a design-language constant across every tier
Sharp 0px rounding throughoutno rounded corners anywhere in the captured component set; the surface geometry references the trident emblem's angular precision

Live at maserati.com

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

maserati.com

Explore Maserati

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.

Maserati design system FAQ

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

Maserati — official site

Maserati'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.