abel___style_reference:
  info: "> Cream paper, black ink, breathing room — an editorial lookbook that smells of perfume."

  theme: "light"

  info: "Abel operates as an editorial fragrance house: one warm cream note against a near-total monochrome canvas, with photography doing the chromatic work. The interface is deliberately quiet — near-black ink on white paper, whisper-light sans-serif headlines (weight 300), and a monospaced voice for all functional microcopy that gives every label, button, and link the cadence of a typeset colophon. Spacing is generous and sectional, letting full-bleed photographic plates alternate with white product cards; the result reads like a printed lookbook rather than a retail UI. The single non-neutral (#f6eada, a warm parchment cream) appears as a subtle surface tint and accent border — never as fill or decoration — so the visual system stays austere while the imagery carries all the color temperature."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Ink Black | `#030303` | `--color-ink-black` | Primary text, hairlines, ghost button borders, product card outlines, icon strokes — the dominant structural color; sets all copy and dividers against white and cream surfaces |"
    info: "| Paper White | `#ffffff` | `--color-paper-white` | Page canvas, product card backgrounds, inverse text on black buttons and dark imagery |"
    info: "| Parchment Cream | `#f6eada` | `--color-parchment-cream` | Warm accent surface, hairline borders, subtle highlight washes — the only chromatic note in the system; appears sparingly as tint, never as bold fill, to echo natural ingredient warmth without competing with photography |"
    info: "| Ash Gray | `#cccccc` | `--color-ash-gray` | Disabled/placeholder surfaces, secondary background panels behind product imagery |"
    info: "| Stone Gray | `#dad9d5` | `--color-stone-gray` | Soft secondary surface, muted card backgrounds for non-primary content blocks |"
    info: "| Pencil Gray | `#807e81` | `--color-pencil-gray` | Medium-contrast borders, control outlines, and structural separators. Do not promote it to the primary CTA color |"

  tokens___typography:

    founders_grotesk___primary_display_and_body_family__weight_300_carries_all_headlines_and_large_editorial_copy___the_ultra_light_cut_is_the_signature_voice__most_fragrance_sites_use_600_700__this_whisper_weight_gives_headlines_a_typeset__almost_printed_feel__weight_500_handles_body_text__descriptions__and_navigation_labels_where_more_presence_is_needed__letter_spacing_opens_slightly__0_01_to__0_02em_at_display_sizes_for_an_airy_editorial_cadence_____font_founders_grotesk:
      - "**Substitute:** Inter, Söhne, Neue Haas Grotesk"
      - "**Weights:** 300, 500"
      - "**Sizes:** 13px, 15px, 16px, 18px, 20px, 32px"
      - "**Line height:** 1.20–1.45"
      - "**Letter spacing:** 0.0100em–0.0200em (positive tracking at larger sizes)"
      - "**Role:** Primary display and body family. Weight 300 carries all headlines and large editorial copy — the ultra-light cut is the signature voice: most fragrance sites use 600–700, this whisper-weight gives headlines a typeset, almost printed feel. Weight 500 handles body text, descriptions, and navigation labels where more presence is needed. Letter-spacing opens slightly (+0.01 to +0.02em) at display sizes for an airy editorial cadence."

    founders_grotesk_mono___functional_monospaced_voice_for_every_ui_element__buttons__nav_labels__announcement_bar_copy__tags__section_titles__input_fields__and_link_text__always_set_uppercase_with_positive_tracking__0_03em___this_monospaced_uppercase_is_what_makes_the_interface_read_as_a_typeset_label_system_rather_than_a_typical_web_ui__at_28px_it_becomes_a_section_heading_style_with_tight_line_height_0_92__creating_a_distinctive_compressed_mono_display_____font_founders_grotesk_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono, Geist Mono"
      - "**Weights:** 400"
      - "**Sizes:** 12px, 13px, 14px, 16px, 28px"
      - "**Line height:** 0.92–1.15"
      - "**Letter spacing:** 0.0300em (uppercase functional text); -0.0200em (display 28px)"
      - "**Role:** Functional monospaced voice for every UI element: buttons, nav labels, announcement bar copy, tags, section titles, input fields, and link text. Always set uppercase with positive tracking (+0.03em) — this monospaced uppercase is what makes the interface read as a typeset label system rather than a typical web UI. At 28px it becomes a section heading style with tight line-height (0.92), creating a distinctive compressed mono display."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 12px | 1.15 | 0.36px | `--text-caption` |"
      info: "| body | 15px | 1.45 | 0.15px | `--text-body` |"
      info: "| body-lg | 18px | 1.35 | — | `--text-body-lg` |"
      info: "| subheading | 20px | 1.25 | — | `--text-subheading` |"
      info: "| display | 28px | 0.92 | -0.56px | `--text-display` |"
      info: "| heading | 32px | 1.2 | — | `--text-heading` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "spacious"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 0px |"
      info: "| badges | 0px |"
      info: "| images | 0px |"
      info: "| inputs | 0px |"
      info: "| buttons | 0px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 72px"
      - "**Card padding:** 40px"
      - "**Element gap:** 12px"

  components:

    announcement_bar:
      role: "Top utility strip — new product launches, shipping notices, editorial callouts."

      info: "Full-width white bar, 38–40px vertical padding. Center-aligned copy in Founders Grotesk Mono 12px, weight 400, uppercase, letter-spacing 0.03em, #030303. Close (×) icon right-aligned. No background fill — sits flush against white canvas with no border."

    site_header_with_wordmark:
      role: "Primary navigation and brand identity on every page."

      info: "Transparent over imagery, white on solid sections. Wordmark 'Abel' centered in Founders Grotesk 500, 32px, #030303, letter-spacing 0.01em. Left: MENU in Mono 12px uppercase with hamburger icon, 12px gap. Right: search icon + CART label, Mono 12px uppercase, 20px gap between items. All elements vertically centered with 20px vertical padding."

    hero_full_bleed_plate:
      role: "Opening editorial spread — sets mood through photography with overlaid copy."

      info: "Edge-to-edge photography filling the viewport, no border, no radius. Caption block anchored bottom-left with 40px left padding: section title in Mono 13–14px uppercase (e.g. 'INTRODUCING, MIAMI SPLIT'), supporting body in Founders Grotesk 300 at 15–16px, and a underlined Mono ghost link 12px. Text color is #ffffff on dark imagery, #030303 on light imagery."

    ghost_text_link:
      role: "Tertiary navigation, editorial cross-references, product page secondary actions."

      info: "Inline link in Founders Grotesk Mono 12–13px, weight 400, uppercase, letter-spacing 0.03em, #030303. 1px underline (text-decoration or bottom border) in same color. No background, no border, no padding — pure typographic link. 12px gap to surrounding elements."

    solid_cta_button:
      role: "Primary commerce action — add to cart, shop product, checkout."

      info: "Solid #030303 fill, #ffffff text. Founders Grotesk Mono 12–13px, weight 400, uppercase, letter-spacing 0.03em. 10px vertical padding × 40px horizontal padding. Zero border-radius. No hover state changes fill — invert to #ffffff with #030303 text and 1px border. Width auto, left-aligned within its container."

    product_detail_card:
      role: "Centered product showcase on PDP — bottle, notes, and purchase entry."

      info: "White #ffffff canvas. Product name 'MIAMI SPLIT' in Founders Grotesk 500, 20px, #030303, letter-spacing 0.02em, centered. Category line 'EAU DE PARFUM' in Mono 12px uppercase above it. Centered product image (transparent PNG, no background, no shadow). Below: scent note descriptor in Founders Grotesk 300, 15–16px, centered. CTA button beneath with 32px gap. No card border, no shadow — the product floats on white."

    editorial_caption_block:
      role: "Body copy accompanying hero and section imagery."

      info: "Left-aligned, max-width ~360px. Section eyebrow in Mono 13px uppercase, 11–12px below it body copy in Founders Grotesk 300 at 15–16px, line-height 1.45. #030303 on light backgrounds, #ffffff on dark imagery."

    footer:
      role: "Site map, legal, newsletter — quiet utility closing the page."

      info: "White or Stone Gray #dad9d5 background. 38px top/bottom padding. Mono 12px uppercase labels for column headers. Mono 12px for links. No heavy dividers — grouping is done through generous whitespace and column gap of 40px."

    navigation_drawer_trigger:
      role: "Hamburger menu and cart flyout entry points."

      info: "Icon + label pair in Mono 12px uppercase, 12px gap between icon and text. #030303. No background, no border. Tapping reveals full-screen overlay menu on white with large Mono link stack."

    section_label:
      role: "Small uppercase title introducing each content block."

      info: "Founders Grotesk Mono 13–14px, weight 400, uppercase, letter-spacing 0.03em, #030303. Leading uppercase, 20px top margin from preceding section."

    text_input:
      role: "Newsletter signup, search field, contact forms."

      info: "Transparent background, 1px bottom border in #030303, no side borders, no radius. Placeholder and input text in Founders Grotesk 300 or Mono 12–14px, #030303. 10–12px vertical padding. No focus ring — the persistent bottom border is the only affordance."

  do_s_and_don_ts:

    do:
      - "Set every headline in Founders Grotesk weight 300 — the whisper-light cut is the brand's editorial signature, never use bold or semibold for display copy."
      - "Use Founders Grotesk Mono 12–14px uppercase with +0.03em letter-spacing for all buttons, links, navigation, and section labels — the monospaced voice is what makes the UI read as a typeset colophon."
      - "Let the system run on #030303 ink and #ffffff paper; introduce #f6eada Parchment Cream only as a subtle surface tint or hairline accent, never as a bold fill block."
      - "Give every section 72px of vertical breathing room; the spacious density is non-negotiable for the editorial register."
      - "Keep all corners sharp — zero border-radius on buttons, cards, images, and inputs preserves the printed/editorial feel."
      - "Alternate full-bleed photographic plates with white product surfaces to create the lookbook rhythm."
      - "Use the 28px compressed Mono display (line-height 0.92, letter-spacing -0.02em) for section-level mono headings, not a separate large sans-serif."

    don_t:
      - "Don't use elevation, drop shadows, or any depth effect — the system is intentionally flat; a shadow would break the printed-paper illusion."
      - "Don't introduce saturated chromatic colors into the UI palette — all color temperature comes from photography, not from interface fills."
      - "Don't use Founders Grotesk weight 700 or 800 for headlines — the entire brand voice is built on weight 300 restraint."
      - "Don't set Mono text in sentence case; all functional monospaced copy is uppercase."
      - "Don't use icons larger than 16px in navigation or 20px in utility contexts — the system is text-led, icons are supporting marks only."
      - "Don't fill buttons with color — buttons are either solid #030303 (primary) or ghost underlined Mono text (secondary); there is no colored button state."
      - "Don't add borders or backgrounds to product imagery — perfume bottles and lifestyle photos float directly on the canvas with no framing."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Paper White | `#ffffff` | Base page canvas — product detail pages, editorial sections, and the dominant surface for all non-hero content. |"
    info: "| 1 | Stone Gray | `#dad9d5` | Recessed background panels for product carousels and grouping blocks. |"
    info: "| 2 | Parchment Cream | `#f6eada` | Warm accent surface — the only chromatic elevation tier, used for featured panels and hairline borders. |"

  imagery:

    info: "Full-bleed editorial photography is the entire visual engine of the site. Lifestyle plates show models in saturated, almost ironic wardrobe (pale yellow puffer jacket, bananas clutched as still-life) — the styling is high-fashion, slightly surreal, and occupies the full viewport with no cropping or framing. Product photography shifts between dark moody macro shots (deep olive/green, shallow depth of field, bottle emerging from darkness) and clean white-bg product isolation on PDPs. There is no illustration, no 3D rendering, no icon system beyond minimal line marks. Image treatment is always photographic, never filtered or duotoned — color comes from the captured scene, not from post-processing. The ratio of image to text is roughly 70/30, with imagery functioning as atmosphere rather than product showcase in hero sections."

  layout:

    info: "Full-bleed editorial layout with no max-width constraint on the canvas itself — imagery stretches edge-to-edge while text blocks are constrained to ~360–480px columns anchored bottom-left or centered. The page reads top-to-bottom as alternating plates: full-bleed dark hero → full-bleed lifestyle product shot → white PDP with centered minimal product. Section rhythm is spacious with 72px gaps; content within sections breathes through 20–40px internal padding. Navigation is a minimal header bar (logo centered, menu left, cart right) over a thin announcement bar — no sticky behavior, no mega-menu visible at the top level. The PDP uses a centered single-column stack rather than the typical two-column product layout, reinforcing the lookbook-over-retail feel."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #030303"
    - "background: #ffffff"
    - "border: #030303"
    - "accent: #f6eada (Parchment Cream)"
    - "muted text: #807e81"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "**Build the hero plate:** Full-bleed photographic background filling 100vh. Bottom-left caption block with 40px left padding: eyebrow in Founders Grotesk Mono 13px uppercase, +0.03em tracking, #ffffff. Title in Founders Grotesk 300 at 32px, #ffffff. Body in Founders Grotesk 300 at 15–16px, line-height 1.45, #ffffff. Ghost link at 12px Mono uppercase underlined."

    info: "No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color."

    - "**Build the ghost link:** Inline element, Founders Grotesk Mono 12px weight 400, uppercase, +0.03em tracking, #030303, 1px underline. No background, no border, no padding. 12px gap to adjacent elements."

    - "**Build the announcement bar:** Full-width white strip, 38px top/bottom padding. Centered Mono 12px uppercase #030303 copy with 0.03em tracking. Close × icon right-aligned in #030303."

    - "**Build the footer:** Stone Gray #dad9d5 background, 38px vertical padding, 40px column gap. Column headers in Mono 12px uppercase #030303. Links in Mono 12px #030303 with 12px vertical gap between items."

  elevation_philosophy:

    info: "The system is intentionally flat — no shadows, no blurs, no glows. Visual hierarchy is built entirely through typographic weight contrast (Founders Grotesk 300 vs 500), generous whitespace, and surface tint shifts (white → Stone Gray → Parchment Cream). Depth, when it exists, comes from photography, not from CSS elevation."

  similar_brands:

    - "**Aesop** — Same restrained monochrome UI with serif/sans editorial typography and product photography as the chromatic content; both use generous whitespace and zero border-radius."
    - "**Le Labo** — Shared ultra-minimal commerce layout with uppercase tracked labels, centered wordmark, and full-bleed lifestyle photography over near-empty pages."
    - "**Byredo** — Comparable editorial-fragrance aesthetic: light canvas, large light-weight headlines, monospaced or tracked uppercase micro-typography, and photographic plates carrying all color."
    - "**Diptyque** — Similar printed-lookbook rhythm with centered minimal PDPs, Mono-functional labels, and photography alternating with white space rather than card grids."

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ink-black: #030303;
          --color-paper-white: #ffffff;
          --color-parchment-cream: #f6eada;
          --color-ash-gray: #cccccc;
          --color-stone-gray: #dad9d5;
          --color-pencil-gray: #807e81;
        
          /* Typography — Font Families */
          --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-founders-grotesk-mono: 'Founders Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.15;
          --tracking-caption: 0.36px;
          --text-body: 15px;
          --leading-body: 1.45;
          --tracking-body: 0.15px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.35;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-display: 28px;
          --leading-display: 0.92;
          --tracking-display: -0.56px;
          --text-heading: 32px;
          --leading-heading: 1.2;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
          --font-weight-medium: 500;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 72px;
          --card-padding: 40px;
          --element-gap: 12px;
        
          /* Named Radii */
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-images: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-paper-white: #ffffff;
          --surface-stone-gray: #dad9d5;
          --surface-parchment-cream: #f6eada;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ink-black: #030303;
          --color-paper-white: #ffffff;
          --color-parchment-cream: #f6eada;
          --color-ash-gray: #cccccc;
          --color-stone-gray: #dad9d5;
          --color-pencil-gray: #807e81;
        
          /* Typography */
          --font-founders-grotesk: 'Founders Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-founders-grotesk-mono: 'Founders Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        
          /* Typography — Scale */
          --text-caption: 12px;
          --leading-caption: 1.15;
          --tracking-caption: 0.36px;
          --text-body: 15px;
          --leading-body: 1.45;
          --tracking-body: 0.15px;
          --text-body-lg: 18px;
          --leading-body-lg: 1.35;
          --text-subheading: 20px;
          --leading-subheading: 1.25;
          --text-display: 28px;
          --leading-display: 0.92;
          --tracking-display: -0.56px;
          --text-heading: 32px;
          --leading-heading: 1.2;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-64: 64px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        }