---
title: "IKEA design system"
variant: extended
source: https://www.ikea.com/
captured_at: 2026-10-12
theme: light
industry: ecommerce
generator: Design DNA (https://four.wiralomi.com/style/ikea-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# IKEA · Design System

> Everyday home stories in unmistakable IKEA color

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.ikea.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

IKEA’s global homepage pairs a restrained warm-white canvas with bold yellow and green feature bands, letting home-focused imagery lead. A modular editorial feed alternates immersive photography and video with concise headlines, shopping prompts, and idea collections.

## North star

Let vivid, authentic home imagery lead, using IKEA yellow and simple editorial modules to guide attention without clutter.

## Overview

The page uses a warm near-white canvas (#fffefb) as a quiet frame for a long, image-led editorial feed. IKEA yellow (#ffdb00) is the most conspicuous brand accent: it powers the shopping panel and several story bands, while green (#1a7e3b) anchors the new-products showcase. Dark text (#111111) and black (#000000) keep headlines and video controls legible; blue (#0159a3) is present in the measured palette but is not a defining visible surface in the supplied screenshots. Typography is a clean sans serif, with large, tightly tracked bold headlines and smaller supporting labels. Wide media tiles, split panels, paired cards, and occasional full-bleed stories create a steady but varied rhythm. Photography of lived-in rooms and products carries the storytelling; bright color blocks and rounded media corners provide clear focal points without relying on shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fffefb` | `--color-gallery-white` | surface | Primary page canvas and the open space around the editorial feed. |
| Storefront Blue | `#0159a3` | `--color-storefront-blue` | brand | Measured IKEA blue accent; keep secondary and use for restrained brand or shopping cues. |
| True Black | `#000000` | `--color-true-black` | neutral | Dark footer field, outlines, and high-contrast media controls. |
| Soft Ink | `#111111` | `--color-soft-ink` | neutral | Primary headline, navigation, and button text on light surfaces. |
| Quiet Graphite | `#737371` | `--color-quiet-graphite` | semantic | Measured gradient-related neutral; not a defining flat page color in the screenshots. |
| IKEA Yellow | `#ffdb00` | `--color-ikea-yellow` | brand | Shopping CTA panel, designer-story band, and other high-visibility feature blocks. |
| Pale Sage | `#ebf4ed` | `--color-pale-sage` | surface | Soft green-tinted background behind the compact-storage feature split. |
| Forest Green | `#1a7e3b` | `--color-forest-green` | accent | Strong green backdrop for the IKEA PS 2026 product showcase. |
| Apricot Glow | `#ffae66` | `--color-apricot-glow` | accent | Warm orange feature band behind the Back at it! inspiration carousel. |

### Semantic aliases

`--color-canvas` → `#fffefb` (Gallery White) · `--color-surface` → `#000000` (True Black) · `--color-surface-2` → `#ebf4ed` (Pale Sage) · `--color-text` → `#111111` (Soft Ink) · `--color-text-muted` → `#fffefb` (Gallery White) · `--color-border` → `#000000` (True Black) · `--color-accent` → `#0159a3` (Storefront Blue) · `--color-accent-2` → `#ffdb00` (IKEA Yellow) · `--color-accent-3` → `#1a7e3b` (Forest Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#fffefb` | 18.72:1 | AAA |
| `#111111` | `#000000` | 1.11:1 | fail |
| `#111111` | `#ebf4ed` | 16.81:1 | AAA |
| `#fffefb` | `#000000` | 20.82:1 | AAA |
| `#fffefb` | `#ebf4ed` | 1.11:1 | fail |
| `#0159a3` | `#fffefb` | 7.04:1 | AAA |
| `#0159a3` | `#000000` | 2.96:1 | fail |
| `#0159a3` | `#ebf4ed` | 6.32:1 | AA |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0.55) 80px, rgba(0, 0, 0, 0) 200px)`
- `repeating-linear-gradient(-45deg, rgb(255, 219, 0) 0%, rgb(255, 219, 0) 15%, rgb(255, 255, 255) 15%, rgb(255, 255, 255) 30%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Omani Rial | `--font-body` | system | 400, 700 | Site-wide sans-serif for navigation, headlines, body copy, labels, and controls. | Roboto |

- **Omani Rial:** Use clean sans-serif forms; bold display and heading roles use tight negative tracking, while body and navigation remain regular and sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.507, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 82.5px | 700 | 1.1 | -0.043em | — | Omani Rial | Oversized campaign headlines on prominent feature panels. |
| h1 | 45.5px | 700 | 1.1 | -0.035em | — | Omani Rial | Primary story or feature title within a large content block. |
| h2 | 36.5px | 700 | 1.15 | -0.03em | — | Omani Rial | Section titles such as editorial collection headings. |
| h3 | 20px | 400 | 1.62 | 0 | — | Omani Rial | Supporting story titles and secondary feature copy. |
| body | 16px | 400 | 1.5 | 0 | — | Omani Rial | Explanatory descriptions and editorial supporting text. |
| caption | 13.5px | 400 | normal | 0 | — | Omani Rial | Small image labels, collection names, and metadata. |
| button | 16px | 400 | normal | 0 | — | Omani Rial | Shopping prompts, carousel controls, and video actions. |
| nav | 20px | 400 | 1.62 | 0 | — | Omani Rial | Header navigation and prominent store-selection links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 6, 7, 8, 10, 14, 16, 20, 24, 50, 60, 120 px.
- Section rhythm 60px · element gap 20px · card padding 16px · max content width 1392px.

A centered desktop composition uses a measured maximum content width of 1392px, with comfortable spacing and a recurring two-column or paired-card grid. The opening hero places large video media beside a yellow shopping panel. Below, the page alternates paired story tiles, split feature sections, and wide image bands. A 60px section rhythm and 20px element gap support separation without making the feed feel sparse; content stays aligned to a consistent outer edge. Headings and text generally align to the left.

## Shape & elevation

- Radius: button `50%` · input `8px` · card `8px` · media `8px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(1, 0.26, 0.51, 0.72)` on interactive elements.

The page is mostly flat, with color fields and media edges defining sections rather than shadows. Cards generally sit directly on the canvas; media and cards use softly rounded corners, while the measured input also has a rounded edge. Dark overlays add caption contrast on imagery. Avoid ornamental borders and layered floating-card effects.

## Imagery

Photography and video show furnished rooms, product details, people at home, and everyday activities. Media is framed as wide rounded tiles or paired cards, often with a dark lower gradient supporting white captions. Some editorial stories use bright graphic panels or illustrative artwork; these colors belong to individual stories, not the core palette. Product imagery remains integrated into the lifestyle context.

## Components

### Header navigation

Compact IKEA logo and a horizontal set of restrained text links on the warm-white canvas.

### Hero and shopping panel

Large rounded video tile sits beside a bright yellow shopping panel with a dark circular arrow and a separate store-selector strip.

### Editorial story tile

Room or product image with a dark lower gradient, small category label, and bold white title.

### Feature split

Pair a tinted text panel with a large media image; use left-aligned headline copy and a video or play control where relevant.

### Inspiration carousel

A vivid section band introduces a short editorial heading, description, and a row of compact linked image cards.

### Video control

Small circular play or pause control sits over media, contrasting black-on-light or white-on-dark.

### Footer

A dark full-width closing area uses a large brand graphic and small, quiet utility links.

### Measured component styles

- **Primary button** (“Pause video”): background #ffffff · text #111111 · radius 50% · padding 0px · 400 13.3333px Omani Rial
- **Secondary button** (“Play video of storage solutions.”): background #111111 · text #ffffff · radius 50% · padding 0px · 400 13.3333px Omani Rial
- **Link** (“IKEA and XBOX Game on (the sofa) with YX”): transparent background · text #ffffff · radius 0px · padding 24px · 400 16px Omani Rial
- **Input**: background #ffffff · text #000000 · radius 8px · padding 12px 0px 12px 42px · 400 16px Omani Rial
- **Card** (“Do-it-all study and hobby ideas All set ”): background #ffffff · text #111111 · radius 0px · padding 16px · 400 16px Omani Rial
- **Navigation item** (“Stories Jobs Newsroom Our business”): transparent background · text #111111 · radius 0px · padding 0px · 400 16px Omani Rial

## Do

- Use Gallery White as the breathing space around stories.
- Reserve IKEA Yellow for high-priority shopping and editorial moments.
- Let authentic rooms and products dominate each media tile.
- Keep headings bold, left-aligned, and concise.
- Alternate paired cards with wide or split feature sections.
- Add dark caption gradients when text overlays imagery.

## Don't

- Do not make every section a yellow or green block.
- Do not add drop shadows to otherwise flat cards.
- Do not crowd tiles with long paragraphs or dense controls.
- Do not use decorative gradients as the main page background.
- Do not treat colors inside campaign artwork as core brand colors.
- Do not use thin, highly tracked display typography.

## Agent prompt

Build a new editorial ecommerce page in IKEA’s visual style. Use Gallery White (#fffefb) as the main canvas, with Soft Ink (#111111) for clear, bold text. Use IKEA Yellow (#ffdb00) selectively for the primary shopping prompt or a featured story band; Forest Green (#1a7e3b), Pale Sage (#ebf4ed), and Apricot Glow (#ffae66) can distinguish individual feature sections. Create a centered, comfortable-width modular feed that alternates paired image cards, split text-and-media blocks, and occasional wide stories. Prioritize authentic home and product photography, with short caption overlays and subtle dark gradients when needed. Keep the sans-serif type hierarchy direct and left-aligned, round media corners, avoid shadows, and provide simple circular video controls. Do not make the result look like a generic storefront catalog.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large video tile beside a tall yellow shopping and store-selector panel. | video pause control, store selector, shopping CTA | rounded media, yellow feature panel, caption gradient |
| 2 | feature-grid | Two adjacent lifestyle story images with captions anchored along the lower edge. | linked editorial tiles | paired media cards, dark caption overlays |
| 3 | feature-split | Pale sage text area paired with a large storage-focused media tile. | video play control, feature link | soft tinted band, split composition |
| 4 | feature-grid | Two editorial stories in a side-by-side image-and-caption arrangement. | play video, linked product story | paired cards, graphic story artwork |
| 5 | gallery | One wide, full-bleed gallery image with a darkened caption edge. | collection link | full-bleed media, bottom caption overlay |
| 6 | feature-grid | Two adjacent lifestyle stories, including a people-focused video tile. | slideshow pause, editorial links | paired media, overlaid captions |
| 7 | feature-grid | Two product and room stories arranged side by side. | collection links | paired photo cards, caption gradients |
| 8 | gallery | Wide, full-bleed dining photograph with a caption along its lower edge. | inspiration link | full-width lifestyle image, dark caption gradient |
| 9 | content-feed | Apricot feature band with intro copy beside a horizontal row of compact image cards. | carousel navigation, linked idea cards | warm orange background, thumbnail card row |
| 10 | feature-grid | Two lifestyle media tiles showing plants and a child’s room. | video play control, story links | paired image cards, caption overlays |
| 11 | product-showcase | Green feature band with large text on one side and a product arrangement on the other. | video play control, product feature link | strong green backdrop, white product display |
| 12 | feature-grid | Paired room and product stories with lower-edge captions. | video play control, collection links | paired media cards, lifestyle and product contrast |
| 13 | feature-grid | Three editorial stories arranged as a compact multi-column media group. | video controls, market and feature links | mixed illustration and photography, caption overlays |
| 14 | team | Yellow editorial band with introduction, designer cards, and carousel controls. | carousel navigation, designer profile links | yellow section band, portrait card row |

## Source CSS custom properties (selected)

```css
--background-color: #fffefb;
--color-background: #fffefb;
--container-spacing-desktop: 1.5rem;
--container-spacing-tablet: 1rem;
--container-spacing-mobile: 1rem;
--vertical-spacing-desktop: 10.5rem;
--vertical-spacing-tablet: 5rem;
--vertical-spacing-mobile: 4rem;
--grid-gap: 1.25rem;
--grid-gap-mobile: 1rem;
--radius: .5rem;
--text-x-direction: 1;
--color-logo: #fae6e6;
--color-off-white: #fffefb;
--color-border: #f0ede8;
--color-footer: #806e6e;
--color-light: #fff;
--color-ikea-blue: #0058a3;
--color-ikea-yellow: #ffdb00;
--color-ikea-yellow-hover: #ffe53a;
--color-ikea-yellow-light: #fff094;
--color-text-dark: #000000bd;
--color-text-darker: #111;
--color-text-black: #000;
--color-grey: #dfdfdf;
--color-grey-dark: #999;
--color-grey-dim: #484848;
--dotnet-border-color: #ccc;
--dotnet-border-style: .0625rem solid #ccc;
--colour-neutral-1: 255, 255, 255;
--colour-neutral-2: 245, 245, 245;
--colour-neutral-3: 223, 223, 223;
--colour-neutral-4: 204, 204, 204;
--colour-neutral-5: 146, 146, 146;
--colour-neutral-6: 72, 72, 72;
--colour-neutral-7: 17, 17, 17;
--colour-text-and-icon-1: 17, 17, 17;
--colour-text-and-icon-2: 72, 72, 72;
--colour-text-and-icon-3: 118, 118, 118;
--colour-text-and-icon-4: 146, 146, 146;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ikea-com