---
name: Moooi
description: "An excellent example of how a minimal, restrained design system can convey luxury and high-end design through typography and photography alone."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1F1F1F"
  secondary: "#333333"
  neutral: "#929292"
  bg-soft: "#F3F3F3"
  bg-quiet: "#F6F6F6"
  line: "rgba(146, 146, 146, 0.4)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 72px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-1.44px"
  headline:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.48px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.32px"
  small:
    fontFamily: humanist-sans
    fontSize: 12.8px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.32px"
  nav:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 5px
  lg: 10px
  pill: 40px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 48px
  3xl: 80px

---

## Overview

A premium furniture brand blending high-fashion editorial photography with a clean, minimalist e-commerce experience.

*A high-end design gallery meets a sophisticated e-commerce catalog.*

## Colors

Restrained, monochromatic palette that lets the photography and typography command attention.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1F1F1F`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Muted (`#929292`)** — uses `muted` token
- **Borders (`rgba(146, 146, 146, 0.4)`)** — uses `line` token

## Typography

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

- Use negative letter-spacing for display and headline sizes to tighten the serif.
- Maintain a consistent, generous line height for body text.
- Keep font weights mostly at 400 for a refined, editorial feel.
- Use uppercase tracking for specific utility elements.

## Layout

Full-bleed photography with overlaid UI elements and centered, narrow content containers for reading.

*Rhythm:* Generous spacing around content blocks and within modals emphasizes the premium feel.

## Elevation & Depth

- 0px 0px 0px 0px rgba(0, 0, 0, 0) inset
- 3px 3px 10px 0px rgba(0, 0, 0, 0.1)
- Borders: Thin 1px borders in muted gray (#929292) for lists and subtle separators.

## Shapes

- `sm`: 2px
- `md`: 5px
- `lg`: 10px
- `pill`: 40px

## Components

- **button:** Minimalist, often text-only or with a simple border; pill-shaped radius for primary actions.
- **card:** Clean containers with thin borders and generous padding; often overlaid on large imagery.
- **chip:** Simple rectangular elements with thin borders and subtle background color changes.
- **input:** Clean, bordered fields with minimal styling, relying on the system's typography.
- **hero:** Large, immersive photography that fills the viewport with minimalist navigation overlaid on top.

## Do's and Don'ts

**Don't:**
- Don't use bright or saturated colors — screenshot shows a strictly monochromatic palette of white, grays, and blacks.
- Don't use thick, heavy borders — screenshot shows thin 1px lines in muted gray.
- Don't use rounded corners on primary containers — screenshot shows very subtle rounding (2px-5px) or sharp corners.
- Don't use heavy sans-serif fonts — screenshot shows a preference for transitional-serif headlines and humanist-sans body text.
- Don't create dense, text-heavy layouts — screenshot shows generous whitespace and large photography.
- Don't use aggressive shadows — screenshot shows very subtle, low-opacity drop shadows.

---

## System Prompt (paste into AI agent)

```
Moooi is a premium furniture and design brand, utilizing a high-end editorial aesthetic. The design features a restrained monochromatic palette of white (#FFFFFF), soft grays (#F3F3F3), and dark ink (#1F1F1F). Typography relies on a transitional-serif for display text and a humanist-sans for body text, both with tight letter-spacing and regular weight. Layouts are clean, generous, and photography-focused, using large, immersive hero images with minimalist navigation. Critical don'ts: avoid saturated colors, use thin borders instead of heavy ones, maintain subtle border-radius, ensure generous whitespace, avoid dense text blocks, and use refined, subtle shadows. The overall tone is quiet, sophisticated, and luxurious.
```