zellerfeld___style_reference:
  info: "> Sculptor's atelier on white marble — monolithic plinth surfaces, single cobalt spark, lowercase whispers from floor to ceiling."

  theme: "light"

  info: "Zellerfeld reads as a digital sculptor's gallery on white marble — a 3D-printing footwear marketplace where monochrome surfaces, generous whitespace, and oversized lowercase typography let each product behave like a museum object. The interface commits to extreme restraint: 99% achromatic canvas with a single electric cobalt (#000aff) reserved for urgency — badges, the active 'Shop' nav, the current-slide state. Cards float on a warm pearl gray rather than pure white, giving the grid a tactile, plaster-cast quality. Type stays in a single custom grotesque (Roobert) at tight -0.04em tracking, with Space Mono dropped in only for prices, ranks, and technical metadata. The result is a product page that feels closer to a design press site than a retail checkout — objects are photographed, not sold."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Electric Cobalt | `#000aff` | `--color-electric-cobalt` | New In badges, active nav pill, current-slide indicator, claim moments — the only chromatic signal in the system, used sparingly so it reads as activation not decoration |"
    info: "| Pale Iris | `#e5e7ff` | `--color-pale-iris` | New Color badge fill, soft highlight wash, tinted surface for variant callouts — a desaturated ghost of the cobalt that whispers color without breaking the monochrome regime |"
    info: "| Ink Black | `#111111` | `--color-ink-black` | Primary text, default borders, icon strokes, hairline dividers — the dominant structural color across headings, lists, and links |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Neutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color |"
    info: "| Plaster | `#ecedee` | `--color-plaster` | Secondary surface for product cards, nav bar background, soft elevation tier above the canvas |"
    info: "| Slate | `#a1a4aa` | `--color-slate` | Card border tone, neutral button fill, muted button border — the gray that defines card edges without darkening them |"
    info: "| Fog | `#d7d7d7` | `--color-fog` | Light card border, divider lines, inactive surface tint |"
    info: "| Graphite | `#444955` | `--color-graphite` | List and navigation borders, structural dividers between rows and cells |"
    info: "| Ash | `#737780` | `--color-ash` | Secondary text, muted body copy, de-emphasized metadata, link rest state |"
    info: "| Charcoal | `#3b3b3b` | `--color-charcoal` | Body text alternate, subtle dark surface for inset blocks |"

  tokens___typography:

    roobert___primary_brand_typeface___used_for_everything_from_13px_body_to_128px_hero__the__0_04em_tracking_is_consistent_across_all_sizes__pulling_the_lowercase_wordmark_into_a_tight__sculpted_mass__weights_escalate_by_context__400_for_body_and_ui__500_for_emphasized_labels__600_for_product_names__700_for_large_display_____font_roobert:
      - "**Substitute:** Inter, General Sans, Satoshi"
      - "**Weights:** 400, 500, 600, 700"
      - "**Sizes:** 13, 14, 15, 16, 20, 32, 40, 64, 128"
      - "**Line height:** 1.00, 1.15, 1.20, 1.35, 1.40, 1.50"
      - "**Letter spacing:** -0.04em at all sizes"
      - "**Role:** Primary brand typeface — used for everything from 13px body to 128px hero. The -0.04em tracking is consistent across all sizes, pulling the lowercase wordmark into a tight, sculpted mass. Weights escalate by context: 400 for body and UI, 500 for emphasized labels, 600 for product names, 700 for large display."

    space_mono___technical_metadata___prices__189_00__top_10_rank_numerals__ticker_marks__shop_name_credits__drops_in_where_the_page_needs_to_feel_like_a_spec_sheet_rather_than_marketing_copy_____font_space_mono:
      - "**Substitute:** JetBrains Mono, IBM Plex Mono"
      - "**Weights:** 400, 600"
      - "**Sizes:** 12, 14"
      - "**Line height:** 1.00, 1.35, 1.50"
      - "**Role:** Technical metadata — prices (€189,00), Top 10 rank numerals, ticker marks, shop name credits. Drops in where the page needs to feel like a spec sheet rather than marketing copy."

    arial___arial___detected_in_extracted_data_but_not_described_by_ai____font_arial:
      - "**Weights:** 400"
      - "**Sizes:** 13px"
      - "**Line height:** 1.2"
      - "**Role:** Arial — detected in extracted data but not described by AI"

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.4 | -0.52px | `--text-caption` |"
      info: "| body-lg | 16px | 1.4 | -0.64px | `--text-body-lg` |"
      info: "| subheading | 20px | 1.35 | -0.8px | `--text-subheading` |"
      info: "| heading-sm | 32px | 1.2 | -1.28px | `--text-heading-sm` |"
      info: "| heading | 40px | 1.15 | -1.6px | `--text-heading` |"
      info: "| heading-lg | 64px | 1 | -2.56px | `--text-heading-lg` |"
      info: "| display | 128px | 1 | -5.12px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 40 | 40px | `--spacing-40` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 64 | 64px | `--spacing-64` |"
      info: "| 96 | 96px | `--spacing-96` |"
      info: "| 100 | 100px | `--spacing-100` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 10px |"
      info: "| pills | 30px |"
      info: "| badges | 30px |"
      info: "| images | 10px |"
      info: "| inputs | 10px |"
      info: "| buttons | 10px |"

    layout:

      - "**Page max-width:** 1440px"
      - "**Section gap:** 80px"
      - "**Card padding:** 20px"
      - "**Element gap:** 16px"

  components:

    announcement_bar:
      role: "Top-of-page promotional strip"

      info: "Full-bleed deep navy (~#000340) background, centered white Roobert 13px body text reading promotional copy. Sits above the main navigation as a thin 32-40px bar. No close button visible — passive, always-on."

    main_navigation:
      role: "Primary site navigation"

      info: "White surface, horizontal flex layout. Left: grid icon button (icon stroke 1.5px, #111). Center-left: 'Shop' pill button — white background, #111 border, 10px radius, 8px 14px padding, 14px Roobert 500. Center: wordmark 'zellerfeld' in Roobert with the logomark. Right: search icon button, 'Account' text link in Ash (#737780), wishlist heart icon. 48-56px height. Border-bottom: 1px #ecedee."

    hero_with_background_imagery:
      role: "Above-the-fold product feature"

      info: "Full-bleed photographic background covering the full viewport height. Image bleeds edge-to-edge with no border-radius. Overlaid bottom-left: 'New In' cobalt badge (see badge spec), then a 64-128px display headline in Roobert 700 white, lowercase ('studio runner'), letter-spacing -5px. Beneath: 15-16px subhead in white at ~80% opacity. Right-side floating product card (see Floating Product Card)."

    floating_product_info_card:
      role: "In-hero product buy card"

      info: "White surface, 14.4-20px radius, 16-20px padding. Contains: small product thumbnail (60x60, 10px radius), product name in Roobert 600 16px Ink, 'By studio' in Space Mono 12px Ash, price in Space Mono 600 14px Ink. CTA: 'Shop studio runner' — black (#111) filled button, white text, 10px radius, 8px 20px padding."

    ranked_product_card_top_10:
      role: "Numbered editorial product list item"

      info: "Plaster (#ecedee) surface, 10px radius, no border. Each card spans 1/4 of viewport width. Giant translucent rank numeral (1, 2, 3, 4) in Roobert 700 at 200-280px, white at ~60% opacity, positioned top-right as a watermark. Product image centered, natural proportions. Below image: 20px gap, then small 40x40 brand logo thumbnail (white bg, 4px radius), product name in Roobert 600 16px Ink, 'By {brand}' in Space Mono 12px Ash, price in Space Mono 400 12px Ink."

    standard_product_card_new_releases:
      role: "Grid product display card"

      info: "Plaster (#ecedee) surface, 10px radius, no border. Width 1/4 of grid. Top-left: status badge (New In / Sold Out / New Color). Centered product image fills the card with ~60% height. Below: 16px gap, brand logo thumbnail 40x40 (white surface, 4px radius), product name Roobert 600 16px Ink, 'By {brand}' in Space Mono 12px Ash, price in Space Mono 400 12px Ink."

    new_in_badge:
      role: "Status indicator for fresh products"

      info: "Electric Cobalt (#000aff) background, white text 'New In' in Roobert 600 12px. Pill shape, 30px border-radius, 4px 8px padding. Sits absolute top-left of product card with 12px offset."

    sold_out_badge:
      role: "Inventory status indicator"

      info: "Slate (#a1a4aa) background, white text 'Sold Out' in Roobert 600 12px. Pill shape, 30px border-radius, 4px 8px padding. Identical dimensions to New In badge so badge layout doesn't shift."

    new_color_badge:
      role: "Variant announcement"

      info: "Pale Iris (#e5e7ff) background, Ink (#111) text 'New Color' in Roobert 600 12px. Pill shape, 30px border-radius, 4px 8px padding. Reads as a softer sibling of the New In badge."

    see_all_button:
      role: "Section-end navigation"

      info: "Full-width of content column (not edge-to-edge), white surface, Ink (#111) text 'See All' in Roobert 500 16px, 10px radius, 12px 24px padding, 1px #ecedee border. Centered below product grid."

    featured_in_media_bar:
      role: "Press credentials strip"

      info: "Ink (#111) background, full-bleed width, 80-100px height. Centered label 'Featured in' in Space Mono 12px Ash above the bar. Inside: horizontally distributed press logos (COMPLEX, POPULAR MECHANICS, VOGUE, WIRED) in white at 60% opacity, even spacing, max ~60px height each."

    section_header_with_carousel_arrows:
      role: "List section title"

      full_width_of_content_area__left: "section title in Roobert 600 20px Ink (e.g. 'Featured New Releases'). Right: prev/next arrow buttons, 40x40 square, 1px #ecedee border, 10px radius, chevron icon in Ash 1.5px stroke. Arrows are part of a horizontal carousel control."

    brand_logo_thumbnail:
      role: "Partner brand mark in product card"

      info: "40x40 square, white (#ffffff) surface, 4-6px radius, 1px #ecedee border. Contains the partner brand's mark centered at ~50% fill. Used in both ranked and standard product cards to credit the designer."

  do_s_and_don_ts:

    do:
      - "Use Roobert at -0.04em tracking for all UI text; never let letter-spacing drift to 0 or positive values"
      - "Reserve #000aff exclusively for New In badges, the active Shop pill, and current-state indicators — no more than 3% of any screen should carry this color"
      - "Apply 10px border-radius to all cards, buttons, inputs, and images; 30px only for pill-shaped badges"
      - "Use Space Mono for prices, rank numerals, and 'By {brand}' credit lines — never for headlines or body"
      - "Set product card surfaces to #ecedee (Plaster), not #ffffff, to create a gentle tier above the white canvas"
      - "Anchor product card metadata (brand mark, name, price) to a 16-20px padding from the card edge with a consistent 40x40 brand thumbnail"
      - "Keep the hero image full-bleed and let overlays sit on the bottom third — the shoe should be the visual subject, the UI floats on top"

    don_t:
      - "Don't introduce new chromatic colors beyond the single cobalt (#000aff) and its pale variant (#e5e7ff)"
      - "Don't use drop shadows on product cards — the system relies on surface color stepping and 10px radius for separation"
      - "Don't set type larger than 128px (display) or smaller than 12px (Space Mono micro labels)"
      - "Don't use rounded radii other than 10px and 30px — no fully square corners, no fully circular elements"
      - "Don't center body text or metadata; left-align all product information including the 'By {brand}' credit"
      - "Don't apply color to icons — keep all line icons monochrome Ink (#111) at 1.5px stroke"
      - "Don't separate badge variants by shape — all status badges share the 30px pill; differentiate by fill color only"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background, outer frame, top-level layout |"
    info: "| 1 | Plaster | `#ecedee` | Product cards, nav strip, soft elevated content blocks |"
    info: "| 2 | Fog | `#d7d7d7` | Inset panels, muted inactive states |"
    info: "| 3 | Ink | `#111111` | Featured In media bar, inverted text blocks, deep footer |"

  elevation:

    - "**Floating Product Info Card:** `0 8px 24px rgba(0, 0, 0, 0.15)`"
    - "**See All Button:** `0 1px 2px rgba(0, 0, 0, 0.04)`"

  imagery:

    info: "Product photography is the dominant visual — each shoe is shot on a pure white or plaster surface at a three-quarter angle, filling the card with no lifestyle context, no model, no environment. The hero pushes full-bleed lifestyle photography: cropped shots of legs and shoes on sand or concrete floors, always at human scale, never studio-perfect. The 'object IS the hero' principle — shoes occupy 40-60% of the visible frame even in the editorial hero. No decorative graphics, no abstract patterns, no illustrations. Icons are line-based 1.5px stroke in Ink Black, never filled, never colored."

  layout:

    info: "The page is full-bleed with a 1440px content rail. The hero is a full-viewport photographic banner with floating overlay UI. The product sections use a 4-column grid that collapses to 2 on tablet and 1 on mobile. Section rhythm: large product feature → ranked editorial grid → fresh releases grid → press credentials bar. Each product section centers its content within the rail and uses 80px vertical breathing room between sections. The navigation is a sticky single-row top bar with a thin announcement strip above it. Product cards align to a strict grid — image area always centers the shoe silhouette with 40px top/bottom padding inside the card, metadata cluster anchors to the bottom-left corner with a 40x40 brand mark leading."

  agent_prompt_guide:

    quick_color_reference:
    - "Primary text: #111111 (Ink Black)"
    - "Page background: #ffffff (Pure White)"
    - "Card surface: #ecedee (Plaster)"
    - "Border: #ecedee (subtle) / #a1a4aa (defined) / #444955 (structural)"
    - "Brand accent (badges, active state, claim moments): #000aff (Electric Cobalt)"
    - "primary action: #000aff (filled action)"

    example_component_prompts:

    - "Build a 'New Releases' product card: Plaster (#ecedee) background, 10px radius, no border, 20px padding. Top-left has a 'New In' badge — Electric Cobalt (#000aff) fill, white text in Roobert 600 12px, 30px pill radius, 4px 8px padding, positioned 12px from the card edge. Center the product image at 60% of card height. Below the image at 16px gap, place a 40x40 white brand logo thumbnail (4px radius, 1px #ecedee border). Underneath: product name in Roobert 600 16px Ink (#111111), 'By {brand}' in Space Mono 12px Ash (#737780), price in Space Mono 400 12px Ink (#111111)."

    - "Build a full-bleed product hero: Background fills 100vw at 80vh minimum — a photographic image of shoes on a natural surface. Bottom-left overlay stack: 'New In' badge (Electric Cobalt #000aff, 30px pill, 12px from edge), then a display headline 'studio runner' in Roobert 700 at 128px white with -5px letter-spacing, lowercase, 20px line-height. Below: 15px subhead in white at 80% opacity, Roobert 400. Right side floats a 280px-wide white product info card with 14.4px radius, 20px padding, containing a 60x60 thumbnail, product name, 'By studio' credit, and a black 'Shop studio runner' button (10px radius, 8px 20px padding, #111 background, white text)."

    - "Build the 'Featured In' press bar: Full-bleed Ink (#111111) background, 100px height, centered. Above the bar (separated by 24px): 'Featured in' label in Space Mono 12px Ash (#737780). Inside the bar, distribute 5 press wordmarks (COMPLEX, POPULAR MECHANICS, VOGUE, WIRED) horizontally with even spacing, all white at 60% opacity, 32-48px cap height, Roobert 700."

    - "Create a Primary Action Button: #000aff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA."

    - "Build the 'See All' call-to-action button below a product grid: Full content-column width (not full-bleed), white (#ffffff) surface, Ink (#111111) text 'See All' in Roobert 500 16px, 10px radius, 12px 24px padding, 1px #ecedee border, centered. Subtle 0 1px 2px shadow for tap affordance. Place 32px below the grid it summarizes."

  similar_brands:

    - "**Allbirds** — Same restrained monochrome product-grid approach with warm neutral card surfaces and minimal accent color use"
    - "**Rothy's** — Similar flat product cards on subtle gray backgrounds with brand-credit thumbnails and tight typographic hierarchy"
    - "**Mansur Gavriel** — Same editorial product page rhythm — large display type, single accent color, objects photographed on plinth-like surfaces"
    - "**Aesop** — Same 'gallery rather than store' atmosphere with generous whitespace, lowercase wordmarks, and almost-zero color saturation"
    - "**Hermès footwear section** — Same oversized serif-adjacent grotesque display type at -0.04em tracking and the object's-silhouette-as-hero photography treatment"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-electric-cobalt: #000aff;
          --color-pale-iris: #e5e7ff;
          --color-ink-black: #111111;
          --color-pure-white: #ffffff;
          --color-plaster: #ecedee;
          --color-slate: #a1a4aa;
          --color-fog: #d7d7d7;
          --color-graphite: #444955;
          --color-ash: #737780;
          --color-charcoal: #3b3b3b;
        
          /* Typography — Font Families */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --tracking-caption: -0.52px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.64px;
          --text-subheading: 20px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.8px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -1.28px;
          --text-heading: 40px;
          --leading-heading: 1.15;
          --tracking-heading: -1.6px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.56px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -5.12px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-medium: 500;
          --font-weight-semibold: 600;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 16px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-lg: 10px;
          --radius-xl: 14.4px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
        
          /* Named Radii */
          --radius-cards: 10px;
          --radius-pills: 30px;
          --radius-badges: 30px;
          --radius-images: 10px;
          --radius-inputs: 10px;
          --radius-buttons: 10px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-plaster: #ecedee;
          --surface-fog: #d7d7d7;
          --surface-ink: #111111;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-electric-cobalt: #000aff;
          --color-pale-iris: #e5e7ff;
          --color-ink-black: #111111;
          --color-pure-white: #ffffff;
          --color-plaster: #ecedee;
          --color-slate: #a1a4aa;
          --color-fog: #d7d7d7;
          --color-graphite: #444955;
          --color-ash: #737780;
          --color-charcoal: #3b3b3b;
        
          /* Typography */
          --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
          --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
          --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --tracking-caption: -0.52px;
          --text-body-lg: 16px;
          --leading-body-lg: 1.4;
          --tracking-body-lg: -0.64px;
          --text-subheading: 20px;
          --leading-subheading: 1.35;
          --tracking-subheading: -0.8px;
          --text-heading-sm: 32px;
          --leading-heading-sm: 1.2;
          --tracking-heading-sm: -1.28px;
          --text-heading: 40px;
          --leading-heading: 1.15;
          --tracking-heading: -1.6px;
          --text-heading-lg: 64px;
          --leading-heading-lg: 1;
          --tracking-heading-lg: -2.56px;
          --text-display: 128px;
          --leading-display: 1;
          --tracking-display: -5.12px;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-8: 8px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-24: 24px;
          --spacing-32: 32px;
          --spacing-40: 40px;
          --spacing-48: 48px;
          --spacing-64: 64px;
          --spacing-96: 96px;
          --spacing-100: 100px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-sm: 1px;
          --radius-lg: 10px;
          --radius-xl: 14.4px;
          --radius-2xl: 20px;
          --radius-3xl: 30px;
        }