--- version: alpha name: "IKEA" website: "https://www.ikea.com" description: >- A Swedish flat-pack furniture retailer whose marketing site treats the Swedish-flag yellow (#ffdb00) as a held-in-reserve voltage rather than a constant brand fill — the homepage opens with a yellow "Go shopping" panel in the upper right and a salmon-orange "Forever in bloom" inspiration block beside it, with the rest of the page rendered in room-photography tiles and warm-cream (#fffefb) negative space. Noto IKEA (the proprietary humanist sans) runs every display from 14px nav links up to a 72px feature display, with -1.84px tracking on the largest tier. The system holds two characteristically Scandinavian moves: editorial photography of furnished rooms with handwritten captions overlaid in 51px / weight 700 display, and a salmon-orange surface (`#f26a2f`) that appears once as inspirational warmth — the only chromatic block on the page besides the brand yellow. seo: title: "IKEA Design System for React — Swedish yellow #ffdb00, Noto IKEA, 13 components" metaDescription: "IKEA's homepage captured as a DESIGN.md spec. Swedish-flag yellow as a single held-in-reserve voltage, Noto IKEA humanist sans across every tier, 8px corner radius, room-photography-led tiles. Tokens for React, Next.js, and AI coding tools." highlights: - "Held-in-reserve yellow — the Swedish-flag yellow #ffdb00 appears only on the 'Go shopping' tile and the IKEA logo, never as a body fill or button color across the rest of the page" - "Noto IKEA across every tier — the proprietary humanist sans does 14-72px display, body, nav, and button work, with -1.84px tracking on the largest display" - "Room-photography tiles — every content card is a furnished-room photo with a handwritten-feel caption overlay, never a stock product shot or a flat illustration" - "8px corner radius default — 46 occurrences, the dominant rounding on cards and tiles; pills only on the round 'play' icon buttons inside video tiles" - "Warm cream canvas — the page floor renders as #fffefb (declared as --color-background), not pure white, a quiet warmth that softens the saturated yellow voltage" tags: - "E-commerce & Retail" lastUpdated: "2026-05-18" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://www.ikea.com" title: "IKEA — official site" description: "IKEA's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is IKEA's primary brand color?" answer: "IKEA's brand voltage is Swedish-flag yellow #ffdb00, wired into the CSS as --color-ikea-yellow with a hover variant --color-ikea-yellow-hover #ffe53a and a light variant --color-ikea-yellow-light #fff094. It appears as a background fill on the captured page exactly 4 times — all on the 'Go shopping' tile in the upper right of the homepage and on the IKEA wordmark / logo lockup. It never appears as a button fill below the fold, never as a body text color, never as a card surface. The secondary brand color in the CSS variables is IKEA-blue #0058a3, declared as --color-ikea-blue but not rendered in the captured surface — it lives on the in-store wayfinding signs and the historical brand logo, not on the current homepage chrome." - id: "typography" title: "What typeface does IKEA use, and what should I use as a substitute?" answer: "IKEA's marketing site runs Noto IKEA — a proprietary humanist sans built on the open-source Noto Sans family — for every display, heading, body, button, and nav surface. The CSS declares it as `--ikea-font: \"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif`, with Noto Sans as the immediate open-source fallback. Display headlines sit at 72px / weight 700 with -1.84px tracking for the largest feature tier, 51px / 700 / -1.48px for the standard h2, 36px / 700 / -0.96px for section headings, and 16-20px / 400 for body and nav. Use Noto Sans directly as the substitute — it is the open-source family Noto IKEA is built on, and the metrics transfer cleanly; Inter at the same weights also works." - id: "warmth" title: "Why is IKEA's white canvas not actually white?" answer: "The page floor renders as #fffefb, wired into the CSS as --color-background, --color-off-white, --background-color, and --breadcrumbs-background. It is a warm cream with a slight yellow undertone, distinct from pure #ffffff which is reserved for the --color-light token and applied only to specific overlay surfaces. The difference is small enough that most viewers won't read it as a separate color, but it is consistent across the entire system; the cream softens the saturated Swedish yellow voltage and lets the room photography read as warm rather than as harsh-against-white. The same warmth-over-white convention runs at Cloudflare (#fffbf5) and at Bun (#fff9ed) — IKEA's variant leans slightly more neutral but carries the same principle." - id: "photography" title: "Why is every IKEA tile a furnished-room photo instead of a product shot?" answer: "IKEA's tile design is photography-led by editorial choice. Each card on the homepage is a real furnished room (dining table set for a meal, a moving-day vignette, a 'Rewind to the '90s' archive moment) with a handwritten-feel caption overlay at 51px / 700 sitting on the photo itself. Product-only shots are reserved for the category-grid below the fold and for the search-results pages — the homepage chrome is editorial. This is closer to the Magnolia or Kinfolk magazine treatment than to the typical Wayfair / Overstock SKU-driven retail grid; the cards sell the IKEA lifestyle before the product. The 8px corner radius on every tile is just round enough to feel softer than a print-magazine layout, but tight enough that the photography remains the focus." - id: "radii-and-spacing" title: "What corner-radius and spacing scale does IKEA use?" answer: "The radius scale is binary: 8px on every content card and tile (frequency 46 in the captured page) and 50% on the round play-icon buttons that sit inside the video and inspiration tiles (frequency 6). There is no 4px / 12px / 16px / 24px middle tier. The CSS declares --content-border-radius: .125rem (2px) and --box-border-radius: .5rem (8px) and --radius: .5rem (8px) — the 8px value is the universal default. Spacing centers on 16px (frequency 19) and 24px (frequency 17) as dominant modules, with 20px as the secondary step. The grid-gap variable is 1.25rem (20px) on desktop and 1rem (16px) on mobile." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own home-goods retail marketing site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce IKEA's specific moves: held-in-reserve yellow on a single CTA tile rather than as a constant fill, warm-cream canvas that softens the saturated voltage, Noto IKEA (or Noto Sans as the open substitute) across every tier with -1.84px tracking on the largest display, 8px rounded cards as the universal container, and room-photography-led tile design where the caption sits on the photo at 51px / 700. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The disciplined move worth borrowing is the single-tile voltage placement — it only works when you have warm photography this strong to carry the rest of the page." mockups: - "marketing-hero" - "media-grid" colors: primary: "#ffdb00" primary-light: "#fff094" ikea-blue: "#0058a3" accent-warm: "#f26a2f" accent-cool: "#c4dee8" canvas: "#fffefb" surface-1: "#ffffff" ink: "#111111" ink-soft: "#484848" ink-muted: "#818181" ink-muted-soft: "#999999" hairline: "#dadada" link: "#0000ee" typography: display-xl: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 72px fontWeight: 700 lineHeight: 77.76px letterSpacing: "-1.84px" display-lg: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 51px fontWeight: 700 lineHeight: 55.08px letterSpacing: "-1.48px" display-md: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 43.2px letterSpacing: "-0.96px" heading-md: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 32.4px letterSpacing: 0 heading-sm: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 22.4px letterSpacing: 0 body-md: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 25.92px letterSpacing: 0 body-base: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 16px letterSpacing: 0 body-sm: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 21.98px letterSpacing: 0 nav-link: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 16px letterSpacing: 0 button-md: fontFamily: "\"Noto IKEA\", \"Noto Sans\", Roboto, \"Open Sans\", system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 16px letterSpacing: 0 rounded: none: "0px" xs: "2px" md: "8px" full: "9999px" spacing: xs: "8px" sm: "10px" md: "12px" base: "16px" lg: "20px" xl: "21px" 2xl: "24px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "16px 50px" height: "100px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" height: "44px" borderColor: "{colors.ink}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px" height: "96px" nav-link: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: "16px" height: "54px" hero-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: "0px" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" card-title: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-md}" body-paragraph-muted: backgroundColor: "transparent" textColor: "{colors.ink-soft}" typography: "{typography.body-sm}" card: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "16px" card-photo: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.md}" padding: "0px" card-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.md}" padding: "60px 92px 108px 60px" card-warm: backgroundColor: "{colors.accent-warm}" textColor: "{colors.ink}" typography: "{typography.heading-md}" rounded: "{rounded.md}" padding: "60px 92px 108px 60px" play-button: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-base}" rounded: "{rounded.full}" padding: "12px" height: "60px" borderColor: "{colors.ink}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "12px 16px" height: "48px" borderColor: "{colors.hairline}" --- ## Overview IKEA's marketing site does something the global furniture-retail category mostly avoids. **Held-in-reserve voltage.** The Swedish-flag yellow (`{colors.primary}` — #ffdb00) appears on the homepage exactly 4 times as a background fill — all of them concentrated on the "Go shopping" tile in the upper right and on the IKEA wordmark itself — and nowhere else as a body fill or button color across the entire captured page. 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. Beside the yellow CTA sits a single salmon-orange "Forever in bloom" inspiration block (`{colors.accent-warm}` — #f26a2f), the only other chromatic surface on the page; the rest is warm-cream canvas and room photography. The system's photography discipline reinforces the move. Every content card below the fold is a furnished room — a dining table set for a meal, a moving-day vignette with cardboard boxes and a "Get ready, get set, go!" caption, a "Rewind to the '90s" archive moment with green pegs arranged as a calendar reading "1996", an illustration of Germany as a face for "Let's visit IKEA Germany", a designer's outdoor-space vignette — each carrying a handwritten-feel caption overlay at `{typography.display-lg}` (51px / 700) inside an `{rounded.md}` 8px rounded card. Product-only shots are reserved for the category grid below the fold; the homepage chrome is editorial. This is closer to the Magnolia or Kinfolk magazine treatment than to the typical retail SKU grid. The shape vocabulary is **binary: 8px or full circle**. There are exactly two radii on the captured surface: `{rounded.md}` 8px on every content card and tile (frequency 46), and `{rounded.full}` 50% on the round play-icon buttons that sit inside the video and inspiration tiles (frequency 6). There is no 4px / 12px / 16px / 24px middle tier. The 8px corner is just round enough to feel softer than a print-magazine layout but tight enough that the photography remains the focus. **Key Characteristics:** - Held-in-reserve `{colors.primary}` (Swedish-flag yellow) on a single "Go shopping" tile in the upper right — never a button fill, body text color, or card surface elsewhere on the page. - Warm cream canvas (`{colors.canvas}` — #fffefb) softens the saturated yellow voltage; pure white (`{colors.surface-1}` — #ffffff) is reserved for specific card surfaces and the navigation overlay. - Noto IKEA (a proprietary humanist sans built on Noto Sans) across every tier with -1.84px tracking on the 72px feature display and -1.48px tracking on the 51px h2. - Room-photography-led tiles with handwritten-feel caption overlays at 51px / 700; product-only shots reserved for the below-fold category grid. - 8px corner radius on every card and tile (frequency 46) — the dominant rounding; 50% on the round play-icon buttons (frequency 6). - IKEA-blue (`{colors.ikea-blue}` — #0058a3) declared as `--color-ikea-blue` but absent from the captured homepage — it lives on in-store wayfinding signs and the historical brand logo. - Pale-blue (`{colors.accent-cool}` — #c4dee8) and salmon orange (`{colors.accent-warm}` — #f26a2f) each appear once as feature-tile fills, never recurring elsewhere. - 16px / 24px dominant spacing modules with a 20px grid-gap on desktop (`--grid-gap: 1.25rem`). ## Colors ### Brand - **Swedish Yellow** (`{colors.primary}` — #ffdb00): frequency 4, all background fills. The single brand voltage — used on the "Go shopping" tile in the upper right and on the IKEA wordmark / logo lockup. Wired in CSS as `--color-ikea-yellow` with hover variant `--color-ikea-yellow-hover` #ffe53a. Never a button fill below the fold, never a body text color. - **Yellow Light** (`{colors.primary-light}` — #fff094): frequency 1 background. Wired as `--color-ikea-yellow-light`. A warm pastel yellow used as a single tile surface — reserved for promotional moments where the full saturation would feel too loud. - **IKEA Blue** (`{colors.ikea-blue}` — #0058a3): frequency 0 on the captured surface. Wired as `--color-ikea-blue` and `--confirm-onetrust`. The historical brand color (in-store wayfinding, building signage) — declared in the CSS but not rendered in the current homepage chrome. ### Accent - **Warm Salmon** (`{colors.accent-warm}` — #f26a2f): frequency 1 background. The "Forever in bloom" inspirational tile fill — the only chromatic surface on the page besides the brand yellow. A single editorial moment of warmth. - **Pale Blue** (`{colors.accent-cool}` — #c4dee8): frequency 1 background. Used once as a feature-tile fill — likely a seasonal promotional block. ### Surface - **Canvas** (`{colors.canvas}` — #fffefb): the page floor. A warm cream with a slight yellow undertone, wired as `--color-background`, `--color-off-white`, `--background-color`, and `--breadcrumbs-background`. Distinct from pure white; the difference is small enough that most viewers won't read it as a separate color, but it is consistent across the entire system. - **Surface-1** (`{colors.surface-1}` — #ffffff): pure white. Reserved for the `--color-light` token and applied to specific overlay surfaces (the navigation dropdown panels, the round play-icon button fill). ### Text - **Ink** (`{colors.ink}` — #111111): frequency 527 — the dominant text color (262 as text, 260 as border, 5 as background). Wired as `--color-text-darker`, `--text-color`, `--breadcrumbs-text-color`. Used across every headline, body paragraph, nav link, and caption overlay on the captured surface. Near-black with a hint of warmth — never absolute black. - **Ink Soft** (`{colors.ink-soft}` — #484848): frequency 0 captured, declared as `--color-grey-dim`. The secondary text tone for long-form body copy where ink would feel too heavy. - **Ink Muted** (`{colors.ink-muted}` — #818181): frequency 4. Used as text (2) and border (2). A 60%-grey reserved for tertiary captions and the search-input placeholder. - **Ink Muted Soft** (`{colors.ink-muted-soft}` — #999999): frequency 0 captured, declared as `--color-grey-dark`. A second muted tone used inside dropdown menus and disabled states. ### Hairline - **Hairline** (`{colors.hairline}` — #dadada): frequency 1, declared as `--color-grey` and `--border-onetrust`. The light-grey border tone used on form inputs and the cookie-consent dialog edges. ### Link - **Link Blue** (`{colors.link}` — #0000ee): frequency 22 (11 as text, 11 as border). Default browser-blue used on inline text links in the footer and on legal-disclaimer pages — not a brand-defined link color but the system default that IKEA does not override. ## Typography ### Font Family The system runs **Noto IKEA** — a proprietary humanist sans built on the open-source Noto Sans family — for every display, heading, body, button, and nav surface. The CSS declares it as `--ikea-font: "Noto IKEA", "Noto Sans", Roboto, "Open Sans", system-ui, sans-serif`, with Noto Sans as the immediate open-source fallback and Roboto / Open Sans as subsequent safety nets. There is no second display family, no serif tier, no monospace anywhere on the captured surface. One humanist sans does every job, and the proportions read warm — slightly more open than Inter, with a less mechanical feel than Roboto. ### Hierarchy | Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 72px | 700 | 77.76px | -1.84px | Feature display — "Forever in bloom" / largest seasonal moments | | `{typography.display-lg}` | 51px | 700 | 55.08px | -1.48px | Standard h2 — "Designer stories", tile caption overlays | | `{typography.display-md}` | 36px | 700 | 43.2px | -0.96px | Section headings — category tile titles, "IKEA PS 2026 is here!" | | `{typography.heading-md}` | 20px | 400 | 32.4px | 0 | Sub-section leads, mid-tier nav labels | | `{typography.heading-sm}` | 16px | 700 | 22.4px | 0 | Card titles, emphasis labels | | `{typography.body-md}` | 16px | 400 | 25.92px | 0 | Default running text, paragraph body | | `{typography.body-base}` | 16px | 400 | 16px | 0 | Tight-line body — inside the "Go shopping" button label | | `{typography.body-sm}` | 14px | 400 | 21.98px | 0 | Caption rows, metadata strips | | `{typography.nav-link}` | 16px | 400 | 16px | 0 | Top-nav link labels | | `{typography.button-md}` | 14px | 400 | 16px | 0 | Button labels, "Go shopping" CTA | ### Principles Display weight stays at 700 across every display tier. The 72px feature display with -1.84px tracking is the editorial-magazine treatment — confidence through tracking, not through a yet-heavier weight. Body and nav sit at weight 400; weight 700 is the system's emphasis treatment, used for display, card titles, and card-overlay captions alike. There is no semibold 500 or medium 600 tier between them. The 51px h2 with -1.48px tracking is the page's most-used display moment — it carries the "Designer stories", "Forever in bloom" pull-quote overlay, and every furnished-room tile's caption. Bumping to the 72px tier is reserved for the largest seasonal feature blocks. ### Note on Font Substitutes Noto IKEA is a licensed proprietary family. **Noto Sans** (Google's open-source family, the family Noto IKEA is built on) is the direct substitute — the metrics transfer cleanly at every tier. **Inter** at the same weights also works; adjust display tracking to match the -1.84px / -1.48px / -0.96px IKEA values. The system fallback stack (`Noto Sans, Roboto, Open Sans, system-ui, sans-serif`) is already what the CSS declares. ## Layout ### Spacing System - **Base unit:** 16px is the dominant module (frequency 19 in captured spacing values), with 24px as the secondary step (frequency 17) and 20px as the grid-gap (frequency 11). - **Tokens:** `{spacing.xs}` 8px · `{spacing.sm}` 10px · `{spacing.md}` 12px · `{spacing.base}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 21px · `{spacing.2xl}` 24px. - **Grid gap:** 20px on desktop (`--grid-gap: 1.25rem`), 16px on mobile (`--grid-gap-mobile: 1rem`). - **Card padding:** 60×92×108×60px on the large editorial tiles ("Forever in bloom", "Go shopping") — a generous asymmetric padding that gives the caption overlay room to breathe in the lower-left. - **Section spacing:** ~140px between the hero strip and the first row of furnished-room tiles below it (`140px 24px 0px`). ### Grid & Container - **Max content width:** ~1440px on desktop (`--container-max-width: 90rem`), with 1.5rem horizontal padding. - **Hero block:** 4-column homeware photo grid on the left paired with a 1-column "Go shopping" yellow tile on the right, beside a 1-column "Forever in bloom" salmon tile. - **Below-fold tile grid:** 2-column at desktop, alternating photo-with-caption tiles ("Let's eat out!", "Get ready, get set, go!", "Let's visit IKEA Germany", "Rewind to the '90s", "Up for any adventure", "Give your outdoor space room to bloom", "Blue & white with a touch of terracotta"). - **Navigation:** 96px height (`--navigation-height: 6rem`), with mega-dropdown panels that occupy the full viewport width below the nav strip. ### Rhythm The page alternates between **chromatic-anchor tiles** (the yellow "Go shopping" block, the salmon "Forever in bloom" block) and **room-photography tiles** that occupy the rest of the grid. The chromatic anchors sit only in the hero strip; below the fold the page becomes pure photography. This rhythm — color anchor at the top, photography body, color recedes — is the structural device. There is no atmospheric gradient between bands; every section terminates on the same cream canvas. ## Elevation The system has essentially **no shadow tier**. The captured page has 0 declared shadow values across cards, tiles, and buttons. Depth comes from photography contrast and from the 8px rounded corner that separates each tile from its neighbors — there is no card-lift halo, no dropdown shadow, no modal scrim captured. - **Flat (no shadow):** hero strip, below-fold tile grid, footer band — 100% of surfaces. - **Tonal lift:** the yellow `{colors.primary}` and salmon `{colors.accent-warm}` tiles lift off the cream canvas by saturation alone — the chromatic contrast does the elevation work. - **Hairline outlines:** `{colors.hairline}` (#dadada) marks the form input and cookie-consent dialog edges at 1px. There is no second hairline tone on the captured surface. ## Shapes The radius scale is **binary: 8px or full circle**. - `{rounded.none}` 0px — the implicit default for the page floor, the navigation bar, and the wordmark area. - `{rounded.xs}` 2px — declared as `--content-border-radius: .125rem` but rare in the captured render. - `{rounded.md}` 8px — frequency 46. The universal default for cards, tiles, photo-overlay containers, search inputs, and the cookie-consent dialog. Declared as `--box-border-radius: .5rem` and `--radius: .5rem`. - `{rounded.full}` 50% / 9999px — frequency 6. Reserved for the round play-icon buttons inside video and inspiration tiles, and for the round account-avatar in the navigation. There is no 4px / 6px / 12px / 16px / 24px middle tier. The system is deliberately binary — most surfaces are 8px, and the two exceptions (page floor at 0, round buttons at 50%) carry their own clear semantic role. ## Components **`button-primary`** — The "Go shopping" tile in the upper right of the hero. Yellow `{colors.primary}` fill, near-black `{colors.ink}` text, 0px radius (the tile itself uses 8px corner but the captured "primaryButton" extracts as 0px on the inner label area), 16×50px padding, 100px height. Label uses `{typography.button-md}` (14px / 400). The single brand-voltage CTA on the homepage. **`button-secondary`** — Cream `{colors.canvas}` fill, ink text, 1px ink border, `{rounded.full}` pill, 12×24px padding, 44px height. Used for non-primary actions in the broader site ("Sign in", "Find a store"); the captured surface does not render this directly but the inverse pairing is the standard IKEA secondary chrome. **`top-nav`** — Cream `{colors.canvas}` surface, 96px height, 16px horizontal padding. Houses the IKEA wordmark flush left, the main-category links (Products / Rooms / Stories / Stores), and the right-aligned cluster (Search / Sign in / Favorites / Bag). No bottom hairline rule captured on the home view. **`nav-link`** — Transparent background, near-black `{colors.ink}` text in `{typography.nav-link}` (16px / 400), 16px padding, 54px height. No rounded background on hover captured. **`hero-heading`** — Near-black `{colors.ink}` text on the cream canvas, `{typography.display-xl}` (72px / 700) with -1.84px tracking. Reserved for the largest seasonal feature display (the "Forever in bloom" pull-quote overlay sits at 51px / 700 — the 72px tier is for the most prominent moments only). **`section-heading`** — Near-black text at `{typography.display-lg}` (51px / 700) with -1.48px tracking. The page's most-used display moment — "Designer stories", tile caption overlays, and section dividers all sit at this tier. **`card-title`** — Near-black text at `{typography.display-md}` (36px / 700) with -0.96px tracking. Used for category-tile titles and the "IKEA PS 2026 is here!" launch announcement. **`body-paragraph`** — Default near-black text at `{typography.body-md}` (16px / 400 / 25.92px line-height). The workhorse paragraph style — used for tile body copy and explanatory text. **`body-paragraph-muted`** — `{colors.ink-soft}` (#484848) variant at `{typography.body-sm}` (14px / 400). Used for caption rows and footer category sub-labels. **`card`** — Cream or white surface, near-black text, `{rounded.md}` 8px radius, 16px internal padding. The default content card — holds breadcrumb chips and dropdown items. **`card-photo`** — White surface, full-bleed photography, `{rounded.md}` 8px radius, 0px padding (the room photo fills the tile edge-to-edge). Holds a handwritten-feel caption overlay in the lower-left corner at `{typography.display-lg}` (51px / 700). The default homepage tile — used 8 times below the fold. **`card-yellow`** — Swedish-yellow `{colors.primary}` fill, near-black text, `{rounded.md}` 8px radius, 60×92×108×60px asymmetric padding. The "Go shopping" tile — the single chromatic anchor in the upper right of the hero. **`card-warm`** — Salmon-orange `{colors.accent-warm}` fill, near-black text, `{rounded.md}` 8px radius, 60×92×108×60px padding. The "Forever in bloom" inspiration tile beside the yellow CTA — the only other chromatic surface on the page. **`play-button`** — Cream / white circular fill, ink text, `{rounded.full}` 50% radius, 12px padding, 60px height (`--video-btn-width: 3.75rem`). Sits inside video and inspiration tiles as the round play-icon button — one of only two surfaces using the full-circle radius. **`text-input`** — Cream surface, ink text, `{colors.hairline}` 1px border, `{rounded.md}` 8px radius, 12×16px padding, 48px height. The search-input field in the top-nav and the form fields below the fold all use this resting state. ## Do's and Don'ts **Do** hold `{colors.primary}` (Swedish yellow) to a single hero tile. The system's signature move is the held-in-reserve voltage — yellow appears 4 times on the captured page, all concentrated on the "Go shopping" CTA and the wordmark. Painting a button below the fold yellow, or using yellow for any body fill, breaks the chromatic anchor and dilutes the brand voltage. **Do** use `{colors.canvas}` (#fffefb) — never pure `#ffffff` — for any page-floor or canvas surface that sits beside the brand yellow. The cream warmth softens the saturated yellow voltage; switching to pure white makes the chromatic anchor read as harsh rather than as warm-editorial. **Do** let room photography carry every tile below the fold. The system has no flat-illustration tile, no SKU-grid card, no stock-photo content surface — every below-fold tile is a furnished room with a handwritten-feel caption overlay at 51px / 700. Substituting product-only shots breaks the editorial principle that makes the homepage feel like a magazine spread rather than a retail catalog. **Do** use `{rounded.md}` (8px) on every content card and tile. The system has frequency 46 on this single radius — adding a 12 / 16 / 24px middle tier softens the binary scale and makes the page lose the editorial-magazine feel. **Don't** use IKEA-blue (`{colors.ikea-blue}` — #0058a3) in the marketing chrome. The blue is declared as `--color-ikea-blue` but lives on in-store wayfinding signs and the historical brand logo — it has frequency 0 on the captured homepage. Using it on a web button or text link reads as a chromatic accent rather than as a brand voltage, and conflicts with the yellow-as-only-voltage discipline. **Don't** add a yellow-button below the fold. The captured surface has zero buttons with the brand-yellow fill below the hero strip — secondary CTAs use `{colors.canvas}` with an ink border and a pill `{rounded.full}` radius. Spreading the yellow throughout the page destroys the chromatic-anchor rhythm. **Don't** introduce a tinted shadow or card-lift halo. The system has zero captured shadow values — depth comes from the 8px rounded corner and from the saturation contrast of the chromatic tiles against the cream canvas. Adding even a subtle 4-pixel shadow turns the editorial chrome into a typical SaaS dashboard surface. **Don't** render display headlines at any weight other than 700. The system sits at weight 700 with the negative tracking (-1.84px / -1.48px / -0.96px) doing the editorial work. Bumping to weight 800 / 900 or dropping to 500 / 600 breaks the typographic signature; the tracking is the load-bearing detail, not the weight. ## Known Gaps - **Product detail pages:** the captured chrome is the homepage. Product detail surfaces (the SKU page, the size-and-color picker, the room-builder, the assembly-instruction viewer) introduce a fully-rounded product-color swatch and a 4-column variant chip grid that are not represented here. - **Checkout and bag flows:** the bag, address-entry, payment-form, and order-confirmation surfaces carry their own form-field hairline tone and a sticky-CTA at the bottom of the viewport that are not exposed on the homepage. - **In-store wayfinding:** IKEA's in-store signs use the historical IKEA-blue `{colors.ikea-blue}` heavily, paired with the Swedish yellow on directional arrows and category headers. The current web chrome does not render this pairing and the spec captures only the web tier. - **Catalog and email templates:** IKEA's printed catalog and the email-marketing templates carry a richer typographic ladder and use a 4-column photography grid that is not represented here. The print system runs Noto IKEA at larger display sizes (96px / 128px feature displays). - **Hover and focus states:** documented for resting states only; the full state matrix (hover lift, focus ring, active press, disabled tint) is not exposed on the captured surface. - **Motion:** the homepage tiles carry hover-zoom photography effects and an autoplay carousel on the largest feature tile; the spec captures end-state values only. Easing curves and stagger timing live in the live component implementation. - **Mega-navigation:** the captured surface shows the closed nav state only. The full mega-dropdown panels (Products / Rooms / Stories category trees) carry their own column-grid and hover-state styling not represented here.