---
name: Muuto
description: "This site is a prime example of high-end, design-led e-commerce that successfully blends product presentation with editorial storytelling."
version: alpha

colors:
  background: "#EFEDEB"
  primary: "#282828"
  secondary: "#FFFFFF"
  tertiary: "#F6ED6C"
  neutral: "#685D20"
  bg-soft: "#F6ED6C"
  line: "rgba(0,0,0,0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 100.8px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.88px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "-0.32px"
  caption:
    fontFamily: transitional-serif
    fontSize: 12px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.32px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A premium Scandinavian furniture brand celebrating design perspectives through bold typography and editorial photography.

*A high-end furniture showroom with a gallery-like presentation.*

## Colors

A sophisticated, muted base palette with high-contrast dark text and a signature vibrant yellow accent for emphasis.

- **Background (`#EFEDEB`)** — uses `bg` token
- **Primary text (`#282828`)** — uses `ink` token
- **Secondary text (`#FFFFFF`)** — uses `ink-soft` token
- **Accent (`#F6ED6C`)** — uses `accent` token
- **Muted (`#685D20`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.15)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** transitional-serif

- Headlines are set in a geometric sans-serif with tight tracking and mixed case.
- Body text uses a transitional serif for a refined, editorial feel.
- Navigation and labels use all-caps geometric sans-serif.

## Layout

Asymmetrical, editorial grid with overlapping image and text blocks.

*Rhythm:* A flexible spacing system based on 4px increments, with generous gutters (20-24px) and distinct section padding.

## Elevation & Depth

- Borders: Subtle 1px black borders at low opacity for navigation and structural divisions.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimal ghost buttons with thin borders.
- **card:** Asymmetrical layout cards combining large imagery with typography.
- **input:** Clean, minimal search input.
- **hero:** Full-bleed hero with oversized typography, background color blocks, and floating product imagery.

## Do's and Don'ts

**Don't:**
- Don't use saturated, primary colors — screenshot shows muted, earthy tones and a single vibrant yellow accent.
- Don't use decorative or script fonts — screenshot shows geometric sans and transitional serif fonts.
- Don't center-align all content — screenshot shows a mix of left-aligned text and asymmetrical grid layouts.
- Don't use drop shadows on UI elements — screenshot shows flat design with no visible shadows.
- Don't create dense, cluttered layouts — screenshot shows generous white space and editorial pacing.
- Don't use standard, boxed card designs — screenshot shows overlapping elements and asymmetric compositions.

---

## System Prompt (paste into AI agent)

```
This is a premium Scandinavian furniture website (Muuto) with a strong editorial and gallery-like aesthetic. It uses a sophisticated, muted palette of off-whites (#EFEDEB), dark charcoal (#282828), and a signature vibrant yellow (#F6ED6C) for accents. Typography features geometric sans-serif for display and navigation, paired with a transitional serif for body text, both with tight letter-spacing. The layout is asymmetrical and generous with white space. Critical donts: avoid saturated primary colors, do not use decorative fonts, and avoid cluttered, centered layouts.
```