--- 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 | Role | Value | Where | |------|-------|-------| | Brand blue | `#0058a3` | Brand surfaces and controls | | Link and focus blue | `#007cc1` | Banners and links | | Text | `#111111` | Headlines and fields | | Body text | `#484848` | Navigation and copy | | Quiet text | `#929292` | Secondary labels | | Page, panel | `#ffffff`, `#f5f5f5` | Surfaces and footer | | Divider, border | `#dfdfdf`, `#cccccc` | Rules and fields | | Scrim | `#111111` at 40 percent | Image overlays | | Price red | `#cc0008` | Prices and urgent notes | | Sale pink | `#e00751` | Sale emphasis | | Notice orange | `#ca5008` | Notices | | Positive green | `#37b886` | Confirmations | ### 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.