IKEA

Overview

IKEA's global storefront is warm, clean and unapologetically utilitarian — a near-white off-cream canvas grounded by near-black ink text, with the unmistakable IKEA yellow reserved almost exclusively for action. The personality is editorial and homey: full-bleed lifestyle photography and solid color blocks carry the emotion, while the interface chrome stays quiet and functional. Hierarchy is built through scale and photography, not decoration — an oversized bold display headline sits above candid imagery, and the accent color appears only where a builder wants a click.

Density is generous but not sparse. The type scale spans an enormous range, from an 82px hero display down to a 12px uppercase label, and the spacing scale reaches a 96px ({spacing.3xl}) rhythm for major sections. Surfaces are softly rounded at 8px ({rounded.md}), elevation is almost entirely flat, and the layout follows a magazine-style asymmetric grid of image tiles that collapses cleanly into a single stacked column on mobile.

Contrast anchors the page: a stark black footer ({colors.surface-inverse} — #000000) closes every session against the off-cream body, and playful secondary accents (green, lilac, peach) appear as occasional interactive highlights rather than structural color.

Key Characteristics:

• Off-cream canvas ({colors.surface} — #FFFEFB) against near-black ink ({colors.ink} — #111111)
• IKEA yellow ({colors.primary} — #FFDB00) used sparingly and only for calls to action
• Single humanist typeface, Noto IKEA, across the entire scale
• Only three font weights in play: 400, 600, 700 — weight 500 is deliberately absent
• Soft 8px ({rounded.md}) rounded surfaces with tight negative letter-spacing on display type
• Flat elevation: depth comes from full-bleed photography and color blocks, not shadows
• A dramatic black footer anchoring the warm body
• Editorial photo-grid layout that stacks to one column on mobile

Colors

The palette is disciplined: a warm neutral shell, near-black ink, and one loud brand yellow that does all the work of drawing the eye. Everything else is a supporting accent used in tiny quantities.

Brand & Accent

• IKEA Yellow ({colors.primary} — #FFDB00): the signature. Reserved for primary action surfaces (the primary button) and small brand moments — never for large fields of text or background. Pair with {colors.on-primary} (#111111) ink for legible labels.
• Soft Yellow ({colors.accent-yellow-soft} — #FFF094): a gentle tint used for chips and highlight fills.
• Accent Green ({colors.accent-green} — #1A7E3B): a playful interactive highlight, appears sparingly.
• Accent Lilac ({colors.accent-lilac} — #D9ABFF): a decorative interactive accent.
• Accent Peach ({colors.accent-peach} — #FFAE66): a warm decorative block/accent color.

Surface

• Parchment ({colors.surface} — #FFFEFB): the primary off-cream canvas for the body, cards, inputs and navbar. Warmer than pure white on purpose.
• True Black ({colors.surface-inverse} — #000000): the footer background — a deliberate high-contrast anchor at the bottom of the page.

Text

• Ink ({colors.ink} — #111111): default body and heading text; the dominant color by weight across the page.
• Muted Ink ({colors.ink-muted} — #818181): secondary and supporting text, captions, de-emphasized metadata.
• On-Dark ({colors.on-dark} — #FFFFFF): text over the black footer and dark surfaces.
• On-Primary ({colors.on-primary} — #111111): ink used on top of yellow action surfaces.

Links, Hairlines & Borders

• Classic Link Blue ({colors.link} — #0000EE): raw hyperlink blue, used for inline text links — a stark utilitarian choice against the warm palette.
• Hairline ({colors.border} — #DADADA): light 1px dividers and input outlines.
• Strong Border ({colors.border-strong} — #111111): the ink-colored 1px outline for secondary buttons and structural rules.

There are no gradients in this system — depth and color come from solid blocks and photography. The palette carries no dedicated dark-mode block; the black footer is a color choice within a single light theme, not a theming layer, so build for light only.

Typography

Font Family

The entire system is set in Noto IKEA, IKEA's proprietary humanist sans, at every level from hero to caption. There is no secondary typeface — the single-family discipline is a defining trait.

Hierarchy

Principles

• Only three weights exist: 400 (regular), 600 (used exclusively for {typography.title-md}), and 700 (all display and emphasis). Do not introduce 500 or heavier cuts — they are deliberately absent.
• Letter-spacing tightens as type grows: display sizes pull negative (-3.55px at hero, -1.10px at display-md) for a condensed, confident headline; body and below stay at normal tracking. Only {typography.caption} uses a hair of positive tracking (0.06px).
• Line-height loosens as type shrinks: display sits tight at 1.1, body relaxes to 1.5–1.6, and captions open to 1.8 for legibility at small sizes.
• Button text is notably small (13.33px, weight 400) — the button relies on its yellow fill, not bold text, for prominence.

Note on Font Substitutes

Noto IKEA is proprietary. Substitute with Noto Sans (the open-source family it derives from) or Inter as a fallback. Tune by applying the same aggressive negative letter-spacing on display sizes (roughly -0.04em) and keeping to weights 400/600/700 to preserve the ladder.

Layout

Spacing System

The spacing scale is broadly 4px-derived but pragmatic, running: {spacing.xs} (6px), {spacing.sm} (8px), {spacing.md} (12px), {spacing.base} (16px), {spacing.lg} (20px), {spacing.xl} (24px), {spacing.2xl} (50px), {spacing.section} (60px), {spacing.3xl} (96px). By measured frequency, 16px and 24px do the heaviest lifting for internal padding and gaps, while 60px and 96px separate major page sections.

Grid & Container

The layout is an editorial, magazine-style grid of large asymmetric image tiles — a single-column full-bleed hero mixed with two-column story blocks, punctuated by a full-width color callout band. Imagery is full-bleed; caption content (eyebrow + bold headline) sits bottom-left over each image. Card interiors use 24px padding ({components.card.padding}). Exact column counts and container max-widths were not measurable from the single capture, so treat the grid as flexible asymmetric tiles rather than a fixed 12-column system.

Whitespace Philosophy

Whitespace is generous and rhythmic. Sections breathe at the 60–96px scale while content packs tightly at 16–24px internally. The result is a calm, editorial cadence where photography and negative space — not borders — separate ideas.

Elevation & Depth

Shadow philosophy. Elevation comes from surface change and photography, not shadows. The system is almost entirely flat — depth is conveyed through full-bleed imagery and solid color blocks (yellow, orange). The single soft shadow in the token set is a low-opacity 4px/15px-blur lift used only for genuinely floating elements like cards and the consent modal. If you find yourself reaching for a shadow, ask whether a color block or image would carry the depth instead.

Shapes

Border Radius Scale

The geometry is predominantly rectilinear: image tiles, CTA blocks and buttons use sharp or barely-rounded corners, giving the page an editorial, poster-like character. The dominant applied radius by far is 8px ({rounded.md}), which softens cards and inputs just enough to feel friendly without going bubbly. Fully rounded geometry ({rounded.full}) is reserved for small pill-shaped buttons (Accept / Reject / Cookie settings) and circular icon buttons (play/pause, arrow-in-circle) — note that the pill radius on primary/secondary buttons, chips and avatars was not observed in the capture, so apply {rounded.full} to those only where a pill or circle is genuinely intended.

Components

Navigation

navbar — A fixed-position bar ({components.navbar.position}) at 96px tall ({components.navbar.height}) on the off-cream surface ({colors.surface} #FFFEFB) with ink text ({colors.ink}). The evidence shows roughly 12 nav links set in {typography.body} (16px, weight 400, ink), and the header carries a CTA button. A 1px rule ({colors.border-strong}) is defined for the bar's edge; no backdrop blur is applied. Links are quiet text — the utilitarian hierarchy relies on position and iconography, not color.

nav-link — Ink text ({colors.ink}) in {typography.body} (16px/400). Understated by design.

Buttons

button-primary — The signature action: IKEA yellow fill ({colors.primary} #FFDB00) with ink label ({colors.on-primary} #111111), {typography.button} (13.33px), padding 12px 24px. Small text, loud fill — the color is the emphasis. button-secondary — Off-cream fill ({colors.surface}) with a 1px ink outline ({colors.border-strong}, 1px) and ink text, same {typography.button}. Used for secondary actions alongside the yellow primary.

Cards & Containers

card — Off-cream surface ({colors.surface}), ink text, 8px radius ({components.card.rounded}), 24px padding, and the system's one soft shadow rgba(0,0,0,0.1) 0px 4px 15px 0px. The only genuinely elevated surface. chip — Soft-yellow fill ({colors.accent-yellow-soft} #FFF094) with ink text in {typography.body-sm} (14px). A gentle highlight tag. avatar — 42px square ({components.avatar.size}); intended circular where used.

Inputs & Forms

input — Off-cream fill, ink text, 1px hairline border ({colors.border} #DADADA), 8px radius, 50px tall ({components.input.height}) with 16px padding — a comfortable, touch-friendly target.

Links

link — Classic browser blue ({colors.link} #0000EE) in {typography.body} for inline text links — a stark, functional contrast against the warm palette.

Footer

footer — The page's dramatic anchor: true-black background ({colors.surface-inverse} #000000) with white text ({colors.on-dark} #FFFFFF), relative position, and a tall 872px ({components.footer.height}) stack. Roughly 10 footer links render in {typography.body-lg} (20px, weight 400, white) — larger and more generous than the navbar's 16px links. No CTA button in the footer. Exact column counts weren't measurable, so treat it as a stacked multi-group link layout closing on legal fine print.

Do's and Don'ts

Do

• Do set all text in Noto IKEA ({typography.body} and siblings); it is the single voice of the system.
• Do restrict weights to 400, 600 and 700 — 600 only for {typography.title-md}, 700 for display and emphasis.
• Do reserve IKEA yellow ({colors.primary}) for calls to action and brand moments only, with ink labels ({colors.on-primary}).
• Do apply the tight negative letter-spacing on display type ({typography.hero-display} at -3.55px, {typography.display-md} at -1.10px) to keep headlines confident.
• Do default surfaces to the off-cream {colors.surface} (#FFFEFB) and 8px radius ({rounded.md}).
• Do let full-bleed photography and solid color blocks carry depth instead of shadows.
• Do use the black footer ({colors.surface-inverse}) with white text ({colors.on-dark}) as the page's closing anchor.

Don't

• Don't introduce a second typeface — Noto IKEA is the entire system.
• Don't add weight 500 or heavier/lighter cuts beyond 400/600/700.
• Don't use yellow ({colors.primary}) for large text fields or background washes — it is an action color.
• Don't scatter drop shadows; the only shadow is rgba(0,0,0,0.1) 0px 4px 15px 0px on cards and modals.
• Don't recolor inline links away from the classic blue ({colors.link} #0000EE).
• Don't over-round structural tiles — keep image blocks and CTAs rectilinear; reserve {rounded.full} for pills and circular icon buttons.
• Don't deploy the playful accents (green, lilac, peach) as structural color — they are occasional interactive highlights.

Responsive Behavior

This is a two-viewport analysis (desktop and mobile); no intermediate breakpoint pixel values were captured, so treat the transition as a single collapse rather than a defined series of breakpoints.

On desktop, the layout is an editorial grid of large asymmetric image tiles — a full-bleed hero mixed with two-column story blocks and a full-width color callout band ('Back at it!') carrying a mixed text + thumbnail row. On mobile, the grid collapses into a single stacked column of full-width cards, each preserving the same caption-overlay pattern: an eyebrow label plus bold headline anchored bottom-left of the image. The visual rhythm is maintained across both viewports.

Touch targets are sized generously — inputs stand 50px tall ({components.input.height}) and the navbar is 96px ({components.navbar.height}) — comfortable for both cursor and thumb. Exact column-count changes and gutter values beyond the single-column stack could not be verified from the two captures.

Iteration Guide

1. Reference tokens, never hex. Change {colors.primary} or {colors.surface} at the token level so every button, card and surface updates coherently.
2. Keep the type ladder intact. Adjust roles by moving to the correct token ({typography.display-lg} vs {typography.display-md}), don't invent new sizes; the negative letter-spacing on display tiers is part of the brand and must scale with size.
3. Preserve the three-weight rule. Any new emphasis must resolve to 400, 600, or 700 — never introduce 500.
4. Guard the yellow. {colors.primary} is an action color. New CTAs live in {components.button-primary}; secondary actions use the outlined {components.button-secondary}.
5. Elevation is flat by default. New surfaces should rely on color blocks and photography; only reach for the single card shadow when an element genuinely floats.
6. Radius stays at 8px. Default new surfaces to {rounded.md}; reserve {rounded.full} strictly for pills and circular icon buttons.
7. Unbreakable boundaries: single typeface (Noto IKEA), off-cream body against black footer, blue inline links ({colors.link}), and sparing accent usage. Do not restyle these to match generic conventions.

Known Gaps

• Single page captured. Only the homepage (https://ikea.com/) was analyzed; product-listing, product-detail, cart and account surfaces were not seen and may introduce components or patterns absent here.
• Pill/circle radii unverified. The 9999px radius was dropped from button-primary, button-secondary, chip and avatar because it wasn't observed on the page — apply {rounded.full} to those only where a pill/circle is truly intended.
• No hover/focus/active states. Interactive state styling (button hover, link focus rings, input focus) was not captured and must be designed to spec.
• No animation or motion data. Transitions, carousel behavior and the play/pause interactions were not measured.
• Grid metrics approximate. Container max-widths, exact column counts and gutters could not be derived from a single capture; the footer's link-column structure (10 links, 872px tall) is known in totals but not in column layout.
• Navbar border ambiguity. Tokens define a 1px {colors.border-strong} navbar rule, but landmark evidence reported 0px border width — verify the header's actual divider treatment.
• No dark theme. The black footer is a design choice within one light theme; no dark-mode token block exists, so dark theming is undefined.