Maserati Design System

Overview

Maserati's marketing site is structured as an alternating sequence of two canvases — dark and light — that cut between each other like film frames rather than blending at a gradient. Two-canvas inversion. The dark sections ({colors.canvas} — #02070d, wired as --c-bg) carry full-bleed automotive photography with white Everett-Light text; the light sections use pure white ground ({colors.canvas-light} — #ffffff) with near-black ink at 92px Everett-Light to present the model lineup as a gallery catalog. Where Ferrari sustains its near-black register for the full marketing scroll and Alfa Romeo modulates within a two-tone charcoal, Maserati makes the inversion a structural device — the darkness represents the performance identity, the white represents the product clarity. The two canvases share the same type family at the same extreme sizes; only the figure-ground relationship changes.

The amber-gold voltage ({colors.primary} — #ffc845, --c-accent) is strictly a perimeter accent: it appears on underline decorations beneath CTA links, on divider lines between sections, and on model-badge borders — never as a button fill. This restraint is a function of the brand's register: the trident emblem's gold finish reads as craft, not interface. Filling a button with it would reduce it from a material signal to a color assignment. The 12 captured occurrences (4 text, 3 bg, 5 border) confirm the scarcity.

Typography is the Everett family in three weights (Light, regular, Medium), all treated as uppercase instruments. The largest display moment is Everett-Light at 92px / weight 300 / -3.68px tracking — an extreme compression at this scale that gives headlines the tight-set quality of condensed display type without actually using a condensed cut. At 11px / weight 500 / +1px tracking, the label tier runs at the opposite pole: the same uppercase convention applied to the smallest chrome, giving the system a single typographic discipline from 11px to 92px.

Key Characteristics:

• Two-canvas inversion: near-black #02070d (dark hero / performance sections) and pure white (model-range gallery) alternate as hard structural cuts, not gradients.
• Amber gold {colors.primary} (#ffc845) at 12 total occurrences, all as perimeter accents (underlines, dividers, badge borders) — never as a CTA fill.
• Everett-Light at 64-92px / weight 300 / -1.92 to -3.68px tracking — the tightest display tracking in the automotive directory; the compressed setting at 92px is the brand's single strongest typographic statement.
• Uppercase typography at every scale from 11px to 92px — the discipline runs from the smallest nav cap to the largest hero headline.
• Sharp 0px rounding universally on structural surfaces — no rounded buttons, no rounded cards, no rounded image frames.
• Deep navy ink (#0c2340) appears at 116 occurrences — likely the section heading and navigation ink on intermediate backgrounds, suggesting a third surface tone between the near-black canvas and pure white.
• 120px vertical padding on major section bands — generous breathing room around each content cluster.

Colors

Brand

• Amber Gold ({colors.primary} — #ffc845): frequency 12. Used as text (4), bg (3), border (5). Wired as --c-accent, --yellow, --warning. The single brand voltage — appears as CTA underlines, section dividers, and model-badge border accents. Never as a button fill.

Dark Canvas

• Canvas ({colors.canvas} — #02070d): frequency 8. Used as bg (8). The near-black page floor for dark hero and performance sections. Wired as --c-bg, --c-bg-surface. Not pure black — a very deep blue-black with OKLCH lightness ~0.12.
• Canvas Surface ({colors.canvas-surface} — #0d0d0d): frequency 1. Used as bg (1). A slightly lighter near-black wired as --c-ui-100 — used for overlaid UI panels on the dark sections.
• Canvas Navy ({colors.canvas-navy} — #0c2340): frequency 116. Used as text (58), border (58). A deep navy tone with OKLCH hue ~255 — appears extensively as ink on intermediate sections and as border color on structural elements. Not a surface color but a text-and-border tone between the near-black canvas and the white section.

Light Canvas

• Canvas Light ({colors.canvas-light} — #ffffff): frequency as bg/text: dominant in the model-range section. The pure-white surface for the daylight gallery sections.

Text

• Ink ({colors.ink} — #ffffff): frequency 360. Used as text (174), bg (10), border (173), gradient (3). The dominant white — carries all typography on the dark canvas sections. Wired as --light, --white, --c-white.
• Ink Dark ({colors.ink-dark} — #212529): frequency 346. Used as text (173), border (173). The near-black ink for the light-canvas sections — Bootstrap's gray-900, running all body copy and structural borders on the white ground.
• Ink Black ({colors.ink-black} — #000000): frequency 144. Used as text (55), bg (1), border (55), shadow (5), gradient (28). Pure black — the display-headline ink on the white sections and the base color of the page gradient-overlays on photography. Wired as --gradient.

Hairlines

• Hairline ({colors.hairline} — #ffffff): a border at low opacity on the dark canvas — card and section separators.
• Hairline Dark ({colors.hairline-dark} — #212529): structural borders on the light-canvas sections.
• Hairline Black ({colors.hairline-black} — #000000): the sharpest border tone, used on photography frames and section edges.

Semantic

• Gradient Dark ({colors.gradient-dark} — #000000): the gradient-overlay base for photography sections. Wired as --gradient (rgba(0,0,0,0.7) in CSS variable). Used to darken hero photography so white text reads against it.
• Semantic Success ({colors.semantic-success} — #28a745): declared as --green, --success. Not rendered in the captured marketing surface; part of the Bootstrap-derived semantic palette in the base CSS.
• Semantic Error ({colors.semantic-error} — #dc3545): declared as --danger, --red. Same as above — semantic state token, not rendered in marketing chrome.
• Semantic Label ({colors.semantic-label} — #6c757d): declared as --gray, --c-label, --secondary. Not rendered in the captured marketing surface; the Bootstrap gray for secondary UI states.

Typography

Font Families

The system runs Everett in three optical-weight variants loaded as separate font-face declarations: Everett-Light (CSS font-weight 300 or 500 depending on context) for the largest display sizes (60-92px); Everett (weight 400 for body, weight 500 for labels) for body copy, section labels, and sub-headings at 11-22px; and Everett-Medium (weight 400-500, separate font-face) for the smallest nav and link caps at 11px. The distinction between Everett and Everett-Medium at 11px is subtle but consistent — the Medium cut adds optical density at very small sizes for legibility on the dark canvas. No system stack beyond sans-serif is declared beyond the Bootstrap fallback (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif).

Hierarchy

Principles

The system operates at two extreme ends of the typographic scale — 92px display and 11px labels — with very little in between. The display tier uses the Light weight at extreme sizes with negative tracking (-1.92 to -3.68px), creating a headline that reads tight and cinematic rather than open and editorial. The label tier uses positive tracking (+0.75 to +1px) at uppercase, creating the classic luxury-caps convention of spaced-out small type. The body sizes (14-20px) are neutral — positive tracking at 0.14px, normal weight, no transformation.

Note on Font Substitutes

Everett is a licensed typeface by Lettermatic. The closest open-source substitute for the Light display tier is Neue Haas Grotesk Display at weight 300; for standard weight, Helvetica Neue at the same settings is a standard commercial alternative. For the open-source path, Satoshi (Fontshare) at weight 300 transfers well at the 60-92px display sizes. The tight negative tracking is the essential property to preserve — any substitute run without the -2 to -3.68px tracking will feel loose by comparison.

Layout

Spacing System

• Base unit: the dominant module is 16px (9 occurrences) and 8px (8 occurrences), but the section-level padding is 120px — a jump that gives each content band maximum breathing room.
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 16px · {spacing.base} 24px · {spacing.lg} 40px · {spacing.xl} 120px · {spacing.section} 120px.
• Section padding: 120px vertical on major content bands (the value appears 3 times at "120px 0px" and 2 times at "120px" in the extraction). This is the most generous section padding in the automotive directory — Ferrari and Alfa Romeo use approximately 64-80px.
• CTA padding: 12×40px on the amber-gold link CTA — generous horizontal padding that gives the underlined link-button the visual mass of a conventional filled CTA.

Grid & Container

• Max content width: approximately 997px on the largest headline (extracted from heroHeading widthPx: 997).
• Hero sections (dark): full-bleed photography with gradient overlay, centered headline, centered amber-gold CTA link below.
• Model-range gallery (white): multi-column model card grid, one model per column, each with photography + model name + CTA link.
• Performance section: full-bleed dark section with headline and body copy alongside a performance-spec readout.
• The page: alternates dark → white → dark → white as hard structural cuts with 120px vertical padding on each band.

Rhythm

The page uses a single rhythm device: hard full-bleed bands with generous vertical padding, alternating between dark and white. There is no constrained-width editorial band in the middle; every section uses the full 1440px viewport. The only non-full-bleed content is the model-card grid in the white section, which constrains model cards to a centered multi-column layout within the full-bleed white canvas.

Elevation

The system has no shadow tier visible in the captured marketing surfaces. The 5 captured shadow occurrences all belong to {colors.ink-black} (rgba shadow overlay) on photography — page-level gradient overlays rather than component elevation. Cards, sections, and CTAs use no drop shadow.

• Flat (no shadow): all structural surfaces — 100% of components.
• Photography gradient overlay: the dark hero sections use a gradient (rgba(0,0,0,0.7) — wired as --gradient) over full-bleed photography to ensure white text reads against any car color. Not a UI shadow — a photography treatment.
• No card elevation: the model cards in the white section have no border, no shadow, no surface lift — the photography inside each card carries the visual weight; the card boundary is defined only by the spacing grid.

Shapes

The radius scale is near-zero — consistent with the performance-hardware precision that luxury automotive brands reference:

• {rounded.none} 0px — the universal component radius. Hero headings, CTA links, model cards, and nav elements all use sharp 0px geometry.
• {rounded.xs} 2px — one captured occurrence; a hairline edge-softening on a small badge surface. Functionally invisible at production scales.
• {rounded.full} 9999px — circular elements (the audio-play button, icon badges using the 50% border-radius value captured at 6 occurrences). The 66.67px captured value is a specific badge element approximating a pill at a fixed height.

There is no 4px, 8px, or 16px tier. The system is binary: sharp or circular, nothing between. The trident emblem's geometry is pointed and angular — rounded-corner UI surfaces would contradict the badge's visual language.

Components

button-primary — The CTA link convention: transparent fill, white text on dark sections, amber-gold {colors.primary} underline decoration, {typography.label-md} (11px / 500 / uppercase / +1px tracking), 12×40px padding, 0px radius. "Discover more" and "Configure" are the canonical instances. The underline is the brand accent, not the fill.

button-secondary — Same transparent fill on the light-canvas sections, dark ink text, dark {colors.hairline-dark} underline, identical padding. The secondary CTA reads as editorial rather than interactive — a link-style UI convention consistent with the luxury-magazine reference.

top-nav — Transparent background (overlaid on full-bleed photography in the hero), white text at {typography.nav-link} (11px / 400 / uppercase / Everett-Medium), 60px height, 0px 24px padding. Houses the trident wordmark, model names, and the amber-gold "Year of the Trident" campaign badge.

nav-link — Transparent, white text in {typography.nav-link}, 1×6px padding. No hover fill visible in the captured surface — the convention is underline-on-hover consistent with the CTA link treatment.

hero-heading — The primary white-canvas headline. Black {colors.ink-black} text, {typography.display-xl} (92px / Everett-Light / uppercase / -3.68px tracking). Zero padding (the heading spans the content column). This is the loudest typographic moment in the system.

hero-heading-dark — The dark-section counterpart. White {colors.ink} text, {typography.display-lg} (64px / Everett-Light / uppercase / -1.92px tracking). Full-bleed over photography gradient.

section-label — Amber-gold {colors.primary} text at {typography.label-md} (11px / 500 / uppercase / +1px tracking). Used as the section category label above each headline — "Maserati GranCabrio," "Mcpura Cielo," "From Modena to You." The gold color signals brand-level labeling, not navigation.

model-card — White {colors.canvas-light} surface, black {colors.ink-dark} text, {typography.body-md}, 0px radius, 16px top/bottom padding. The model-range gallery card — holds a full-bleed model photograph above the fold and a model name + CTA link below. No border, no shadow — the card boundary is implicit from the grid gap.

body-paragraph — Transparent, white {colors.ink} text on dark sections, {typography.body-md} (14px / 400 / 0.14px tracking). The primary body copy style for the dark performance sections.

body-paragraph-light — Transparent, dark {colors.ink-dark} text on the white-canvas sections, same {typography.body-md}. The light-canvas body copy variant.

dark-section — Near-black {colors.canvas} fill, 120×24px padding, carrying full-bleed photography + gradient overlay + centered headline + CTA link. The structural dark band.

light-section — Pure white {colors.canvas-light} fill, 120×24px padding, carrying the model-range gallery headlines and card grid. The structural light band.

Do's and Don'ts

Do treat the amber gold {colors.primary} as a material-craft signal, not a CTA fill. Every amber-gold occurrence on the page is a perimeter accent — an underline, a divider, a border highlight. Filling a button with it would reduce the trident's gold to a generic interface color, the same category error as filling a Ferrari button with Rosso Corsa.

Do apply the -3.68px tracking to Everett-Light only at 92px and above. At smaller display sizes (60-72px), pull back to -2 to -3px tracking. The extreme negative tracking at 92px works because the glyph spacing at that scale can absorb the compression; at 40px the same tracking value would make headlines illegible.

Do use the two-canvas inversion as the primary structural device: dark sections for performance and technology content, white sections for model-range and product-catalog content. The alternation creates the cinematic rhythm — interrupting it with a third surface color (gray, cream) would dilute the visual statement.

Do use uppercase transformation at every typographic tier. The system runs uppercase from 11px nav caps to 92px display headlines. A mixed-case label at 11px would import a different typographic register (editorial, tech-startup) into a system where the caps are a brand constant.

Don't introduce rounded corners at any radius between 0px and fully circular. The system is binary: 0px for structural surfaces, full circle for icon elements. A 4px or 8px rounded button would look borrowed from a different brand entirely — the sharp 0px geometry is the physical-world reference to machined aluminum and the trident badge's hard edges.

Don't use {colors.canvas-navy} (#0c2340) as a surface fill. Despite its 116-occurrence frequency (second only to white and near-black), it appears only as text and border color — a deep navy ink for intermediate content over lighter photography bands, not a background fill. Using it as a card fill would create a third canvas color that breaks the two-canvas inversion.

Don't set body copy in {colors.ink} (white) on the {colors.canvas-light} (white) sections. The two-canvas system is strict: white ink belongs on near-black surfaces and dark ink belongs on white surfaces. Mixing them (white text on white canvas) is a non-issue in practice but worth stating because the {colors.ink} token is the highest-frequency color in the system and would be the natural default import.

Don't substitute a conventional pill CTA for the amber-gold underline CTA. The link-style CTA (transparent fill + {colors.primary} underline) is the brand's interaction convention at 40px+ horizontal padding. Replacing it with a background-color: {colors.primary}; border-radius: 9999px pill would invert the brand signal from craft-restraint to conventional-SaaS.

Known Gaps

• Primary button capture: the extractor returned null for the primaryButton component — no standard HTML button element matching the heuristic was detected on the captured surface. The amber-gold CTA is rendered as an anchor link (<a>) rather than a <button>, which the extractor does not capture as a primary-button component.
• Hover and focus states: no hover states are captured. The amber-gold underline likely intensifies or expands on hover; the link-style CTAs probably show an amber-gold fill or border on focus. Not documented here.
• Navigation expanded state: the top-nav mobile hamburger and the mega-menu dropdowns (model-selector panels) are not captured in the extracted marketing surface.
• Dark mode / light mode: the page's own two-canvas system is its version of dark/light alternation, but a user-level OS dark-mode preference is not addressed by the captured token set.
• Configurator surface: the "Configure" CTA on model cards leads to the Maserati configurator product (configurator.maserati.com), which carries its own token system — color pickers, trim selectors, 3D viewer — not captured here.
• Motion and scroll transitions: the page uses parallax scroll effects on photography sections and entrance animations on section headlines. Easing curves and timing are not captured.
• Sub-brand and regional variation: the extraction URL resolved to /global/en. Regional market sub-sites (IT, US, CN) may carry different campaign imagery and model availability that affect which components appear above the fold.