IKEA

---
version: alpha
name: "IKEA Global – Skapa Design System"
description: "Primary visual anchor uses #ffdb00 with primary cta surface — 'go shopping' panel background, button fills, table hover highlights. Typography baseline relies on Noto IKEA for hero display headline — largest editorial statement."
colors:
  ikea-yellow: "#ffdb00"
  ikea-blue: "#0159a3"
  ikea-yellow-light: "#fff094"
  off-white: "#fffefb"
  white: "#ffffff"
  text-black: "#000000"
  text-darker: "#111111"
  grey-mid: "#818181"
typography:
  display-xl:
    fontFamily: "Noto IKEA"
    fontSize: "51px"
    fontWeight: "700"
    lineHeight: "55.08px"
    letterSpacing: "-1.48px"
  display-l:
    fontFamily: "Noto IKEA"
    fontSize: "36px"
    fontWeight: "700"
    lineHeight: "43.2px"
    letterSpacing: "-0.96px"
  heading-m:
    fontFamily: "Noto IKEA"
    fontSize: "25px"
    fontWeight: "700"
    lineHeight: "30px"
    letterSpacing: "-0.54px"
  body-l-bold:
    fontFamily: "Noto IKEA"
    fontSize: "16px"
    fontWeight: "700"
    lineHeight: "22.4px"
  body-l:
    fontFamily: "Noto IKEA"
    fontSize: "16px"
    fontWeight: "400"
  body-m:
    fontFamily: "Noto IKEA"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "21.98px"
  body-s:
    fontFamily: "Noto IKEA"
    fontSize: "13.33px"
    fontWeight: "400"
  statement-l:
    fontFamily: "Noto IKEA"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "32.4px"
rounded:
  radius-none: "0px"
  radius-sm: "2px"
  radius-md: "8px"
spacing:
  spacing-1: "1px"
  spacing-2: "2px"
  spacing-3: "3px"
  spacing-6: "6px"
  spacing-8: "8px"
  spacing-10: "10px"
  spacing-12: "12px"
  spacing-16: "16px"
  spacing-18: "18px"
  spacing-20: "20px"
  spacing-24: "24px"
  spacing-28: "28px"
  spacing-42: "42px"
  spacing-44: "44px"
  spacing-50: "50px"
  spacing-60: "60px"
---

## Overview

Primary visual anchor uses #ffdb00 with primary cta surface — 'go shopping' panel background, button fills, table hover highlights. Typography baseline relies on Noto IKEA for hero display headline — largest editorial statement.

This system uses a 8px base grid with scale values 1, 2, 3, 6, 8, 10, 12, 16, 18, 20, 24, 28, 42, 44, 50, 60, 80, 120.

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## Colors

The palette uses 8 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-primary** maps to `ikea-yellow`: Role "primary" is grounded by usage context "Primary CTA surface — 'Go shopping' panel background, button fills, table hover highlights".
- **surface-background** maps to `off-white`: Role "background" is grounded by usage context "Global page background, body background color".
- **content-text** maps to `text-darker`: Role "text" is grounded by usage context "Primary body text, headings, nav labels, icon fills".
- **action-background** maps to `ikea-blue`: Role "background" is grounded by usage context "Brand logo, links, consent/confirm actions".

### Primary Brand
- **IKEA Yellow** (#ffdb00): Primary CTA surface — 'Go shopping' panel background, button fills, table hover highlights. Role: primary. {authored: rgb(255, 219, 0), space: rgb}

### Text Scale
- **Text Black** (#000000): High-contrast text, combobox text, input text. Role: text. {authored: rgb(0, 0, 0), space: rgb}
- **Text Darker** (#111111): Primary body text, headings, nav labels, icon fills. Role: text. {authored: rgb(17, 17, 17), space: rgb}

### Interactive
- **Grey Mid** (#818181): Subtle borders, disabled states, secondary text. Role: border. {authored: rgb(129, 129, 129), space: rgb}

### Surface & Shadows
- **IKEA Blue** (#0159a3): Brand logo, links, consent/confirm actions. Role: background. {authored: rgb(1, 89, 163), space: rgb}
- **IKEA Yellow Light** (#fff094): Yellow hover tint, highlight backgrounds. Role: background. {authored: rgb(255, 240, 148), space: rgb}
- **Off White** (#fffefb): Global page background, body background color. Role: background. {authored: rgb(255, 254, 251), space: rgb}
- **White** (#ffffff): Card surfaces, input backgrounds, overlay panels. Role: background. {authored: rgb(255, 255, 255), space: rgb}

## Typography

Typography uses Noto IKEA across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Uses Noto IKEA throughout for a uniform feel. Weight range spans bold, regular. Sizes range from 13.33px to 51px.

### Font Roles
- **Headline Font**: Noto IKEA
- **Body Font**: Noto IKEA

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero display headline — largest editorial statement | Noto IKEA | 51px | 700 | 55.08px | -1.48px | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Section headings, hero card titles | Noto IKEA | 36px | 700 | 43.2px | -0.96px | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Sub-section headings, card titles | Noto IKEA | 25px | 700 | 30px | -0.54px | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Emphasized body text, button labels, nav items | Noto IKEA | 16px | 700 | 22.4px | normal | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Primary body copy, default UI text | Noto IKEA | 16px | 400 | normal | normal | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Secondary body text, captions, metadata | Noto IKEA | 14px | 400 | 21.98px | normal | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Small labels, legal text, browser default inputs | Noto IKEA | 13.33px | 400 | normal | normal | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |
| Introductory statements, pull quotes, feature descriptions | Noto IKEA | 20px | 400 | 32.4px | normal | Noto IKEA, Noto Sans, Roboto, Open Sans, system-ui, sans-serif | Extracted token |

## Layout

Responsive system uses 3 breakpoint tier(s): mobile, tablet, desktop.

### Responsive Strategy
- **mobile (400-896px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (>= 768px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (Unknown)**: Expand layout density and horizontal composition for wide viewports.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-1 | 1px | 1 | Extracted spacing token |
| spacing-2 | 2px | 2 | Extracted spacing token |
| spacing-3 | 3px | 3 | Extracted spacing token |
| spacing-6 | 6px | 6 | Extracted spacing token |
| spacing-8 | 8px | 8 | Extracted spacing token |
| spacing-10 | 10px | 10 | Extracted spacing token |
| spacing-12 | 12px | 12 | Extracted spacing token |
| spacing-16 | 16px | 16 | Mapped to --container-spacing-mobile |
| spacing-18 | 18px | 18 | Extracted spacing token |
| spacing-20 | 20px | 20 | Extracted spacing token |
| spacing-24 | 24px | 24 | Mapped to --container-spacing-desktop |
| spacing-28 | 28px | 28 | Extracted spacing token |
| spacing-42 | 42px | 42 | Extracted spacing token |
| spacing-44 | 44px | 44 | Extracted spacing token |
| spacing-50 | 50px | 50 | Extracted spacing token |
| spacing-60 | 60px | 60 | Extracted spacing token |
| spacing-80 | 80px | 80 | Extracted spacing token |
| spacing-120 | 120px | 120 | Mapped to --vertical-spacing-desktop |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-color | rgb(17, 17, 17) ; rgb(255, 255, 255) ; rgb(0, 0, 238) |
| Light | outline-width | 3px |
| Light | outline-offset | 0px |
| Light | transform | matrix(-1, 0, 0, -1, 0, 0) ; matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, -80, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-none | 0px | 0 | Hairline corner |
| radius-sm | 2px | 2 | Hairline corner |
| radius-md | 8px | 8 | Control corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-none | 0px | px |
| radius-sm | 2px | px |
| radius-md | 8px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Core token rhythm without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 425px | only screen and (max-width: 425px) |
| Mobile | <= 530px | only screen and (max-width: 530px) |
| Mobile | <= 600px | only screen and (max-width: 600px) |
| Breakpoint 4 | <= 896px | only screen and (max-width: 896px) |
| Mobile | >= 400px | (min-width: 400px) |
| Mobile | 426-896px | only screen and (min-width: 426px) and (max-width: 896px) |
| Mobile | >= 550px | (min-width: 550px) |
| Tablet | >= 768px | only screen and (min-width: 768px) |
| Breakpoint 9 | Unknown | (-ms-high-contrast:none), (-ms-high-contrast:active) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.