Shopping / iOS / Android / Web

IKEA

IKEA lets the headline be the loudest thing on the page, then goes quiet: gray grounds, calm grids of products and a few round buttons, with red kept for the price.

Download
  • #0058A3
  • #007CC1
  • #111111
  • #F5F5F5
  • #DFDFDF
  • #CC0008

Color

Every color token in the file, grouped by role.

Brand

  • primary#0058A3
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F5F5F5

Text

  • link#007CC1
  • ink#111111
  • ink body#484848
  • ink muted#929292

Lines

  • divider#DFDFDF
  • border#CCCCCC
  • scrim#11111166 (40%)

Status

  • positive#37B886

More

  • price#CC0008
  • sale#E00751
  • notice#CA5008

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Noto IKEANoto IKEA is private and not available in open fonts. Shown in Noto Sans, the closest open match.
  • display40px / 700 / 50px

    IKEA

  • heading28px / 700 / 35px

    Pack my box with five dozen liquor jugs

  • heading small22px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • lead24px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • section label21px / 700 / 33px

    Continue to checkout

  • body14px / 400 / 22px

    The quick brown fox jumps over the lazy dog

  • input16px / 400 / 20px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs4px
  • sm6px
  • md8px
  • pill64px
  • round999px

Spacing

The spacing scale, drawn to size.

  • sm12px
  • md16px
  • lg20px
  • xl40px
  • section64px

Components

Component tokens drawn with the colors, type and corners they name.

  • icon button
    icon-button
  • icon button small
    icon-button-small
  • nav link
    nav-link
  • search field
    search-field
  • footer
    footer
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 111 lines
version: alpha
name: IKEA-design-analysis
description: "A furniture store drawn with big bold headlines and quiet product grids: Noto IKEA in bold with tight negative tracking, near-black ink on white and #f5f5f5, IKEA blue (#0058a3) with a lighter link blue (#007cc1), price red (#cc0008), and round 40 and 56 pill buttons."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0058a3"
  on-primary: "#ffffff"
  link: "#007cc1"
  ink: "#111111"
  ink-body: "#484848"
  ink-muted: "#929292"
  canvas: "#ffffff"
  canvas-subtle: "#f5f5f5"
  divider: "#dfdfdf"
  border: "#cccccc"
  scrim: "#11111166"
  price: "#cc0008"
  sale: "#e00751"
  notice: "#ca5008"
  positive: "#37b886"

typography:
  # Font note: "Noto IKEA" is a private font and is not available in open fonts. Closest open alternative: "Noto Sans".
  display:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 50px
    letterSpacing: -1.39px
  heading:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 35px
    letterSpacing: -0.75px
  heading-small:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.43px
  lead:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 30px
    letterSpacing: -0.54px
  section-label:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 21px
    fontWeight: 700
    lineHeight: 33px
  body:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22px
  input:
    fontFamily: "'Noto IKEA', 'Noto Sans', Roboto, 'Open Sans', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px

rounded:
  xs: 4px
  sm: 6px
  md: 8px
  pill: 64px
  round: 999px

spacing:
  sm: 12px
  md: 16px
  lg: 20px
  xl: 40px
  section: 64px

components:
  icon-button:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.ink}"
    rounded: "{rounded.pill}"
    size: 56px
  icon-button-small:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.pill}"
    size: 40px
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    height: 46px
    padding: 12px 16px
  search-field:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.ink}"
    typography: "{typography.input}"
    rounded: "{rounded.pill}"
    height: 48px
    padding: 0 0 0 48px
  footer:
    backgroundColor: "{colors.canvas-subtle}"
    textColor: "{colors.ink-body}"
    typography: "{typography.body}"
    padding: 64px 0 0

Overview

IKEA's site is a catalog drawn with confidence: very large bold headlines with tight tracking, calm gray backgrounds, product photography in tidy grids and a small number of round buttons. [Observed]

What defines the look:

  1. Big bold headlines. 40 on 50 at 700 with -1.4px tracking for page titles, 28 on 35 for section titles. [Measured]
  2. Near-black ink. Text is #111111, with body copy at #484848 and gray #929292 for the quietest labels. [Measured]
  3. Gray grounds. Pages sit on white and #f5f5f5, with #dfdfdf dividers and #cccccc field borders. [Measured]
  4. Round controls. Icon buttons are 40 or 56 circles and the search field is a 48 high pill, all with a 64px corner. [Measured]
  5. Blue for brand and links. IKEA blue #0058a3 and a lighter link blue #007cc1. [Measured]
  6. Red for price. #cc0008 marks prices and urgent notes, with #e00751 for sale emphasis. [Measured]

Source for this file: the US home page and the sofas category page measured in a browser at 1440 and 390 wide, read on 2026-10-06. IKEA's own design system documentation was not read because no public token files were found. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Brand blue#0058a3Brand surfaces and controls
Link and focus blue#007cc1Banners and links
Text#111111Headlines and fields
Body text#484848Navigation and copy
Quiet text#929292Secondary labels
Page, panel#ffffff, #f5f5f5Surfaces and footer
Divider, border#dfdfdf, #ccccccRules and fields
Scrim#111111 at 40 percentImage overlays
Price red#cc0008Prices and urgent notes
Sale pink#e00751Sale emphasis
Notice orange#ca5008Notices
Positive green#37b886Confirmations

Typography

Noto IKEA is the family, loaded at 400 and 700, with currency fallbacks first and Noto Sans, Roboto, Open Sans and system fonts behind it. Page titles are 40 on 50 at 700 with -1.39px tracking. Section titles are 28 on 35 at 700 with -0.75px, hero statements 24 on 30 at 700 with -0.54px, and secondary titles 22 on 30 at 700 with -0.43px. Body is 14 on 22 at 400 and fields are 16 on 20. [Measured]

Shape and spacing

Corners are 4 on small elements, 6 and 8 on panels, and 64 on circular buttons and the pill search field. Navigation links are 46 high with 12 by 16 padding, rows in the utility bar are 48 high, and the footer starts with 64 of padding. Product tiles have 20 and 40 padding. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light only on the pages measured. [Observed]

Platform: iOS

The IKEA app was not captured. The notes below follow from the web design.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a shopping app. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A primary shopping action, such as adding to the bag, in a bold control. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the type, the grays, the blue and the round controls with the web. [Inferred]

Platform: Android

The IKEA app was not captured. The notes below follow from the web design.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a shopping app. [Inferred]

Main action

Expected on Android: Floating action button.

A primary shopping action, such as adding to the bag, in a bold control. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the type, the grays, the blue and the round controls with the web. [Inferred]

Platform: Web

The IKEA US home page and the sofas category page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and category breadcrumbs. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A utility bar (sign in, language, ZIP code, store), then a main bar with Products, Rooms and Deals links 46 high, and a 48 high pill search field. [Measured]

Main action

Expected on Web: Page-level button.

Round icon buttons of 40 and 56 for adding and saving, and bold text links such as Shop new arrivals. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Pill search field, circular icon buttons and a Sort and Filter panel. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Utility rows and the search field are 48 high, icon buttons 40 to 56. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the bold headline style, the grays, the blue and the round controls. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Set page titles in bold with tight negative tracking.
  • Keep products on white or light gray and let the photos carry color.
  • Use round buttons for icon actions and a pill for search.
  • Reserve red for prices and urgent notes.

Don't

  • Don't use the red for decoration.
  • Don't add borders around product tiles.
  • Don't use the light link blue for large fills.

Known Gaps

  • Product pages, the bag, checkout and store tools were not measured.
  • The iOS and Android apps were not captured. Their sections are inferred.
  • The exact brand yellow and the button fills for primary actions were not found in the measured pages.
  • Icons, motion and breakpoints were not measured.
  • No public token files were found, so values come from the pages' computed styles only.
  • Account deletion and store policy rules were not verified.