--- version: alpha name: IKEA description: "Warm off-white paper, one loud yellow, and photographs doing all the talking." colors: on-surface-variant: "#484848" on-surface: "#111111" surface: "#FFFEFB" primary: "#FFDB00" pure-white: "#FFFFFF" footer-black: "#000000" yellow-light: "#FFF094" ikea-blue: "#0159A3" poster-blue: "#0041C4" poster-green: "#62A841" deep-green: "#1A7E3B" peach: "#FFAE66" lilac: "#D9ABFF" press-orange: "#F26A2F" inactive-grey: "#767676" hairline: "#DFDFDF" typography: display-xl: fontFamily: Noto IKEA fontSize: 82.2857px fontWeight: 400 lineHeight: 90.5143px letterSpacing: -3.55102px display-xl-2: fontFamily: Noto IKEA fontSize: 72px fontWeight: 400 lineHeight: 77.76px letterSpacing: -1.84px display-l: fontFamily: Noto IKEA fontSize: 51px fontWeight: 400 lineHeight: 55.08px letterSpacing: -1.48px display-m: fontFamily: Noto IKEA fontSize: 45.7143px fontWeight: 400 lineHeight: 50.2857px letterSpacing: -1.59184px heading-xl: fontFamily: Noto IKEA fontSize: 36.5714px fontWeight: 400 lineHeight: 42.0571px letterSpacing: -1.10204px statement-m: fontFamily: Noto IKEA fontSize: 36px fontWeight: 400 lineHeight: 50.4px letterSpacing: -0.96px heading-l: fontFamily: Noto IKEA fontSize: 27.4286px fontWeight: 400 lineHeight: 31.5429px letterSpacing: -0.612245px heading-s: fontFamily: Noto IKEA fontSize: 25px fontWeight: 400 lineHeight: 30px letterSpacing: -0.54px statement-s: fontFamily: Noto IKEA fontSize: 25px fontWeight: 400 lineHeight: 35px letterSpacing: -0.24px heading-m: fontFamily: Noto IKEA fontSize: 20.5714px fontWeight: 400 lineHeight: 23.6571px letterSpacing: -0.244898px footer-link: fontFamily: Noto IKEA fontSize: 20px fontWeight: 400 lineHeight: 32.4px letterSpacing: 0em body: fontFamily: Noto IKEA fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0em body-2: fontFamily: Noto IKEA fontSize: 16px fontWeight: 400 lineHeight: 25.92px letterSpacing: 0em heading-xs: fontFamily: Noto IKEA fontSize: 16px fontWeight: 400 lineHeight: 18.4px letterSpacing: 0em label: fontFamily: Noto IKEA fontSize: 16px fontWeight: 400 lineHeight: 16px letterSpacing: 0em button: fontFamily: Noto IKEA fontSize: 14px fontWeight: 400 lineHeight: 20.02px letterSpacing: 0em small: fontFamily: Noto IKEA fontSize: 14px fontWeight: 400 lineHeight: 21.98px letterSpacing: 0em caption: fontFamily: Noto IKEA fontSize: 13.7143px fontWeight: 400 lineHeight: 24.6857px letterSpacing: 0.0612245px micro: fontFamily: Noto IKEA fontSize: 13.3333px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em button-small: fontFamily: Noto IKEA fontSize: 12px fontWeight: 400 lineHeight: 17.16px letterSpacing: 0em rounded: media-cards-panels-search-field: 8px pill-buttons: 28px accordion-content: 0px full-bleed-image-block-on-stories: 8.6px sections-footer-caption-plates-skip-link: 0px spacing: 2xs: 8px xs: 10px sm: 16px md: 20px lg: 24px xl: 32px 2xl: 40px 3xl: 60px 4xl: 64px 5xl: 80px 6xl: 120px 7xl: 140px --- # IKEA — Style Reference > Warm off-white paper, one loud yellow, and photographs doing all the talking. **Theme:** light The ground is #FFFEFB, a paper white with a yellow bias, and its usual ink is #111111 rather than pure black. One system runs across the captured pages, in two dialects: the home page is a mosaic of media tiles and colour bands inside the page column, with no visible page title, while Stories and Newsroom open on a display-scale word above a filter row and Jobs on a phrase beside a video. The signature move is the colour field: a section takes a saturated fill — yellow, peach, poster blue, leaf green, lilac — and the photograph or headline sits inside it, so hierarchy comes from an area of colour rather than a border or a shadow. Typography is one family doing everything: Noto IKEA at 700 for structure, at 400 for reading, at 800 for control labels, with negative tracking that tightens as the type grows. Everything soft is soft the same way — a small radius on media, a full circle on icon controls, a lozenge on buttons — and everything sits flat, because the pages paint no shadow anywhere. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Paper | `#FFFEFB` | `--color-off-white` | The canvas: `body` and `.header.svelte-nax5jc`. A warm white that keeps photography from looking clinical. | | Ink | `#111111` | `--color-text-darker` | Default text everywhere (text 1005), plus the fill of the pill and the video control; its 21 fills are controls, not planes. | | Pure White | `#FFFFFF` | `--color-light` | Fills `.title-container`, the search input and the inverse pill; also the ink over any colour field or photograph. | | Footer Black | `#000000` | `--color-text-black` | Painted as a fill only by `.container-spacing.svelte-1p7jays` (fill 4 — footer ×4), plus the 1px skip-link border. Not body ink; that is #111111. | | IKEA Yellow | `#FFDB00` | `--color-ikea-yellow` | The brand shout: `.mini-picker-container.svelte-1fsf42z`, `.accordion-content.svelte-1fsf42z`, `.carousel-container`. Chrome and stage; the pills fill #111111 instead. | | Yellow Light | `#FFF094` | `--color-ikea-yellow-light` | The frame around the search field, `.search-container.svelte-gsegnc` — a quieter yellow a white input can sit inside. | | IKEA Blue | `#0159A3` | `--color-ikea-blue` | The `.link` market-list rows on the home page: fill 112, each with #FFFFFF text at 16px/400 — a collapsed country list. | | Poster Blue | `#0041C4` | `--color-poster-blue` | One `.text-block.text-block__image--full-width.text-block__margin--lef` on Stories, laid over product photography. | | Poster Green | `#62A841` | `--color-poster-green` | The sibling fill of the same text-block class. One panel, one message, white type. | | Deep Green | `#1A7E3B` | `--color-deep-green` | `.item.color-box.text-bright` on the home page; its row pairs the fill with #FFFFFF ink. | | Peach | `#FFAE66` | `--color-peach` | A `.carousel-container` fill on the home page. Warm and low-contrast, made to hold #111111 headlines. | | Lilac | `#D9ABFF` | `--color-lilac` | `.item.color-box` on the home page, with #111111 ink — one observation, and the rarity is the point. | | Press Orange | `#F26A2F` | `--color-press-orange` | `.press-hero-card` on Newsroom. An editorial accent, not a system-wide alert colour. | | Dim Grey | `#484848` | `--color-grey-dim` | Deck and sub-heading ink on Stories and Newsroom (`.sub-heading`, `.skapa-typography-body-l`) — the step between #111111 and the inactive greys. | | Inactive Grey | `#767676` | `--inactive-link-color` | Unselected filter-row labels, `.link-text.svelte-1gdu2fw`: available, but not current. | | Hairline | `#DFDFDF` | `--color-grey` | Its six observations are all borders on divs on Newsroom — the hairline of that page's card row. | The single painted gradient, `.yellow-stripes.svelte-bvp38r`, is no blend: stops run `#FFDB00 → #FFDB00 → #FFFFFF → #FFFFFF`, a hard-edged divider band. ## Tokens — Typography ### Noto IKEA — the whole system; 700 for every structural heading, 400 for reading and for the large "statement" voice, 800 reserved for control labels · `--ikea-font` - **Substitute:** Noto Sans, Roboto, Open Sans - **Weights:** 400, 700, 800 - **Sizes:** 12px · 13.3333px · 13.7143px · 14px · 16px · 20px · 20.5714px · 25px · 27.4286px · 36px · 36.5714px · 45.7143px · 51px · 72px · 82.2857px - **Line height:** 1.08–1.4 at display sizes (90.5143px on 82.2857px; 55.08px on 51px), 1.5 in body (24px on 16px), and 1.62 in the footer (32.4px on 20px) - **Letter spacing:** negative and scaling with size — −3.55102px at 82.2857px, −1.84px at 72px, −1.48px at 51px, −1.10204px at 36.5714px, −0.244898px at 20.5714px; `normal` at 16px and below, with one positive outlier at +0.0612245px on the 13.7143px caption - **Role:** the same family carries display, body, label and footer, so hierarchy is size and weight ### Type Scale | Role | Size | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | Display XL | 82.2857px / 700 | 90.5143px | −3.55102px | `--text-display-xl` | | Display XL (jobs) | 72px / 700 | 77.76px | −1.84px | `--text-h-xl` | | Display L | 51px / 700 | 55.08px | −1.48px | `--text-h-l` | | Display M | 45.7143px / 700 | 50.2857px | −1.59184px | `--text-display-m` | | Heading XL | 36.5714px / 700 | 42.0571px | −1.10204px | `--text-heading-xl` | | Statement M | 36px / 400 | 50.4px | −0.96px | `--text-statement-m` | | Heading L | 27.4286px / 700 | 31.5429px | −0.612245px | `--text-heading-l` | | Heading S | 25px / 700 | 30px | −0.54px | `--text-h-s` | | Statement S | 25px / 400 | 35px | −0.24px | `--text-statement-s` | | Heading M | 20.5714px / 700 | 23.6571px | −0.244898px | `--text-heading-m` | | Footer link | 20px / 400 | 32.4px | normal | `--text-link-l` | | Body | 16px / 400 | 24px | normal | `--text-body-m` | | Body (jobs) | 16px / 400 | 25.92px | normal | `--text-body-long` | | Heading XS | 16px / 700 | 18.4px | normal | `--text-heading-xs` | | Label | 16px / 700 | 16px | normal | `--text-label-l` | | Button | 14px / 800 | 20.02px | normal | `--text-button` | | Small | 14px / 400 | 21.98px | normal | `--text-body-s` | | Caption | 13.7143px / 400 | 24.6857px | +0.0612245px | `--text-caption` | | Micro | 13.3333px / 400 | normal | normal | `--text-micro` | | Button small | 12px / 800 | 17.16px | normal | `--text-button-s` | ## Tokens — Spacing & Shapes **Base unit:** 2px **Density:** comfortable ### Spacing Scale | Name | Value | Token | |------|-------|-------| | 2xs | 8px | `--spacing-2xs` | | xs | 10px | `--spacing-xs` | | sm | 16px | `--spacing-sm` | | md | 20px | `--spacing-md` | | lg | 24px | `--spacing-lg` | | xl | 32px | `--spacing-xl` | | 2xl | 40px | `--spacing-2xl` | | 3xl | 60px | `--spacing-3xl` | | 4xl | 64px | `--spacing-4xl` | | 5xl | 80px | `--spacing-5xl` | | 6xl | 120px | `--spacing-6xl` | | 7xl | 140px | `--spacing-7xl` | Most steps are multiples of 8; the 10px, 12px, 42px and 50px paddings sit off it, and 42 and 50 are not multiples of 4 either, so the honest divisor is 2px. The declared 10.5rem vertical rhythm is *(declared, not painted)* — the pages paint 140px, 120px, 80px, 64px and 60px. ### Border Radius | Element | Value | |---------|-------| | Media, cards, panels, search field | 8px | | Icon buttons, arrow controls | 50% | | Pill buttons | 28px | | Accordion content (bottom corners only) | 0px 0px 8px 8px | | Full-bleed image block on Stories | 8.6px | | Sections, footer, caption plates, skip links | 0px | The 2px `--content-border-radius` is *(declared, not painted)*. ### Shadows None. The walk records `box-shadow` on every element it touches across all four pages and finds none — this system has no elevation layer. ### Layout - **Page max-width:** 90rem *(declared, not painted — `--container-max-width`)* - **Section gap:** 80px is the common rhythm (5 — all pages, `.bottom-content.svelte-1p7jays`, `.call-to-action.svelte-a66c9m`); editorial blocks stretch to 120px (`.block-container`), the load-more band to 64px, a colour carousel to 60px, the footer to 140px - **Card padding:** 16px on `.title-container`, 20px on `.feature-card`, 40px on the poster text block, 60px on `.carousel-container` - **Element gap:** 24px in the editorial grids (13 — `.grid-container-setup.grid-2` and siblings), 20px in the home mosaic (8 — `.startpage-container.container-spacing.container-max-width`, `.hero`), 8px between website links, 10px inside `.carousel-copy` ## Components ### Global Header **Role:** A fixed-width bar that carries the mark, four section links and the shopping cluster, on the same paper as the page beneath it. `.header.svelte-nax5jc` paints fill #FFFEFB with padding 0px 0px, radius 0px, border none and shadow none, on Stories, Jobs and Newsroom. The fill matches the canvas, so there is no visible bar — content floats at the top of the paper, needing neither rule nor shadow. The label style the census names is `.text`, and it measures two ways: 16px/400 #111111 across all pages, and 16px/700 #111111 on Stories, Jobs and Newsroom; the tiles show the current section in the bold cut. Declared nav height 6rem *(declared, not painted)*. ### Shopping Cluster **Role:** The one always-present commercial affordance — a yellow block on the right of the header that sends you from the global site to a local store. `.mini-picker-container.svelte-1fsf42z` fills #FFDB00 at radius 8px with padding 0px 0px, border none and shadow none, across Stories, Jobs and Newsroom. Inside it, `.arrow-container.btn-color-primary.svelte-1fsf42z` is a #111111 circle at radius 50%, padding 0px 0px, type 16px/700 — the black disc that gives the yellow block a direction. The inversion rule in miniature: yellow is the surface, black the action inside it. ### Store Picker Accordion **Role:** The market switcher that drops out of the shopping cluster and lists the site's countries. The trigger `.accordion-toggle.svelte-gsegnc` is a button filled #FFDB00 with #111111 text at 16px/400, padding 16px 50px, radius 0px 0px 8px 8px and a 1px #FFFEFB border — the paper colour used as a seam so the yellow reads as two stacked plates. The panel `.accordion-content.svelte-1fsf42z` repeats the fill at padding 0px 8px with the same 0px 0px 8px 8px radius on Stories, Jobs and Newsroom; the home page's `.accordion-content.svelte-gsegnc` variant paints padding 0px 16px, radius 0px and a 1px #FFFEFB border instead. Only the bottom corners round, because the panel hangs from the bar above it. ### Search Field **Role:** Site search, framed inside the yellow so it reads as brand furniture, not a bolted-on utility. `.search-container.svelte-1fsf42z` is a #FFF094 well at padding 10px 10px, radius 8px, border none, shadow none, on Stories, Jobs and Newsroom; the home page paints its own `.search-container.svelte-gsegnc` and `.search-input.svelte-gsegnc`. The input `.search-input.svelte-1fsf42z` sits inside it filled #FFFFFF with #000000 ink at 16px/400, padding 12px 42px, radius 8px and border none — the asymmetric 42px left padding leaves room for a glyph. One of the few places the system uses true #000000 rather than #111111. ### Pill Button **Role:** Every explicit call to action in the system. The default `.link.btn-focus-visible.btn-style-default.svelte-lb21lz` fills #111111 with #FFFFFF text at 14px/800, padding 0px 32px, radius 28px, border none, shadow none, on Stories; Jobs paints the same signature under `.link.btn-focus-visible.btn-style-default.svelte-nchi4b` (the radii row names it at 28px). An inverse variant on Stories — fill #FFFFFF, text #111111, same 14px/800, 0px 32px, 28px — serves buttons on a colour field. The small size, `.link.btn-focus-visible.btn-style-small.svelte-lb21lz`, drops the label to 12px/800 on Newsroom at the same 0px 32px and 28px. A fourth variant on Newsroom, `.btn-focus-visible.btn-style-default.svelte-lb21lz.btn-color-tran`, trades the fill for a 1px #111111 outline at the same 14px/800, 0px 32px and 28px. Vertical padding is 0px in every variant: height comes from the declared 3.5rem control token, so the pill is a fixed-height lozenge. The label style is `.btn-global.svelte-lb21lz` at 14px/800 on a 20.02px line. ### Editorial Image Card **Role:** The home page's basic unit — a photograph or autoplaying video with its story title burned into the bottom-left corner. `.image-link.image-overlay__holder` paints fill none, radius 8px, border none and shadow none, eleven times on the home page; a `.no-gradient` sibling paints the same geometry three times for images needing no scrim. The overlay type is `.skapa-typography-heading-xl` at 36.5714px/700, line height 42.0571px, tracking −1.10204px in #FFFFFF, under a `.sub-heading` eyebrow at 16px/400/24px, also #FFFFFF. `.svelte-18yriui` images and `.svelte-72rhip` videos both paint radius 8px with no border. Nothing is cropped into a shape — the 8px corner is all the softening a picture gets. ### Caption Plate **Role:** The white slab beneath a thumbnail in a colour-field carousel, holding a kicker and a title. `.title-container` fills #FFFFFF at padding 16px 16px with radius 0px, border none and shadow none, twelve times on the home page. Its title is `.skapa-typography-heading-xs` at 16px/700 on an 18.4px line — tighter than the type is tall, which makes a two-line title read as one block. Above it, `.sub-heading` runs 13.7143px/400 on a 24.6857px line with +0.0612245px tracking. The plate stays square-cornered under an 8px-rounded image, so the pair reads as a photo resting on a card. ### Colour Field Section **Role:** A band of the home page given over to one flat colour, headline left, plated thumbnails right. `.carousel-container` measures twice on the home page: once filled #FFAE66 and once filled #FFDB00, both at padding 60px 60px, radius 0px, border none, shadow none. Square-cornered at radius 0px, the fill stops inside the page column, not at the viewport edge; the 8px-rounded thumbnails on it read as objects on a stage. The headline is `.skapa-typography-display-m` at 45.7143px/700/50.2857px with −1.59184px tracking in #111111. Arrows are `.global-iconbtn.icon-btn-style-default.svelte-15de0oo` at radius 50%, padding 1px 6px, 13.3333px/400 — `btn-color-p` fills #111111 with #FFFFFF, the disabled `btn-color-d` fills #DADADA with #818181. Gaps are 10px in `.carousel-copy` and 16px 8px in `.carousel-controls.svelte-1r6wbbs`. ### Poster Text Block **Role:** A saturated panel dropped over a full-width product photograph on Stories, carrying a headline, a paragraph and one button. `.text-block.text-block__image--full-width.text-block__margin--lef` measures twice on Stories: once filled #0041C4 and once filled #62A841, both at padding 40px 40px, radius 8px, border none, shadow none. Only `.carousel-container` at 60px and the footer at 140px pad deeper, and this block needs its 40px — it overlaps the image beneath, so the fill must hold on all sides. Its headline is `.skapa-typography-display-m` at 45.7143px/700/50.2857px, tracking −1.59184px, in #FFFFFF, and the button inside is the inverse pill. The 8px radius is what separates a poster block from a full section. ### Video Pause Control **Role:** The persistent stop button on every autoplaying clip, bottom-right of its media holder. `.video-button.video-button--bottom-right.round-focus-visible.svel` measures two ways. The dark variant fills #111111 with #FFFFFF text at 13.3333px/400, padding 0px 0px, radius 50%, border none, shadow none, eight times across the home, Stories and Jobs pages; the light variant fills #FFFFFF with #111111 text at the same size, padding and radius, five times on home and Stories. The media beneath decides which: dark disc over pale imagery, white disc over dark. Declared diameter 3.75rem *(declared, not painted)*. Each carries a `.sr-only` label at 13.3333px/400 ("Pause video of seven creators installing their K…"). ### Page Header **Role:** The opening of every non-home page — an eyebrow, one enormous word or phrase, and a deck. On Stories and Newsroom, `.skapa-typography-display-xl` sets the h1 at 82.2857px/700 with a 90.5143px line and −3.55102px tracking in #111111 — −0.043em, the tightest in the system. Jobs uses `.h-xl`: 72px/700, 77.76px line, −1.84px tracking, with `.no-spacing.p-statement-s` above it at 25px/400/35px/−0.24px as the eyebrow. On Stories and Newsroom the deck is `.sub-heading` at 16px/400/24px in #484848 above a filter row: `.link-text.svelte-1gdu2fw` at 16px/400 #767676 unselected, 16px/700 #111111 and underlined when current. Jobs has neither — its deck runs #111111 at 16px/400 with `normal` leading, beside a video. ### Footer **Role:** The black terminal band that closes every page, carrying the logo panel and two rows of corporate links. `.container-spacing.svelte-1p7jays` fills #000000 at padding 140px 24px, radius 0px, border none, shadow none, on all four pages — the deepest vertical padding in the system and the only fill #000000 paints. The primary link row is 20px/400 on a 32.4px line in #FFFFFF, separated by `.dot` bullets at 14px/400/21.98px; the secondary row, with the `.link.svelte-fj48fz` cookie button, drops to 14px/400 in #FFFFFF. The tiles show the mark reversed out of a patterned rectangle that changes page to page. ## Do's and Don'ts ### Do - Set every page on #FFFEFB with #111111 ink; #111111 carries text 1005 times, and `.header.svelte-nax5jc` fills the same paper as the body so no bar is drawn. - Round media, panels and the search field to 8px — the dominant radius by a wide margin (143 carriers: div ×68, img ×44, video ×13, li ×12, all pages). - Ship calls to action as 28px pills at 800 weight with 32px side padding and 0px vertical padding, per `.link.btn-focus-visible.btn-style-default.svelte-lb21lz`. - Give every autoplaying clip a 50% circular pause control and an `.sr-only` label, per `.video-button.video-button--bottom-right.round-focus-visible.svel`. - Let a whole section take a flat colour at 60px padding and 0px radius, per `.carousel-container`. - Keep captions quiet: `.sub-heading` at 13.7143px/400 with +0.0612245px tracking above a 16px/700 title. ### Don't - Don't add a shadow. The walk records `box-shadow` across all four pages and finds none; add one and the flat colour fields stop reading as planes. - Don't default a button to #FFDB00. Yellow's carriers are mostly surfaces — `.holder.svelte-gsegnc`, `.mini-picker-container.svelte-1fsf42z`, `.accordion-content.svelte-1fsf42z`, `.carousel-container` — and the one yellow button, `.accordion-toggle.svelte-gsegnc` at padding 16px 50px, is a plate lid; the pills fill #111111. - Don't set display type at 400. Every heading class the census measures — `.skapa-typography-display-xl`, `.h-xl`, `.h-l`, `.skapa-typography-display-m`, `.skapa-typography-heading-xl`, `.h-s` — paints 700; the 400-weight large type is a separate statement voice (`.p-statement-m`, `.no-spacing.p-statement-s`). - Don't invent greys. The painted set is #484848, #767676, #DFDFDF, #DADADA, #F5F5F5 and #818181, and #DFDFDF appears as a border rather than a fill. - Don't let tracking stay at `normal` above 20px. Everything from 20.5714px up carries negative tracking, scaling to −3.55102px at 82.2857px. - Don't round a section or a caption plate. `.carousel-container` and `.title-container` both paint radius 0px; softness belongs to media and controls. - Don't reach for a second typeface — the inventory's font list names Noto IKEA and no other, and `.skapa-typography-display-xl`, `.sub-heading` and `.btn-global.svelte-lb21lz` all resolve to it. ## Surfaces | Level | Name | Value | Purpose | |-------|------|-------|---------| | 0 | Canvas | `#FFFEFB` | Body and header on every page | | 1 | Card plate | `#FFFFFF` | `.title-container` at 16px padding; also the search input fill | | 1 | Panel | `#F5F5F5` | `.feature-card` on Newsroom, 20px padding, radius 8px | | 2 | Colour field | `#FFDB00` / `#FFAE66` | `.carousel-container` sections at 60px padding | | 2 | Poster block | `#0041C4` / `#62A841` | `.text-block…` panels at 40px padding, radius 8px | | 2 | Colour tile | `#1A7E3B` / `#D9ABFF` / `#F26A2F` | `.item.color-box` tiles and `.press-hero-card` | | 3 | Footer | `#000000` | `.container-spacing.svelte-1p7jays`, 140px 24px | ## Elevation There is none, and that is the point. No element on any captured page paints a `box-shadow`, and the border vocabulary is nearly as thin — a 1px #000000 rule on the six skip links (`.skip-content.svelte-nax5jc`, `.carousel-skip-link.svelte-1r6wbbs`), a 1px #FFFEFB seam inside the yellow accordion, a 1px #111111 outline on the transparent pill, a #DFDFDF hairline on divs on Newsroom. Depth is colour and area: a saturated section reads as forward because it is loud and fills the column, an 8px-rounded photograph as an object against calm paper, the black footer as the floor because it is the darkest plane painted. Build the ladder with hue and coverage, not elevation. ## Imagery Photography is the content, not the decoration. Real rooms with real mess in them, people mid-motion, food on a table, a street seen from above — shot warm, cropped wide, dropped into an 8px-rounded holder with no border and no filter. Video sits at the same level: thirteen `