A high-end automotive dashboard meets Swiss precision engineering
02
Color
#E31937Accent
#000000Ink
#808080Ink soft
#FFFFFFBG
#F5F5F5BG soft
rgba(0,0,0,0.1)Line
High-contrast monochrome foundation with a single surgical red accent for primary actions, ensuring luxury restraint and maximum readability
03
Typography
geometric-sans
display32px · 900
body16px · 400
caption12px · 400
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
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
4px base unit creating a strict modular scale with generous whitespace for luxury positioning
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Minimal 1px solid borders used primarily for modal containment and input fields, otherwise relying on whitespace separation
0 0 20px rgba(0,0,0,1) · none
06
Layout
1440container
12columns
24pxgutter
768 / 1024 / 1440breakpoints
Full-width hero imagery overlaid with centered modal containers, grid-based product display in background
07
Motion & Interaction
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
0.3s ease-in-out for primary state changes · 0.5s ease-out for modal fade transitions · Transform-based interactions for button hover states
Subtle background-color and border-color transitions over 0.15s ease-in-out · Immediate visual feedback through color inversion or subtle scale transform
08
Components
buttonSharp rectangular primary buttons with high-contrast black/white fills, uppercase 12px text with 2px letter-spacing
cardImage-forward product cards with minimal text overlays and clean borders
inputMinimal text inputs with clean borders and 12px uppercase labels
heroFull-viewport product photography with transparent navigation overlay and prominent centered CTAs
09
Voice & Don'ts
ToneAuthoritative, precise, and confident with minimal emotional language
HeadlinesBold uppercase declarations with geometric precision and negative tracking
CTAsDirect imperative commands in all-caps with generous letter-spacing for maximum clarity
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
Captured from the live site · real computed styles
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
