IKEA Design System

IKEA's marketing site does something the global furniture-retail category mostly avoids: it gives the brand voltage to a single tile in the upper right and lets the rest of the page be photography. The "Go shopping" panel sits as a flat block of Swedish-flag yellow #ffdb00 against a 4-column photo grid of vases and homewares on its left, with a beside-it salmon-orange "Forever in bloom" inspiration block carrying a poppy macro photo. Below the fold the page becomes a tiled gallery of furnished rooms — a dining table set for a meal, a moving-day vignette, a designer-stories illustration, a "Rewind to the '90s" archive moment with green pegs arranged as a calendar — each carrying a handwritten-feel caption overlay at 14px / weight 700 inside an 8px rounded card. Where West Elm leans on muted neutrals and a single accent green, and where Wayfair pours volume into a busy SKU-driven hero grid, IKEA holds the yellow back and lets the room photography do the warmth.

The DESIGN.md file packages the homepage into a machine-readable spec for React and AI tools. Inside: 13 color tokens drawn from the brand-tier (Swedish yellow, light-yellow #fff094, salmon orange #f26a2f, pale blue #c4dee8) plus a structural tier of warm cream canvas #fffefb, near-black ink #111111, a 60%-grey hairline tone #818181, and the historic IKEA-blue #0058a3 wired as `--color-ikea-blue`. Eleven typography tokens span Noto IKEA from 14px nav links to a 72px feature display, with -1.84px tracking at the top tier. The radius scale is binary: 8px on every card and tile (frequency 46), 50% on the round play-icon buttons inside video tiles. Spacing centers on 16px and 24px as dominant modules.

Feed this file to Claude or Cursor and it will reproduce IKEA's specific moves: held-in-reserve yellow on a single CTA tile, warm-cream canvas that softens the saturated voltage, Noto IKEA across every tier with the -1.84px display tracking that gives the largest headlines their editorial signature, 8px rounded cards as the universal content container, and room-photography-led tile design where the caption sits on the photo at 51px / 700 with a handwritten-feel asterisk arrow as the pointer. The token references resolve cleanly — `{colors.ikea-yellow}` for the voltage, `{colors.canvas}` for the cream, `{typography.display-xl}` for the 72px feature — so the AI never has to invent a value. Treat it as a reference rather than a clone target: the disciplined move worth borrowing is the single-tile voltage placement, which only works when you have warm photography this strong to carry the rest of the page.