Mizzuni

Overview

Mizzuni is a curated design platform that transforms interior spaces through a philosophy of 'Architectural Warmth'—blending minimalist geometry with tactile, human-centered materials. The brand serves design professionals and discerning homeowners who view interiors as expressions of character rather than trend. The aesthetic is deliberately restrained: a warm, off-white canvas (#f6f1ec) paired with deep charcoal accents (#1d1d1d) and warm tertiary tones (#a67c52), creating a gallery-like environment where furniture and spatial planning take center stage. The UI evokes the precision of a design studio—clean typography in Marfa and BeausiteSlick, generous whitespace (40px section gaps), and photography-forward layouts that prioritize the work over decoration.

The brand voice is authoritative yet approachable: precise, unrushed, and deeply knowledgeable. Mizzuni speaks in the language of spatial design—'Planung, Visualisierung und Umsetzung' (Planning, Visualization, Implementation)—with vocabulary drawn from architecture and craft. The tone avoids hyperbole; instead, it grounds claims in tangible outcomes: 'Individualanfertigungen bis hin zu Designmöbeln ausgewählter Marken' (from bespoke commissions to curated designer pieces). Example sentence in brand voice: 'Räume mit Charakter entstehen durch bewusste Materialwahl und zeitlose Proportionen'—spaces with character emerge from intentional material selection and timeless proportion.

Colors

The Mizzuni color system operates on a principle of 'Restrained Contrast'—a warm, light foundation (#f6f1ec) anchored by a sophisticated dark primary (#1d1d1d) that commands attention without aggression. Primary (#1d1d1d) is deployed on all interactive elements: buttons (border-radius: 32px, padding: 0 28px), navigation links, and focus states. It represents the brand's design authority and appears in approximately 15% of the UI, ensuring visual hierarchy without visual noise. Secondary (#4e8ba2), a muted blue-gray, is reserved for supporting information, secondary CTAs, and contextual accents—it bridges the warmth of the primary palette with cooler, more analytical contexts. Tertiary (#a67c52), a warm brown, echoes the material palette of the furniture being showcased and appears in badge

Typography

The typography system pairs two distinct typefaces to create visual rhythm: BeausiteSlick-Light (400 weight, -0.02em letter-spacing) handles all display and headline layers (96px down to 56px), delivering the brand's editorial sophistication and gallery-like precision. Marfa-Regular (400 weight) manages body copy, labels, and UI text from 24px down to 13px, providing warmth and legibility in dense information contexts. The hierarchy is deliberately shallow—only 6 levels—reflecting the brand's minimalist ethos: display (96px, -0.02em) for hero statements, headline-lg (56px) for section breaks, headline-md (32px) for subsections, title-lg (24px) for card titles, body-lg (18px, 28px line-height) for primary copy, and label-md (15px) for UI labels and navigation. Body text uses 28px line-heigh

Layout

Mizzuni employs a fluid, 12-column grid system with a container max-width of 1280px, allowing content to breathe on desktop while maintaining focus on large screens. The page rhythm is governed by a lg spacing token (40px) for section separation, creating visual breathing room that mirrors the gallery aesthetic. Gutter spacing (24px) is applied to all grid columns, ensuring consistent horizontal rhythm. The hero section occupies the full viewport with generous padding (120px vertical, 32px horizontal on cards), while subsequent sections use md spacing (24px) for internal card padding and sm spacing (12px) for input fields and list items. Container max-width is 991px for content-heavy sections, allowing photography and product showcases to dominate without overwhelming the layout. Whitespac

Elevation & Depth

Depth in Mizzuni is achieved through subtle shadow and surface-color layering rather than dramatic drop shadows. The elevation system uses three levels: Level 1 (Base) is the surface background (#f6f1ec) with no shadow. Level 2 (Standard Card) applies box-shadow: 2px 2px 6px rgba(0,0,0,0.3) and a surface-container-low background (#f0ebe6), creating a gentle lift that suggests containment without visual aggression. Level 3 (Elevated/Modals) uses box-shadow: 0 16px 40px rgba(0,0,0,0.12) with surface-container-highest (#d2cdc8), reserved for modals, overlays, and primary focus areas. All shadows

Shapes

The shape philosophy is 'Precision with Warmth'—sharp geometric forms softened by selective rounding. Buttons use border-radius: 32px (full pill shape, {rounded.full}), creating a friendly, approachable CTA that contrasts with the angular furniture photography. Cards and containers use border-radius: 4px ({rounded.DEFAULT}), maintaining architectural crispness and echoing the grid-based layouts of interior design drawings. Input fields use the same 4px radius, ensuring visual consistency across interactive surfaces. Secondary buttons and list items use border-radius: 12px ({rounded.md}), a mid

Components

Action Elements Buttons are the primary interaction mechanism and use two distinct styles. Primary buttons (button-primary) apply backgroundColor: {colors.primary} (#1d1d1d), textColor: {colors.on-primary} (#ffffff), border-radius: 32px, padding: 0 28px, height: 48px, and typography: {typography.label-md} (15px, 400 weight). On hover (button-primary-hover), the background transitions to {colors.primary-container} (#4e4e4e) with transition: background-color 200ms ease-out, maintaining the same text color and dimensions. Secondary buttons (button-secondary) use backgroundColor: {colors.surface-bright} (#ffffff), textColor: {colors.primary} (#1d1d1d), border: 1px solid {colors.outline-variant} (#b4b4b4), border-radius: 12px, padding: 12px 20px, and height: 44px. On hover, the background s

Do's and Don'ts

**Do**

• Do use primary (#1d1d1d) exclusively for CTAs, focus states, and primary navigation—it is the brand's authority color and must remain reserved for high-intent interactions.
• Do maintain 40px (lg spacing) between major sections and 24px (md spacing) within cards to preserve the gallery-like breathing room that defines the brand.
• Do apply transition: all 200ms ease-out to all interactive state changes (hover, focus, active) to ensure smooth, professional motion that feels intentional rather than jarring.
• Do use BeausiteSlick-Light for all display and headline text (96px down to 56px) and Marfa-Regular for body and UI text to maintain the editorial hierarchy that distinguishes Mizzuni from commodity design platforms.
• Do pair dark primary (#1d1d1d) buttons with white text (#ffffff) and light secondary buttons with dark text (#1d1d1d) to ensure WCAG AA contrast (minimum 4.5:1) across all interactive elements.

**Don't**

• Don't use secondary (#4e8ba2) or tertiary (#a67c52) as primary CTA colors—they are supporting accents and will dilute the brand's visual authority.
• Don't apply border-radius greater than 4px to cards or input fields; the architectural precision of the brand depends on minimal rounding for structural elements.
• Don't use box-shadow values greater than {elevation.lg} (0 16px 40px rgba(0,0,0,0.12)) on any element except modals—excessive shadow depth contradicts the gallery aesthetic.
• Don't center-align body copy (body-lg, body-md) in multi-line contexts; left-align with generous left margin (24px) to maintain editorial hierarchy and reading comfort.
• Don't apply color transitions or animations to text—only animate background-color, border-color, and opacity to maintain visual stability and readability.