zara___style_reference:
  info: "> Gallery wall for fashion — pure white space, hairline frames, editorial imagery as the only color."

  theme: "light"

  info: "Zara's design system is editorial minimalism pushed to its logical extreme: a flat, monochromatic canvas where the interface deliberately recedes so editorial photography can carry the entire brand experience. The palette is essentially binary — pure black on pure white with a single mid-gray for secondary text — and the only decorative typographic moment is the ZARA wordmark itself, a high-contrast didone-style serif that functions as a logo, not as a heading font. UI typography is unusually compact (11–16px) and uses a single neutral sans-serif, giving every screen the look of a fashion magazine page. Components are borderless or use hairline strokes, with zero shadows, zero gradients, and zero rounded corners — the design language of a gallery wall, not a software product."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| Canvas | `#ffffff` | `--color-canvas` | Page backgrounds, form surfaces, image backgrounds — the silent stage on which all content sits |"
    info: "| Ink | `#000000` | `--color-ink` | Primary text, icons, hairline borders, button outlines, checkbox marks, form labels |"
    info: "| Stone | `#757575` | `--color-stone` | Secondary/helper text, placeholder text, disabled labels — the only mid-tone that breaks the binary |"

  tokens___typography:

    helvetica_now_text___all_ui_text___form_labels__dropdowns__buttons__body_copy__helper_text__links__the_deliberately_compressed_size_range_11_16px_gives_every_screen_an_editorial_print_feel__body_copy_at_11_13px_is_anti_convention_for_digital__making_the_interface_feel_like_a_magazine_layout_rather_than_a_software_product_____font_helvetica_now_text:
      - "**Substitute:** Inter, Helvetica Neue, Arial"
      - "**Weights:** 300, 400"
      - "**Sizes:** 11px, 12px, 13px, 15px, 16px"
      - "**Line height:** 1.00–1.60"
      - "**Letter spacing:** normal"
      - "**Role:** All UI text — form labels, dropdowns, buttons, body copy, helper text, links. The deliberately compressed size range (11–16px) gives every screen an editorial-print feel; body copy at 11–13px is anti-convention for digital, making the interface feel like a magazine layout rather than a software product."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 11px | 1.5 | — | `--text-caption` |"
      info: "| body-sm | 12px | 1.5 | — | `--text-body-sm` |"
      info: "| body | 13px | 1.5 | — | `--text-body` |"
      info: "| body-lg | 15px | 1.5 | — | `--text-body-lg` |"
      info: "| heading-sm | 16px | 1.5 | — | `--text-heading-sm` |"

  tokens___spacing___shapes:

    base_unit: "4px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 4 | 4px | `--spacing-4` |"
      info: "| 12 | 12px | `--spacing-12` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 20 | 20px | `--spacing-20` |"
      info: "| 32 | 32px | `--spacing-32` |"
      info: "| 48 | 48px | `--spacing-48` |"
      info: "| 112 | 112px | `--spacing-112` |"

    border_radius:

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

    layout:

      - "**Page max-width:** 1200px"
      - "**Section gap:** 48px"
      - "**Card padding:** 20px"
      - "**Element gap:** 20px"

  components:

    zara_wordmark:
      role: "Brand identity mark"

      info: "Custom high-contrast didone-style serif (extreme thin-to-thick stroke variation, flat unbracketed serifs). Functions as the sole decorative typographic element in the system. Always rendered in #000000 on white. No tagline, no lockup variations. Substitutes: 'Didot', 'Bodoni Moda'."

    section_header_uppercase_label:
      role: "Form section title"

      info: "Small uppercase text at 13px weight 400, #000000, tracking 0. No underline, no accent color, no icon. Examples: 'SELECT YOUR LOCATION', 'LOCATION', 'LANGUAGE'. The uppercase treatment is the only typographic emphasis — no bold, no color change."

    select_dropdown:
      role: "Location/language selector"

      info: "Full-width field, 0px radius, no background fill, 1px bottom border in #000000. Label above in 11px #757575 uppercase. Value text in 13px #000000. No focus ring, no box-shadow — the bottom border IS the affordance. Custom dropdown arrow implied, not styled."

    outlined_button:
      role: "Primary form action (CONTINUE)"

      info: "Rectangular button, 0px radius, 1px solid #000000 border, transparent background, no shadow. Text in 13px weight 400 uppercase, #000000. Padding approximately 12px horizontal × 20px vertical. No hover fill, no color inversion — the outline is the identity. Inverts contextually: the border weight is the only visual weight it carries."

    checkbox:
      role: "Remember selection / opt-in toggle"

      info: "Minimal square checkbox, 0px radius, 1px solid #000000 border, transparent fill. When checked, filled with #000000. Label to the right in 13px #000000. No focus ring, no animation, no color accent."

    helper_text_link:
      role: "Inline contextual link"

      info: "13px #000000 text with underline. Used for inline references like 'Islas Canarias'. Underline is the only hover state — no color change, no weight change, no animation."

    editorial_image_block:
      role: "Full-bleed campaign/model photography"

      info: "Large photographic block occupying roughly 60% of viewport width. No border, no radius, no shadow, no overlay. Natural color and lighting — the image is unprocessed UI element, not decoration. Aspect ratio varies but tends to be landscape (roughly 3:2 or 16:9)."

    form_container:
      role: "Left-aligned form column"

      info: "Narrow column (roughly 280–320px), left-aligned within page, vertically centered. 112px horizontal padding from page edge. Contains all form elements with 20px vertical gaps between fields. No card background, no border, no shadow — floats on white canvas."

  do_s_and_don_ts:

    do:
      - "Use 0px border-radius on every component — buttons, inputs, cards, badges, images. The system is intentionally sharp-cornered."
      - "Keep the palette to three values: #000000 for text and borders, #ffffff for surfaces, #757575 for secondary text. No additional colors."
      - "Set body text at 11–13px to maintain the editorial-print scale. Larger sizes break the magazine-layout feel."
      - "Use the ZARA wordmark (custom didone serif) as the only display/decorative type — never apply it to headings or UI labels."
      - "Let editorial photography occupy 50–60% of any layout. The image is the content; the form is the frame."
      - "Use 1px hairline borders in #000000 for all interactive elements. The line weight is the visual language."
      - "Maintain generous whitespace: 48px between sections, 20px between form elements, 112px outer padding."

    don_t:
      - "Don't introduce any color beyond the three neutrals. No brand accents, no semantic colors, no hover tints."
      - "Don't use rounded corners on any element. Even 2–4px radius breaks the system."
      - "Don't apply shadows, gradients, or glow effects. The design is completely flat."
      - "Don't use bold (700+) weights. The system runs 300–400 only."
      - "Don't use body text larger than 16px. The compressed scale is a signature choice."
      - "Don't add icons, badges, tags, or decorative UI elements. The interface is content-only."
      - "Don't center-align body text or form labels. Everything is left-aligned with uppercase section headers."

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Canvas | `#ffffff` | Page background — pure white, no texture, no variation |"
    info: "| 1 | Form Surface | `#ffffff` | Form fields and interactive areas — visually identical to canvas, separated only by hairline borders |"

  elevation:

    info: "The design system has zero elevation. No shadows, no z-axis differentiation. Hierarchy is created through whitespace, border weight, and typography scale — not through depth. Components exist on a single plane, like printed matter on a page."

  imagery:

    info: "Editorial fashion photography is the sole visual content. Full-color, unprocessed, natural-lit campaign and model photography occupies the dominant visual space on every screen. Images are sharp-cornered, uncontained (no device frames, no polaroid effects), and presented at near-original aspect ratios. No illustrations, no icons-as-decoration, no abstract graphics. The photography carries all brand personality — mood, season, aesthetic — while the interface remains completely neutral."

  layout:

    info: "Asymmetric two-column split for entry screens: a narrow left column (280–320px) holds all form UI, left-aligned with 112px outer padding; the remaining 60% holds a large editorial photograph. The form column is vertically centered. No header bar, no navigation, no footer on entry flows — the ZARA wordmark sits alone at top-left as the only structural element. Content is max-width 1200px on inner pages with generous 48px section gaps. The layout philosophy: the interface is a magazine spread, not a software dashboard."

  agent_prompt_guide:

    quick_color_reference:
    - "text: #000000"
    - "background: #ffffff"
    - "border: #000000"
    - "secondary text: #757575"
    - "primary action: no distinct CTA color"

    example_component_prompts:

    - "Create a location selector screen: white (#ffffff) background, max-width 1200px, two-column asymmetric layout. Left column 320px wide, 112px outer padding, vertically centered. Right column holds a full-bleed editorial photograph with 0px radius. ZARA wordmark top-left in custom didone serif, #000000. Form label 'SELECT YOUR LOCATION' at 13px uppercase weight 400, #000000. Dropdown fields with 1px bottom border #000000, no background, no radius. Continue button: 1px solid #000000 border, transparent fill, 0px radius, 13px uppercase text #000000, 12px 20px padding."

    - "Create a product listing section: white (#ffffff) background, 48px top/bottom padding, 20px gaps between items. Product cards: 0px radius, no border, no shadow. Product names at 13px weight 400 #000000, prices at 13px #757575."

    - "Create a navigation bar: white (#ffffff) background, 1px solid #000000 bottom border. Menu items at 13px uppercase weight 400, #000000, left-aligned. ZARA wordmark centered or left-aligned in custom didone serif #000000. No background color, no shadow, 0px radius on all elements."

    - "Create a category landing page hero: full-viewport editorial photograph as background, no overlay. ZARA wordmark top-left in #000000 over the image. Category title at display size (custom didone serif or large weight 300 Helvetica) centered or bottom-left, #000000 or #ffffff depending on image luminance. No buttons, no CTAs — the imagery is the entry point."

    - "Create a form input field: 0px radius, no background, no border except 1px solid #000000 bottom border only. Label above at 11px uppercase weight 400, #757575. Input value at 13px #000000. No focus ring, no box-shadow on focus — the border remains static."

  similar_brands:

    - "**COS** — Same monochromatic black-on-white system, same hairline border aesthetic, same editorial photography dominance, same zero-radius flat design"
    - "**Massimo Dutti** — Sibling-brand approach — serif wordmark, compressed UI type scale, pure white canvas, no decorative UI elements, photography-first layout"
    - "**SSENSE** — Extreme minimalism with full-width editorial imagery, monochrome palette, small uppercase UI labels, flat components with no shadows"
    - "**Aesop** — Same hairline-border form fields, same generous whitespace, same binary black/white palette, same editorial-print typography scale"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-canvas: #ffffff;
          --color-ink: #000000;
          --color-stone: #757575;
        
          /* Typography — Font Families */
          --font-helvetica-now-text: 'Helvetica Now Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --text-body-sm: 12px;
          --leading-body-sm: 1.5;
          --text-body: 13px;
          --leading-body: 1.5;
          --text-body-lg: 15px;
          --leading-body-lg: 1.5;
          --text-heading-sm: 16px;
          --leading-heading-sm: 1.5;
        
          /* Typography — Weights */
          --font-weight-light: 300;
          --font-weight-regular: 400;
        
          /* Spacing */
          --spacing-unit: 4px;
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-112: 112px;
        
          /* Layout */
          --page-max-width: 1200px;
          --section-gap: 48px;
          --card-padding: 20px;
          --element-gap: 20px;
        
          /* Named Radii */
          --radius-all: 0px;
          --radius-cards: 0px;
          --radius-badges: 0px;
          --radius-inputs: 0px;
          --radius-buttons: 0px;
        
          /* Surfaces */
          --surface-canvas: #ffffff;
          --surface-form-surface: #ffffff;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-canvas: #ffffff;
          --color-ink: #000000;
          --color-stone: #757575;
        
          /* Typography */
          --font-helvetica-now-text: 'Helvetica Now Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 11px;
          --leading-caption: 1.5;
          --text-body-sm: 12px;
          --leading-body-sm: 1.5;
          --text-body: 13px;
          --leading-body: 1.5;
          --text-body-lg: 15px;
          --leading-body-lg: 1.5;
          --text-heading-sm: 16px;
          --leading-heading-sm: 1.5;
        
          /* Spacing */
          --spacing-4: 4px;
          --spacing-12: 12px;
          --spacing-16: 16px;
          --spacing-20: 20px;
          --spacing-32: 32px;
          --spacing-48: 48px;
          --spacing-112: 112px;
        }