# IKEA — DESIGN.md

## Overview
IKEA is the Swedish flat-pack democracy. Canvas is pure white. The brand-asset trinity is the IKEA blue (`#0058a3`), the IKEA yellow (`#ffdb00`), and the wordmark lockup of the two used together at full saturation on the navigation. Type runs a custom geometric grotesk (Noto IKEA / Verdana) at a precise scale. Photography is room-staging — fully furnished rooms with real-looking models, kids, dogs, breakfast tables — never product-on-white. The voice is 'practical, democratic, Swedish' — a meatball-and-flatpack-instructions sensibility wrapped in clean editorial scale.

## Color
- **Primary:** `#0058a3` — IKEA blue (nav bar + primary CTA + wordmark)
- **Accent (yellow):** `#ffdb00` — IKEA yellow (price tags + wordmark + 'Low price' callouts)
- **Canvas:** `#ffffff` — Pure white
- **Canvas warm:** `#f5f0e8` — Warm cream for editorial/lifestyle bands
- **Ink:** `#111111` — Deep ink for type
- **Body:** `#333333`
- **Muted:** `#666666`
- **Hairlines:** `#e6e6e6`

## Typography
- **Display:** Noto IKEA / Verdana, weight 700, 32–48px hero (modest scale)
- **Sub-display:** weight 600, 20–24px section heads
- **Body:** Noto IKEA, weight 400, 15–16px running text, 1.5 line-height
- **Caption:** weight 500, 12–13px
- **Mono:** none

## Spacing & rhythm
8-base (8/16/24/32/48). Section padding 48–64px — tighter than luxury, looser than Booking. Room-photograph hero carousels consume full viewport width with image + headline overlay. Product grids stack 4-up at desktop, 2-up at tablet.

## Motion signature
Carousel-driven motion. Room-photograph carousels auto-advance every 6 seconds with a slow 800ms cross-fade. Hover on product tiles raises a 4px soft shadow over 200ms. CTA buttons have a hover background-darken from `#0058a3` to `#003e72` over 150ms. Page transitions are flat fades — no kinetic scroll-fanfare.

## Components observed
- `room-staging-hero-carousel` — fully-furnished room photograph with people
- `product-tile-with-yellow-price-tag` — product image + yellow price-tag callout
- `inspirational-category-tile` — lifestyle-named category (Small spaces, Smart storage)
- `low-price-callout-yellow` — yellow tag-shape price callout
- `button-primary-ikea-blue` — full-saturation blue CTA
- `button-secondary-outline` — blue-outline secondary
- `footer-multi-column-blue` — blue footer with store-locator
- `navigation-blue-bar` — full-bleed `#0058a3` nav with yellow wordmark

## Trademark signals
- IKEA blue (`#0058a3`) + IKEA yellow (`#ffdb00`) lockup on the navigation — the most recognizable brand-color pair in retail
- Room-staging photography — never product-on-white; always a fully-furnished room with real-looking inhabitants
- Pricing in a tag-shape with a yellow background — the iconic IKEA price tag
- Inspirational-tag taxonomy — products grouped by 'lifestyle vibe' rather than purely by function
- Dense product-grid catalog pages with low-cost shipping callouts in the yellow tag — the price IS the brand voltage

## What they DON'T do
- No product-on-white photography — IKEA photography is always in-context room-staging with people
- No making the IKEA yellow into a secondary accent — yellow is reserved for price tags and wordmark
- No lightening the IKEA blue — locked at `#0058a3`
- No substituting Noto IKEA with a fashion-editorial serif — the brand voice is geometric-grotesk practical
- No hiding the price — price visibility IS the brand voltage
- No emoji, no luxury aesthetic, no cinematic full-bleed video

## Exemplar pages
- https://ikea.com/
- https://ikea.com/us
- https://ikea.com/se
- https://ikea.com/global

## When to reference
Reach for IKEA when the user wants democratic-design retail with strong room-staging photography and visible-price discipline — affordable home retail, mass-market furniture, family-lifestyle e-commerce. The "IKEA blue + IKEA yellow + room-staging photo carousel + yellow price tag" combination is the most-copyable IKEA move. Pairs well with brands that want to assert affordability and practicality without resorting to discount-store kitsch.
