# TAG Heuer · Design system migration spec

> Source: https://www.tagheuer.com  ·  Curated by OpenDesign  ·  en

> Excellent example of luxury e-commerce restraint where every design decision reinforces Swiss precision and premium positioning through radical simplicity.

## 1. Identity DNA

The TAG Heuer design system operates with the exacting logic of a high-end automotive dashboard merged with Swiss watchmaking precision. Every component is a deliberate instrument, calibrated for function and stripped of ornamentation.

**One-liner:** Luxury Swiss watchmaker emphasizing precision, heritage, and bold minimalism through stark monochrome palette with surgical red accents
**Keywords:** luxury · precision · automotive · heritage · Swiss
**Analogy:** A high-end automotive dashboard meets Swiss precision engineering

## 2. Color

The palette is a study in stark authority, built on a foundation of absolute contrast. A single surgical red is deployed not as decoration, but as a functional signal for critical actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#808080` | secondary text |
| `--muted` | `#808080` | placeholder |
| `--muted-soft` | `#707070` | weak hint |
| `--accent` | `#E31937` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The governing principle is restraint: color is used sparingly to establish hierarchy and direct focus, never to embellish.

## 3. Typography

Typography speaks with the voice of technical documentation, using an exclusively geometric sans-serif for unambiguous clarity. Bold weight is a reserved instrument, called upon only for primary call-to-action headlines, while all body content maintains a strict 400 weight for effortless legibility.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.1 | 900 | -0.5px | Modal welcome headline |
| body | 16px | 1.5 | 400 | 0px | Primary body text and descriptions |
| caption | 12px | 1.5 | 400 | 2px | Navigation links, labels, and fine print |

**Type rules:**
- 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

## 4. Spacing

Spacing adheres to a strict 4px modular rhythm, creating a grid of invisible architecture.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base unit creating a strict modular scale with generous whitespace for luxury positioning

## 5. Surfaces

Surfaces exist in a near-binary state of depth, defined by either a deep, absolute shadow or complete flatness. Borders are minimal 1px rules, used solely for containing discrete elements like modals and inputs, with whitespace serving as the primary separator.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 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

## 6. Layout

The layout skeleton prioritizes full-viewport hero imagery as the dominant visual field. Over this, centered modal containers and a disciplined grid for product displays establish a clear, hierarchical reading path.

- **Container max:** 1440px
- **Paragraph max:** 600px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 / 1440 px

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

## 7. Motion & Interaction

Motion is treated as a functional transition between states, not as decoration. All animations are brief and purposeful, using standardized timing to reinforce a sense of mechanical reliability and instantaneous response.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - 0.3s ease-in-out for primary state changes
  - 0.5s ease-out for modal fade transitions
  - Transform-based interactions for button hover states

- **Hover:** Subtle background-color and border-color transitions over 0.15s ease-in-out
- **Click:** Immediate visual feedback through color inversion or subtle scale transform
- **Transition:** All transitions standardized at 0.3s ease-in-out for consistent micro-interactions
- **Keyboard:** Standard focus management for modal dialogs with escape-to-close functionality

## 8. Voice & Don'ts

The editorial voice is authoritative and declarative, mirroring the precision of the products it describes. Language is direct, using bold uppercase statements and imperative commands without emotional inflection.

- **Tone:** Authoritative, precise, and confident with minimal emotional language
- **Headline style:** Bold uppercase declarations with geometric precision and negative tracking
- **CTA style:** Direct imperative commands in all-caps with generous letter-spacing for maximum clarity
- **Avoid:** Casual or conversational language / Decorative or script typography / Soft color palettes or gradients / Rounded corners or playful elements / Complex multi-step flows for simple actions

### Don'ts
- ❌ 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

The system deliberately excludes casual language, rounded forms, decorative typography, and soft gradients to maintain unwavering brand integrity.

## System Prompt (paste into AI tool)

```
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.
```
