Moooi

Overview

Moooi embodies a philosophy of 'Creative Luxury'—a refined, editorial aesthetic that prioritizes craftsmanship, storytelling, and poetic restraint. The design system reflects this through a sophisticated minimalist approach: a neutral, cream-to-white surface palette anchored by deep black accents, complemented by strategic use of teal and burgundy as secondary brand colors. The brand personality is intellectually confident yet approachable—precise, curated, never ostentatious. The UI communicates through whitespace, refined typography (Tiempos Fine for editorial moments, Gill Sans for functional clarity), and restrained geometric forms. Every interaction feels intentional, like turning the page of a beautifully designed book.

The voice is editorial and poetic without being flowery: 'Peaks Sofa by Yves Béhar' (not 'Discover the stunning Peaks Sofa'). Tone: calm, authoritative, occasionally provocative. The brand celebrates the intersection of innovation and tradition, speaking to designers, architects, and collectors who understand that true luxury is invisible—it's in the detail, the material, the silence between words. Example sentence in brand voice: 'Each collection opens a new chapter in how we live.'

Colors

The Moooi color system is built on a foundation of refined neutrals—white (#ffffff) as the primary surface, with a carefully calibrated cream-to-beige stack (surface-container-lowest: #f7f4ef, surface-container: #eeece7, surface-container-high: #e0e0e0) providing subtle visual hierarchy without visual noise. Black (#000000) serves as the primary accent and is used for all primary CTAs, text, and brand-defining moments; it is never softened or lightened for interactive states—instead, the primary-container (#3d3d3d) provides a hover state. Secondary colors—teal (#37b79f) and green (#2dc269)—are reserved for status indicators, highlights, and editorial callouts; they appear sparingly to maintain brand distinctiveness. Tertiary burgundy (#ba192c) is used for error states and occasional accent

Typography

The type system is built on two foundational families: Tiempos Fine (serif, editorial, for headlines and display moments) and Gill Sans (sans-serif, functional, for body and UI labels). Tiempos Fine is reserved for display (60px, 400 weight, -0.02em tracking), headline-lg (40px, 400 weight), and headline-md (28px, 400 weight)—these moments are rare and precious, used only for hero statements and section introductions. Gill Sans carries all body copy (body-lg: 18px / 28px, body-md: 16px / 24px, both 400 weight) and functional labels (label-sm: 12px, 500 weight, 0.05em tracking for uppercase UI elements). Sangbleu Sans is introduced for primary CTAs (label-md: 15px, 400 weight, 0.02em tracking) to signal interactive moments with a distinct typographic voice. All headlines use tight line-heig

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 1500px, scaling responsively across mobile (320px), tablet (768px), and desktop (1024px+). The spacing scale is semantic: unit (8px) as the base, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutter spacing is consistently 24px on desktop, reducing to 16.67vw on tablet and 8.33vw on mobile to maintain proportional breathing room. The container-max-width of 1500px ensures content never becomes uncomfortably wide on ultra-large displays. Whitespace is treated as a design material: sections are separated by lg spacing (40px) minimum, cards use md padding (24px) internally, and text blocks maintain 1.5

Elevation & Depth

Depth in Moooi is achieved through subtle, restrained shadow and layering rather than dramatic visual separation. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for cards and lifted surfaces, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Modals use a semi-transparent dark overlay (rgba(0, 0, 0, 0.4)) behind the modal-content to create visual separation without blur effects. Focus states use a 5px inset border (inset 0 0 0 5px rgba(255, 255, 255, 0.2) outer ring) combine

Shapes

The shape philosophy is 'Architectural Precision'—minimal, functional, and refined. Border-radius values are deliberately small and consistent: sm (2px) for subtle rounding on inputs and small UI elements, DEFAULT (3px) for standard buttons and cards, md (4px) for slightly more generous rounding on secondary surfaces, lg (6px) for primary CTAs and elevated cards, and xl (8px) for modals and large containers. The full (9999px) radius is used sparingly for badges and circular avatars. This restrained approach maintains the brand's minimalist, editorial character—rounded corners are present but n

Components

Action Elements Buttons are the primary interactive affordance. The primary button uses black background (#000000) with white text, Sangbleu Sans at 15px / 400 weight, 0.02em tracking, 12px vertical / 17.7778px horizontal padding, and lg border-radius (6px). On hover, the background shifts to primary-container (#3d3d3d) while text remains white—no shadow is added, maintaining flatness. Focus state adds a 2px solid outline in primary (#000000) with 2px offset. Secondary buttons use a white background with a 1px border in outline (#b9b9b9), on-surface text (#1f1f1f), and body-md typography. On hover, the background shifts to surface-container-high (#e0e0e0). All buttons use a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition for background-color and border-color changes. Disabled buttons red

Do's and Don'ts

**Do**

• Do use Tiempos Fine sparingly—only for hero headlines and editorial moments; overuse dilutes its impact and breaks the minimalist aesthetic.
• Do maintain the cream-to-white surface hierarchy: use surface (#ffffff) for primary content areas, surface-container (#eeece7) for secondary groupings, and surface-container-high (#e0e0e0) for tertiary elements.
• Do apply lg spacing (40px) between major sections and md spacing (24px) between related content blocks to create visual rhythm without visual clutter.
• Do use black (#000000) as the primary interactive color for all CTAs, focus states, and brand-defining moments—never soften it to gray for hover states.
• Do reserve secondary colors (teal #37b79f, green #2dc269, burgundy #ba192c) for status indicators, editorial callouts, and accent moments; they should appear sparingly to maintain distinctiveness.

**Don't**

• Don't use rounded corners larger than lg (6px) on buttons or cards—the brand's luxury positioning requires restraint; excessive rounding reads as casual or consumer-grade.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) or use blur effects on surfaces; the aesthetic is editorial flatness with intelligent layering, not depth-heavy skeuomorphism.
• Don't mix Tiempos Fine and Gill Sans in the same headline or body block—each family has a distinct role; Tiempos is editorial, Gill Sans is functional.
• Don't use the full color palette on a single page; the brand is built on restraint—limit primary (#000000), secondary (#37b79f), and tertiary (#ba192c) to one or two moments per viewport.
• Don't reduce line-height below 1.5 on body text or below 1.16 on headlines—the brand's editorial character requires generous leading for legibility and visual authority.