ikea___style_reference:
  info: "> sunlit Swedish flat-pack showroom"

  theme: "light"

  info: "IKEA's interface reads as a high-contrast editorial spread: near-black type on warm white, punctuated by flat yellow panels that function as built-in call-to-action zones. The system is deliberately sparse — one custom sans-serif (Noto IKEA) at just two weights (400 and 700), one 8px corner radius across every component, zero shadows, no gradients. The tightness is structural, not minimalism-as-trend: the negative letter-spacing (-0.029em at display, -0.027em at body) makes even 13px captions feel architectural. Cards are large and media-led, arranged in generous two-column blocks with gradient-to-black text overlays for legibility. The yellow #ffdb00 does all the interface work — it never decorates, it only activates."

  tokens___colors:

    info: "| Name | Value | Token | Role |"
    info: "|------|-------|-------|------|"
    info: "| IKEA Yellow | `#ffdb00` | `--color-ikea-yellow` | Primary CTA fills, featured card backgrounds, hero accent panels, the singular chromatic workhorse of the system |"
    info: "| Ink Black | `#111111` | `--color-ink-black` | Primary text, body copy, headings, dominant borders (851 occurrences), icon strokes |"
    info: "| Pure White | `#ffffff` | `--color-pure-white` | Page background, card surfaces, nav background, button text on dark fills |"
    info: "| Warm White | `#fffefb` | `--color-warm-white` | Slightly off-white surface variant for buttons and cards — barely warmer than pure white, breaks digital coldness |"
    info: "| Steel Gray | `#818181` | `--color-steel-gray` | Secondary text, muted borders, disabled icon states |"
    info: "| True Black | `#000000` | `--color-true-black` | SVG icon fills, input borders, true-black accents where maximum contrast is needed |"
    info: "| Link Blue | `#0159a3` | `--color-link-blue` | Text link color, used extensively across navigation and body links — the only blue in the system |"
    info: "| Soft Pink | `#ffa6da` | `--color-soft-pink` | Occasional decorative highlight, used sparingly on select link elements or promotional accents |"

  tokens___typography:

    noto_ikea___sole_typeface___custom_ikea_branded_noto_variant__two_weight_system_regular_400__bold_700_is_deliberate_restraint__no_italics__no_medium_weight__no_light__the_700_headlines_at_36_51px_carry_the_entire_brand_voice__body_at_16px_stays_neutral__letter_spacing_tightens_as_size_grows__giving_display_text_a_compressed__architectural_quality_____font_noto_ikea:
      - "**Substitute:** Inter, DM Sans"
      - "**Weights:** 400, 700"
      - "**Sizes:** 13px, 14px, 16px, 20px, 36px, 51px"
      - "**Line height:** 1.00–1.62"
      - "**Letter spacing:** -0.029em at 51px display, -0.027em at 20px+ headings"
      - "**OpenType features:** `N/A`"
      - "**Role:** Sole typeface — custom IKEA-branded Noto variant. Two-weight system (regular 400, bold 700) is deliberate restraint: no italics, no medium weight, no light. The 700 headlines at 36–51px carry the entire brand voice; body at 16px stays neutral. Letter-spacing tightens as size grows, giving display text a compressed, architectural quality."

    type_scale:

      info: "| Role | Size | Line Height | Letter Spacing | Token |"
      info: "|------|------|-------------|----------------|-------|"
      info: "| caption | 13px | 1.4 | — | `--text-caption` |"
      info: "| body | 16px | 1.57 | — | `--text-body` |"
      info: "| subheading | 20px | 1.2 | -0.54px | `--text-subheading` |"
      info: "| heading | 36px | 1.08 | -0.97px | `--text-heading` |"
      info: "| display | 51px | 1 | -1.48px | `--text-display` |"

  tokens___spacing___shapes:

    base_unit: "8px"

    density: "comfortable"

    spacing_scale:

      info: "| Name | Value | Token |"
      info: "|------|-------|-------|"
      info: "| 8 | 8px | `--spacing-8` |"
      info: "| 16 | 16px | `--spacing-16` |"
      info: "| 24 | 24px | `--spacing-24` |"
      info: "| 80 | 80px | `--spacing-80` |"
      info: "| 120 | 120px | `--spacing-120` |"

    border_radius:

      info: "| Element | Value |"
      info: "|---------|-------|"
      info: "| cards | 8px |"
      info: "| images | 8px |"
      info: "| inputs | 8px |"
      info: "| buttons | 8px |"
      info: "| default | 8px |"

    layout:

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

  components:

    top_navigation_bar:
      role: "Site header"

      info: "White background, horizontal flex layout. IKEA logo (yellow+blue badge) left-aligned, text links (Stories, Jobs, Newsroom, Our business) in Ink Black at 14px weight 400, evenly spaced. 1px bottom border in white/light gray. No sticky behavior, no search bar visible in this view."

    hero_media_card:
      role: "Primary featured content card"

      info: "Large image card, roughly 2/3 viewport width. Contains full-bleed product photography. Bottom-left text overlay with small kicker label (13–14px, white) and bold headline (36–51px, white, weight 700, letter-spacing -0.027em). Gradient overlay from transparent to black at bottom for text legibility. 8px border radius. Circular play/pause button bottom-right with dark semi-transparent fill."

    yellow_cta_card:
      role: "Primary action panel"

      info: "Solid #ffdb00 background, 1/3 viewport width beside the hero media card. Contains bold black text (36–51px, weight 700) like 'Go shopping'. Circular Ink Black button with white right-arrow icon for the action. 8px border radius. This card is the system's signature: flat yellow plane + minimal content + arrow = unmistakable primary action."

    image_story_card:
      role: "Editorial content card"

      info: "Media card used in 2-column grids. Full-bleed lifestyle or product photography. Gradient-to-black overlay at bottom with small kicker (13px white) and headline (20–36px white, weight 700). 8px border radius. Some variants have solid backgrounds (gray-to-black gradient) without photography."

    circular_media_control:
      role: "Play/pause button"

      info: "Small circular button (~40px diameter) with Ink Black or dark fill and white icon. Positioned bottom-right of media cards. 50% border radius (pill/circle). Used to indicate video or audio content."

    arrow_link_button:
      role: "Inline navigation action"

      info: "Circular Ink Black button (~40px) with white right-arrow icon. Paired with bold text in Yellow CTA cards. The arrow+circle is a recurring interaction pattern — always means 'go to' or 'navigate'."

    store_selector_footer:
      role: "Utility footer"

      info: "Minimal footer beneath CTA cards. Contains store label (e.g. 'Store: IKEA.es') in Ink Black at 14px weight 400, right-aligned, with a small chevron-up icon. 8px padding, 8px radius. Separated from card by subtle spacing."

    timeline_section_block:
      role: "Historical/year display"

      info: "White background section with large numerical display (51px+ weight 700, Ink Black). Accompanied by rows of decorative green circles (not part of the core palette but used in this context). Left-aligned layout with generous 80px+ vertical padding. Headlines sit tight against the numbers."

  do_s_and_don_ts:

    do:
      - "Use #ffdb00 exclusively for primary CTAs and featured accent cards — never as a background for body text or informational content"
      - "Set all corners to 8px — there is exactly one border radius in the system"
      - "Use weight 700 for every headline and weight 400 for every body element — never introduce medium, semibold, or light weights"
      - "Apply gradient-to-black overlays at 30–60% opacity on all image cards that contain text overlays"
      - "Use the circular black arrow button (Ink Black fill, white arrow, 8px or 50% radius) as the universal 'navigate' affordance"
      - "Keep body text at 16px with 1.57 line-height — IKEA's body line-height is generous, not tight"
      - "Use #0159a3 exclusively for text links, never for buttons or backgrounds"

    don_t:
      - "Do not introduce shadows, elevation, or any depth effects — the system is entirely flat"
      - "Do not use more than one border radius — 8px everywhere, no exceptions"
      - "Do not add additional font weights (300, 500, 600) — the binary 400/700 system is the constraint"
      - "Do not place body text directly on photography without a gradient overlay"
      - "Do not use the blue #0159a3 as a CTA button fill — it is link-only, not action"
      - "Do not soften the letter-spacing — the negative tracking is structural, not decorative"
      - "Do not add accent gradients or color transitions — the system rejects all gradient fills on surfaces"

  surfaces:

    info: "| Level | Name | Value | Purpose |"
    info: "|-------|------|-------|---------|"
    info: "| 0 | Page Canvas | `#ffffff` | Base page background, top navigation |"
    info: "| 1 | Card Surface | `#ffffff` | Default card background on white pages |"
    info: "| 2 | Warm White Surface | `#fffefb` | Subtle off-white for specific card or button surfaces |"
    info: "| 3 | Accent Surface | `#ffdb00` | Yellow solid-fill cards and hero panels — the highest surface level, demands attention |"

  elevation:

    info: "The system deliberately uses zero shadows and zero elevation. All depth and hierarchy is created through: (1) solid yellow surface contrast against white, (2) image overlays with gradient-to-black, (3) size and weight contrast in type, and (4) generous spacing between cards. The absence of shadow is not a missing feature — it is the defining visual stance. Everything sits on the same plane, like printed pages on a table."

  imagery:

    info: "Product and lifestyle photography is the dominant visual language. Treatment: high-key, naturally lit, warm Scandinavian interiors with lived-in authenticity — not studio-white. People appear in product interaction scenes (holding, assembling, using). Images are always full-bleed within their 8px-rounded cards, never cropped to organic shapes. Gradient-to-black overlays appear at the bottom 30-40% of any image card that carries text. Occasional flat illustration appears (e.g., the Germany map with cultural iconography in teal/green/orange). Photography is editorial-confident: no stock-photo gloss, no overly stylized color grading."

  layout:

    info: "Full-bleed with centered content container capped at ~1440px. Navigation is a simple top bar, not sticky. The page is built from horizontal card sections stacked vertically with ~80px gaps. Hero pattern: split layout — 2/3 media card (image) + 1/3 solid yellow CTA card. Body sections use 2-column card grids alternating between image-led and text-led blocks. Content density is spacious, never compact. Cards are large (roughly 600x400 minimum) with generous internal padding. A timeline/history section breaks the grid with oversized numerals. No sidebar, no mega-menu, no complex navigation architecture."

  agent_prompt_guide:

  quick_color_reference:
    - "Background: #ffffff"
    - "Surface warm: #fffefb"
    - "Primary text: #111111"
    - "Border/divider: #111111"
    - "Accent/CTA: #ffdb00"
    - "Text link: #0159a3"
    - "primary action: #ffdb00 (filled action)"

  example_component_prompts:

    - "**Hero Media Card**: Full-bleed product image at 2/3 page width, 8px radius. Bottom-left overlay: small kicker 'A sneak peek!' in white at 14px weight 400, headline 'IKEA PS 2026 collection' in white at 51px weight 700, letter-spacing -1.48px. Gradient overlay from transparent to rgba(0,0,0,0.6) at bottom 40%. Circular play button bottom-right: 40px diameter, #111111 fill, white pause icon, 50% radius."

    - "**Yellow CTA Card**: Solid #ffdb00 background, 1/3 page width, 8px radius, 40px padding. Headline 'Go shopping' in #111111 at 51px weight 700, letter-spacing -1.48px. Circular arrow button: 40px diameter, #111111 fill, white right-arrow icon, positioned to the right of or below the headline."

    - "**Image Story Card**: Full-bleed editorial image, 8px radius. Gradient overlay from transparent to rgba(0,0,0,0.6) at bottom 35%. White kicker 'Market spotlight' at 13px weight 400. White headline 'Let\'s visit IKEA Germany!' at 36px weight 700, letter-spacing -0.97px. 20px padding from card edges."

    - "**Top Navigation**: White background, 1px bottom border #ffffff or #f0f0f0. IKEA logo left. Text links 'Stories', 'Jobs', 'Newsroom', 'Our business' in #111111 at 14px weight 400, 24px gap between items. 16px vertical padding."

    - "**Store Footer Strip**: White background, 8px radius, 16px padding. Text 'Store: IKEA.es' in #111111 at 14px weight 400, right-aligned. Small chevron-up icon in #111111, 12px size."

  signature_design_choices:

    info: "Three constraints define IKEA's visual identity more than any color or font choice: (1) The binary weight system — 400 or 700, nothing else. This eliminates 90% of typographic decision-making and forces hierarchy through size alone. (2) The single 8px radius — applied identically to hero cards, image cards, buttons, inputs, and links. Uniformity in shape reinforces the flat-pack, modular sensibility. (3) Yellow as surface, not decoration — #ffdb00 is never a border, never a text color, never a hover tint. It is a solid plane that entire cards and CTAs are built on. The contrast between a yellow card and its black text is the highest-impact moment in the entire system, and it is reserved for the single most important action on each screen."

  similar_brands:

    - "**H&M** — Same Scandinavian design DNA — flat layout, yellow as accent against white, 2-column card grids, no shadows, and bold sans-serif headlines with tight tracking"
    - "**LEGO** — Similar primary-color-against-white approach with product-led card layouts, though LEGO uses red where IKEA uses yellow; both are large media cards with text overlays"
    - "**Best Buy** — Yellow brand accent on white, bold sans-serif type, 2-column featured content grids with image cards and text overlays — comparable e-commerce editorial pattern"
    - "**Craigslist** — Minimal interface chrome, blue text links, no decorative elements — though IKEA has far more visual hierarchy and media"
    - "** Depot** — Bold brand color (orange vs yellow), flat card-based homepage, large media blocks, utilitarian sans-serif type — same functional-not-pretty retail aesthetic"

  quick_start:

    css_custom_properties:

      css: |
        :root {
          /* Colors */
          --color-ikea-yellow: #ffdb00;
          --color-ink-black: #111111;
          --color-pure-white: #ffffff;
          --color-warm-white: #fffefb;
          --color-steel-gray: #818181;
          --color-true-black: #000000;
          --color-link-blue: #0159a3;
          --color-soft-pink: #ffa6da;
        
          /* Typography — Font Families */
          --font-noto-ikea: 'Noto IKEA', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.57;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.54px;
          --text-heading: 36px;
          --leading-heading: 1.08;
          --tracking-heading: -0.97px;
          --text-display: 51px;
          --leading-display: 1;
          --tracking-display: -1.48px;
        
          /* Typography — Weights */
          --font-weight-regular: 400;
          --font-weight-bold: 700;
        
          /* Spacing */
          --spacing-unit: 8px;
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Layout */
          --page-max-width: 1440px;
          --section-gap: 80px;
          --card-padding: 20px;
          --element-gap: 24px;
        
          /* Border Radius */
          --radius-lg: 8px;
        
          /* Named Radii */
          --radius-cards: 8px;
          --radius-images: 8px;
          --radius-inputs: 8px;
          --radius-buttons: 8px;
          --radius-default: 8px;
        
          /* Surfaces */
          --surface-page-canvas: #ffffff;
          --surface-card-surface: #ffffff;
          --surface-warm-white-surface: #fffefb;
          --surface-accent-surface: #ffdb00;
        }

    tailwind_v4:

      css: |
        @theme {
          /* Colors */
          --color-ikea-yellow: #ffdb00;
          --color-ink-black: #111111;
          --color-pure-white: #ffffff;
          --color-warm-white: #fffefb;
          --color-steel-gray: #818181;
          --color-true-black: #000000;
          --color-link-blue: #0159a3;
          --color-soft-pink: #ffa6da;
        
          /* Typography */
          --font-noto-ikea: 'Noto IKEA', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        
          /* Typography — Scale */
          --text-caption: 13px;
          --leading-caption: 1.4;
          --text-body: 16px;
          --leading-body: 1.57;
          --text-subheading: 20px;
          --leading-subheading: 1.2;
          --tracking-subheading: -0.54px;
          --text-heading: 36px;
          --leading-heading: 1.08;
          --tracking-heading: -0.97px;
          --text-display: 51px;
          --leading-display: 1;
          --tracking-display: -1.48px;
        
          /* Spacing */
          --spacing-8: 8px;
          --spacing-16: 16px;
          --spacing-24: 24px;
          --spacing-80: 80px;
          --spacing-120: 120px;
        
          /* Border Radius */
          --radius-lg: 8px;
        }