---
version: alpha
name: Vespa
description: "Italian scooter heritage rendered digital — ivory and sky-teal canvas, Gill Sans-adjacent editorial curves, and the Vespa green accent applied with the restraint of a racing livery stripe"

colors:
  # Surface / canvas
  background: "#faf8f3"          # Warm ivory — the scooter showroom floor
  surface: "#ffffff"
  surface-warm: "#f5f0e8"        # Cream panel — editorial sections
  surface-dark: "#1a1a1a"        # Near-black for cinematic hero overlays

  # Ink / text
  ink: "#1c1c1a"                 # Warm near-black — softer than engineering black
  ink-muted: "#6b6b62"           # Warm mid-grey — secondary text and captions
  ink-light: "#9b9b90"           # Light ash — placeholders, disabled text
  on-background: "#1c1c1a"
  on-surface: "#1c1c1a"

  # Brand accent — Vespa Verde
  primary: "#2e7d4f"             # Vespa green — the iconic livery colour
  on-primary: "#ffffff"
  primary-hover: "#245f3d"       # Darkened verde for hover depth
  primary-container: "#d6ede1"   # Pale mint tint for tags and soft accents

  # Secondary accent — sky / cerulean
  secondary: "#3a8fb5"           # Mediterranean sky blue — Primavera & sprint tones
  on-secondary: "#ffffff"

  # Borders / dividers
  border: "#d8d4ca"              # Warm sand border
  border-dark: "#3d3d35"         # Dark section dividers

  # Interactive states
  focus-ring: "#2e7d4f"          # Verde focus — matches primary
  link-hover: "#245f3d"          # Darkened verde for link hover

  # Semantic
  success: "#2e7d4f"
  warning: "#c8850a"
  error: "#c0392b"

  # Shadow tint
  shadow-soft: "#c8c4ba"         # Warm neutral shadow — no cool cast

typography:
  display-hero:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 88px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  nav-link:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.8px
  caption:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.3px
  label-upper:
    fontFamily: "Gill Sans, Gill Sans MT, Optima, Segoe UI, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 1.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-warm:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-model:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.nav-link}"
---

# Vespa Design System

## Overview

Vespa's digital presence reads like the inside of a beautifully preserved Italian café — warm ivory walls, rounded forms, and the unhurried confidence of something that has been beautiful for eight decades and knows it. The canvas opens on `{colors.background}`, a warm parchment white that refuses the clinical sterility of pure `#ffffff`: this is the colour of sun-faded enamel, of letters typed on cream paper, of a scooter showroom off the Via Appia. It is a deliberate softness that positions Vespa not as a technology product but as a cultural object — something to be lived with rather than configured.

The typographic core is drawn from the humanist tradition. Vespa's site uses a Gill Sans-adjacent grotesque — humanist, pen-formed letter-o's, bracketed curves that feel like they were drawn by hand before being cut into metal. At display scale (`{typography.display-hero}`), headlines run in weight 300 at negative tracking: the lightness is the elegance. This is not the mechanical wide-tracking of a German automotive brand, nor the sharp condensed authority of a Japanese marque — it is the unhurried weight of Italian industrial design, where the right form is always the one that appears to have arrived effortlessly. The type leans into the brand's founding era (1946, Pontedera, Piaggio's aircraft factory repurposed for mobility) without pastiche.

The signature chromatic decision is the Vespa Verde (`{colors.primary}`) — a deep, slightly muted green that evokes the original Vespa 98 livery and every classic model since. It appears on primary CTAs, focus states, and occasional surface-level decorative moments, and nowhere else. The remaining palette is deliberately quiet: warm cream surfaces, warm grey borders, warm near-black ink. The Mediterranean sky enters as `{colors.secondary}`, a cerulean blue drawn from the Primavera and Sprint colour catalogues, used for secondary accents and illustrative moments. Together they create the impression of a postcard from Cinque Terre — and that is the precise design intention.

**Key Characteristics:**
- Warm ivory canvas (`{colors.background}`) — parchment-white, never clinical, signaling cultural object over consumer product
- Vespa Verde (`{colors.primary}`) as the sole chromatic CTA accent — applied once per section with the restraint of a livery stripe
- `{typography.display-hero}` at weight 300 and `-1px` tracking — elegant lightness, the opposite of automotive bold declarations
- Humanist grotesque letterforms (Gill Sans lineage) with pen-drawn curves that suggest craft rather than precision manufacture
- Full-pill rounded corners (`{rounded.pill}`) on all buttons and inputs — softness as a brand posture, echoing the scooter's own curved bodywork
- Warm cream panels (`{colors.surface-warm}`) alternating with white to create editorial rhythm without contrast extremes
- Generous vertical breathing room (`{spacing.3xl}` section padding) — the Italian piazza approach to layout: space is not waste, it is dignity
- Photography language: lifestyle and aspiration-adjacent — sunlit streets, coastal roads, people rather than machines in isolation
- Warm shadow tinting (`{colors.shadow-soft}`) — shadows cast in Mediterranean afternoon light, not cool digital neutral
- Uppercase tracking on labels (`{typography.label-upper}` at `1.5px`) for category markers and specification labels
- Model names styled in `{typography.heading-section}` with no uppercase transform — proper nouns, not serial numbers
- Rounded cards (`{rounded.xl}`) throughout — every container echoes the scooter's bodywork silhouette

## Colors

### Primary Brand
- **Ivory Canvas** (`{colors.background}`): The dominant page background — warm parchment white that grounds the entire experience in analogue warmth rather than digital neutrality. Sets the tone for every surface above it.
- **Vespa Verde** (`{colors.primary}`): The signature brand green, drawn directly from the iconic scooter livery. Applied exclusively to primary CTAs, focus rings, and semantic success states. One green, used precisely.

### Secondary Accent
- **Mediterranean Blue** (`{colors.secondary}`): Sky cerulean, drawn from the Primavera's signature colour range. Appears in illustrative moments, secondary variant badges, and model colour swatches. Warmer and less saturated than tech-brand blue.
- **Pale Mint** (`{colors.primary-container}`): A desaturated tint of the Vespa Verde, used for badges, tag fills, and soft hover states where the full green would be too assertive.

### Surface Scale
- **Pure White** (`{colors.surface}`): Card surfaces and modal backgrounds. Lifted from the warm canvas by contrast, not by fluorescence.
- **Cream Panel** (`{colors.surface-warm}`): Secondary editorial sections — specification panels, heritage callouts, alternating layout blocks. The warm cream that follows naturally from the ivory canvas.
- **Near-Black** (`{colors.surface-dark}`): Hero section overlays and cinematic full-bleed moments where the scooter or cityscape demands theatrical lighting.

### Text Scale
- **Warm Near-Black** (`{colors.ink}`): Primary text throughout — fractionally warmer than pure black, maintaining the analogue warmth of the overall system.
- **Warm Mid-Grey** (`{colors.ink-muted}`): Secondary text, captions, specification labels. Warm-toned grey rather than cool, consistent with the palette's Italian-summer cast.
- **Ash Light** (`{colors.ink-light}`): Placeholders, disabled states, fine-print content.

### Borders & Structure
- **Sand Border** (`{colors.border}`): Warm neutral dividers — the colour of light through linen, soft enough that it never intrudes on the content.
- **Dark Divider** (`{colors.border-dark}`): Structural boundaries in dark sections and secondary button outlines.

### Interactive States
- **Verde Focus** (`{colors.focus-ring}`): Focus ring and active outline — same as the primary, making keyboard navigation visually consistent with mouse interaction.
- **Hover Verde** (`{colors.link-hover}`): Darkened shift of the primary green for hover states — a natural progression rather than a colour surprise.

## Typography

### Font Family
- **Primary**: `Gill Sans`, `Gill Sans MT`, with fallbacks: `Optima`, `Segoe UI`, `sans-serif`
- **OpenType Features**: Vespa's typographic character relies on the humanist pen-forms native to Gill Sans — the two-storey `a`, the curved tail on the `l`, the rounded `o` that suggests hand-drawing. No explicit OpenType feature sets declared; the character comes from the face itself.

*Note: Gill Sans is a British humanist grotesque designed by Eric Gill in 1928. For web implementations, Nunito, Cabin, or Muli are close digital substitutes. Optima (Hermann Zapf, 1955) — a flared sans-serif with calligraphic DNA — serves as the warmest system fallback. Avoid cold grotesks like Helvetica or Arial as fallbacks; they flatten the warmth the face creates.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero model reveals, full-bleed section headlines, the scooter name at maximum impact — weight 300 is the signature |
| `display` | Section opening headlines, campaign taglines, editorial openers |
| `heading-section` | Section headers, model category titles, feature anchors |
| `heading-sub` | Card titles, specification block headers, sub-feature labels |
| `body-large` | Lead copy paragraphs, hero sub-headlines, extended editorial text |
| `body` | Standard body paragraphs, feature descriptions, specification copy |
| `nav-link` | Navigation items, footer links — light tracking adds air at small size |
| `button-ui` | CTA labels — `0.8px` tracking and weight 600 for legibility at pill scale |
| `caption` | Image captions, legal text, fine print |
| `label-upper` | Model category tags, specification labels, filter markers — uppercase with `1.5px` tracking |

### Principles
- **Weight 300 as the display register**: At display scale, lightness IS the elegance. The scooter's forms are curved and light; the type honours them. Weight 400 or above at hero scale would feel unexpectedly heavy.
- **No uppercase on model names**: "Vespa GTS 300", "Vespa Primavera" — these are names, not serial numbers. Title case only.
- **Uppercase reserved for labels**: `{typography.label-upper}` is the only uppercase register, used for category markers and specification heads. The `1.5px` tracking at 12px creates clear category signalling without shouting.
- **Line height generosity**: `1.6–1.65` on body text matches the pace of a brand that is never in a hurry. The reader takes their time on warm cream.
- **Consistent humanist rhythm**: Every weight uses the same Gill Sans fallback stack — the system has a single typographic voice, never mixing serif with sans or switching families by context.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Vespa's layout breathes like a piazza. Section padding defaults to `{spacing.3xl}` (96px) vertically — the space between sections is as considered as the sections themselves. Internal card padding runs at `{spacing.xl}` (40px). The contrast between generous outer breathing room and comfortably dense inner content creates the editorial rhythm of a lifestyle magazine rather than a product catalogue.

### Grid & Container
- Max content width: approximately 1280px, centred with auto margins
- Hero: full-viewport-width with overlaid typography — the scooter is always the hero, text is always secondary
- Product sections: alternating image-left/text-right and full-bleed single-column, creating editorial flow down the page
- Model grid: 3-column on desktop, 2-column on tablet, 1-column on mobile — card radius `{rounded.xl}` maintained at all breakpoints

### Whitespace Philosophy
- **Space as dignity**: Generous section padding signals that Vespa does not compete on information density — it competes on experience. Resist compressing sections below `{spacing.2xl}` vertical padding.
- **Cream panels create rhythm**: The alternation between `{colors.surface}` and `{colors.surface-warm}` sections provides visual pacing without relying on borders or dividers. The warmth differential is subtle — readers feel it before they see it.
- **Full-bleed photography needs room before and after**: Hero sections transition to content with at least `{spacing.3xl}` of breathing room. Photography at the edge of a compressed section loses its cinematic character.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, cream editorial panels, hero sections |
| Subtle (Level 1) | `0 2px 8px 0 #c8c4ba` | Cards on ivory background — a warm afternoon-shadow lift |
| Card (Level 2) | `0 4px 20px 0 #c8c4ba` | Product model cards, featured scooter tiles |
| Elevated (Level 3) | `0 8px 32px 0 #c8c4ba` | Modal overlays, image lightbox, configurator panels |
| Dialog (Level 4+) | `0 16px 48px 0 #c8c4ba` | Cookie consent, region selector overlays |
| Focus Ring | `0 0 0 3px {colors.focus-ring}` | Keyboard navigation — verde ring on all interactive elements |

**Shadow Philosophy**: Vespa's shadows are warm-tinted — every shadow uses `{colors.shadow-soft}` as the shadow colour, casting a Mediterranean afternoon light rather than a cool digital neutral. The system never uses `rgba(0,0,0,0.x)` shadows; the warmth of the shadow is as considered as the warmth of the canvas. Elevation is used sparingly — the flat cream surfaces carry most of the page weight, and lift is reserved for interactive cards and overlays.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rare — full-bleed photographic sections only |
| `sm` | 4px | Small utility badges and tight micro-elements |
| `md` | 8px | Secondary UI elements, inline chips |
| `lg` | 16px | Compact cards, form fields in tight contexts |
| `xl` | 24px | Primary cards, model tiles, content panels |
| `pill` | 9999px | All buttons, all inputs, primary interactive controls |

The system makes a strong shape statement: everything interactive is either a pill or a generously rounded card. This is not arbitrary — it echoes the scooter's own bodywork, where the apron curves, the headlight shell rounds, and the legshield arcs in a single fluid form. The design team applied the same principle to the digital surface. `{rounded.pill}` on every button is not softness as a trend — it is brand embodiment.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — Pill-shaped, Vespa Verde fill, white label in `{typography.button-ui}`. The singular chromatic call-to-action. One per primary action cluster.
- **`button-primary-hover`** — Darkened verde (`{colors.primary-hover}`), same pill geometry. Depth through hue shift, not opacity.
- **`button-secondary`** — Transparent fill, dark outline (`{colors.border-dark}`), ink text. Outline implies choice without commitment — used for "discover more" and secondary navigational CTAs.
- **`button-secondary-hover`** — Solid dark fill with white text on hover — the outline "fills in" on engagement. A satisfying inversion of the outline state.
- **`button-ghost`** — No border, verde text, transparent fill. Used inline within body content and for low-hierarchy navigation actions.
- **`button-ghost-hover`** — Pale mint fill (`{colors.primary-container}`) on hover — a soft acknowledgement without visual weight.

### Cards
- **`card`** — White surface, `{rounded.xl}` corners, warm shadow at Level 1. Used for model feature cards, accessory tiles, and dealer information.
- **`card-warm`** — Cream surface (`{colors.surface-warm}`), same radius. Used for heritage content, brand story sections, and editorial callouts. The warmth differential signals "story" versus "product."

### Inputs
All inputs use `{rounded.pill}` — the pill form echoes button geometry, and the warm border (`{colors.border}`) at rest transitions to verde (`{colors.focus-ring}`) on focus. Focus state is unambiguous: the green ring is the brand's voice, not a generic blue system default.

### Badges / Tags
- **`badge`** — Pale mint background, verde text, uppercase tracking. Model category markers, feature labels.
- **`badge-model`** — Cream background, muted ink text. Specification tags within product cards — quieter than the category badge, designed to inform without competing with the product photography.

### Navigation
The navigation sits on the ivory canvas (`{colors.background}`), maintaining the warm analogue tone throughout the scroll. The Vespa logotype (the cursive italic wordmark) anchors the left; model categories anchor the centre; the country/language selector and search anchor the right. Nav links use `{typography.nav-link}` at `0.5px` tracking — light enough to be elegant, tracked enough to separate cleanly at 15px. Sticky at top, no elevation shadow — the nav belongs to the page, not above it.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (Vespa Verde) for exactly one CTA element per section — the green is the brand's single stamp, not a palette
- Apply `{rounded.pill}` to every button and text input — the rounded form is the brand's shape language and must be consistent
- Set display headlines in `{typography.display-hero}` at weight 300 — lightness is the elegance; resist the temptation to go heavier at large sizes
- Use `{colors.background}` (warm ivory) as the default page canvas, never pure `#ffffff` — the warmth is the difference between a lifestyle brand and a tech product
- Cast shadows in `{colors.shadow-soft}` (warm sand), never in cool `rgba(0,0,0,0.x)` tones — the warm shadow maintains the Mediterranean afternoon light
- Alternate `{colors.surface}` and `{colors.surface-warm}` sections to create editorial rhythm without relying on borders or heavy dividers
- Keep model names in title case — "Vespa Primavera 125", not "VESPA PRIMAVERA 125" — these are names, not SKU codes
- Reserve `{typography.label-upper}` (uppercase `1.5px` tracking) strictly for category labels and specification heads — it signals taxonomy, not emphasis

### Don't
- Don't introduce a second chromatic accent alongside Vespa Verde — the `{colors.secondary}` blue is for illustrative palette moments only, never for competing CTAs
- Don't use `{rounded.none}` (0px) on buttons or inputs under any circumstance — sharp edges are architecturally inconsistent with Vespa's entire shape language
- Don't set display text heavier than weight 400 — `{typography.display-hero}` at 300 is the voice; bold display type belongs to German engineering brands, not Italian craft brands
- Don't apply uppercase transforms to model names, section headings, or body text — only `{typography.label-upper}` uses uppercase, and only for categorical labels
- Don't use cool-toned grays (`#888`, `rgba(0,0,0,0.5)`) in dividers, shadows, or muted text — every neutral in this system has a warm undertone by design
- Don't place competing pill buttons side by side in different colours — use verde primary + dark outline secondary if two CTAs must share a cluster; never verde + blue
- Don't compress section vertical padding below `{spacing.2xl}` — the generous spacing IS the brand posture; density reads as discount rather than premium
- Don't use full-bleed dark sections (`{colors.surface-dark}`) without immediately following with a warm surface section — prolonged darkness breaks the Mediterranean warmth of the system

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, display hero drops to ~40px, full-width pill buttons, stacked nav |
| Mobile | 375–767px | Single-column, 48–56px hero text, hamburger navigation, pill inputs full-width |
| Tablet | 768–1023px | 2-column model grid begins, nav shows primary items, hero text 64px |
| Desktop | 1024–1279px | 3-column model grid, full horizontal nav, hero at 72–80px |
| Large Desktop | ≥1280px | Maximum 1280px container, hero at 88px, full section breathing room |

### Touch Targets
- Pill buttons maintain `padding: 14px 32px` — effective height ~48px, meeting WCAG 44px minimum
- Nav links have `padding: 12px 16px` touch area at minimum on mobile
- Model cards are full-tappable surfaces with cursor: pointer, not just the button within them
- Carousel navigation controls: minimum 44×44px invisible tap area around arrow icons

### Collapsing Strategy
- **Navigation**: Full horizontal nav collapses to hamburger on mobile. The Vespa wordmark remains visible at all breakpoints — the logotype is never hidden.
- **Hero**: Full-bleed photography maintained at all breakpoints with `object-fit: cover`. Text positioning shifts from overlaid to below-fold on smallest viewports.
- **Model grid**: 3 → 2 → 1 column with card radius `{rounded.xl}` maintained throughout. The pill buttons and rounded cards never lose their shape.
- **Typography**: 88px → 56px → 40px across breakpoints; weight 300 and tight tracking maintained throughout — the lightness scales.
- **Section spacing**: `{spacing.3xl}` → `{spacing.2xl}` → `{spacing.xl}` on mobile; never compress to less than 40px vertical padding.

### Image Behavior
- Hero photography always full-bleed with `object-fit: cover` — the scooter is never cropped out of frame
- Model card photography maintains a fixed aspect ratio (typically 4:3 or 16:9) at all breakpoints
- No art-direction swap of photography — the same warm-light lifestyle aesthetic applies from mobile to large desktop
- Lifestyle images (people, streetscapes) allowed to crop loosely on mobile; product photography always shows the full machine

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (warm ivory)
- Text: `{colors.ink}` (warm near-black)
- Brand accent / CTA: `{colors.primary}` (Vespa Verde)
- Secondary text: `{colors.ink-muted}`
- Cream panel: `{colors.surface-warm}`
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`
- Shadow: `{colors.shadow-soft}` (warm sand)

### Example Component Prompts

- "Build a Vespa hero section: full-bleed lifestyle photograph of a scooter on a coastal road. Overlay a headline in Gill Sans weight 300, 88px, `line-height: 1.0`, `letter-spacing: -1px`, color `{colors.surface}` (white), positioned lower-left with 64px padding. Below it, a subheadline in Gill Sans weight 400, 24px, `line-height: 1.25`, white at 85% opacity. Then two buttons: primary CTA `background: {colors.primary}`, `color: {colors.on-primary}`, `border-radius: 9999px`, `padding: 14px 32px`, Gill Sans weight 600 `letter-spacing: 0.8px` at 15px; secondary CTA `background: transparent`, `border: 1.5px solid rgba(255,255,255,0.7)`, `color: white`, same font and geometry. Both at 48px effective height."

- "Design a Vespa model card on `{colors.surface}` (white) background with `border-radius: 24px` and warm shadow `0 4px 20px 0 {colors.shadow-soft}`. Top: a 4:3 model photograph with `border-radius: 24px 24px 0 0`. Below: a pale mint badge (`background: {colors.primary-container}`, `color: {colors.primary}`, `border-radius: 9999px`, `padding: 4px 12px`, Gill Sans weight 600 uppercase `letter-spacing: 1.5px` at 12px) showing the category. Model name in Gill Sans weight 400 at 24px, `line-height: 1.25`, color `{colors.ink}`. Short description in Gill Sans weight 400 at 16px, `line-height: 1.65`, color `{colors.ink-muted}`. Footer: verde primary CTA button right-aligned."

- "Create a Vespa navigation bar on `{colors.background}` (ivory) background, `border-bottom: 1px solid {colors.border}`. Left: Vespa cursive wordmark SVG. Centre: nav links in Gill Sans 15px weight 400, `letter-spacing: 0.5px`, color `{colors.ink}` — Models, Accessories, Experience, Find a Dealer. Right: country selector and search icon. All links hover to `{colors.primary}` (verde). Nav height 64px, `padding: 0 40px`. Sticky at top, no box-shadow."

- "Build a Vespa editorial section on `{colors.surface-warm}` (cream panel) background, `padding: 96px 0`. Section label: Gill Sans uppercase 12px weight 600 `letter-spacing: 1.5px`, color `{colors.primary}` — e.g. 'SINCE 1946'. Section heading below in Gill Sans 36px weight 400, `line-height: 1.15`, color `{colors.ink}`. Body paragraph in Gill Sans 20px weight 400, `line-height: 1.6`, color `{colors.ink-muted}`, max-width 640px. Ghost CTA button at bottom: `background: transparent`, `color: {colors.primary}`, `border-radius: 9999px`, `padding: 14px 32px`, Gill Sans 15px weight 600 `letter-spacing: 0.8px`. Hover fills to `{colors.primary-container}`."

- "Design a colour-selector component for the Vespa configurator. Container: `{colors.surface}` white, `border-radius: 24px`, `padding: 32px`. Heading: 'Choose Your Colour' in Gill Sans 24px weight 400, `color: {colors.ink}`. Below: a row of circular colour swatches (36px diameter) with a `2px solid {colors.primary}` ring on the selected state and a soft warm shadow on hover. Selected colour name in Gill Sans 16px weight 400, `color: {colors.ink}`. Below the name: the price delta in Gill Sans 15px weight 600, `color: {colors.primary}`. A pill CTA at the bottom: `background: {colors.primary}`, white text, `border-radius: 9999px`, `padding: 14px 32px`."

### Iteration Guide

1. Start with `{colors.background}` (warm ivory `#faf8f3`) — never pure white. This single decision sets the analogue warmth that all other choices build on.
2. Vespa Verde (`{colors.primary}`) appears once per section maximum — on the single most important action. If multiple actions compete, the primary CTA gets the verde; all others get outline or ghost treatment.
3. Every button and input gets `{rounded.pill}` — no exceptions. The pill is the brand's handshake between digital interface and scooter bodywork.
4. Display headlines at `{typography.display-hero}` use weight 300 and `-1px` tracking — the lightness is deliberate. Do not increase weight at any size.
5. All neutrals skew warm: shadows use `{colors.shadow-soft}`, borders use `{colors.border}`, muted text uses `{colors.ink-muted}`. No cool-grey anywhere.
6. Alternate white (`{colors.surface}`) and cream (`{colors.surface-warm}`) sections for editorial pacing — never use borders or heavy dividers to separate sections; let the warmth differential do the work.
7. Model names always in title case, Gill Sans weight 400 — never uppercase, never bold. They are names of beloved objects, not product codes.

---

## 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 Vespa. Brand names and trademarks belong to their respective owners.