---
version: alpha
name: "Ghia"
description: "Design system for Ghia, the non-alcoholic apéritif brand — burgundy, cream, and coral over warm editorial typography with a Mediterranean aperitivo soul."

colors:
  # Surface / canvas
  background: "#fef6ee"
  surface: "#651c32"
  surface-warm: "#e5e7eb" # was rgb(229,231,235) — light neutral, Tailwind gray-200

  # Text / ink
  ink: "#651c32"
  on-background: "#651c32"
  on-surface: "#ffffff"

  # Brand accent
  primary: "#ef6079"
  on-primary: "#ffffff"
  primary-container: "#b6cfd0" # muted teal from "Add to Cart" badge variant

  # State / interaction
  primary-hover: "#cb5267" # computed from dembrandt hover on coral
  surface-hover: "#79223c" # computed from dembrandt hover on burgundy

  # Borders
  border: "#651c32"
  border-subtle: "#e2cebc" # was rgba(101,28,50,0.15) flattened on #fef6ee — warm parchment divider
  border-light: "#e5e7eb"

  # Shadow tints
  shadow-soft: "#651c32" # brand-tinted depth

  # Focus
  focus-ring: "#abd2eb"

  # Semantic
  error: "#be2119"
  success: "#8dc572"
  warning: "#f0ad4e"
  sale-highlight: "#44be70"

typography:
  display-hero:
    fontFamily: "FHA Condensed French NC, Bebas Neue, Arial Narrow, sans-serif"
    fontSize: 79px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "FHA Condensed French NC, Bebas Neue, Arial Narrow, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  heading-section:
    fontFamily: "FHA Condensed French NC, Bebas Neue, Arial Narrow, sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "FHA Condensed French NC, Bebas Neue, Arial Narrow, sans-serif"
    fontSize: 37px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0px
  heading-small:
    fontFamily: "FHA Condensed French NC, Bebas Neue, Arial Narrow, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Vevey 22 Positive, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "Vevey 22 Positive, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Vevey 22 Positive, Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "Vevey 22 Positive, Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  label-ui:
    fontFamily: "Vevey 22 Positive, Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.02em
  caption:
    fontFamily: "Vevey 22 Positive, Georgia, serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  2xl: 48px
  3xl: 64px
  4xl: 80px

rounded:
  none: 0px
  sm: 4px
  md: 16px
  lg: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 20px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  button-ghost-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 20px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    rounded: "{rounded.md}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.focus-ring}"
    borderColor: "transparent"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.focus-ring}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 16px
  badge-coral:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 4px 16px
  nav:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.nav-link}"
    padding: 14px 56px
---

# Ghia Design System

## Overview

Ghia is what happens when the Mediterranean aperitivo tradition gets reimagined as a contemporary brand — all the ritual, none of the alcohol. The website opens on a deep burgundy canvas (`{colors.surface}`) that reads less like a DTC landing page and more like the label of a very good bottle. The first color you see is that dark wine-red, set against a crisp reversed wordmark in cream. It's the visual equivalent of a chilled glass on a warm terrace, and that emotional register — grown-up pleasure, deliberate choice — never breaks.

Below the burgundy header, the page transitions into a warm parchment background (`{colors.background}`), and it's here that the brand's dual typographic identity fully emerges. Headlines are set in FHA Condensed French NC — a tall, tightly-spaced condensed display face with serious editorial weight, rendered in ALL CAPS and scaled from 48px to 79px. Body text and UI elements use Vevey 22 Positive, a contemporary geometric serif with slightly informal warmth. The pairing avoids the usual DTC playbook of sans-for-everything: the condensed display feels archival, like a wine label from the Riviera, while the body serif keeps the brand conversational and approachable. The overall register is editorial-meets-apothecary.

The accent color — a warm coral pink (`{colors.primary}`) — lands like a splash of grenadine. It appears on primary CTA buttons, underline accents, and certain badge variants, and it's used with enough restraint that each appearance carries weight. Alongside it, a muted sky blue (`{colors.focus-ring}`) appears on email inputs in the newsletter section, a color pulled from Ghia's botanical palette. These two accent hues, against the burgundy and parchment ground, create a palette that feels herbaceous and festive without being loud.

**Key Characteristics:**
- Deep burgundy (`{colors.surface}`) as the dominant brand canvas — header, hero panels, and section breaks all anchor in this wine-dark ground
- Warm parchment background (`{colors.background}`) for editorial content — cream, never white
- Coral-pink primary accent (`{colors.primary}`) deployed on CTAs, interactive states, and subtle underline treatments
- FHA Condensed French NC set ALL CAPS for every display moment — 48px to 79px, weight 400/500, zero tracking
- Vevey 22 Positive as the body and UI serif — 16–18px, relaxed line-heights, never uppercase
- Pill radius (`{rounded.pill}`) as the primary CTA shape — generous, soft, anti-sharp
- `16px` rounded corners on cards and secondary elements — soft but not pill
- 1px solid burgundy borders on outlines — the brand doesn't soften to gray for structure
- Coral underline as a hover affordance on text links — no arrow icons, no color change, just a warm line
- Motion: `cubic-bezier(0.4, 0, 0.2, 1)` easing at 0.2–0.3s — smooth and deliberate, never bouncy

## Colors

### Primary
- **Parchment** (`{colors.background}`): The editorial canvas for all content sections — a warm cream that reads like uncoated paper, setting the apothecary-pantry tone.
- **Ghia Burgundy** (`{colors.surface}`): The brand ground — header, inverted hero panels, and section-anchoring blocks. Wine-dark, unmistakably Ghia.
- **Burgundy Ink** (`{colors.ink}`): All body text, headlines on light surfaces, borders, and structural outlines. The brand replaces black entirely with this deep wine-red.

### Brand Accent
- **Aperitivo Coral** (`{colors.primary}`): The signature CTA color — a saturated warm pink that reads as festive against both the parchment and the burgundy. Used sparingly: primary buttons, focus underlines, product carousels. Hover darkens to `{colors.primary-hover}`.
- **Botanical Sky** (`{colors.focus-ring}`): A muted sky blue from Ghia's botanical palette — appears on the email newsletter input in the inverted burgundy section, providing a cool complement against the wine-red ground.
- **Teal Chip** (`{colors.primary-container}`): Desaturated teal for product selection chips and "Add to Cart" badge variants — a quieter accent that reads as option state rather than action.

### Borders & Structure
- **Burgundy Border** (`{colors.border}`): 1px solid on outlines, ghost buttons, and form elements — structural weight without gray-out.
- **Parchment Divider** (`{colors.border-subtle}`): Flattened from `rgba(101,28,50,0.15)` on the parchment ground — warm, barely-visible section dividers and rule lines.
- **Neutral Stroke** (`{colors.border-light}`): Tailwind gray-200 (`#e5e7eb`) on select elements — the lightest structural value, typically only on form borders.

### Semantic
- **Error** (`{colors.error}`): Deep terracotta red for validation messages.
- **Success** (`{colors.success}`): Sage green for sale pricing and positive states.
- **Warning** (`{colors.warning}`): Warm amber for urgency indicators.

## Typography

### Font Family
- **Display**: `FHA Condensed French NC`, a custom self-hosted condensed grotesque used exclusively for headings. No Google Fonts equivalent — for implementations, `Bebas Neue` (Google Fonts, free) or `Barlow Condensed Black` work as close substitutes. Always set uppercase.
- **Body / UI**: `Vevey 22 Positive`, a self-hosted contemporary geometric serif with gentle warmth. Georgia or a web fallback serif covers the default stack: `Vevey 22 Positive, Georgia, serif`.
- **OpenType Features**: No variable font axes detected. Standard ligatures implied by the serif body face.

*Note: Both fonts are self-hosted on Ghia's Shopify CDN. For external implementations, `Bebas Neue` + `Lora` or `Source Serif 4` (both Google Fonts) approximate the condensed-display / warm-serif pairing.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines — the largest display moment, ALL CAPS at 79px |
| `display` | Section hero statements and campaign headers at 72px |
| `heading-section` | Major section headings at 48px — product category titles, feature section openers |
| `heading-sub` | Sub-section heads and product group labels at 37px |
| `heading-small` | Tertiary headings and callout text at 30px |
| `body-large` | Lead paragraphs, hero subtitles, editorial intro copy at 18px |
| `body` | Standard product descriptions, about copy, FAQ at 16px |
| `nav-link` | Navigation labels, footer link clusters at 17px |
| `button-ui` | CTA labels and interactive button text at 17px |
| `label-ui` | Uppercase UI labels, field labels, product meta at 17px with 0.02em tracking |
| `caption` | Fine print, legal text, badge labels, product tags at 12px |

### Principles
- **ALL CAPS is non-negotiable for display**: FHA Condensed French NC only reads at its full editorial weight in uppercase. Never set it in mixed case.
- **Display faces never carry body copy**: Vevey 22 Positive handles everything below 28px. The condensed display face reads as decoration at body sizes.
- **Serif body for warmth**: Using a serif for UI and body (rather than a neutral sans) contributes to Ghia's apothecary-editorial character. The roundness of Vevey 22 Positive at 16–18px reads friendly without losing seriousness.
- **Generous line-heights on body**: 1.5–1.56 on prose — the brand encourages reading, not scanning.
- **Minimal letter-spacing**: Neither typeface requires tracking adjustments. The condensed display face has inherent tight spacing; the body serif flows naturally. Only `label-ui` adds a subtle `0.02em` for small uppercase use.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 14px (Ghia's most-used spacing value, with 8px and 20px as secondary anchors).

Ghia's spacing is deliberate and unhurried — the parchment canvas needs room to breathe. Editorial sections use 48–80px of vertical breathing room. Within product grids and content cards, 20–28px governs internal padding. The brand leans toward the generous side of DTC, reinforcing that this is a considered lifestyle product, not a fast-moving consumer good.

### Grid & Container
- Max content width: ~1280px centered, with full-bleed burgundy panels extending edge-to-edge
- Hero: split layout — left text on burgundy with wordmark and headline, right full-bleed product photography
- Product grid: 3-column desktop, 2-column tablet, 1-column mobile
- Email section: full-bleed burgundy band with centered newsletter block
- Footer: multi-column link grid on warm neutral with a burgundy top border

### Whitespace Philosophy
- **Restraint over density**: Ghia resists the temptation to stack products aggressively. Each product gets room to be considered.
- **Burgundy panels as chapter breaks**: Full-bleed wine-red rows anchor and segment the page, functioning as editorial color blocks rather than mere banners.
- **Photography-first composition**: Product imagery fills its container fully — the bottle IS the hero, and spacing serves that hierarchy.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, body sections, full-bleed burgundy panels |
| Hairline (Level 1) | `1px solid {colors.border}` — burgundy | Button outlines, ghost cards, form borders |
| Subtle (Level 2) | `1px solid {colors.border-subtle}` — warm parchment divider | Section rules, gallery item separators |
| Soft Lift (Level 3) | `0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1)` | Cart drawer, floating elements |
| Elevated (Level 4) | `0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.1)` | Modals, overlay panels |
| Focus Ring | `2px solid {colors.focus-ring}` | Interactive input focus — botanical sky blue |

**Shadow Philosophy**: Ghia's depth system is nearly flat. The two shadow declarations dembrandt captured (a Tailwind `shadow-md` and `shadow-lg` equivalent) appear on transient overlays — cart drawers, modals — not on cards or product imagery. The brand prefers color blocking and border weight over shadow for structural depth. The burgundy-on-parchment alternation does all the sectioning work that other brands achieve with box-shadows and elevation tiers.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard editorial moments, full-bleed panels, flush image containers |
| `sm` | 4px | Small chips, price badges, tight UI elements |
| `md` | 16px | Product cards, image frames, secondary buttons — the dominant card radius |
| `lg` | 20px | Large card containers, modal panels |
| `pill` | 9999px | Primary CTA buttons, newsletter submit, all action elements |

The Ghia radius system is binary in spirit: pills for actions, `16px` for containers. The `none` zero-radius appears on full-bleed panels and flush imagery. The `4px` value is a rare accent for tight contexts. The result is soft but deliberate — no anxiety-inducing sharp corners on interactive elements, no fully-round cards that soften structure too much.

## Components

### Button Variants

- **`button-primary`** — Aperitivo Coral (`{colors.primary}`) fill, white text, pill radius. The primary purchase CTA. "YES, I KNOW & LOVE / NO, BUT I'M INTRIGUED" modals use this variant. Hover darkens to `{colors.primary-hover}`.
- **`button-secondary`** — Transparent fill with 1px solid burgundy border (`{colors.border}`), 16px radius. Used for "Shop All" links and secondary editorial actions.
- **`button-ghost`** — Transparent fill with white border on burgundy surfaces, pill radius. Appears inside the inverted hero and email sections for on-dark actions.

### Cards

Product cards on Ghia use the warm parchment background (`{colors.background}`) with a `16px` border radius and no drop shadow — imagery-first, chrome-minimal. Product photography is tightly framed with no border treatment. Card hover states use a `0.3s` transform-based scale rather than shadow growth. On the `card-dark` variant (inverted panels inside burgundy sections), `{colors.surface}` provides the background with white text.

### Inputs

The newsletter email input inside the inverted burgundy section is borderless and transparent, with text rendered in the botanical sky blue (`{colors.focus-ring}`). The underline treatment (bottom border `0 0 2px rgb(239,96,121)` — a coral underline) activates on a sibling focus state. This minimal, single-line input aesthetic is consistent with Ghia's apothecary restraint — no field box, just a warm line under the text.

### Badges / Tags

- **`badge`** — Teal chip (`{colors.primary-container}`) on burgundy ink text, pill radius, used for "Add to Cart" selection chips and product variant state.
- **`badge-coral`** — Coral fill with white text, 16px radius — product category labels and promotional callouts.

### Navigation

The header is a full-bleed burgundy bar (`{colors.surface}`) at approximately 117px from the top (Tailwind arbitrary class `top-[117px]` confirmed in framework detection). The Ghia wordmark is centered as a reversed white SVG. Navigation links run in Vevey 22 Positive 17px, white, on the dark ground. The nav transitions to a mobile hamburger below the 989px breakpoint. Below the main nav, the page shifts to the parchment canvas with an optional announcement band.

## Do's and Don'ts

### Do
- Set all display text in FHA Condensed French NC ALL CAPS — no mixed-case headlines
- Use the burgundy ground (`{colors.surface}`) for hero sections, email bands, and page-anchoring moments — it IS the brand
- Reserve Aperitivo Coral (`{colors.primary}`) for primary CTAs and focus underlines — one or two applications per visible area
- Apply pill radius (`{rounded.pill}`) to all primary action buttons — soft, inviting, deliberate
- Use `16px` radius (`{rounded.md}`) on product cards and containers — soft but not formless
- Use 1px solid burgundy borders for outlines and ghost buttons — the brand's structure color is its ink
- Pair condensed display with body serif Vevey 22 Positive — both voices must appear on every screen
- Allow the parchment canvas (`{colors.background}`) to breathe — 48–80px between major sections
- Use botanical sky (`{colors.focus-ring}`) only in context of the inverted burgundy input — it's a palette accent, not a general link color
- Use warm cream link colors (`{colors.background}`) for text links inside burgundy panels

### Don't
- Don't use the condensed display face for body copy or UI labels — it's an architectural typeface, not a reading face
- Don't introduce white as the main page background — the warmth of `{colors.background}` is intentional
- Don't use Aperitivo Coral (`{colors.primary}`) as a surface color or background fill — it's an accent, not a canvas
- Don't use sharp corners (`{rounded.none}`) on interactive buttons — the pill is the action language
- Don't add drop shadows to product cards — Ghia is flat, depth comes from color blocking
- Don't apply uppercase to body copy set in Vevey 22 Positive — the serif works in sentence case only
- Don't introduce gradients — the palette is entirely solid blocks
- Don't mix the burgundy border with a gray neutral border on the same page level — structural consistency requires the single ink color
- Don't use black (`#000000`) text — burgundy ink (`{colors.ink}`) replaces black entirely on light surfaces
- Don't use the teal chip (`{colors.primary-container}`) as a CTA button color — it reads as state, not action

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <479px | Single-column, display drops to 32–40px, hero stacks vertically |
| Mobile | 479–767px | Single-column, 44–55px display, stacked product cards |
| Tablet | 768–989px | 2-column product grid, nav collapses to hamburger, 55–64px display |
| Desktop | 989–1280px | 3-column product grid, full horizontal nav, 72px display |
| Large Desktop | ≥1280px | Full 3-column grid, 79px hero display, 1280px max content width |

### Touch Targets
- Primary CTAs: minimum 48px tap height — pill buttons with 14px vertical padding
- Nav links: full-row tap targets inside hamburger menu
- Product cards: entire card area is tappable, not just the CTA
- Carousel arrows: 44px circular pill targets

### Collapsing Strategy
- **Nav**: Full horizontal burgundy bar collapses to hamburger below 989px. Mobile menu opens as full-width overlay panel.
- **Display type**: 79px → 55px → 44px → 32px progressive scaling; ALL CAPS and zero-tracking maintained throughout.
- **Hero**: Splits from side-by-side (text left / image right) to stacked on mobile — text block first, product photo below.
- **Product grid**: 3-column → 2-column at 768px → 1-column at 480px.
- **Section spacing**: 80px desktop → 48px tablet → 32px mobile — reduces but never collapses to margins.

### Image Behavior
- Product photography is edge-to-edge within its container at all breakpoints
- Lifestyle and bottle imagery maintains aspect ratio; no forced cropping
- Burgundy hero panels fill the full viewport width at every breakpoint — color-blocking is fundamental, not optional

---

## Agent Prompt Guide

### Quick Color Reference
- Page Background: Parchment (`{colors.background}`) — `#fef6ee`
- Header / Brand Ground: Ghia Burgundy (`{colors.surface}`) — `#651c32`
- Primary Text: Burgundy Ink (`{colors.ink}`) — `#651c32`
- Inverted Text: White (`{colors.on-surface}`) — `#ffffff`
- Primary CTA: Aperitivo Coral (`{colors.primary}`) — `#ef6079`
- CTA Hover: Coral Hover (`{colors.primary-hover}`) — `#cb5267`
- Input Accent: Botanical Sky (`{colors.focus-ring}`) — `#abd2eb`
- Border: Burgundy Border (`{colors.border}`) — `#651c32`
- Divider: Warm Parchment Divider (`{colors.border-subtle}`) — `#e2cebc`

### Example Component Prompts

- "Build a hero section on Ghia Burgundy (`#651c32`) background. Headline in FHA Condensed French NC ALL CAPS at 72px, weight 400, line-height 1.15, color white (`#ffffff`). Subtext in Vevey 22 Positive 18px weight 400, white. CTA button: Aperitivo Coral (`#ef6079`) background, white text, Vevey 22 Positive 17px, `9999px` radius, padding 14px 20px."
- "Design a product card on parchment (`#fef6ee`) background, `16px` border radius, no shadow. Product image full-bleed at top, aspect-ratio 4:5. Title in FHA Condensed French NC ALL CAPS at 30px weight 400, color `#651c32`. Price in Vevey 22 Positive 16px. Primary CTA in Aperitivo Coral (`#ef6079`) pill button at the bottom."
- "Create a full-bleed email subscription band in Ghia Burgundy (`#651c32`). Headline FHA Condensed French NC ALL CAPS 48px white. Email input: transparent background, text in botanical sky (`#abd2eb`), 17px Vevey 22 Positive, no border, `2px solid #abd2eb` bottom border on focus. Submit button: Aperitivo Coral (`#ef6079`) pill, white label."
- "Build a ghost outline button on a parchment surface: transparent background, `1px solid #651c32` border, `16px` radius, `#651c32` text in Vevey 22 Positive 17px, padding 12px 20px. Hover: fills to `#651c32` with white text."
- "Create a product variant selector chip: `#b6cfd0` background, `#651c32` text, Vevey 22 Positive 12px, `9999px` radius, padding 4px 16px. Selected state: swap to `#ef6079` background, white text."
- "Design a navigation bar in `#651c32` full-bleed. White SVG Ghia wordmark centered. Nav links in Vevey 22 Positive 17px weight 400, white, no underline default, 1px white underline on hover. Cart icon 44px tap target right side. Top clearance: 14px vertical padding on the bar."

### Iteration Guide

1. Anchor every layout in the Ghia Burgundy / Parchment alternation — `{colors.surface}` for brand moments, `{colors.background}` for content. Never deviate to white or gray.
2. Set all display text in FHA Condensed French NC ALL CAPS. Scale from 30px (sub-section) to 79px (hero). No tracking adjustments needed.
3. Use Vevey 22 Positive for everything below 28px — body, navigation, buttons, labels, captions.
4. Reserve Aperitivo Coral (`{colors.primary}`) for primary CTAs and active underline states — one dominant application per screen.
5. Shape rule: `{rounded.pill}` for buttons, `{rounded.md}` (16px) for cards and containers — the binary radius system.
6. Structure borders in `{colors.border}` (burgundy) — never gray. Ghia's structural color is its brand color.
7. Depth = color blocking. Skip card shadows; use the burgundy panel / parchment alternation to signal hierarchy.
8. Botanical sky (`{colors.focus-ring}`) appears only in the inverted newsletter context — treat it as a specialty accent.
9. Motion is smooth and unhurried: `cubic-bezier(0.4, 0, 0.2, 1)` at 0.2–0.3s for all transitions.
10. The display typeface is always architectural; the serif body is always conversational. Never swap these roles.

---

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