---
name: TAG Heuer
description: "Excellent example of luxury e-commerce restraint where every design decision reinforces Swiss precision and premium positioning through radical simplicity."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#808080"
  tertiary: "#E31937"
  neutral: "#808080"
  bg-soft: "#F5F5F5"
  muted-soft: "#707070"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 32px
    lineHeight: 1.1
    fontWeight: 900
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "2px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Luxury Swiss watchmaker emphasizing precision, heritage, and bold minimalism through stark monochrome palette with surgical red accents

*A high-end automotive dashboard meets Swiss precision engineering*

## Colors

High-contrast monochrome foundation with a single surgical red accent for primary actions, ensuring luxury restraint and maximum readability

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#808080`)** — uses `ink-soft` token
- **Accent (`#E31937`)** — uses `accent` token
- **Muted (`#808080`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- All-caps for navigation and section headers with 2px letter-spacing
- Bold weight reserved exclusively for primary call-to-action headlines
- Body text maintains strict 400 weight for maximum legibility

## Layout

Full-width hero imagery overlaid with centered modal containers, grid-based product display in background

*Rhythm:* 4px base unit creating a strict modular scale with generous whitespace for luxury positioning

## Elevation & Depth

- 0 0 20px rgba(0,0,0,1)
- none
- Borders: Minimal 1px solid borders used primarily for modal containment and input fields, otherwise relying on whitespace separation

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Sharp rectangular primary buttons with high-contrast black/white fills, uppercase 12px text with 2px letter-spacing
- **card:** Image-forward product cards with minimal text overlays and clean borders
- **input:** Minimal text inputs with clean borders and 12px uppercase labels
- **hero:** Full-viewport product photography with transparent navigation overlay and prominent centered CTAs

## Do's and Don'ts

**Don't:**
- Don't use rounded corners — screenshot shows sharp rectangular buttons and modal containers
- Don't add drop shadows to primary elements — screenshot shows flat, shadow-free surfaces
- Don't use serif typography — screenshot shows exclusively geometric sans-serif typefaces
- Don't introduce secondary accent colors — screenshot uses only black, white, gray, and surgical red
- Don't use casual lowercase headlines — screenshot shows strict all-caps treatment for navigation
- Don't add decorative elements — screenshot shows clean, minimal interfaces with whitespace

---

## System Prompt (paste into AI agent)

```
TAG Heuer luxury watch e-commerce site embodying Swiss precision and automotive heritage through stark monochrome design. Core palette: pure white (#FFFFFF) backgrounds, absolute black (#000000) for text and primary buttons, medium gray (#808080) for secondary content, and surgical red (#E31937) for critical call-to-action elements. Typography is exclusively geometric sans-serif with bold weight (900) reserved for key headlines and regular weight (400) for all body content, using strict all-caps treatment with 2px letter-spacing for navigation and labels. Critical design principles: absolute restraint with zero decorative elements, sharp rectangular geometry throughout (no rounded corners), maximum whitespace for luxury positioning, and high-contrast color blocking for immediate visual hierarchy. Avoid: any playful or casual elements, rounded UI components, secondary color accents beyond red, serif or script typefaces, and complex animations that would undermine the precision-focused brand identity.
```