{
  "id": "audemars-piguet",
  "title": "Audemars Piguet",
  "url": "https://www.audemarspiguet.com",
  "tags": [
    "watches",
    "luxury"
  ],
  "colors": {
    "principle": "Strict monochrome palette (black, white, and cool grays) to allow photographic content to dominate.",
    "bg": "#000000",
    "bgSoft": "#f6f5f3",
    "bgQuiet": null,
    "ink": "#ffffff",
    "inkSoft": "#8b8c8c",
    "muted": "#808080",
    "mutedSoft": null,
    "accent": null,
    "line": "rgba(139, 140, 140, 0.3)"
  },
  "typography": {
    "rules": [
      "Use transitional-serif for high-impact editorial headlines.",
      "Use humanist-sans for all UI elements, navigation, and body copy.",
      "Maintain generous letter spacing for uppercase captions."
    ],
    "scaleUses": [
      "Major headlines and section titles",
      "Standard body text and descriptions",
      "Micro-captions and small labels"
    ],
    "display": "transitional-serif",
    "body": "humanist-sans",
    "mono": null,
    "scale": [
      {
        "token": "display",
        "size": 60,
        "lh": 1.0,
        "weight": 300,
        "ls": "-1.2px"
      },
      {
        "token": "body",
        "size": 16,
        "lh": 1.49,
        "weight": 300,
        "ls": "0.21px"
      },
      {
        "token": "caption",
        "size": 14,
        "lh": 1.71,
        "weight": 300,
        "ls": "1.8px"
      }
    ]
  },
  "spacing": {
    "rhythm": "Generous vertical rhythm with large section padding (100px+) to frame content.",
    "base": 4,
    "scale": [
      4,
      8,
      16,
      24,
      32,
      48,
      64,
      96,
      120
    ]
  },
  "surfaces": {
    "shadows": [
      "rgba(0, 0, 0, 0.2) 0px 0px 18px 0px",
      "rgba(0, 0, 0, 0.2) 0px 0px 10px 0px"
    ],
    "borders": "1px solid rgba(139, 140, 140, 0.3)",
    "radius": {
      "sm": 2,
      "md": 3,
      "lg": 0,
      "pill": 999
    }
  },
  "layout": {
    "skeleton": "Full-bleed hero sections transitioning into black, content-constrained editorial blocks.",
    "container": 1280,
    "paragraph": 680,
    "columns": 12,
    "gutter": 24,
    "breakpoints": [
      768,
      1024
    ]
  },
  "motion": {
    "patterns": [
      "Smooth color and background transitions on interactive elements."
    ],
    "durations": {
      "micro": 220,
      "small": 300,
      "medium": 500
    },
    "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
  },
  "identity": {
    "keywords": [
      "Heritage",
      "Sophistication",
      "Swiss Craftsmanship",
      "Timeless"
    ],
    "analogy": "A cinematic fashion editorial blending heritage with modern storytelling.",
    "oneLiner": "A premium editorial experience for Audemars Piguet, emphasizing heritage, cinematic photography, and restrained luxury."
  },
  "components": {
    "button": "Minimalist text links with a horizontal line prefix instead of traditional borders.",
    "card": "Large, edge-to-edge photographic cards for editorial storytelling.",
    "chip": null,
    "input": "Standard cookie consent buttons with high-contrast black/white styling.",
    "hero": "Full-viewport cinematic photography with overlaid serif typography."
  },
  "interaction": {
    "hover": "Subtle color shifts with a 0.3s ease-in-out transition.",
    "click": "Subtle feedback, likely through opacity or color change.",
    "transition": "All interactive elements use a 300ms transition for consistency.",
    "keyboard": "Standard tab-based navigation for menu items and buttons."
  },
  "voice": {
    "tone": "Sophisticated, poetic, and narrative-driven.",
    "headlineStyle": "Large, thin serif typography, often italicized for emphasis.",
    "ctaStyle": "Subtle and understated, using a line icon and lowercase text.",
    "avoid": [
      "Urgency-driven language",
      "Aggressive call-to-action buttons",
      "Marketing jargon",
      "Busy or cluttered interfaces"
    ]
  },
  "donts": [
    "Don't use bright or neon accent colors — screenshot shows a strict monochrome palette.",
    "Don't use thick, blocky borders for UI elements — screenshot shows delicate 1px lines or borderless text links.",
    "Don't use heavy, bold fonts for headlines — screenshot shows thin, light-weight serif typography.",
    "Don't center all text content — screenshot shows a strong left-aligned typography layout.",
    "Don't use traditional rectangular buttons — screenshot shows text links preceded by a horizontal line.",
    "Don't clutter the interface with multiple competing fonts — screenshot shows a strict serif/sans-serif pairing."
  ],
  "systemPrompt": "This is a premium luxury watch website for Audemars Piguet. The design DNA is deeply cinematic and editorial, prioritizing high-quality photography over UI elements. Key hex colors are #000000 for primary backgrounds and #ffffff for text, creating a high-contrast, monochrome foundation. Typography categories are transitional-serif for display headlines and humanist-sans for body text. Key critical donts: Do not use bright or neon accent colors; do not use thick, blocky borders for UI elements; and do not use heavy, bold fonts for headlines. The layout is defined by full-bleed hero images and generous vertical spacing, creating a sophisticated, unhurried browsing experience."
}