IKEA Brand Design System Deep Dive

1. Brand Overview

IKEA’s digital design language mirrors its physical brand: functional, approachable, and unmistakably Scandinavian. If you think about the IKEA store experience—clear signage, democratic design, everything flat-packed—the website applies the same principles to pixels. No fluff. Everything has a purpose.

The vibe is practical minimalism with bursts of brand personality. The color system draws heavily from the global IKEA palette (the yellow and blue are iconic), but the site uses a surprising amount of black and white for core UI surfaces. This keeps the experience clean and lets product photography and lifestyle imagery carry the emotion.

Typography is unified under a custom “Noto IKEA” family—this is not a generic web font. It’s a tailored version of Noto Sans that aligns with IKEA’s brand geometry. High weights for headings and buttons. Lower weights for body copy. This creates a strong hierarchy and makes navigation elements feel solid.

Spacing follows an 8px base grid—again, very IKEA. It’s modular, predictable, and works across devices. Breakpoints are pragmatic: no overly complex fluid scaling, just fixed points that match common device widths.

If you’re designing for IKEA, you’re designing for clarity. They’re not chasing trends. They’re building a system that works in 30+ countries, on mobile devices in kitchens, and in desktop browsers for people planning entire rooms. The design language is global, but tuned for efficiency. I love how nothing here feels wasteful—every pixel earns its place.

This system is for designers and developers who value order. If you want to play with gradients and ornamental shadows, this isn’t your playground. If you want to build a consistent, accessible, and brand-aligned interface, IKEA is a masterclass.

2. Color System

2.1 Primary Colors

The primary semantic colors are:

• Primary: #111111 (rgb(17, 17, 17)) — almost black, used for text, icons, and certain button backgrounds.
• Secondary: #ffffff (rgb(255, 255, 255)) — pure white, used for backgrounds, text on dark surfaces, and inverted UI elements.

Interestingly, IKEA’s web palette does not default to the famous blue/yellow as the main UI colors. Instead, the primary brand actions lean on black and white, with blue and yellow appearing contextually (links, buttons, accents). This is a good accessibility move—black text on white background is WCAG gold standard for contrast.

Psychologically, the black primary conveys authority and clarity. The white secondary keeps things airy. Compared to competitors like Wayfair (which leans into purple) or Amazon (which uses heavy yellow for CTAs), IKEA’s choice is calmer, less pushy.

2.2 Complete Palette

2.3 Color Relationships

Black (#111111) on white (#ffffff) yields extremely high contrast (~21:1). White text on black background is equally strong. Blue (#0159a3) on white meets WCAG AA for normal text. Yellow (#ffdb00) on black is readable, but yellow on white is not ideal for body text—reserved for large text or graphic accents.

Dark mode? Not implemented here. IKEA’s palette is light-first. The black primary is part of the light theme, not a dark mode inversion.

2.4 Usage Guide

• Works well: Black text on white backgrounds. Yellow buttons on black text. Blue links on white backgrounds.
• Avoid: Yellow text on white backgrounds—low contrast. Medium gray (#818181) for essential text—too low contrast.
• Accent strategy: Use IKEA yellow sparingly for CTAs. Blue for links. Keep primary navigation in black/white.

3. Typography

3.1 Font Families

IKEA uses Noto IKEA with fallbacks: Noto Sans, Roboto, Open Sans, system-ui. This is a custom font—probably optimized for multilingual support and IKEA’s brand geometry. No Google Fonts or Adobe Fonts loaded; it’s self-hosted.

3.2 Type Scale

3.3 Hierarchy

The jump from 51px H1 to 36px secondary headings is sharp—this keeps hero content dominant. Buttons and large links often share the 36px size, making them visually assertive. Body links at 20px are generous—good for readability. Caption sizes drop to 14px and 13px, but line heights keep them legible.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 768px, 896px. These are device-driven rather than arbitrary. Expect layout shifts at these exact widths—this is not fluid; it’s step-based.

5. Visual Elements

Border Radius

Values:

• 0px 0px 8px 8px — accordion toggles, bottom corners rounded
• 2.5px — rare, low confidence
• 8px — default for divs, sections, images
• 8px 8px 0px 0px — top corners rounded
• 24px — buttons with pill-like shapes
• 50% — circular buttons, sliders

Shadows

One shadow found: rgba(0, 0, 0, 0.1) 0px 4px 15px 0px — used sparingly. Mostly flat design.

Borders

Mix of solid and none styles. 1px lines for dividers. Black and beige for borders. Minimal use—borders define separation without heavy UI chrome.

6. Components

6.1 Buttons

Arrow Button (circle, 36px font):

• Default: bg #111111, white text, radius 50%, no border
• Hover: bg rgba(255,255,255,0.5)
• Active: bg #000000

Accordion Toggle (yellow CTA):

• Default: bg #ffdb00, black text, padding 16px 50px, radius 0 0 8px 8px
• Hover: bg #1eaedb, white text, slight lift transform
• Active: bg #000000
• Focus: outline black 2px, bg #1eaedb, white text

Search Input Button:

• Default: bg white, black text, padding 12px left 42px, radius 8px
• Hover: bg #1eaedb, white text
• Focus: bg #1eaedb, white text, black border

Global Icon Button (small circle):

• Default: bg #dadada, text #818181, radius 50%
• Hover: bg #1eaedb, white text
• Focus: outline black, bg #1eaedb, white text

6.2 Links

Styles include underlined black, blue, white variations. Hover removes underline and shifts color to #565656.

6.3 Forms

Search input is the main text input. Focus state inverts colors to blue background with white text—bold choice, high visibility.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #111111;
  --color-secondary: #ffffff;
  --color-link-blue: #0159a3;
  --color-legacy-link-blue: #0000ee;
  --color-gray-medium: #818181;
  --color-ikea-yellow: #ffdb00;
  --color-ikea-yellow-light: #fff094;
  --color-ikea-yellow-hover: #ffe53a;
  --color-gray-dim: #484848;
  --color-gray: #dfdfdf;
  --color-gray-dark: #999999;
  --color-border-beige: #f0ede8;
  --color-footer-bg: #000000;
  --color-footer-text: #806e6e;
  --color-logo-alt: #fae6e6;
  --color-bg-onetrust: #f5f5f5;
  --color-dotnet-border: #cccccc;
  --color-text-black: #000000;

  /* Typography */
  --font-primary: "Noto IKEA", "Noto Sans", Roboto, "Open Sans", system-ui;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-19: 19.08px;
  --space-20: 20px;
  --space-21: 21px;
  --space-24: 24px;
  --space-27: 27.03px;
  --space-36: 36px;
  --space-60: 60px;
  --space-80: 80px;
  --space-96: 96px;
  --space-108: 108px;
  --space-140: 140px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 2.5px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.1) 0px 4px 15px 0px;
}

8. AI Coding Assistant Prompt

# IKEA Design System Specification

You are an IKEA design expert. Build UIs matching their visual language exactly.

## Brand Context
IKEA’s design philosophy is functional minimalism with clear hierarchy and global consistency. Colors are grounded in black and white with brand yellow and blue as accents. Typography is clean, geometric, and accessible.

## Color Palette
- Primary Black: #111111 — Text, icons, dark buttons
- Secondary White: #ffffff — Backgrounds, inverse text
- Link Blue: #0159a3 — Links
- Legacy Link Blue: #0000ee — Older link wrappers
- Medium Gray: #818181 — Icon buttons, disabled states
- IKEA Yellow: #ffdb00 — CTAs, highlighted buttons
- IKEA Yellow Light: #fff094 — Light backgrounds, hover states
- IKEA Yellow Hover: #ffe53a — Hover on yellow buttons
- Grey Dim: #484848 — Secondary text
- Grey: #dfdfdf — Dividers
- Grey Dark: #999999 — Secondary text
- Border Beige: #f0ede8 — Borders
- Footer Black: #000000 — Footer background
- Footer Text: #806e6e — Footer typography
- Logo Alt: #fae6e6 — Alternative logo treatments
- Secondary BG Onetrust: #f5f5f5 — Cookie consent BG
- Dotnet Border Color: #cccccc — Form borders
- Text Black: #000000 — Body text

## Typography
Font: "Noto IKEA", "Noto Sans", Roboto, "Open Sans", system-ui

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 51px | 700 | 1.08 | Page titles |
| Large Link/Button | 36px | 700 | 1.20 | Navigation, CTAs |
| H1 (Light) | 36px | 400 | 1.40 | Subtitles |
| Body Link | 20px | 400 | 1.62 | Body links |
| Body Text | 16px | 400 | — | Paragraphs |
| Small Heading | 15.4px | 600 | 1.20 | Subheadings |
| Caption | 14px | 400 | 1.57 | Footnotes |
| Small Button | 13.33px | 400 | — | Icon buttons |
| Micro Button | 12px | 700 | 1.00 | Tiny controls |

## Spacing & Grid
Base: 8px. Scale: 1, 3, 8, 10, 12, 14, 16, 19.08, 20, 21, 24, 27.03, 36, 60, 80, 96, 108, 140.
Use multiples of 8px for layout. Buttons use 16px vertical padding.

## Border Radius
- none: 0 — square corners
- sm: 2.5px — rare small rounding
- md: 8px — default cards, inputs
- lg: 24px — large buttons
- full: 50% — circular buttons

## Shadows & Depth
Flat design with minimal shadow. Only shadow: rgba(0,0,0,0.1) 0px 4px 15px 0px.

## Components

### Primary Button (Accordion Toggle)
Default: bg #ffdb00, color #111111, padding 16px 50px, radius 0 0 8px 8px, font 16px/400  
Hover: bg #1eaedb, white text, transform translateY(-0.1875rem)  
Focus: outline 2px solid #000000, bg #1eaedb, white text  
Active: bg #000000

### Secondary Button (Arrow)
Default: bg #111111, white text, radius 50%, font 36px/700  
Hover: bg rgba(255,255,255,0.5)  
Active: bg #000000

### Input Field (Search)
Default: bg #ffffff, black text, radius 8px, padding 12px 0 12px 42px  
Focus: bg #1eaedb, white text, border 1px solid #000000

### Icon Button
Default: bg #dadada, text #818181, radius 50%, font 13.33px/400  
Hover: bg #1eaedb, white text  
Focus: outline 2px solid #000000, bg #1eaedb, white text

### Links
- Black underline; hover removes underline, shifts to #565656
- Blue underline; hover removes underline, shifts to #565656
- White underline; hover removes underline, shifts to #565656

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 768px, 896px. Step-based responsive.

## Interaction Rules
- Transition: 150ms ease for hover/focus changes
- Focus indicators: 2px solid outline in high contrast color
- Hover states must adjust background or underline

## DO List
- Use only colors from IKEA palette
- Maintain 8px grid spacing
- Use Noto IKEA for all text
- Keep hover states high contrast
- Respect fixed breakpoints

## DON'T List
- Don’t add custom shadows
- Don’t mix corner radiuses in one component
- Don’t use yellow for small body text
- Don’t invent new link colors

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffdb00;
  color: #111111;
  padding: 16px 50px;
  border-radius: 0 0 8px 8px;
  font: 400 16px/1.4 "Noto IKEA", "Noto Sans", Roboto, "Open Sans", system-ui;
  border: none;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  color: #ffffff;
  transform: translateY(-0.1875rem);
}
.btn-primary:focus {
  outline: 2px solid #000000;
}
```

### Arrow Button
```css
.btn-arrow {
  background: #111111;
  color: #ffffff;
  border-radius: 50%;
  font: 700 36px/1.2 "Noto IKEA", "Noto Sans", Roboto, "Open Sans", system-ui;
  border: none;
}
.btn-arrow:hover { background: rgba(255,255,255,0.5); }
.btn-arrow:active { background: #000000; }
```

### Search Input
```css
.input-search {
  background: #ffffff;
  color: #000000;
  border-radius: 8px;
  padding: 12px 0 12px 42px;
  border: none;
}
.input-search:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR: IKEA’s design system is utilitarian with strong brand accents. Black and white dominate, yellow and blue add personality. Typography is consistent, spacing is modular, components are clear and accessible.

Brand Keywords: scandi-functional, global-minimalist, modular-consistent, color-disciplined, accessible-clarity