The delicious outdoors
Let’s eat out!
01 / Colors
Core tokens plus editorial story accents.
IKEA Global keeps the interface neutral and uses yellow extensively for commerce and story stages. Blue remains the brand anchor in the logo. Further colours come from editorial cards and product worlds.
IKEA Yellow
#FFDB00
CTA, Designer Stories, Shopping Island
Brand Blue
#0058A3
Logo, brand anchor, focus ring
Ink
#111111
Text, icons, dark buttons
Canvas
#FFFEFB
Warm page background
Surface
#FFFFFF
Cards, dialogs, inputs
Border
#DFDFDF
Subtle separators
Story Blue Wash
#C4DEE8
Editorial graphic card
Quiz Green
#8FB62D
Quiz/product accent
Success
#0A8A00
Semantic positive
Warning
#CA5008
Semantic caution
Error
#E00751
Semantic negative
Image Overlay
rgba(0,0,0,.55)
White story titles on images
02 / Typography
Noto IKEA, heavy headlines, practical body text.
The page uses a no-nonsense sans-serif hierarchy. Headlines are bold, tight and direct. Body and navigation remain plainly readable.
Display XL
72 / 700 / 1.1
Let’s eat out!
Hero und große Feature-Karten
Observed H2
51 / 700 / 55.08 / -1.48px
Designer stories
Direkt aus computed styles beobachtet
Heading MD
32 / 700 / 1.15
A fresh start
Card-Headline und Section Teaser
Body
16 / 400 / 1.5
Furniture, home accessories, design ideas and inspiration for big dreams and small budgets.
Intro, Nav, Dialogtext
Label
14 / 700 / 1.2
Collection sneak peek
Kleine Kategoriezeilen über Card-Titeln
03 / Buttons & Controls
Flat utility controls with strong round icon actions.
Buttons avoid decoration. High contrast, simple shapes, yellow commerce surfaces and black round action buttons define the interaction.
→←
04 / Cards
Story cards are the product surface.
On ikea.com Global the story tile matters more than a classic product card: photo, context, short copy, overlay and full click area.
Collection sneak peek
IKEA PS 2026
The man behind IKEA
100 years of Ingvar Kamprad
Let your home come out to play
The GREJSIMOJS collection
Discover your dream kitchen
Take the quiz!
Ready to tuck in?
40 years of the IKEA meatball
Style report
Blue & white with terracotta
05 / Brand-specific product patterns
Patterns that make this IKEA, not a recolored template.
The demo abstracts real visible patterns: shopping island, store picker, designer carousel, story mosaic, cookie dialog, accessibility skip link and corporate footer.
Yellow Commerce Island
Yellow tile with primary shopping access and store dropdown.
Go shopping →
Store picker
Accordion-artiger Store-Kontext.
Video control
Black round 60 px button over story media.
ⅡContent label stack
Kitchen storage ideas
A pantry with room for more
Kleine Taxonomie plus große Story.
Collection naming
OMMJÄNGE
Swedish names as a distinctive rhythm.
Designer stories
A lot goes on before your favourite product makes its way onto the shelves at IKEA. Designers bring ideas to life and into your home.
David WahlPuzzle perfect with ÖDLEBLAD
Friso WiersmaBehind the LÅDMAKARE system
Wiebke BraaschRISATORP is ready for anything
06 / Forms
Rounded, white, utility-first forms.
Search and picker inputs are 46 px tall, 8 px rounded, white with a clear blue focus ring interaction.
07 / Spacing
Large editorial rhythm, tight card gaps.
The grid has small gaps but large section breaks. This keeps content dense without feeling restless.
4 pxxs
8 pxsm/radius
16 pxgap
24 pxpage padding
32 pxlarge
48 pxblock
80 pxsection
140 pxfooter top
08 / Radius
Friendly, not bubbly.
8 px is the standard for cards, dialogs and inputs. Icon buttons are fully round.
0
sharp utility
4 px
small detail
8 px
cards/inputs
50%
icon controls
09 / Elevation
Mostly border-only. Depth comes from images and overlays.
IKEA Global avoids decorative shadows. Only layers like cookie dialogs may float more prominently.
Level 0
Story cards: no visible shadow.
Level 1
Subtle separators and border-only cards.
Overlay
Cookie/modal layer.
10 / Footer & extracted component tokens
Corporate black ending and concrete implementation values.
The black footer ends the colourful story world with institutional clarity. Prompt-ready token values follow.
header: height 96px; background #FFFEFB; nav padding 16px; logo left; shopping CTA right.story-card: radius 8px; min-height 360-604px; overlay linear-gradient to rgba(0,0,0,.65); text bottom-left 24px.button-icon: 48-60px circle; background #111; color #fff; no shadow; strong focus ring #0058A3.designer-section: background #FFDB00; padding 48-64px; h2 51px/700; white carousel cards.input: height 46px; background #fff; radius 8px; padding 12px 14px or search-icon left 42px.footer: background #000; color #fff; padding-top 140px; large centered logo; link rows 20px and 14px.