---
version: alpha
name: IKEA
description: The most recognizable retail color pair in the world — IKEA blue and IKEA yellow — deployed with Scandinavian discipline on a bright white canvas, set in the bespoke Noto IKEA grotesque, with friendly 8px-rounded cards, pill-shaped black buttons, and big flat-lay product photography doing the selling.

colors:
  # Surface / canvas
  background: "#ffffff"        # bright white retail canvas
  surface: "#f5f5f5"           # muted section bands, card backings
  surface-blue: "#0058a3"      # the IKEA blue brand panel / logo field
  surface-yellow: "#ffdb00"    # the IKEA yellow promo panel

  # Ink / text
  ink: "#111111"               # near-black headings and body
  ink-secondary: "#484848"     # supporting copy (grey-dim)
  ink-muted: "#565656"         # link hover, low-emphasis text
  ink-faint: "#818181"         # captions, disabled, icon greys
  on-dark: "#ffffff"           # text on blue / black surfaces
  on-yellow: "#111111"         # text on the yellow panel

  # Brand colors — the IKEA blue + yellow pair
  primary: "#0058a3"           # IKEA blue — logo, brand panels, headers
  primary-strong: "#0159a3"    # the live header/link blue (near-identical)
  primary-sky: "#1eaedb"       # lighter interaction blue, input focus fill
  yellow: "#ffdb00"            # IKEA yellow — the secondary brand pop
  yellow-light: "#fff094"      # soft yellow tint
  link-blue: "#0000ee"         # classic underlined hyperlink blue

  # Action ink (buttons are black, not brand-colored)
  action: "#111111"            # primary button fill — black, IKEA convention
  on-action: "#ffffff"

  # Borders
  border: "#cccccc"            # hairline dividers, input edges
  border-strong: "#111111"     # black input outline ring

  # Shadow tints (opaque approximation for the elevation table)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.1) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -1.84px
  display:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 51px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -1.48px
  heading:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.96px
  heading-light:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.96px
  heading-sub:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: 0px
  body-large:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-bold:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0px
  label:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0px
  caption:
    fontFamily: "Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.action}"
    textColor: "{colors.on-action}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 18px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-action}"

  button-yellow:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    padding: 16px 50px
  button-yellow-hover:
    backgroundColor: "{colors.yellow-light}"
    textColor: "{colors.on-yellow}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 18px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  icon-button:
    backgroundColor: "{colors.action}"
    textColor: "{colors.on-action}"
    rounded: "{rounded.pill}"
    padding: 12px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  card-product:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.primary-sky}"
    textColor: "{colors.on-dark}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 12px 16px

  link:
    textColor: "{colors.link-blue}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.ink-muted}"

  badge:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

  price-tag:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.on-yellow}"
    typography: "{typography.label}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
---

# IKEA Design System

## Overview

IKEA owns one of the most recognizable color pairings in the world — the deep cobalt **IKEA blue** (`{colors.primary}`) against the saturated **IKEA yellow** (`{colors.yellow}`), the exact colors of the Swedish flag and of the logo that has anchored a billion flat-pack boxes. The web design exists to deploy that pair with Scandinavian discipline. The canvas is bright, honest white (`{colors.background}`); the blue shows up in the logo field, headers, and brand panels; the yellow arrives as a single, confident block — the giant "Go shopping" panel, a promo banner, a price tag — never sprinkled. The restraint is the point: two loud primaries can only stay this iconic if the page around them is calm and white.

The typography is the bespoke **Noto IKEA** grotesque (a customized Noto Sans), and it does real work. Display headlines run heavy (`{typography.display-hero}` weight 700) with aggressive negative tracking (-1.84px at 72px), so the big type sits dense and democratic — plain-spoken, unfussy, the visual equivalent of IKEA's "design for everyone" promise. Supporting copy drops to a calm regular weight in near-black (`{colors.ink}`), and the whole system avoids anything ornamental. There is no luxury serif, no italic flourish; just a friendly, sturdy sans that reads the same in forty languages.

The third signature is the geometry-and-photography combination. Cards and image tiles round to a friendly **8px** (`{rounded.md}`), softening the grid without making it cute, while primary action buttons are full **pill** shapes (`{rounded.pill}`) filled black (`{colors.action}`) — IKEA's CTAs are black, not brand-blue, which keeps the blue reserved for identity rather than interaction. The hero is almost always a big, brightly-lit flat-lay or room set of actual products on white, with the yellow panel butted right up against it. Photography sells; type and color frame. That clean white stage, the disciplined blue-and-yellow pair, the heavy democratic grotesque, and the pill-black buttons are the whole IKEA web language.

**Key Characteristics:**
- The iconic **IKEA blue + yellow** pair (`{colors.primary}`, `{colors.yellow}`) on a bright white canvas (`{colors.background}`) — disciplined, never scattered
- Yellow deployed as a single confident block (the "Go shopping" panel, promos, price tags), not as scattered accents
- Blue reserved for identity — logo, headers, brand panels — not for interaction
- Bespoke **Noto IKEA** grotesque (`{typography.display-hero}`), heavy weight 700 with -1.84px tracking on display
- Primary CTAs are **pill-shaped and black** (`{colors.action}` + `{rounded.pill}`), not brand-colored
- Friendly **8px** card and image rounding (`{rounded.md}`) softens the grid
- Big, brightly-lit flat-lay / room-set product photography does the selling
- Near-black text (`{colors.ink}`), classic underlined blue hyperlinks (`{colors.link-blue}`)
- Yellow price tags and badges (`{colors.price-tag}`) — a retail signature
- Inputs flip to a bright sky-blue (`{colors.primary-sky}`) fill on focus — a playful, unmistakable state

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The dominant retail canvas — bright, honest, the stage everything sits on.
- **Light Grey** (`{colors.surface}`): Muted section bands and card backings.
- **IKEA Blue Panel** (`{colors.surface-blue}`): The brand-blue field behind the logo and header moments.
- **IKEA Yellow Panel** (`{colors.surface-yellow}`): The single saturated yellow block — the "Go shopping" / promo surface.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Headings and body. Not pure black — a hair softer.
- **Grey Dim** (`{colors.ink-secondary}`): Supporting copy.
- **Muted** (`{colors.ink-muted}`): Link-hover and low-emphasis text.
- **Faint** (`{colors.ink-faint}`): Captions, disabled states, icon greys.

### Brand Colors
- **IKEA Blue** (`{colors.primary}` / `{colors.primary-strong}`): The identity blue — logo, headers, brand panels. Held back from interactive elements to preserve its stamp.
- **Sky Blue** (`{colors.primary-sky}`): The lighter, playful interaction blue used for input focus fills.
- **IKEA Yellow** (`{colors.yellow}`) / **Yellow Light** (`{colors.yellow-light}`): The secondary brand pop — promo panels, price tags, badges. Always a deliberate block, never a tint scattered across the page.
- **Hyperlink Blue** (`{colors.link-blue}`): The classic underlined inline link.

### Action & Borders
- **Action Black** (`{colors.action}`): The primary-button fill — IKEA's CTAs are black, not blue.
- **Hairline / Black Ring** (`{colors.border}`, `{colors.border-strong}`): Dividers, input edges, and the black focus outline.
- **Shadow Tint** (`{colors.shadow-soft}`): Opaque stand-in for the soft card shadow (original was rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Noto IKEA` — a bespoke customization of Noto Sans, with fallbacks `Noto Sans, Roboto, Open Sans, system-ui, sans-serif`. The single typeface for everything: display, body, UI. Friendly, sturdy, multilingual.
- **OpenType / tracking**: heavy display weights with strong negative tracking (-1.84px at 72px); body stays at neutral tracking and regular weight.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / 700 / -1.84px — the marquee headline |
| `display` | 51px / 700 / -1.48px — large section titles |
| `heading` | 36px / 700 / -0.96px — feature headings |
| `heading-light` | 36px / 400 — softer large headings / quotes |
| `heading-sub` | 20px / 400 — sub-section headings, lead-ins |
| `body-large` | 16px / 400 — standard body and inputs |
| `body-bold` | 16px / 700 — emphasized body |
| `body` | 14px / 400 — dense supporting copy |
| `label` | 14px / 700 — button text, UI labels |
| `caption` | 12px / 700 — badges, price tags, metadata |

### Principles
- **One typeface, everywhere**: Noto IKEA carries display, body, and UI. No serif, no second family. Consistency over variety.
- **Heavy and tight on display**: 700 weight with -1.84px tracking makes headlines dense and plain-spoken.
- **Bold for labels and prices**: UI labels, badges, and price tags use weight 700 — small but emphatic, retail-clear.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Spacing is generous and breathable — IKEA's pages give product imagery and the color blocks room, with `{spacing.3xl}`–`{spacing.5xl}` separating major sections.

### Grid & Container
- Full-width hero sections; product content sits in a centered max-width container (~1400px)
- Common pattern: a full-bleed product photo paired flush against a solid blue or yellow color panel
- Product listings use a responsive multi-column card grid

### Whitespace Philosophy
- **White is the frame**: the bright canvas keeps the blue/yellow blocks from overwhelming the page
- **Color in blocks, not sprinkles**: yellow and blue arrive as large solid panels, surrounded by white
- **Photography breathes**: flat-lays and room sets get generous margins and full-bleed moments

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Most page content, color panels |
| Subtle (Level 1) | `0 4px 15px` at ~10% `{colors.shadow-soft}` | Hover-lifted product cards, dropdowns |
| Color Block (Level 2) | No shadow — depth via solid blue/yellow panel contrast | Promo panels, the "Go shopping" block |
| Focus Ring | 3px black `{colors.border-strong}` outline | Keyboard focus on inputs and controls |

**Shadow Philosophy**: IKEA is overwhelmingly flat. Depth comes from solid color-block contrast — a yellow or blue panel butted against white — rather than from drop shadows. The rare shadow is a soft, neutral lift on hovered product cards and dropdowns. Focus is communicated with a crisp black outline ring, not a colored glow, keeping the interaction model clear and high-contrast.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | The yellow promo button, full-bleed panels |
| `sm` | 4px | Badges, price tags, small chips |
| `md` | 8px | Cards, product tiles, images, inputs — the dominant radius |
| `lg` | 24px | Compact pill-ish chips and accordions |
| `pill` | 9999px | Primary action buttons, circular icon buttons |

The system pairs a friendly **8px** on cards and images with full **pill** buttons. The contrast — rounded soft cards plus fully-round CTAs — feels approachable and unintimidating, exactly the IKEA brand temperature. The big yellow promo button stays squared (`{rounded.none}`) when it tucks under a panel edge.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Black (`{colors.action}`) pill, white text. The main CTA across the site. Hover softens to `{colors.ink-secondary}`.
- **`button-yellow`** — IKEA yellow (`{colors.yellow}`) fill, black text, squared. The big "Go shopping" / promo action.
- **`button-secondary`** — White fill, near-black text, hairline pill outline. The quieter alternative.
- **`icon-button`** — Black circular button (the play/pause and arrow controls on hero carousels).

### Cards
- **`card`** / **`card-product`** — White or light-grey surface, 8px radius. Product tiles and content blocks; lift with a subtle shadow on hover.

### Inputs
- **`input`** — White fill, hairline edge, 8px radius. **`input-focus`** flips to a bright sky-blue (`{colors.primary-sky}`) fill with white text — IKEA's playful, unmistakable focus state.

### Navigation
- **`nav-bar`** — White, the blue logo at left, bold UI labels. Sits flush at the top.

### Accent & Retail
- **`link`** — Classic underlined hyperlink blue (`{colors.link-blue}`); hover drops the underline and greys to `{colors.ink-muted}`.
- **`badge`** / **`price-tag`** — Yellow (`{colors.yellow}`) fill, black bold text, 4px radius — the retail price-flag signature.

## Do's and Don'ts

### Do
- Keep the canvas bright white (`{colors.background}`) so the blue and yellow stay iconic
- Deploy IKEA yellow (`{colors.yellow}`) as a single confident block — the "Go shopping" panel, a promo, a price tag — never scattered
- Reserve IKEA blue (`{colors.primary}`) for identity: logo, headers, brand panels
- Make primary CTAs **black pills** (`{colors.action}` + `{rounded.pill}`), not brand-colored
- Set everything in **Noto IKEA** (`{typography.display-hero}`) — one typeface, heavy and tight on display
- Round cards and images to a friendly `{rounded.md}` (8px)
- Let big, brightly-lit product photography carry the hero
- Use yellow price tags and bold caption labels (`{colors.price-tag}`) for retail clarity
- Flip inputs to the sky-blue focus fill (`{colors.primary-sky}`) — the playful state is on-brand

### Don't
- Don't sprinkle yellow as small accents — it works as a solid block, surrounded by white
- Don't make the primary button blue — blue is identity, the CTA is black
- Don't introduce a second typeface or a serif — Noto IKEA does everything
- Don't darken the canvas — IKEA's web is committedly white and bright
- Don't use thin display weights — headlines are heavy (700) and tightly tracked
- Don't replace the black focus ring with a soft colored glow — keep it crisp and high-contrast
- Don't over-round into squircles beyond `{rounded.md}` on cards; reserve full pills for buttons

---

## Responsive Behavior

### Breakpoints
*(Observed stops from the live site; product grid and hero panels drive the reflow.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <426px | Single column; hero photo and color panel stack; display scales 72px → ~36px; nav collapses to a hamburger + search |
| Mobile Large | 426–599px | Two-up product cards; stacked hero |
| Tablet | 600–895px | Multi-column product grid begins; hero photo and panel may sit side-by-side |
| Desktop | 896–1399px | Full grid; side-by-side hero photo + yellow/blue panel |
| Large | ≥1400px | Max ~1400px centered container; generous `{spacing.5xl}` section padding |

### Touch Targets
- Pill buttons run ~44px tall with `12px 18px` padding — comfortable for thumbs
- Circular icon buttons are sized for tap; product cards are fully tappable

### Collapsing Strategy
- **Navigation**: full horizontal nav → hamburger + persistent search and cart on mobile
- **Hero**: side-by-side photo + color panel stack vertically; the yellow block goes full-width
- **Product grid**: 4–5 columns → 2 → 1 as width drops
- **Type**: display scales down sharply while keeping its heavy weight

### Image Behavior
- Product photography is the hero; flat-lays and room sets crop to fill on small screens
- Images carry the friendly 8px radius and reflow as grid children

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand identity: IKEA Blue (`{colors.primary}`)
- Brand pop: IKEA Yellow (`{colors.yellow}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: **Black pill** (`{colors.action}`) — not blue

### Example Component Prompts

- "Create a full-bleed hero: a bright product flat-lay on white (`{colors.background}`) at left, butted flush against a solid IKEA yellow (`{colors.yellow}`) panel at right holding a 72px Noto IKEA headline at weight 700 (letter-spacing -1.84px) in near-black (`{colors.ink}`) and a black circular icon button"
- "Build a primary CTA: black (`{colors.action}`) pill button (`{rounded.pill}`), white text in `{typography.label}`, `12px 18px` padding, hover softens to `{colors.ink-secondary}`"
- "Render a product card: white (`{colors.surface}`) surface, `{rounded.md}` (8px) radius, a square product photo, a `{typography.body-bold}` name, and a yellow (`{colors.yellow}`) price tag chip (`{rounded.sm}`, black bold text)"
- "Design an input: white fill, 1px hairline (`{colors.border}`), `{rounded.md}` radius; on focus flip the fill to sky-blue (`{colors.primary-sky}`) with white text — IKEA's playful focus state"
- "Create a promo banner: a single solid IKEA yellow (`{colors.yellow}`) block, near-black (`{colors.ink}`) heavy headline, and a black pill CTA — surrounded by white space"

### Iteration Guide

1. Start on bright white (`{colors.background}`). If the page is dim or busy, stop — IKEA's stage is white.
2. Add color as solid blocks: one yellow (`{colors.yellow}`) panel, blue (`{colors.primary}`) for identity. If yellow is scattered as small accents, consolidate it into a block.
3. The primary button is a black pill (`{colors.action}` + `{rounded.pill}`). If you made it blue, recolor it black.
4. All type is Noto IKEA — heavy (700) and tightly tracked on display, regular on body.
5. Round cards and images to `{rounded.md}` (8px); keep CTAs full pills.
6. Let product photography lead the hero; type and color frame it.
7. For inputs, verify the sky-blue (`{colors.primary-sky}`) focus fill and the crisp black ring before moving on.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by IKEA. Brand names and trademarks belong to their respective owners.