TAG Heuer

Overview

TAG Heuer is a Swiss luxury watchmaker founded in 1860, renowned for pioneering precision chronographs and avant-garde sports timing innovations. The design system embodies Architectural Minimalism—a philosophy that prioritizes geometric precision, sharp edges, and functional clarity over ornament. Every interface element reflects the brand's DNA: technical mastery, competitive spirit, and uncompromising quality. The visual language is deliberately austere: pure black (#000000) and white (#FFFFFF) form the foundation, with a vivid red accent (#D22733) reserved exclusively for high-stakes CTAs and brand moments. This restraint evokes confidence and precision—the user feels they're interacting with a tool engineered for champions.

The brand voice is authoritative yet approachable: concise, performance-focused, and never breathless. Sentences are active and direct. Example: "Precision timing since 1860. Engineered for champions." The typography is set in Apax-TAG-Heuer, a proprietary geometric sans-serif that reinforces the brand's Swiss heritage and technical rigor. Every spacing decision, shadow, and radius serves function first—no decorative excess.

Colors

The color system is built on a high-contrast, minimalist foundation that reflects TAG Heuer's precision-engineering heritage. Primary (#D22733) is a vivid, slightly desaturated red used exclusively on CTAs, active states, and brand-critical moments—it commands attention without aggression. Secondary (#3860BE) is a technical blue supporting data visualization, links, and secondary actions. Tertiary (#008D5C) and accent green (#7ED321) are reserved for status indicators: success states, availability, and performance metrics.

The surface stack is deliberately monochromatic: Surface (#FFFFFF) is the default canvas, with container variants stepping down through grays (#FAFAFA, #F2F2F2, #E9ECEF) to create subtle depth without color noise. On-surface (#000000) is pure black for maximum legibilit

Typography

The type system is a three-tier hierarchy reflecting TAG Heuer's technical precision. Display (60px, 700 weight, -0.04em tracking) is reserved for hero moments and brand statements. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections with crisp authority. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry narrative content with generous line-height (1.56x) for legibility on screens. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) are used for UI labels, buttons, and metadata. All type is set in Apax-TAG-Heuer, a geometric sans-serif that echoes Swiss modernism. When small labels (12px) appear over busy product photography, apply text-shadow 0 2px 4px rgba(0,

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1280px, centered on the viewport. This rigid structure reflects TAG Heuer's precision heritage: no fluid breakpoints, no ambiguity. Mobile layouts (< 768px) collapse to single-column with 24px (md spacing) gutters; tablet (768px–1023px) uses 6 columns; desktop (1024px+) uses the full 12-column grid. Section separation is enforced via lg spacing (40px) between major content blocks, with md spacing (24px) for subsections. Cards and containers use md spacing (24px) internal padding. The white-space philosophy is generous but purposeful: negative space is never wasted, every gap serves to isolate and emphasize. Container max-width is 1280px to prevent line-length from exceeding 80 characters at body-lg size, maintainin

Elevation & Depth

Depth is conveyed through a three-level shadow system that avoids blur and favors sharp, geometric contrast. Level 1 (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) is used for subtle dividers and hover states on secondary elements—barely perceptible, reinforcing the minimalist aesthetic. Level 2 (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) is the standard for cards, modals, and primary interactive surfaces—sharp enough to separate from the background without theatrical depth. Level 3 (lg elevation: 0 16px 40px rgba(0, 0, 0, 0.12)) is reserved for modal overlays and top-level UI elements that d

Shapes

The shape philosophy is Architectural Sharpness: minimal rounding, maximum clarity. Buttons use DEFAULT radius (0.5rem / 8px) for a subtle softness that prevents harshness without sacrificing precision. Cards and modals use lg radius (1rem / 16px) to distinguish them from buttons while maintaining geometric discipline. Input fields use DEFAULT radius (0.5rem / 8px) to align with button language. Badges and pills use full radius (9999px) only when they represent status or metadata—never for primary containers. The rationale: sharp corners would feel cold and industrial; excessive rounding would

Components

Action Elements Buttons are the primary interaction language. Button-primary uses {colors.primary} (#D22733) background with white text, 20px horizontal / 12px vertical padding, and DEFAULT radius (8px). On hover, transition to {colors.primary-fixed-dim} (#D22733 at 100% opacity, no lightening) over 200ms. Button-secondary uses transparent background with {colors.primary} text and a 1px solid border at {colors.primary}, 12px horizontal / 10px vertical padding, and 600 font-weight for visual distinction. On hover, fill the background with {colors.surface-container-high} (#E9ECEF) while maintaining the border. Button-ghost is a tertiary option: transparent background, {colors.on-surface} text, no border, used for navigation and low-priority actions. All buttons enforce uppercase text-tra

Do's and Don'ts

**Do**

• Do use {colors.primary} (#D22733) exclusively on CTAs, active states, and brand moments—never on decorative elements or backgrounds.
• Do maintain 1px solid borders at {colors.outline} (#DAD9D9) on all cards, inputs, and containers to reinforce architectural clarity.
• Do enforce uppercase text-transform on button labels and section headings to amplify the brand's technical authority.
• Do use md spacing (24px) as the default gap between major content blocks; use lg spacing (40px) only for section separation.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (12px) over product photography to ensure legibility.
• Do transition all interactive states (hover, focus, active) over 200ms ease-in-out to convey mechanical precision.

**Don't**

• Don't use opacity or blur to create depth—use the three-level shadow system (sm, md, lg elevation) exclusively.
• Don't apply rounding > 1rem (16px) to buttons, cards, or inputs; excessive rounding undermines the architectural aesthetic.
• Don't use secondary colors (blue #3860BE, green #7ED321) on primary CTAs; reserve them for data visualization and status indicators.
• Don't stack multiple headlines without 40px (lg spacing) separation; dense typography breaks the minimalist rhythm.
• Don't use system fonts or generic sans-serif fallbacks; always specify Apax-TAG-Heuer as the primary typeface.
• Don't apply box-shadow with blur-radius > 16px or vertical offset > 0px; maintain sharp, geometric shadows that reflect precision.