---
version: alpha
name: Aston Martin
description: British luxury GT made digital — deep near-black canvas with cinematic automotive photography, AstonMartinFlare serif for display grandeur, AstonMartinSans at whisper-light weights for body, British Racing Green as the singular brand accent, and zero decorative noise.

colors:
  # Surfaces — the site opens onto a near-void dark
  background: "#111111"           # Near-black canvas — dominant surface
  surface: "#1a1a1a"              # Elevated dark surface for card containers
  surface-light: "#2a2a2a"        # Secondary panels and overlays
  surface-white: "#ffffff"        # Light editorial sections
  surface-overlay: "#0d0d0d"      # opaque approx of rgba(0,0,0,0.85) — Google format requires hex

  # Brand accent — British Racing Green
  primary: "#005630"              # British Racing Green — the signature Aston Martin accent
  primary-hover: "#004424"        # Deeper Racing Green for hover states
  primary-active: "#003319"       # Darkest Racing Green for pressed/active states
  primary-container: "#1a4a32"    # Muted green tint for container backgrounds /* estimated */

  # Ink / text
  ink: "#ffffff"                  # White — primary text on dark surfaces
  ink-inverted: "#111111"         # Near-black — primary text on light surfaces
  ink-secondary: "#a0a0a0"        # Mid-gray — secondary labels, captions
  ink-muted: "#606060"            # Muted gray — placeholder and disabled text
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#ffffff"

  # Interactive state
  text-hover: "#c8c8c8"           # opaque approx of rgba(204,204,204,0.7) hover — Google format requires hex
  link-hover: "#c8c8c8"           # Soft gray hover for nav links

  # Borders
  border: "#333333"               # Subtle dark border
  border-light: "#cccccc"         # Light border for white-surface contexts

  # Shadow / depth
  shadow-soft: "#000000"          # Fallback — depth comes from photography, not shadows

typography:
  display-hero:
    fontFamily: "AstonMartinFlare, Cormorant Garamond, Georgia, serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.10
    letterSpacing: -1px
  display:
    fontFamily: "AstonMartinFlare, Cormorant Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.20
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "AstonMartinFlare, Cormorant Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.40
    letterSpacing: 0.5px
  body-large:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.60
    letterSpacing: 0.3px
  body:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.55px
  nav-link:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.00
    letterSpacing: 0.55px
  button-ui:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1.4px
  caption:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.55px
  label-upper:
    fontFamily: "AstonMartinSans, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 2px

spacing:
  micro: 1px
  xs: 8px
  sm: 10px
  md: 20px
  lg: 25px
  xl: 35px
  2xl: 45px
  3xl: 64px
  4xl: 112px

rounded:
  none: 0px
  pill: 30px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink}"

  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 8px 24px
  button-secondary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.ink-inverted}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px

  card-editorial:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.ink-inverted}"
    rounded: "{rounded.none}"
    padding: 32px

  input:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.surface-overlay}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 20px 25px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px
  link-hover:
    textColor: "{colors.link-hover}"
---

# Aston Martin Design System

## Overview

Aston Martin's digital presence is the brand itself — the same craft, restraint, and quiet authority that defines a DB12 rendered in pixels. The site opens onto near-darkness: a cinematic void filled by the iconic winged badge resting on richly textured leather, lit like a jewel in a watchmaker's display case. There is no noise here, no promotional clutter. Just the wings, the name, and the absolute confidence that the right people will lean in. This is a brand that never shouts. It waits.

The color language is monastic in its restraint, making every chromatic decision consequential. `{colors.background}` — a near-black just south of pure void — serves as the perpetual canvas. Against it, white text (`{colors.ink}`) appears with an almost luminous quality, as though carved from light. British Racing Green (`{colors.primary}`) is the sole brand accent, applied with the same rarity as a wax seal: on the badge, in key CTAs, in hover moments that reward the eye. This green carries a century of motorsport heritage — Le Mans, Goodwood, the Nürburgring — and appears sparingly enough that each appearance feels like an event.

The typeface duality is the design's most expressive decision. AstonMartinFlare, a custom serif with high contrast strokes and a calligraphic soul, handles all display moments: headlines that drift toward the editorial, headings that feel hand-lettered. AstonMartinSans — a clean, ultralight grotesque — carries navigation, body copy, and UI chrome. At weight 300 or 100, the sans feels so fine it almost disappears, leaving the serif to do the emoting. Button labels are set in uppercase with 1.4px letter-spacing, a nod to engraving on a timepiece.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with cinematic full-bleed automotive and lifestyle photography
- British Racing Green (`{colors.primary}`) used as a singular, earned accent — badge, CTAs, hover states
- AstonMartinFlare serif for display grandeur; AstonMartinSans at ultralight weights (100–300) for body and nav
- Uppercase `{typography.button-ui}` labels with wide letter-spacing (1.4px) — engraving, not screaming
- Pill-radius buttons (`{rounded.pill}`) contrasting sharply with otherwise zero-radius containers
- Iconic winged badge as the primary visual anchor on gateway and hero sections
- Self-hosted proprietary fonts in six weights: Regular, Light, Bold, Extra-Bold for both families
- Section-level photography carries all emotional weight — UI chrome stays invisible
- Extremely sparse color palette: near-black, white, green — nothing more
- Typography hierarchy splits between serif grandeur (Flare) and sans utility (Sans) with no mixing within a type block

## Colors

### Primary Surfaces
- **Near-Black Canvas** (`{colors.background}`): The dominant surface across the entire site — dark enough to feel cinematic without being pure void. All content is staged against it.
- **Elevated Dark Surface** (`{colors.surface}`): Slightly lifted from canvas for card containers, drawers, and secondary panels.
- **Light Editorial Surface** (`{colors.surface-white}`): Reserved for content-dense sections where legibility of long-form text requires a white ground.

### Brand Accent
- **British Racing Green** (`{colors.primary}`): Aston Martin's heritage colour — derived from the British national racing colour used since 1900. Applied to the winged badge fill, primary CTA buttons, and select hover moments. Every appearance is intentional.
- **Deep Racing Green** (`{colors.primary-hover}`): Darker variant for button hover states — deepens rather than brightens, reinforcing understated luxury.
- **Active Racing Green** (`{colors.primary-active}`): Deepest press state — barely darker, barely perceptible, as refined as the hand-stitching on a DB12 steering wheel.

### Ink & Text
- **White** (`{colors.ink}`): Primary text on all dark surfaces — luminous against the canvas.
- **Near-Black** (`{colors.ink-inverted}`): Text color on light editorial surfaces.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary labels, captions, metadata, and structural annotations.
- **Muted Gray** (`{colors.ink-muted}`): Disabled states and placeholder text.

### States & Borders
- **Hover Gray** (`{colors.text-hover}`): Softened white for link and interactive element hover — the colour of moonlight on aluminum, not a bold state change.
- **Subtle Border** (`{colors.border}`): Barely-visible hairline separators on dark surfaces.

## Typography

### Font Families
- **AstonMartinFlare** (display): A proprietary serif with high-contrast strokes and calligraphic detailing. Closest Google Font substitute: Cormorant Garamond. Fallbacks: Georgia, serif.
- **AstonMartinSans** (body and UI): A proprietary grotesque designed for extreme lightness — available in Light (100), Regular (300), Bold, and Extra-Bold. Closest Google Font substitute: Raleway. Fallbacks: Helvetica Neue, Arial, sans-serif.
- Self-hosted in six weights: `AstonMartinFlare_Rg.woff2`, `AstonMartinFlare_Md.woff2`, `AstonMartinSans_Lt.woff2`, `AstonMartinSans_Rg.woff2`, `AstonMartinSans_Bd.woff2`, `AstonMartinSans_XBd.woff2`.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px Flare 300 — monumental gateway and hero moments |
| `display` | 48px Flare 300 — section-level editorial headlines |
| `heading-section` | 36px Flare 500 — feature titles and campaign headings |
| `heading-sub` | 20px Sans 300 — sub-headings and section intros |
| `body-large` | 18px Sans 300 — introductory body paragraphs |
| `body` | 14px Sans 400 — standard body copy and UI text |
| `nav-link` | 15px Sans 300, uppercase, 0.55px tracking — navigation |
| `button-ui` | 14px Sans 500, uppercase, 1.4px tracking — CTAs and interactive labels |
| `caption` | 10px Sans 400 — attribution lines, legal, media captions |
| `label-upper` | 12px Sans 400, uppercase, 2px tracking — category tags and structural labels |

### Principles
- **Serif for soul, sans for service**: AstonMartinFlare carries the brand voice and emotional register; AstonMartinSans handles navigation, body, and UI without competing. Never mix them in the same text block.
- **Featherweight defaults**: Sans weight 100–300 is the default body register — text recedes to let photography and the badge hold authority.
- **Uppercase as engraving**: `{typography.button-ui}` and `{typography.nav-link}` use uppercase with controlled tracking (0.55–1.4px), evoking precision engraving rather than promotional shouting.
- **Negative letter-spacing on display**: `{typography.display-hero}` at −1px tracking makes large Flare headings feel monumental and architectural, like a nameplate.
- **No text decoration by default**: Links and navigation use no underline — hover state changes color, not treatment.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is **8px**, but the brand favors larger breathing room: sections are padded at `{spacing.2xl}` (45px) to `{spacing.4xl}` (112px) at desktop widths. The generous vertical rhythm is the whitespace philosophy made explicit.

### Grid & Container
- Max content width: 1440px at large desktop
- Hero/gateway: full-bleed, vertically and horizontally centered composition
- Market-selection layout: horizontally distributed navigation links beneath the badge
- Vehicle listings: horizontal scroll or grid at wider viewpoints, single-column stack on mobile
- Footer: multi-column link grid with generous inter-column spacing

### Whitespace Philosophy
- Whitespace here is not emptiness — it is the price of admission. Breathing room at `{spacing.3xl}` and above signals that Aston Martin does not rush.
- Section padding scales aggressively: from 45px at standard to 112px at cinematic sections. Every vehicle reveal needs room to breathe.
- The near-black canvas means large swaths of "nothing" are actively designed — the dark itself carries tension and expectation.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Level 0 (Canvas) | `{colors.background}` flat | The default state of everything |
| Level 1 (Surface) | `{colors.surface}` slight lift | Card containers, secondary panels |
| Level 2 (Overlay) | `{colors.surface-overlay}` | Navigation overlay, modal backdrops |
| Level 3 (Photography) | Full-bleed editorial imagery | Hero sections — all emotional depth lives here |
| Focus Ring | 1px `{colors.primary}` outline | Keyboard focus — Racing Green ring |

**Shadow Philosophy**: Aston Martin does not use box-shadows. The design philosophy is that shadows suggest cheap construction — a hand-built GT does not announce its seams. Depth is achieved entirely through surface color differentiation (`{colors.background}` vs `{colors.surface}`) and the natural depth of full-bleed photography. The winged badge on the leather texture achieves more three-dimensionality through art direction than any CSS could.

## Shapes

The complete radius scale lives in the `rounded:` token block above. This is a binary system.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All containers, cards, image frames, inputs, navigation — no softening |
| `pill` | 30px | Buttons exclusively — the sole curved element in the interface |

The contrast between fully-rectangular containers and pill-shaped buttons is the signature interaction pattern: it makes every button feel intentional — a jewel-like oval against an architecture of precise rectangles. This mirrors the brand's physical design language: the pill-shaped dashboard instruments and oval exhaust tips against the DB12's squared haunches.

## Components

The complete component spec lives in the `components:` token block above.

### Button Variants
- **`button-primary`** — British Racing Green pill, white uppercase text at 1.4px tracking. The primary CTA. Used sparingly to preserve the green's authority.
- **`button-ghost`** — Near-transparent dark pill, white text. For overlay contexts — calls to action floating over photography.
- **`button-secondary`** — White pill, dark text. Used on light editorial surfaces where Racing Green would clash.

### Cards
- **`card`** — Near-black surface, zero radius. Vehicle and feature cards maintain the dark aesthetic; no borders, no shadows.
- **`card-editorial`** — White-surface card for text-heavy content sections. Near-black text at body scale.

### Inputs
- **`input`** — Transparent on dark surface, no radius, white text. Used in newsletter or contact contexts. Focus state slightly lifts the surface.

### Navigation
- **`nav-bar`** — Near-transparent dark header, white AstonMartinSans Light 15px nav links, uppercase with 0.55px tracking. Sits over photography without occlusion.

### Badges / Tags
- **`badge`** — Muted green container, uppercase label with 2px tracking. For category and model line tags.

## Do's and Don'ts

### Do
- Use British Racing Green (`{colors.primary}`) only for primary CTAs and the brand badge — one element per screen at most
- Maintain the serif/sans split: AstonMartinFlare for display, AstonMartinSans for body and UI — no mixing within a type block
- Set nav and button copy in uppercase with tracked letterSpacing (0.55px–1.4px) — the engraving register
- Apply pill radius (`{rounded.pill}`) to buttons only — all containers stay strictly square (`{rounded.none}`)
- Let full-bleed automotive photography carry emotional weight — the UI's job is to stay invisible
- Use AstonMartinSans at weight 300 or lighter for body and nav — featherweight is the default register
- Reserve the near-black canvas (`{colors.background}`) as the dominant surface, even in content-rich sections
- Use uppercase `{typography.label-upper}` with 2px tracking for category tags and structural labels
- Apply negative letter-spacing (−0.5px to −1px) on large Flare display headlines for monumental effect

### Don't
- Introduce any color besides near-black, white, and British Racing Green — the palette is a closed set
- Round cards, containers, or input fields — `{rounded.none}` is the architectural identity; only buttons earn the pill
- Use AstonMartinSans at weight 700+ for body or nav — heavy sans destroys the featherweight luxury register
- Add box-shadows or drop-shadows to UI elements — Aston Martin does not need shadows to look expensive
- Use AstonMartinFlare for navigation, captions, or body text — it is reserved for display moments
- Set body copy larger than 18px or smaller than 10px — the scale is deliberately compressed
- Place more than one British Racing Green CTA button in a single viewport section
- Use the white surface (`{colors.surface-white}`) as a default background — it is the exception, not the canvas
- Add decorative elements, gradients, or textures to the UI — photography and typography carry everything
- Mix the serif and sans typefaces within a single text block or heading

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤375px | Single-column, full-bleed photography, badge scaled to ~70%, market links stacked vertically |
| Mobile | 376–480px | Single-column, Flare display at ~36px, button full-width pill |
| Mobile Large | 481–600px | Transitional single-column, nav collapses to hamburger |
| Tablet | 601–1024px | Two-column editorial grid begins, hero photography maintained full-bleed |
| Desktop | 1025–1440px | Full navigation, wide hero compositions, vehicle grid 3–4 columns |
| Large Desktop | >1440px | Max 1440px content width, generous outer margins, photography at cinematic scale |

### Touch Targets
- Pill buttons maintain minimum 44px height via 8px 24px padding plus button-ui line-height — meets WCAG AAA 44×44px
- Navigation links use weight 300 but adequate vertical padding (20px) for touch accuracy
- Market-selector links spaced with `{spacing.md}` (20px) minimum gaps on mobile
- The winged badge on the gateway page functions as a non-interactive hero — no tap target required

### Collapsing Strategy
- Navigation: horizontal full-width bar collapses to logo + hamburger; links reappear in a full-screen overlay panel
- Hero: full-bleed photography maintained at all breakpoints using `object-fit: cover`; headline scales from 72px (desktop) to 36px (mobile)
- Vehicle listings: horizontal multi-column scroll/grid collapses to single-column vertical stack with stacked vehicle cards
- Market selector: inline horizontal links reflow to center-aligned vertical list on mobile
- Footer: multi-column link grid collapses to accordion-style sections on mobile

### Image Behavior
- Gateway hero: object-fit cover maintains leather-texture composition at all sizes, cropping preserves the badge centeredness
- Vehicle photography: aspect-ratio locked to approximately 16:9 for cinematic presentation
- Portrait lifestyle photography: may use `object-position: top` to preserve faces in portrait crops
- Lazy loading applied below-fold; above-fold photography eagerly loaded for perceived performance

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` (near-black)
- Primary text: `{colors.ink}` (white)
- Secondary text: `{colors.ink-secondary}` (mid-gray)
- Brand accent: `{colors.primary}` (British Racing Green)
- Hover accent: `{colors.primary-hover}` (deep green)
- Border: `{colors.border}` (subtle dark hairline)
- Light surface: `{colors.surface-white}` (white — exception only)

### Example Component Prompts
- "Create a gateway hero on `{colors.background}` canvas — full-bleed leather texture photography, vertically and horizontally centered winged badge SVG at ~320px width, below it a display headline in AstonMartinFlare 48px weight 300 negative-tracked at −0.5px in white, and a compact pill-button CTA in British Racing Green (`{colors.primary}`) with uppercase white text at 1.4px letter-spacing. No other elements. Maximum breathing room."
- "Design a vehicle feature card on `{colors.surface}` with a full-bleed 16:9 vehicle photograph filling the top two-thirds, then a lower panel with the model name in AstonMartinFlare 36px weight 500 in `{colors.ink}`, a single-line spec summary in AstonMartinSans 14px weight 300 in `{colors.ink-secondary}`, and a British Racing Green pill CTA button below. Zero radius on the card, `{rounded.pill}` on the button only."
- "Build a navigation bar with `{colors.surface-overlay}` background (near-transparent dark), the Aston Martin wordmark left-aligned, and nav links in AstonMartinSans 15px weight 300 uppercase 0.55px tracking in white (`{colors.ink}`). Hover state softens to `{colors.text-hover}`. No underlines, no radius, padding `{spacing.md}` vertical and `{spacing.lg}` horizontal."
- "Create an editorial section on `{colors.surface-white}` with a large AstonMartinFlare heading at 48px weight 300 in near-black (`{colors.ink-inverted}`), body copy in AstonMartinSans 14px weight 400 at 0.55px tracking, a category badge in muted green (`{colors.primary-container}`) with uppercase label at 2px tracking, and a white pill CTA button (`button-secondary`) with dark text. Section padding of 45px vertically."
- "Design a market-selector layout on the gateway page: horizontal list of regional links in AstonMartinSans 14px weight 400 uppercase 0.55px tracking in white, separated by subtle `{colors.border}` vertical hairlines, centered beneath the winged badge. On hover, text softens to `{colors.text-hover}`. No buttons, no border-radius, no background fills."

### Iteration Guide
1. Start with `{colors.background}` as the canvas — resist any temptation to lighten it. The darkness is the luxury.
2. Introduce AstonMartinFlare only for the primary headline — one Flare moment per section maximum.
3. Use AstonMartinSans at weight 300 or lighter everywhere else — the featherweight register is non-negotiable.
4. A single British Racing Green (`{colors.primary}`) pill CTA is the maximum accent per section — if you find yourself reaching for green again, you have one CTA too many.
5. Add the vehicle or lifestyle photograph last — it should fill at least 50% of the section's visual field.
6. Buttons: pill (`{rounded.pill}`) always. Everything else: square (`{rounded.none}`) always.
7. If the composition feels crowded, double the padding. Breathing room is the brand.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Aston Martin. Brand names and trademarks belong to their respective owners.