---
name: IKEA
tagline: Yellow `#ffdb00` on blue `#0058a3`, Noto IKEA sans, Swedish-democratic-design retail at planetary scale.
updated_at: 2026-05-28T00:00:00.000Z
published_at: 2026-05-27T23:16:08.047Z
author: webdesignhot
source_url: https://www.ikea.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [retail, marketplace]
tags: [light, structured, sans, commerce, international, swedish, furniture, catalog, democratic-design, nordic]
preview_swatch: ['#fffefb', '#ffdb00', '#0058a3']
related: [uniqlo, target, shopify]
description: 'IKEA''s storefront is the canonical Swedish-democratic-design retail engine on the web — a near-white off-white canvas (`#fffefb`) carrying the entire page, with the iconic IKEA yellow (`#ffdb00`) and IKEA blue (`#0058a3`) — both pulled directly from the Swedish flag — reserved for the wordmark, the masthead band, every primary CTA, every sale flag, and every navigational anchor. Type runs **Noto IKEA** (the brand''s custom Google Noto cut, commissioned to render every Latin, Cyrillic, Arabic, Devanagari, and CJK script the catalog ships in) at modest weights — display 32–80px / 700 with mild negative tracking, body 16/400 at comfortable 1.55 leading. The chromatic identity is ruthlessly disciplined: yellow is the wordmark and the primary CTA, blue is the masthead chrome and every navigational link, near-black `#111111` carries every body word, and the off-white canvas carries everything else. Photography is the unmistakable IKEA catalog aesthetic — tightly composed product on a neutral interior backdrop, often with one human hand or one houseplant for scale, prices set in tabular numerals at maximum prominence. The grid runs a 12-column max at 1280px with 24px gutters and 4–5 product columns. CTAs render as 8px-radius rounded rectangles (not pills — IKEA''s shape vocabulary is structural, not soft) in yellow with near-black labels — the highest-contrast pair in mass retail. The result is the most Bauhaus-disciplined furniture retailer on the web: Kamprad''s democratic-design philosophy rendered as e-commerce — better, cheaper, for the many — with the visual restraint of a Stockholm postwar industrial-design studio.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
muted: text-muted
border: border
ring: border-strong
colors:
bg: '#fffefb' # off-white page canvas — a hint warmer than pure white
bg-page: '#fffefb'
surface: '#ffffff' # pure white for product cards and modals
surface-soft: '#f5f5f5' # alternate row, image background, disabled fields
surface-strong: '#e6e6e6' # divider band between major sections
surface-grey: '#f0f0f0' # filter sidebar background
surface-blue: '#0058a3' # masthead band — IKEA blue, full-width
surface-blue-soft: '#e8f0f7' # info banner tint
surface-yellow-soft: '#fff7d6' # sale-band tint, family-deal background
bg-inverse: '#111111' # rare full-width dark band — used on premium drops
brand: '#ffdb00' # IKEA yellow — wordmark, primary CTA, sale flag
brand-hover: '#f1cf00' # darker yellow on hover
brand-active: '#d9b900' # pressed deepest yellow
brand-pale: '#fff4a3' # disabled CTA tint
brand-deep: '#0058a3' # IKEA blue — the second brand colour, masthead + nav
brand-deep-hover: '#004a8a' # darker blue on hover
brand-deep-active: '#003c70' # pressed deepest blue
text: '#111111' # primary ink — near-black, never pure
text-strong: '#000000' # heading ink at maximum punch
text-muted: '#666666' # secondary metadata, breadcrumbs
text-soft: '#929292' # caption text, faint counts, placeholder
text-disabled: '#bbbbbb' # disabled state text
text-on-yellow: '#111111' # near-black on IKEA yellow CTA
text-on-blue: '#ffffff' # white on IKEA blue masthead
text-on-dark: '#ffffff' # white on dark takeover bands
link: '#0058a3' # default link colour — IKEA blue, never underlined by default
link-hover: '#004a8a' # link colour deepens on hover, underline appears
link-on-dark: '#ffffff' # white link on dark surface
visited: '#5a3a8a' # purple visited-link state on policy pages
border: '#cccccc' # default 1px hairline
border-soft: '#e6e6e6' # editorial dividers within sub-sections
border-strong: '#111111' # focus state hairline + selected outline
border-input: '#929292' # form input default outline (mid-grey)
border-blue: '#0058a3' # selected nav link underline
outline-focus: '#0058a3' # focus outline IKEA blue
scrim: 'rgba(17,17,17,0.5)' # modal backdrop
shadow-card: 'rgba(0,0,0,0.08)' # hover card shadow
shadow-modal: 'rgba(0,0,0,0.18)' # modal drop
shadow-mega: 'rgba(0,0,0,0.12)' # mega-menu flyout
success: '#0a8a3f' # in-stock + free shipping green
success-soft: '#e6f4ec' # success banner tint
warning: '#cc6600' # low-stock urgency amber-orange
warning-soft: '#fff4e5' # warning banner tint
danger: '#cc0000' # validation error red
danger-soft: '#fce8e8' # error banner tint
info: '#0058a3' # info banner blue — same as brand-deep
info-soft: '#e8f0f7' # info banner tint
rating-fill: '#ffdb00' # ratings render in IKEA yellow
rating-empty: '#cccccc' # empty star outline grey
sale-red: '#cc0000' # markdown price red — for "Now SEK 199" emphasis
family-price: '#0058a3' # IKEA Family exclusive pricing flag
new-tag: '#0058a3' # "NEW" tag in IKEA blue
typography:
display:
family: '"Noto IKEA", "Noto Sans", system-ui, -apple-system, sans-serif'
weights: [400, 500, 600, 700]
opentype-features: ['tnum']
body:
family: '"Noto IKEA", "Noto Sans", system-ui, -apple-system, sans-serif'
weights: [400, 500, 600, 700]
mono:
family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace'
weights: [400, 500]
scale:
display-hero: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.03em', family: display }
display-lg: { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
h1: { size: 40, weight: 700, lineHeight: 1.1, tracking: '-0.018em', family: display }
h2: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display }
h3: { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body }
h5: { size: 18, weight: 600, lineHeight: 1.35, tracking: '0', family: body }
body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
micro: { size: 11, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: body, transform: uppercase }
price-display: { size: 32, weight: 700, lineHeight: 1.0, tracking: '-0.01em', family: body, opentype: ['tnum'] }
price-product: { size: 18, weight: 700, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'] }
price-strikethru: { size: 14, weight: 400, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'] }
price-sale: { size: 18, weight: 700, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'], color: '#cc0000' }
price-family: { size: 18, weight: 700, lineHeight: 1.0, tracking: '0', family: body, opentype: ['tnum'], color: '#0058a3' }
button-cta: { size: 15, weight: 600, lineHeight: 1.0, tracking: '0', family: body }
nav-link: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
badge: { size: 11, weight: 600, lineHeight: 1.0, tracking: '0.04em', family: body, transform: uppercase }
chip: { size: 14, weight: 500, lineHeight: 1.0, tracking: '0', family: body }
radius:
micro: 2
sm: 4
md: 8 # buttons, cards, inputs — the canonical IKEA radius
lg: 12 # larger feature cards, modal corners
xl: 16 # hero promo bands (rare)
pill: 9999 # filter chips, badge tags, search bar
spacing:
base: 4
scale: [0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128]
layout:
page-width: 1280
prose-width: 720
header-height: 64
masthead-height: 64
sub-nav-height: 48
grid-columns: 12
grid-gutter: 24
components:
button-primary:
bg: '#ffdb00'
color: '#111111'
radius: 8
padding: '12px 20px'
height: 48
font: button-cta
use: 'Add to cart, Sign in, Continue, Buy now — every primary action. Rounded 8px rectangle in IKEA yellow with near-black sentence-case 15/600 label. The highest-contrast pair in mass retail.'
button-primary-hover:
bg: '#f1cf00'
color: '#111111'
use: 'Hover state — deepens to brand-hover yellow.'
button-secondary:
bg: '#ffffff'
color: '#111111'
border: '1px solid #111111'
radius: 8
padding: '11px 19px'
height: 48
use: 'View product, Save for later, secondary actions. White fill with 1px near-black hairline.'
button-tertiary:
bg: 'transparent'
color: '#0058a3'
radius: 8
padding: '10px 16px'
use: 'Tertiary text-only link with persistent IKEA-blue colour. Underline appears on hover.'
button-icon:
bg: 'transparent'
color: '#111111'
radius: 9999
width: 44
height: 44
use: 'Wishlist heart, share, account utility — circular icon-only button with 44×44 hit area.'
button-on-blue:
bg: '#ffffff'
color: '#111111'
radius: 8
padding: '11px 19px'
height: 48
use: 'Secondary CTA placed on the IKEA-blue masthead — white fill with near-black label.'
product-card:
bg: '#ffffff'
color: '#111111'
radius: 8
padding: '0 0 16px 0'
border: 'none'
use: 'Listing tile — image flush to top corners on soft surface, 8px radius, minimal type chrome below.'
product-card-image:
aspect: '1/1'
bg: '#f5f5f5'
fit: 'cover'
use: 'Product photography — tightly composed product on neutral interior ground at 1:1 square aspect.'
feature-card:
bg: '#ffffff'
color: '#111111'
radius: 12
padding: '24px'
border: '1px solid #e6e6e6'
use: 'Editorial feature card — room inspiration, sustainability story, IKEA Family offer.'
inspiration-card:
bg: '#fff7d6'
color: '#111111'
radius: 12
padding: '32px'
use: 'Yellow-tint inspiration card on the homepage — "Bedroom ideas under SEK 999" editorial block.'
text-input:
bg: '#ffffff'
color: '#111111'
radius: 8
height: 48
padding: '12px 16px'
border: '1px solid #929292'
focus: '2px solid #0058a3'
use: 'Form input — 8px radius, 1px mid-grey hairline default, 2px IKEA-blue on focus.'
search-bar:
bg: '#ffffff'
color: '#666666'
radius: 9999
height: 48
padding: '0 20px'
border: '1px solid transparent'
use: 'Masthead pill search — white fill on the IKEA-blue band, ~560px wide on desktop.'
chip-filter:
bg: '#ffffff'
color: '#111111'
radius: 9999
border: '1px solid #cccccc'
padding: '8px 16px'
height: 36
use: 'PLP filter chip — pill 36px tall. Selected state inverts to IKEA-blue bg / white text.'
badge-new:
bg: '#0058a3'
color: '#ffffff'
radius: 4
padding: '4px 8px'
font: badge
use: '"NEW" or "NEWS" tag — IKEA-blue fill with white uppercase 11/600 with 0.04em tracking.'
badge-family:
bg: '#0058a3'
color: '#ffffff'
radius: 4
padding: '4px 8px'
font: badge
use: '"IKEA FAMILY" tag — IKEA-blue fill flagging member-exclusive pricing.'
badge-sale:
bg: '#cc0000'
color: '#ffffff'
radius: 4
padding: '4px 8px'
font: badge
use: '"LOWER PRICE" or "NEW LOWER PRICE" tag — red fill, the rare red moment in the palette.'
badge-eco:
bg: '#0a8a3f'
color: '#ffffff'
radius: 4
padding: '4px 8px'
font: badge
use: '"MORE SUSTAINABLE" tag — green fill flagging certified-sustainable products.'
masthead-band:
bg: '#0058a3'
color: '#ffffff'
height: 64
radius: 0
use: 'Full-width IKEA-blue masthead — the iconic chromatic anchor. Wordmark left, search centre, utilities right.'
hero-band-yellow:
bg: '#ffdb00'
color: '#111111'
radius: 0
use: 'Yellow takeover band — homepage seasonal hero or sale event. Big near-black display headline.'
hero-band-photo:
bg: '#fffefb'
color: '#111111'
radius: 0
use: 'Photographic hero — full-bleed room photograph with overlaid display headline and CTA card.'
size-tile:
bg: '#ffffff'
color: '#111111'
radius: 8
border: '1px solid #cccccc'
padding: '12px 16px'
use: 'Variant tile for size / colour / configuration. Selected state: 2px IKEA-blue border with near-black text.'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-swedish: 'cubic-bezier(0.32, 0.08, 0.24, 1)'
duration-fast: 150
duration-standard: 240
duration-slow: 320
duration-hero: 480
cta-press: 'CTA bg deepens ffdb00 → f1cf00 over 150ms on :hover'
card-hover: 'image scale(1 → 1.03) over 240ms ease-swedish — quiet zoom without translate'
mega-menu-open: '250ms ease-out fade + 8px slide-down from the masthead'
hero-fade: 'hero image fades opacity 0 → 1 over 480ms on first paint'
page-transition: 'hard navigation, no transition'
reduced-motion: 'respects prefers-reduced-motion: reduce — image zoom suppresses, only colour transitions remain.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
ambient: 'none — IKEA stays mostly flat'
hover-card: 'rgba(0,0,0,0.08) 0 4px 12px'
mega: 'rgba(0,0,0,0.12) 0 8px 24px'
modal: 'rgba(0,0,0,0.18) 0 12px 32px'
ring: '0 0 0 2px #0058a3'
accessibility:
contrast-text-on-bg: 19.1 # #111111 on #fffefb — AAA
contrast-text-on-cta: 17.4 # #111111 on #ffdb00 — AAA — the highest-contrast CTA pair in mass retail
contrast-text-on-blue: 8.5 # #ffffff on #0058a3 — AAA
contrast-link-on-bg: 8.3 # #0058a3 link on #fffefb — AAA
contrast-muted-on-bg: 5.7 # #666666 on #fffefb — AA
contrast-sale-on-bg: 5.9 # #cc0000 sale-red on #fffefb — AA
focus-ring: '2px solid #0058a3 + 2px outline-offset (IKEA-blue ring)'
reduced-motion-honored: true
touch-target-min: 44
keyboard-nav: 'Tab moves logo → search → main nav → utility (wishlist, account, cart) → main grid → footer; arrow keys inside size selector, gallery, and mega-menu.'
dark-mode: null # The default storefront is light-only. The IKEA mobile app respects system dark mode for select surfaces, but the web storefront does not.
lineage:
summary: 'IKEA''s visual lineage runs through three deep traditions: Scandinavian/Nordic functional minimalism (the postwar Swedish industrial-design heritage of Bruno Mathsson, Carl Malmsten, and the Stockholm Konstfack school — restraint, blonde wood, white walls, daylight); the Bauhaus discipline of geometric type and structural colour (Helvetica / Akzidenz-Grotesk lineage applied without ornament, primary colours used structurally not decoratively); and Ingvar Kamprad''s "democratic design" philosophy codified in 1976 (form, function, quality, sustainability, low price — the five-pillar manifesto that every catalog page, every storefront band, and every product description still anchors to). The two brand colours — yellow #ffdb00 and blue #0058a3 — are not arbitrary; they are pulled directly from the flag of Sweden, the visual claim of national heritage that no other furniture retailer can credibly make. The Noto IKEA typeface is a commissioned Google Noto cut that ships every script the catalog needs (Latin, Cyrillic, Arabic, Devanagari, Thai, CJK) so the same brand voice renders identically in Stockholm, Riyadh, Mumbai, and Shanghai. The closest design-philosophy peer is Muji — both anchor a "no-decoration, plain-truth, democratic-quality" retail position — but IKEA carries it with Swedish national chromatic confidence while Muji erases its national markings entirely.'
influences:
- { name: 'Muji', role: 'Adjacent democratic-design retail philosophy — both anchor "no-decoration, plain-truth, accessible-quality"', url: 'https://www.muji.com' }
- { name: 'Dieter Rams', role: 'Ten Principles of Good Design — informs IKEA''s "form, function, quality, sustainability, low price" pillar manifesto', url: 'https://www.vitsoe.com/us/about/dieter-rams' }
- { name: 'Bauhaus', role: 'Geometric type, structural use of primary colour, sans-serif discipline', url: 'https://www.bauhaus-dessau.de/en/' }
- { name: 'Swedish Society of Crafts and Design', role: '"More beautiful things for everyday use" — the 1919 manifesto that seeded democratic design', url: 'https://svenskform.se/en/' }
- { name: 'Bruno Mathsson', role: 'Postwar Swedish functional furniture — blonde wood, bent ply, daylight composition', url: 'https://www.brunomathsson.com' }
- { name: 'Google Noto', role: 'Typographic foundation — Noto IKEA is a commissioned Noto cut spanning every catalog script', url: 'https://fonts.google.com/noto' }
- { name: 'Helvetica', role: 'Bauhaus-Swiss sans-serif lineage — the geometric universal sans that informs Noto IKEA''s metrics', url: 'https://www.linotype.com/1308/helvetica-family.html' }
- { name: 'Akzidenz-Grotesk', role: 'Pre-Helvetica grotesque sans — IKEA''s pre-2019 wordmark sat in this family', url: 'https://www.fontshop.com/families/akzidenz-grotesk' }
- { name: 'Flag of Sweden', role: 'Source of the yellow #ffdb00 and blue #0058a3 brand palette', url: 'https://en.wikipedia.org/wiki/Flag_of_Sweden' }
- { name: 'Ingvar Kamprad', role: 'Founder — codified "democratic design" in the 1976 Testament of a Furniture Dealer', url: 'https://www.inter.ikea.com/en/this-is-inter-ikea-group/our-history' }
---
## 1. Visual Theme & Atmosphere
IKEA's storefront is the canonical Swedish-democratic-design retail engine on the web — a near-white off-white canvas (`#fffefb`, a hint warmer than pure white to evoke daylight on blonde wood) carrying every editorial band and every product grid, with the iconic IKEA yellow (`#ffdb00`) and IKEA blue (`#0058a3`) — both pulled directly from the flag of Sweden — reserved for the chromatic moments that carry the brand. The yellow is the wordmark, every primary CTA, every sale-event hero band. The blue is the masthead chrome, every navigational link, every "NEW" tag, every "IKEA Family" pricing flag. Near-black `#111111` carries every body word — IKEA refuses pure `#000000` because the warm off-white canvas reads better against a softened ink. The result is a chromatic system that reads instantly as IKEA from across a room — the yellow-and-blue is so brand-equity-dense that no other furniture retailer can credibly use the pair without infringement risk.
Type runs **Noto IKEA**, the brand's commissioned cut of Google Noto — a sans-serif designed to span every script the catalog ships in (Latin, Cyrillic, Arabic, Devanagari, Thai, CJK) so the same brand voice renders identically in Stockholm, Riyadh, Mumbai, Shanghai, and Brooklyn. Before 2019 the storefront used Verdana (the system-font decision driven by Kamprad-era cost discipline); since the Noto IKEA commission, the brand owns its typographic surface end-to-end. The face sits close to Akzidenz-Grotesk / Helvetica metrics but with slightly more humanist warmth — the apertures are open, the terminals are honest, the numerals are tabular by default. Display sizes run 32–80px at 700 weight with mild negative tracking (-0.018em to -0.03em); body runs 16/400 at comfortable 1.55 leading; labels run 13/500 with zero tracking. The hierarchy is calm, not loud.
The chromatic identity is **disciplined two-colour brand on warm-neutral ground**. IKEA reserves yellow for the wordmark and the primary CTA (the single highest-stakes brand moment), reserves blue for navigation and the masthead band (the structural chrome), reserves red strictly for "LOWER PRICE" sale flags (an exception used sparingly), reserves green strictly for "MORE SUSTAINABLE" certifications. Every other surface, divider, link, and chrome runs in the warm-neutral white-grey-ink stack. The discipline is what makes the yellow CTA feel high-voltage — when yellow appears, it always means "this is the action you want to take", and every visitor learns the convention in one page-view.
Shape language is **structural, not soft**. CTAs render as 8px-radius rounded rectangles — not pills (Uniqlo) and not sharp corners (Helmut Lang) — the 8px middle ground reads as friendly engineering, the way a Billy bookcase reads as friendly engineering. Cards round at 8–12px. Inputs round at 8px. Filter chips and "NEW"-style badges are the only places pills appear, where the contrast between rectangular product-chrome and pill filter-chrome serves wayfinding. There are no gradients, no dimensional buttons, no skeuomorphic surfaces. The shape vocabulary is intentionally industrial: this is a brand that ships flat-pack furniture, and the storefront mirrors the flat-pack honesty.
Photography is the unmistakable **IKEA catalog aesthetic** — tightly composed product on a neutral interior backdrop, often with one human hand or one houseplant for scale, the room dressed minimally so the product reads as the subject. Product cards use a 1:1 square aspect ratio with `object-fit: cover` against a soft `#f5f5f5` ground. There are no flat-lay e-commerce shots, no white-seamless studio cutouts, no AI-generated lifestyle moments — every image is shot in a real (or convincingly mocked-up) room, with daylight from a Scandinavian-style window grid, with the product anchored at the natural focal point. The consistency is the design: a MALM dresser shot in a Stockholm flat reads the same as a POÄNG chair shot in a Toronto bungalow.
The grid runs hard 12-column at 1280px max width with 24px gutters (wider than Uniqlo's 16px — IKEA gives each product more breath because furniture photography needs more room than apparel photography). Product grids run 4–5 across at desktop, 3 at tablet, 2 at mobile. The masthead is 64px tall in IKEA blue, sub-nav 48px on white, hero bands 60–80vh on desktop. Whitespace is generous in editorial bands (64–96px between major sections) and moderate in product grids (24px gutters, 32px between rows) — calibrated to the visual rhythm of a printed IKEA catalog where every spread breathes.
**Key Characteristics:**
- Three-colour core: warm off-white (`#fffefb`) + IKEA yellow (`#ffdb00`) + IKEA blue (`#0058a3`) — both brand hues pulled directly from the Swedish flag
- Noto IKEA — the brand's commissioned Google Noto cut, spanning every catalog script (Latin, Cyrillic, Arabic, Devanagari, Thai, CJK)
- Yellow reserved for the wordmark and every primary CTA; blue reserved for the masthead band and every navigational link
- 8px rounded-rectangle CTAs at 48px height — structural, not pill, not sharp
- Near-black `#111111` body ink (never pure black) — softened to read against the warm off-white canvas
- The yellow-on-near-black CTA pair sits at 17.4 contrast ratio — AAA, the highest-contrast CTA pair in mass retail
- Tightly composed product photography on neutral interior ground, 1:1 square aspect
- 12-column 1280px grid with 24px gutters — wider than apparel retailers because furniture needs breath
- "LOWER PRICE" red flag is the only red in the palette — used sparingly so it stays high-signal
- "MORE SUSTAINABLE" green flag is the only green in the palette — flags certified-sustainable products
- "IKEA FAMILY" blue flag is the lone "branded surface" outside CTAs and masthead
## 2. Color Palette & Roles
### Primary
- **Canvas** (`#fffefb`): default page floor — off-white, warmer than pure white, evokes daylight on blonde wood
- **Surface** (`#ffffff`): product cards, modals, dialogs — pure white sits on the off-white canvas with a subtle one-tick lift
- **Ink** (`#111111`): primary text colour — near-black, never pure — softened to read against the warm canvas
### Brand
- **IKEA Yellow** (`#ffdb00`): the wordmark, every primary CTA, the yellow takeover hero band — pulled directly from the flag of Sweden
- **IKEA Blue** (`#0058a3`): the masthead band, every navigational link, the "NEW" tag, the "IKEA Family" pricing flag — the flag of Sweden's blue
- **Brand Hover** (`#f1cf00`): deeper yellow on CTA hover
- **Brand Active** (`#d9b900`): pressed deepest yellow
- **Brand Pale** (`#fff4a3`): disabled CTA tint
- **Brand Deep Hover** (`#004a8a`): deeper blue on nav-link hover
- **Brand Deep Active** (`#003c70`): pressed deepest blue
### Accent
- **Sale Red** (`#cc0000`): "LOWER PRICE" / "NEW LOWER PRICE" flag — the only red in the palette, used sparingly so it stays high-signal
- **Family Blue** (`#0058a3`): IKEA Family member-exclusive pricing tag — same hex as brand blue
- **New Tag Blue** (`#0058a3`): "NEW" or "NEWS" product flag
- **Soft Yellow** (`#fff7d6`): inspiration card tint, family-deal banner background
- **Soft Blue** (`#e8f0f7`): info banner background, "Service & Support" call-out tint
- **Dark Surface** (`#111111`): rare full-width dark band — used on premium drops (IKEA × Marimekko, IKEA × Virgil Abloh)
### Interactive
- **Link** (`#0058a3`): default inline link — IKEA blue, never underlined by default
- **Link Hover** (`#004a8a`): link deepens to brand-deep-hover and underline appears
- **Visited** (`#5a3a8a`): purple visited-link state on policy pages
- **Selected** (`#0058a3`): selected radio / checkbox / size-tile border colour
- **Disabled** (`#bbbbbb`): disabled text and outline grey
- **Focus** (`#0058a3`): focus outline IKEA blue with 2px outline-offset
### Neutral Scale
- **Ink** (`#111111`) — primary text, softened near-black
- **Heading Ink** (`#000000`) — heading punch at maximum, used sparingly for hero display only
- **Muted** (`#666666`) — secondary metadata, breadcrumbs, "Article · Care · Reviews" sub-tabs
- **Soft** (`#929292`) — caption text, placeholder text, faint counts
- **Disabled** (`#bbbbbb`) — disabled state text
- **Border** (`#cccccc`) — default 1px hairline
- **Border Soft** (`#e6e6e6`) — editorial dividers within sub-sections
- **Border Strong** (`#111111`) — focus state, selected outline, primary divider rules
- **Border Input** (`#929292`) — default form-input outline (mid-grey)
- **Surface Soft** (`#f5f5f5`) — alt rows, product image background, disabled fields
- **Surface Strong** (`#e6e6e6`) — divider band between major sections
- **Surface Grey** (`#f0f0f0`) — filter sidebar background
### Surface & Borders
- **Canvas** (`#fffefb`) — default page floor (warm off-white)
- **Pure Surface** (`#ffffff`) — product cards, modals (lifts above the canvas by one tick)
- **Soft Surface** (`#f5f5f5`) — alt rows, disabled fields, product image floor
- **Blue Surface** (`#0058a3`) — masthead band, full-width
- **Yellow Surface** (`#ffdb00`) — yellow takeover hero band for seasonal events
- **Soft Yellow** (`#fff7d6`) — inspiration card tint
- **Soft Blue** (`#e8f0f7`) — info banner tint
- **Inverse Surface** (`#111111`) — premium collaboration takeover bands
### Shadow Colors
IKEA stays mostly flat. The brand position: depth comes from binary surface separation (pure-white card on warm off-white canvas reads as a one-tick lift even without a shadow) and from the photographic hierarchy of room imagery, not from atmospheric layers. Hover-card shadow appears on dropdowns and mega-menu flyouts at single-layer 8–12%. There are no brand-tinted shadows, no multi-layer compositions.
- `rgba(0,0,0,0.08) 0 4px 12px` — hover-card lift (rare)
- `rgba(0,0,0,0.12) 0 8px 24px` — mega-menu flyout
- `rgba(0,0,0,0.18) 0 12px 32px` — modal drop
### Semantic
- **Success Green** (`#0a8a3f`): "In stock", "Free delivery available", "MORE SUSTAINABLE" tag — confident green, never bright
- **Warning Amber** (`#cc6600`): "Only 2 left at your store" low-stock urgency — warm amber
- **Danger Red** (`#cc0000`): validation error red — same hex as sale-red, contextually disambiguated
- **Info Blue** (`#0058a3`): informational banner — same hex as brand-deep
## 3. Typography Rules
### Font Family
**Primary**: Noto IKEA — the brand's commissioned Google Noto cut. Fallback chain: `"Noto IKEA", "Noto Sans", system-ui, -apple-system, sans-serif`. The face was commissioned in 2019 to span every script the IKEA catalog ships in: Latin (Western and Eastern European), Cyrillic, Greek, Arabic, Hebrew, Devanagari, Thai, Chinese (Simplified and Traditional), Japanese, and Korean. Before the Noto IKEA commission, the storefront used Verdana — a Kamprad-era cost-discipline decision (Verdana is a system font on every Windows and macOS install). The Noto IKEA migration was the brand's first paid type investment in its retail history; the trade-off (license cost vs. brand surface ownership) tipped because the storefront now sells in 60+ markets and the Noto family was the only multilingual sans that could carry the brand identity end-to-end.
**Mono**: not part of the storefront brand system; used only in developer-facing API docs and order receipts where the monospace alignment carries.
**OpenType features**: `tnum` is enabled on prices, sizes, dimensions, and shipping countdowns. No stylistic sets are configured — the brand commits to default Noto IKEA glyphs.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|------|------|------|--------|-------------|----------------|-------------|-------|
| display-hero | Noto IKEA | 80 | 700 | 1.0 | -0.03em | — | Homepage yellow-band hero ("Lower price. Higher purpose.") |
| display-lg | Noto IKEA | 56 | 700 | 1.05 | -0.02em | — | Campaign hero, sale-event takeover |
| h1 | Noto IKEA | 40 | 700 | 1.1 | -0.018em | — | Category page title, PDP product name |
| h2 | Noto IKEA | 32 | 600 | 1.2 | -0.012em | — | "Inspiration", "Sustainability", section heads |
| h3 | Noto IKEA | 24 | 600 | 1.25 | -0.005em | — | Sub-section heads on PDP, mega-menu column heads |
| h4 | Noto IKEA | 20 | 600 | 1.3 | 0 | — | Card titles, inline editorial heads |
| h5 | Noto IKEA | 18 | 600 | 1.35 | 0 | — | Filter sidebar heads, accordion heads |
| body-lg | Noto IKEA | 18 | 400 | 1.55 | 0 | — | Hero sub-copy, lead paragraph |
| body | Noto IKEA | 16 | 400 | 1.55 | 0 | — | Default body — descriptions, reviews |
| body-sm | Noto IKEA | 14 | 400 | 1.5 | 0 | — | Secondary metadata, fine print |
| label | Noto IKEA | 13 | 500 | 1.4 | 0 | — | Form labels, chip text |
| caption | Noto IKEA | 12 | 500 | 1.4 | 0.02em | — | Footer micro-text, image credits |
| micro | Noto IKEA | 11 | 500 | 1.3 | 0.04em | uppercase | Footer legal, fine-print disclaimers |
| price-display | Noto IKEA | 32 | 700 | 1.0 | -0.01em | tnum | PDP main price ("SEK 1 999") |
| price-product | Noto IKEA | 18 | 700 | 1.0 | 0 | tnum | Grid tile current price |
| price-strikethru | Noto IKEA | 14 | 400 | 1.0 | 0 | tnum | Original price strikethrough |
| price-sale | Noto IKEA | 18 | 700 | 1.0 | 0 | tnum | Sale price in sale-red |
| price-family | Noto IKEA | 18 | 700 | 1.0 | 0 | tnum | IKEA Family member price in brand-blue |
| button-cta | Noto IKEA | 15 | 600 | 1.0 | 0 | — | Primary CTA labels — sentence-case 600 |
| nav-link | Noto IKEA | 14 | 500 | 1.0 | 0 | — | Masthead category labels |
| badge | Noto IKEA | 11 | 600 | 1.0 | 0.04em | uppercase | "NEW", "LOWER PRICE", "IKEA FAMILY", "MORE SUSTAINABLE" tags |
| chip | Noto IKEA | 14 | 500 | 1.0 | 0 | — | PLP filter chip labels |
### Principles
- **One typeface family.** Noto IKEA carries every display, body, and label moment. There is no script face, no display alternative, no editorial serif.
- **Sentence-case, not uppercase, on display.** IKEA runs hero display in sentence case ("Lower price. Higher purpose.") not uppercase. Only badges and footer micro use uppercase.
- **Mild negative tracking on display.** Hero runs at -0.03em, display-lg at -0.02em, h1 at -0.018em. The tightening pulls the headlines into a Bauhaus-engineered compactness.
- **Section heads at 600 weight, not 700.** H2 and h3 run at 600 to read calm, not loud — IKEA reserves 700 for h1 and display.
- **Body at 16/400 with 1.55 leading.** Generous leading for international-script reading — Devanagari, Thai, and CJK glyphs need vertical breath.
- **Tabular numerals on every price.** `tnum` on prices, sizes, dimensions, shipping countdowns, member-deal countdowns.
- **Button CTAs at 15/600 sentence-case.** No uppercase — IKEA's plain-spoken voice extends to its buttons. ("Add to bag", not "ADD TO BAG").
- **Labels at 13/500 zero-tracking.** Form labels run sentence-case in regular weight — calm and instructional.
- **No expressive display alternative.** Noto IKEA carries every display moment — there is no condensed cut, no italic emphasis face, no variable axis exposure.
- **The closest open-source substitute is Noto Sans, Inter, or IBM Plex Sans.** All three sit close to Noto IKEA's metrics. Adjust by ~-0.01em letter-spacing on display.
## 4. Component Stylings
### Buttons
**`button-primary`** — IKEA yellow (`#ffdb00`) fill, near-black (`#111111`) text in Noto IKEA 15/600 sentence-case, 8px radius, 12×20px padding, 48px height. The most common CTA: "Add to bag", "Buy now", "Sign in", "Continue to checkout". Hover deepens to `#f1cf00`. Active to `#d9b900`. The yellow-on-near-black contrast pair sits at 17.4 — AAA, the highest-contrast CTA pair in mass retail.
**`button-secondary`** — white fill, 1px near-black (`#111111`) outline, ink text in 15/600 sentence-case. Same 8px radius, same 48px height. Used for "View product", "Save for later", inverse CTAs paired with the primary.
**`button-tertiary`** — transparent fill, IKEA-blue (`#0058a3`) text in 15/600, no border, 10×16px padding. Used for "View all", "Read more", "Learn about IKEA Family". Underline appears on hover.
**`button-on-blue`** — placed on the IKEA-blue masthead, this variant uses white fill with near-black text — the inverse of the primary. Used for "Find a store" in the masthead utility region.
**`button-icon`** — 44×44 circular icon-only button. Transparent fill, near-black icon. Used for wishlist heart, share, account utility, mobile hamburger. Hover background fades to soft-grey `#f5f5f5`.
**`button-link`** — plain IKEA-blue text with persistent affordance — link-style buttons in body copy. The underline appears on hover.
### Cards
**`product-card`** — listing tile. White surface, 8px radius, no internal padding around the image (image fills to top corners), 16px bottom padding for metadata. Stack: 1:1 square product thumbnail with `object-fit: cover` against a soft `#f5f5f5` ground (tightly composed interior photography), optional "NEW" or "LOWER PRICE" inline badge above the title (blue or red fill, white text), product title in 16/600 mixed case ink, "MALM · Chest of 6 drawers, white" line in 14/400 muted, current price in 18/700 with `tnum` ("SEK 1 999"), optional strikethrough + sale price in 18/700 sale-red, optional "IKEA Family" blue-fill tag below price ("IKEA Family price · SEK 1 599"). Wishlist heart anchored top-right of the image, 44×44 hit target. On hover: image scales 1.0 → 1.03 over 240ms — a quiet zoom without translate or rotation.
**`feature-card`** — editorial feature card used in homepage rows and PDP cross-sells. White surface, 12px radius, 1px `#e6e6e6` hairline, 24px padding. Used for "Room inspiration", "Sustainability stories", "IKEA Family offer" blocks.
**`inspiration-card`** — soft-yellow (`#fff7d6`) fill, 12px radius, 32px padding. Used for the homepage "Bedroom ideas under SEK 999" inspiration block — the yellow tint flags "this is editorial, not transactional".
**`pdp-buy-box`** — sticky right-rail card on the PDP. White surface, 12px radius, 1px hairline border, hover-card shadow, 24px padding. Stack: large `price-display` (32/700 with `tnum`), optional IKEA Family price in blue 24/700 below, dimensions row in 14/400 muted ("Width: 80 cm · Depth: 48 cm · Height: 100 cm"), colourway thumbnail rail, finish/size variant grid, full-width yellow "Add to bag" CTA, outline "Save to list" secondary CTA, "Free delivery on orders over SEK 500" inline 14/400 success green, "Available at: Stockholm Kungens Kurva" pickup line in 14/400 muted.
**`hero-band-yellow`** — full-bleed yellow takeover band. IKEA yellow ground, near-black 80/700 display headline with -0.03em tracking, near-black body sub-copy at 18/400, white outline CTA. Used for seasonal sale events and the annual Lower-Price campaign.
**`hero-band-photo`** — full-bleed photographic hero. Off-white ground (`#fffefb`) with a full-width room photograph, overlaid display headline in either near-black or white (depending on photograph luminance), CTA card anchored bottom-left or bottom-right.
**`category-tile`** — 1:1 square thumbnail with a single-line sentence-case label beneath in 16/600. No CTA — used in homepage category navigation ("Sofas", "Beds", "Storage", "Lighting", "Outdoor").
### Badges, Tags, Pills
**`badge-new`** — IKEA-blue (`#0058a3`) fill, white text in 11/600 uppercase with 0.04em tracking, 4px slim radius, 4×8px padding. Text "NEW" or "NEWS". Sits at the top-left of the product image.
**`badge-family`** — IKEA-blue fill, white text in 11/600 uppercase. Text "IKEA FAMILY" or "FAMILY PRICE". Flags member-exclusive pricing — the family-deal motif that drives loyalty enrollments.
**`badge-sale`** — sale-red (`#cc0000`) fill, white text in 11/600 uppercase. Text "LOWER PRICE" or "NEW LOWER PRICE". The rare red moment in the palette — IKEA uses this sparingly so it stays high-signal.
**`badge-eco`** — success-green (`#0a8a3f`) fill, white text in 11/600 uppercase. Text "MORE SUSTAINABLE". Flags certified-sustainable products (FSC-certified wood, recycled cotton, etc.).
**`badge-limited`** — near-black (`#111111`) fill, IKEA-yellow (`#ffdb00`) text in 11/600 uppercase. Text "LIMITED EDITION". Used on collaboration drops (Marimekko, Virgil Abloh, HAY).
**`chip-filter`** — PLP filter chip — pill at 36px tall. White fill, 1px `#cccccc` hairline default, 8×16px padding, `9999px` radius. Selected state inverts to IKEA-blue bg / white text with the same hairline.
### Inputs / Forms
**`text-input`** — white surface, 1px `#929292` mid-grey hairline default, 8px radius, 48px height, 12×16px padding. Stacked label above in `label` 13/500 ink. On focus the border thickens to 2px IKEA-blue with a 2px outline-offset. Error state: 2px sale-red border with a sale-red error message beneath in 13/500.
**`select`** — same chrome as `text-input` with a chevron-down icon anchored right. Native select on mobile, custom popover on desktop. Selected option ink, unselected options muted.
**`checkbox`** — 20×20 square, 2px radius. Default: white fill with 1.5px `#929292` border. Checked: IKEA-blue fill with white checkmark glyph. Focus: 2px IKEA-blue ring with 2px offset.
**`radio`** — 20×20 circle. Default: white fill with 1.5px `#929292` border. Selected: IKEA-blue ring with IKEA-blue inner dot. Focus: 2px IKEA-blue ring with 2px offset.
**`search-bar`** — masthead pill search. White fill on the IKEA-blue masthead band, `9999px` radius, 48px height, ~560px wide on desktop. Placeholder in muted grey "What are you looking for?". Search icon anchored left, voice-search icon anchored right.
**`size-tile`** — 8px radius rectangles for size / colour / finish variant selection. White fill, 1px `#cccccc` hairline default, 12×16px padding. Selected state: 2px IKEA-blue border with near-black text. Out-of-stock: 1px diagonal strikethrough through the tile with muted text. Hover: thickens to 2px near-black.
### Navigation
**`masthead`** — full-width IKEA-blue (`#0058a3`) bar, 64px height. IKEA wordmark flush left in yellow (`#ffdb00`) — the iconic yellow-on-blue logotype, the most recognizable mark in furniture retail. Search bar centred (white fill pill, ~560px wide, 48px tall). Wishlist / Account / Cart utilities flush right with white-on-blue 14/500 labels and icon-only utilities. "Find a store" white-fill CTA anchored far right.
**`sub-nav`** — slim 48px band beneath the masthead, white fill on the off-white canvas, 1px hairline bottom. Holds department links: "Products", "Rooms", "Inspiration", "Offers", "IKEA Family", "Customer Service". 14/500 ink with `:hover` flipping to IKEA-blue with a 2px blue underline.
**`mega-menu-flyout`** — opens from category dropdown on hover or click; full-width white surface, 12px radius, 1px hairline, mega-menu shadow. Multi-column nav of category trees with 18/600 IKEA-blue column heads and 14/500 mixed-case secondary links. The mega-menu often includes a 1:1 room photograph in the rightmost column ("Shop the look").
**`breadcrumb`** — `text-muted` (`#666666`) with `>` separators, 13/500. Last segment in `text` ink, non-clickable.
**`mobile-nav`** — slide-in from the left on mobile (<640px). Full-height white surface with IKEA-blue header band. Category accordion list with 16/500 ink text, 16px row padding, 1px soft hairline between rows.
### Star Rating
**`star-rating`** — 5-icon row, fill `#ffdb00` (IKEA yellow) for filled stars, `#cccccc` for empty. Half-stars rendered with clipped half-fill. Followed by an IKEA-blue link review count: "(2 847 reviews)".
### Modals & Toasts
**`modal`** — centred dialog over a 50%-opacity ink scrim. White surface, 12px radius, 1px hairline border, modal shadow. Close X anchored top-right, 44×44 hit target.
**`toast`** — bottom-centre notifications. White fill, 8px radius, 1px hairline, ink text, 16×24px padding. Optional 4px left-edge colour stripe in green (success) or red (error).
**`drawer`** — slides in from the right (cart) or left (mobile nav). 480px wide on desktop, full-width on mobile. White surface, no radius, hover-card shadow on the leading edge.
## 5. Layout Principles
### Spacing System
- Base unit: **4px**
- Scale: `0 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128`
- Section padding (vertical): **64–96px** between major bands; **96–128px** on the homepage hero band
- Card internal padding: **0** around the image (image flush to top corners), **16px** below the image for metadata; **24px** for PDP buy-box, **32px** for inspiration cards
- Gutters: **24px** between product tiles in grid view (wider than apparel retailers because furniture needs breath); **64–96px** between major page bands
### Grid & Container
- Max content width: **1280px** centred
- 12-column grid with **24px gutters**
- Homepage: full-bleed hero band → 5-up category tiles → 4-up product carousel → 4-up product grid → editorial inspiration mosaic → IKEA Family banner → footer
- PLP: filter sidebar 280px wide left rail + 4-up product grid right; 4 → 3 → 2 at narrower widths
- PDP: 2-column with image gallery left (~58%), buy box right (~42%); dimensions, materials, reviews stack full-width below
- Footer: 4-column link list at desktop with IKEA-blue ground; "Find a store" prominent CTA in the first column
### Whitespace Philosophy
IKEA gives editorial bands generous breath (64–96px between major bands, 96–128px on the hero) and product grids moderate breath (24px gutters, 32px between rows). The visual rhythm is **generous breath at hero → moderate breath at grid → tight density inside cards** — calibrated to the printed-catalog tradition where every spread breathes but every product page is dense with specifications. The yellow-and-blue chromatic moments earn their voltage from the surrounding restraint.
### Section Cadence
IKEA runs primarily on the off-white canvas. The default cadence is **canvas → canvas → canvas → photographic → canvas → yellow takeover (rare)**. Editorial breaks are driven by hero room imagery and soft-yellow inspiration bands rather than colour-band alternation. The blue masthead is the structural top of every page; the blue footer is the structural bottom; everything between runs primarily on the warm-neutral canvas.
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|------|-------|-----|
| Micro | 2px | Slim radius on badges, checkbox squares |
| Small | 4px | Badge tags, small inputs |
| Medium | 8px | Buttons, inputs, product cards, size tiles — IKEA's canonical radius |
| Large | 12px | Feature cards, modals, inspiration cards, buy-box |
| Featured | 16px | Hero promo bands (rare) |
| Pill | 9999px | Filter chips, search bar, circular icon buttons |
The 8px radius is IKEA's signature middle ground — friendly enough to read approachable, structural enough to read industrial. The 8px CTA reads like a flat-pack furniture corner: honest, manufactured, intentional. Pills (`9999px`) are reserved for filter chips, the search bar, and circular icon buttons — the contrast between rectangular product chrome and pill filter chrome serves wayfinding.
## 7. Depth & Elevation
| Level | Treatment | Use |
|-------|-----------|-----|
| 0 — Flat | no shadow | Body, masthead, footer, all editorial bands, product cards at rest (~90% of surfaces) |
| 1 — Hover Card | `rgba(0,0,0,0.08) 0 4px 12px` | Dropdowns, search-suggestion flyouts, card hover state |
| 2 — Mega | `rgba(0,0,0,0.12) 0 8px 24px` | Mega-menu flyout from masthead category dropdown |
| 3 — Modal | `rgba(0,0,0,0.18) 0 12px 32px` | Centred dialogs, drawer leading edge |
| 4 — Scrim | `rgba(17,17,17,0.5)` | Modal backdrop |
### Shadow Philosophy
IKEA stays mostly flat. Depth comes from **the binary surface separation** (pure-white card on warm off-white canvas reads as a one-tick lift even without a shadow), **the 8–12px radius corner separation** (a card's rounded corners read as elevation against the page), and **the photographic hierarchy** of room imagery. Hover-card shadow is single-layer neutral grey at 8–18% — no brand-tinted yellow glow, no atmospheric multi-layer composition. The brand position: Scandinavian functional restraint — depth is structural, not decorative.
## 8. Interaction & Motion
### Easing
- **Standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — default for hover, focus, button state changes
- **Emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — modal entry, mega-menu open, drawer slide-in
- **Swedish**: `cubic-bezier(0.32, 0.08, 0.24, 1)` — card hover zoom, image fade-in (a softer, more restrained curve calibrated to the printed-catalog page-turn rhythm)
### Durations
| Bucket | Value | Use |
|--------|-------|-----|
| Fast | 150ms | CTA hover colour swap, focus ring fade-in, badge state change |
| Standard | 240ms | Card hover image zoom, dropdown open, chip selection |
| Slow | 320ms | Modal enter, mega-menu open, drawer slide-in |
| Hero | 480ms | Hero room photograph fade-in on first paint |
### Per-Component Recipes
- **CTA hover**: background transitions from `#ffdb00` to `#f1cf00` over 150ms.
- **CTA press**: deepens to `#d9b900` for 150ms on `:active`.
- **Product card hover**: image scales 1.0 → 1.03 over 240ms ease-swedish — a quiet zoom without translate or rotation. The zoom is more restrained than Etsy's 1.04 and more dimensional than Uniqlo's -4px translate — IKEA wants the room photo to feel lived-in but composed.
- **Wishlist heart toggle**: 240ms scale 1.0 → 1.2 → 1.0 with the heart fill swapping near-black-outline to red-fill at the peak.
- **Mega-menu flyout**: 250ms ease-out fade + 8px slide-down from the masthead.
- **Drawer slide-in**: 320ms ease-emphasized translateX from -100% → 0 with the scrim fading in over 200ms.
- **Modal enter**: scrim fades in over 200ms, dialog translates from `translateY(12px) opacity(0)` to `0/1` over 320ms emphasized.
- **Hero image fade-in**: hero room photograph fades opacity 0 → 1 over 480ms on first paint, with the headline fading in 120ms later for a soft stagger.
- **Nav link hover**: text colour stays IKEA-blue; the 2px IKEA-blue underline fades in beneath over 150ms — IKEA uses the underline as the affordance, not the colour swap.
- **Filter chip selection**: chip inverts bg/text over 200ms with a 1px hairline staying intact.
### Page Transitions
Page-to-page navigation uses no transition — links fire a hard navigation. IKEA prioritises perceived speed and the discipline of refusing client-side routing animations. The only "transition" is the hero image fade-in on first paint, which masks the network latency.
### Reduced Motion
Respects `prefers-reduced-motion: reduce`. Card image zoom suppresses (image stays at 1.0 scale). Hero image fade-in becomes instant. Modal slide degrades to opacity-only. Mega-menu slide-down degrades to opacity-only.
## 9. Accessibility & A11y
### Contrast Pairs
| Pair | Ratio | Level |
|------|-------|-------|
| `#111111` ink on `#fffefb` canvas | 19.1 | AAA |
| `#111111` on `#ffdb00` CTA | 17.4 | AAA — the highest-contrast CTA pair in mass retail |
| `#111111` on `#f1cf00` CTA hover | 16.1 | AAA |
| `#ffffff` on `#0058a3` masthead | 8.5 | AAA |
| `#0058a3` link on `#fffefb` | 8.3 | AAA |
| `#666666` muted on `#fffefb` | 5.7 | AA |
| `#cc0000` sale-red on `#fffefb` | 5.9 | AA |
| `#ffffff` on `#cc0000` sale badge | 5.9 | AA |
| `#ffffff` on `#0058a3` IKEA Family tag | 8.5 | AAA |
| `#ffffff` on `#0a8a3f` MORE SUSTAINABLE tag | 4.9 | AA |
The near-black-on-yellow CTA pair at 17.4 is the design system's single greatest accessibility asset — no other mass retailer ships a CTA pair this high. The IKEA-blue masthead at 8.5 white-on-blue and the IKEA-blue links at 8.3 both clear AAA on body text.
### Focus Indicators
Focus ring is **2px solid `#0058a3`** (IKEA blue) with 2px outline-offset. Buttons, inputs, links, size tiles, and chips all gain a hard IKEA-blue ring on `:focus-visible`. IKEA uses blue (not yellow) for focus because the surrounding warm-canvas surfaces give blue maximum contrast — yellow on warm off-white would muddy.
### ARIA Patterns
- **Search bar**: `role="search"`. Input has `aria-label="Search IKEA products"`.
- **Product card**: entire tile wrapped in `` with verbose `aria-label` — "MALM chest of 6 drawers, white, 80×100 cm, SEK 1 999, IKEA Family price SEK 1 599".
- **Size selector**: `role="radiogroup"` with `aria-labelledby` pointing to the "Size" label. Each tile is `role="radio"` with `aria-checked` reflecting selection.
- **Wishlist heart**: `aria-pressed` to communicate save state. Label: "Save to list" (default) → "Remove from list" (when active).
- **Mega-menu flyout**: `role="menu"` with `role="menuitem"`; arrow keys navigate, Escape closes, focus returns to trigger on close.
- **IKEA Family tag**: `aria-label="IKEA Family member price — join to access"`.
- **Filter chips**: `role="checkbox"` with `aria-checked` reflecting selection; group wrapped in `