---
version: alpha
name: Muuto
description: New Nordic furniture brand built on a warm parchment canvas, with a bespoke geometric grotesque at oversized scale, electric chartreuse-on-black color moments, and relentlessly flat, zero-radius geometry that says "Scandinavian" through restraint rather than decoration.

colors:
  # Surface / canvas
  background: "#efeeeb"        # warm off-white parchment — the dominant Muuto canvas (from logo bg)
  surface: "#ffffff"           # pure white sections and product image fields
  surface-dark: "#000000"      # full-bleed editorial black sections
  surface-teal: "#2c4c45"      # the deep forest teal accent surface / campaign sections
  surface-greige: "#cfccc8"    # --product-tile-bg-color-hover: warm greige tile hover state

  # Ink / text
  ink: "#000000"               # primary black text and the dominant graphic color
  ink-secondary: "#282828"     # near-black body and link text
  ink-on-dark: "#ffffff"       # text on black and teal surfaces
  ink-muted: "#cfccc8"         # low-emphasis, greige supporting tone

  # Brand accent
  primary: "#f6ed6c"           # electric chartreuse-yellow — the Muuto editorial accent (CTAs on dark)
  on-primary: "#000000"        # black text on chartreuse
  primary-dim: "#685d20"       # golden-olive muted — used in editorial text and button outlines on light
  on-primary-dim: "#ffffff"    # text on the golden-olive surface

  # Interaction / state
  link-hover: "#685d20"        # golden-olive link hover color (from dembrandt link data) /* estimated */
  focus-ring: "#685d20"        # olive focus ring on light surfaces /* estimated */

  # Borders
  border: "#000000"            # the dominant black hairline divider and button outline
  border-subtle: "#eeecea"     # was rgba(0,0,0,0.1) — Google format requires hex; very light separator
  border-teal: "#2c4c45"       # teal section button and outline variant

  # Shadow tints (opaque approximation)
  shadow-soft: "#000000"       # was rgba(0,0,0,0.2) — Google format requires hex; used in modal overlay
  shadow-neutral: "#999999"    # was rgb(153,153,153) — soft card lift shadow

typography:
  display-hero:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 170px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -6.8px
  display:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 100px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: -4.5px
  heading-section:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 50px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -2px
  heading-sub:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.9px
  body-large:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: -0.32px
  body:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.44
    letterSpacing: -0.32px
  body-serif:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  nav-link:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1px
  button-ui:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: -0.24px
  label:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.44
    letterSpacing: -0.6px
  caption:
    fontFamily: "EuclidFlex, DM Sans, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.32px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 40px
  xl: 45px
  2xl: 80px
  3xl: 160px

rounded:
  none: 0px
  micro: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-outlined:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-dim}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-outlined-hover:
    backgroundColor: "{colors.primary-dim}"
    textColor: "{colors.on-primary-dim}"

  button-chartreuse:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-chartreuse-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-dark}"

  button-teal:
    backgroundColor: "{colors.surface-teal}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-teal-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-ghost-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-dark}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  card-hover:
    backgroundColor: "{colors.surface-greige}"
    textColor: "{colors.ink}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 5px 10px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 20px

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  product-tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# Muuto Design System

## Overview

Muuto is a Copenhagen furniture brand that treats its digital presence the same way it treats a well-made lamp: nothing extraneous, every element considered. The canvas is a warm parchment off-white (`{colors.background}`) — not the clinical white of a gallery, but the calm, inhabited warmth of a Scandi apartment with good lighting. Against this resting surface, the system makes exactly three bets. The first is scale: headlines in **EuclidFlex** at 170 pixels with -6.8px tracking announce themselves like the broad face of a piece of furniture. The second is geometry: `{rounded.none}` across the board, a system of pure right angles that connects directly to the craft tradition (joinery, not curves). The third is contrast: electric chartreuse (`{colors.primary}`) and forest teal (`{colors.surface-teal}`) land as sudden, charged interruptions in what would otherwise be a monochrome canvas — the single loud note against a Nordic silence.

The typography is a study in deliberate pairing. **EuclidFlex** (a bespoke geometric grotesque, with `DM Sans` as the closest Google fallback) handles everything structural: the massive editorial displays, the UI buttons, the nav, the captions. Then, in editorial moments — a designer quote, a long-form story passage — **Spectral** appears: a refined, humanist serif with old-book warmth. The switch is infrequent and purposeful, the serif arriving the way a cashmere throw arrives on a Muuto sofa: not essential, but exactly right.

Interaction is restrained, almost puritanical. Buttons are all outlined or ghost-style with zero border-radius and `9px 20px` padding, relying on color-swap rather than depth to signal state. The product tile hover reveals the warm greige `{colors.surface-greige}` beneath, a 0.25s ease that feels like brushing a hand across upholstery. Motion durations cluster at 0.2s–0.3s with a simple `ease` curve — movement is acknowledged, never performed.

**Key Characteristics:**
- Warm parchment canvas (`{colors.background}`) — not clinical white; the visual temperature of inhabited Scandinavian space
- **EuclidFlex** at 170px / weight 500 / -6.8px tracking for display: furniture-scale typography
- Zero border-radius across all UI elements (`{rounded.none}`) — right-angle geometry consistent with craft and joinery
- Electric chartreuse (`{colors.primary}`) as the single loud accent: CTAs on dark sections, editorial pop
- Deep forest teal (`{colors.surface-teal}`) as a secondary editorial surface — not an accent but a canvas swap
- **Spectral** serif appears only in editorial body copy — the typographic equivalent of the soft material moment
- Product tile hover state reveals warm greige (`{colors.surface-greige}`) at 0.25s ease
- All buttons are outlined / ghost style with color-swap hover — no fills on light-surface defaults
- Full-bleed black editorial sections (`{colors.surface-dark}`) where chartreuse and white text operate
- 160px section spacing (`{spacing.3xl}`) creating Scandinavian breathing room between content zones

## Colors

### Surface & Canvas
- **Warm Parchment** (`{colors.background}`): The dominant Muuto canvas. Not white — a body-temperature off-white that reads as "room" rather than "screen."
- **Pure White** (`{colors.surface}`): Product imagery fields and clean section bands.
- **Editorial Black** (`{colors.surface-dark}`): Full-bleed campaign and editorial sections where chartreuse CTAs and white type operate.
- **Forest Teal** (`{colors.surface-teal}`): The third surface option — deep, muted, the color of a Danish forest in November. Used for section backgrounds that need to be distinctive without being loud.
- **Warm Greige** (`{colors.surface-greige}`): CSS variable `--product-tile-bg-color-hover`; the warm mid-tone that surfaces on product card hover.

### Ink / Text
- **Black** (`{colors.ink}`): The primary graphic and text color — absolute, undiluted.
- **Near-Black** (`{colors.ink-secondary}`): Body and link text; the shade that lives in paragraphs.
- **White** (`{colors.ink-on-dark}`): All text on black and teal surfaces.
- **Warm Greige Muted** (`{colors.ink-muted}`): Low-emphasis supporting text.

### Brand Accents
- **Electric Chartreuse** (`{colors.primary}`): The Muuto accent. Arrives in campaign sections, editorial CTAs on dark backgrounds, and promotional badges. Never scattered — deployed as a charged single note.
- **Golden Olive** (`{colors.primary-dim}`): The muted, daylight-calibrated cousin of chartreuse; used for button outlines and editorial link text on light surfaces.
- **Forest Teal** (`{colors.surface-teal}`): Functions as both a surface and an accent — the deep campaign color.

### State & Borders
- **Black Hairline** (`{colors.border}`): The universal border — button outlines, dividers, input edges. One weight (1px), one color.
- **Light Separator** (`{colors.border-subtle}`): Near-invisible dividers between content sections. Original value was `rgba(0,0,0,0.1)` — flattened to opaque for the Google spec.
- **Shadow Neutral** (`{colors.shadow-neutral}`): The lift shadow behind product modals and floating panels.

## Typography

### Font Family
- **Primary**: `EuclidFlex` (self-hosted geometric grotesque, multiple weights from Light to Bold with Italic cuts), with fallbacks `DM Sans, Helvetica, Arial, sans-serif`. The single typeface for all structural use: display, UI, navigation, captions.
- **Editorial Serif**: `Spectral` (self-hosted humanist serif), with fallbacks `Georgia, serif`. Used exclusively for long-form editorial body copy and designer quotes.
- **Weight range**: Light → Regular (400) → Medium (500) → Bold (700). Display and headings use Medium (500) exclusively; body alternates between 400 and 500; buttons are 500.
- **Tracking**: Aggressively negative at display scale (-6.8px at 170px), moderately negative through the hierarchy, resetting near zero for body text.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 170px / 500 / -6.8px — editorial campaign headlines, furniture-scale text |
| `display` | 100px / 500 / -4.5px — section hero titles |
| `heading-section` | 50px / 500 / -2px — major section headings |
| `heading-sub` | 30px / 500 / -0.9px — sub-section and product category headings |
| `body-large` | 26px / 400 / -0.32px — lead paragraphs and featured descriptions |
| `body` | 16px / 400 / -0.32px — standard body copy |
| `body-serif` | 21px Spectral / 400 — editorial passages and designer quotes |
| `nav-link` | 20px / 500 / -1px — navigation, uppercase labels |
| `button-ui` | 16px / 500 / -0.24px — button and UI element text |
| `label` | 12px / 500 / -0.6px — uppercase category tags, small navigation |
| `caption` | 12px / 400 / -0.32px — product metadata, pricing, supplementary info |

### Principles
- **Scale is statement**: the 170px headline at weight 500 is not for reading across the room — it is the furniture, the dominant object on the page. Treat it as a graphic element first, text second.
- **Negative tracking owns the personality**: every display size carries -4px to -7px tracking. Loosening this to neutral makes the design generic. The compression is the voice.
- **Serif appears once per context**: Spectral earns its presence in editorial passages. Never use it for UI, labels, or headings — EuclidFlex carries those without exception.
- **Uppercase for labels and nav**: `{typography.nav-link}` and `{typography.label}` use `text-transform: uppercase` in practice — it signals category and wayfinding without requiring a different font.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 5px (observed as the most frequent increment in the site). The system leans into very generous inter-section spacing — `{spacing.3xl}` (160px) between major zones creates the breathing room that makes the scale of the typography feel composed rather than overwhelming.

### Grid & Container
- Maximum content width: approximately 1440px centered
- Navigation is sticky at 20px side padding; content regions use 20–40px horizontal gutters
- Product grids: 4-column on desktop, collapsing through 2 → 1 on mobile
- Editorial layouts use full-bleed sections with no side padding — the color or image extends wall-to-wall, content floats inside at constrained width

### Whitespace Philosophy
- **Silence is the design**: the parchment canvas is almost always the dominant element. Content is islands in a warm sea.
- **160px section gaps**: the space between sections is as considered as the sections themselves — this is not padding, it is composition.
- **Typography-as-object**: the massive display text takes up what a decorative image would take up in a lesser system. Space is preserved by making text fill space graphically.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; black 1px hairline border or none | Default state for all content, buttons, inputs |
| Hover Lift (Level 1) | `0 2px 10px -3px {colors.shadow-neutral}` | Product cards on hover; subtle furniture-like lift |
| Panel Shadow (Level 2) | `0 0 12px 2px` neutral | Floating navigation panels, dropdowns |
| Modal Overlay (Level 3) | `0 0 18px 0` at 20% `{colors.shadow-soft}` | Modal dialogs and overlays |
| Focus Ring | 1px solid `{colors.border}` outline | Keyboard focus on inputs; no glow, just a crisp line |

**Shadow Philosophy**: Muuto's surfaces are essentially flat. The few shadows that appear are warm-neutral (greige-grey, not blue-tinted) and used only when something genuinely floats: a product card lifting on hover, a navigation panel appearing above content, a modal demanding attention. No decorative shadows on static elements. The border does the work that shadows do elsewhere.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything: buttons, cards, inputs, images, badges — the dominant geometry |
| `micro` | 2px | Occasional functional chip (cookie banners, filter toggles) |
| `pill` | 9999px | Carousel navigation buttons only |

Muuto's shape language is binary: virtually everything is a hard right angle. The only exception is the carousel pagination controls (pill-shaped `{rounded.pill}` because they are circular in the furniture-photography carousel). This is not minimalism as aesthetic — it is geometry as material honesty. The furniture has corners. The digital system has corners. The alignment is intentional.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants
- **`button-primary`** — Black fill (`{colors.ink}`), white text, zero radius. The default action on light-surface sections. On hover, flips to chartreuse (`{colors.primary}`) fill — the reveal of the accent underneath the restraint.
- **`button-outlined`** — White fill, golden-olive (`{colors.primary-dim}`) text and border, zero radius. Used in editorial sections on light backgrounds where black fill would be too heavy.
- **`button-chartreuse`** — Chartreuse fill (`{colors.primary}`), black text, zero radius. The campaign CTA — appears on black sections where this is the most charged mark on the page.
- **`button-teal`** — Forest teal fill (`{colors.surface-teal}`), white text, zero radius. Section-specific CTA on teal campaign panels.
- **`button-ghost`** — Parchment fill (`{colors.background}`), black text, black 1px border, zero radius. The quietest action variant.

### Cards
- **`card`** — White surface, no radius, 20px padding. Product tiles in the shop grid. The `card-hover` state reveals warm greige (`{colors.surface-greige}`) at a 0.25s ease — the page's most tactile interaction moment.

### Inputs
- **`input`** — Transparent background, zero radius, 1px black border on three sides (left, bottom, right — the left edge is open by convention). Focus state: a crisp 1px black outline ring with no fill change.

### Navigation
- **`nav-bar`** — Parchment background, black wordmark at left, medium-weight uppercase links. Transitions over 0.4s on background-color and color when sticky state engages on scroll.

### Badges
- **`badge`** — Chartreuse fill, black text, zero radius. Campaign and promo labels — used sparingly to preserve chartreuse's charge.
- **`product-tag`** — White fill, near-black caption text, zero radius. Material labels (oak, wool, etc.) and product category tags.

## Do's and Don'ts

### Do
- Keep the canvas parchment (`{colors.background}`) — this is not a neutral, it is the warmth that holds the whole system's temperature
- Use the 170px display type (`{typography.display-hero}`) as a graphic object that fills the compositional role a large image would fill
- Let black (`{colors.ink}`) do most of the work: borders, text, button fills on light backgrounds
- Reserve chartreuse (`{colors.primary}`) for campaign moments and dark-surface CTAs only — if it appears on the parchment canvas, it should be the single loudest mark on the screen
- Apply `{rounded.none}` to every interactive and content element — the right-angle geometry is load-bearing
- Use `{spacing.3xl}` (160px) between major content zones — the silence is part of the design
- Include Spectral (`{typography.body-serif}`) only in editorial copy: designer stories, manifesto passages, long-form descriptions
- Run uppercase tracking on navigation and label tokens: it signals wayfinding without adding a new typeface

### Don't
- Don't introduce border-radius beyond `{rounded.micro}` (2px) on any surface, button, or card — rounded corners undermine the furniture-craft geometry
- Don't scatter chartreuse (`{colors.primary}`) as small accents across the parchment canvas — it reads as noise; deploy it as a dominant block or not at all
- Don't lighten the display tracking — the -6.8px at 170px is the personality of the type; neutral tracking makes it generic
- Don't use Spectral for headings, UI, or navigation — it lives only in editorial body passages
- Don't introduce shadows on static elements; the hairline border (`{colors.border}`) does the structural work that shadows do elsewhere
- Don't add a second accent color — the golden olive (`{colors.primary-dim}`) and chartreuse (`{colors.primary}`) are the same hue family; the system is not designed for a third accent
- Don't reduce the inter-section spacing below `{spacing.2xl}` (80px) — compression reads as a different brand entirely

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <425px | Single column; display type scales 170px → ~40px; navigation collapses to hamburger |
| Mobile Large | 425–599px | Two-column product grid begins; display type continues scaling |
| Tablet | 600–724px | Three-column product grid; editorial sections stay full-bleed |
| Tablet Large | 725–895px | Content containers gain horizontal breathing room |
| Desktop | 896px+ | Full 4-column product grid; full-scale 170px display type; max ~1440px container |

### Touch Targets
- Buttons are `9px 20px` padding minimum — adequate for desktop; on mobile, touch targets expand via increased vertical padding
- Product tiles are fully tappable card regions
- Navigation items use generous padding in the collapsed hamburger menu

### Collapsing Strategy
- **Display type**: scales down dramatically from 170px to approximately 36–40px on mobile — the type remains the largest element on the page at every breakpoint
- **Product grid**: 4 columns → 2 → 1 as viewport narrows; the greige hover state becomes a tap-visible selected state on touch devices
- **Editorial sections**: full-bleed black and teal sections maintain their full-bleed quality at all widths; content inside reflows to single column
- **Navigation**: persistent desktop horizontal nav collapses to a hamburger icon at approximately 896px; the sticky parchment bar remains visible

### Image Behavior
- Product photography fills its tile with `object-fit: cover` and no rounding, consistent with the zero-radius geometry
- Editorial hero images bleed full-width with the display headline overlaid or adjacent
- Carousel images transition at 0.55s ease (the modal-scale duration in the motion data)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Warm parchment (`{colors.background}`)
- Text: Black (`{colors.ink}`)
- Brand accent: Electric chartreuse (`{colors.primary}`) — use sparingly
- Editorial surface: Forest teal (`{colors.surface-teal}`)
- Campaign surface: Black (`{colors.surface-dark}`)
- Border: Black hairline (`{colors.border}`)
- Hover state: Warm greige (`{colors.surface-greige}`)

### Example Component Prompts

- "Create a Muuto hero section: warm parchment (`{colors.background}`) canvas, a 170px EuclidFlex headline at weight 500 and -6.8px tracking in black (`{colors.ink}`), a full-bleed product photograph at right with no rounding (`{rounded.none}`), and 160px vertical padding above the next section using `{spacing.3xl}`"
- "Build a Muuto primary button: black fill (`{colors.ink}`), white text in `{typography.button-ui}` (16px / 500 / -0.24px), zero border-radius (`{rounded.none}`), `9px 20px` padding, hover state flips to chartreuse fill (`{colors.primary}`) with black text — the reveal of the accent underneath the restraint"
- "Render a Muuto product card: white surface (`{colors.surface}`), no rounding, product image top, EuclidFlex 16px caption text in near-black (`{colors.ink-secondary}`), no shadow in default state; on hover background transitions to warm greige (`{colors.surface-greige}`) over 0.25s ease"
- "Design a Muuto campaign section: full-bleed black background (`{colors.surface-dark}`), a 100px EuclidFlex heading in white (`{colors.ink-on-dark}`), a chartreuse CTA button (`{colors.primary}` fill, `{on-primary}` black text, `{rounded.none}`, `9px 20px`) — this is where the accent lives"
- "Create a Muuto editorial passage: Spectral serif (`{typography.body-serif}`) at 21px / weight 400 / line-height 1.2 for the designer quote, on the warm parchment canvas (`{colors.background}`), with a 160px `{spacing.3xl}` margin above and below to give the text room to breathe"
- "Build a Muuto navigation bar: parchment background (`{colors.background}`), EuclidFlex uppercase medium-weight nav links (`{typography.nav-link}` 20px / 500 / -1px) in black (`{colors.ink}`), no border-radius anywhere, 0.4s ease transition on background-color for sticky state engagement"

### Iteration Guide

1. Start on warm parchment (`{colors.background}`). If the canvas is pure white or grey, it reads as a different brand. The warmth is non-negotiable.
2. Typography is the primary decoration: put the 170px headline in place before any images or color. If the type works, the page works.
3. Keep everything at `{rounded.none}` — the moment any card or button rounds beyond 2px, the furniture-craft geometry breaks.
4. Chartreuse (`{colors.primary}`) should appear once, as a dominant mark. If it appears more than once on a light-surface view, consolidate or remove.
5. Use black (`{colors.ink}`) for borders, button fills on light surfaces, and all structural lines. It does the job of three different neutrals in other systems.
6. Set major section gaps at `{spacing.3xl}` (160px). If sections feel crowded, add space before adding any other element.
7. Introduce teal (`{colors.surface-teal}`) as a full-section background swap, not as a spot color within a section.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Muuto. Brand names and trademarks belong to their respective owners.