Sansaro

Overview

Sansaro is a Michelin-recognized Japanese fine-dining restaurant in Munich that embodies 'Refined Minimalism'—a design philosophy that prioritizes clarity, restraint, and the celebration of negative space. The brand serves discerning diners seeking authentic Japanese cuisine in an atmosphere of understated elegance. The UI evokes a sense of calm sophistication through a restrained palette of deep burgundy (#b91e23), warm taupe (#a79f89), and near-black (#20241f) set against clean white surfaces, creating visual hierarchy without visual noise. The emotional response is one of quiet confidence: the interface steps aside to let content and experience lead.

The brand voice is precise, respectful, and conversational—never flowery, never rushed. Sansaro speaks in the language of quality: 'Saisonal Menüs und die größte Sake-Auswahl der Stadt' (Seasonal menus and the city's largest sake selection). The tone balances Japanese cultural reverence with Bavarian directness. Typography relies on serif fonts (Shippori Mincho B1 for body, Shippori Antique B1 for display) that evoke both Japanese tradition and European print heritage. Example sentence in brand voice: 'Reservieren Sie einen Tisch für ein Abendessen, das die Grenzen zwischen Handwerk und Kunst verwischt.'

Colors

The color system is anchored in a deep burgundy primary (#b91e23), used exclusively for call-to-action buttons, active states, and brand-critical interactive elements. This warm red-brown is the visual signature of the restaurant's premium positioning—it appears on the 'TISCH RESERVIEREN' (Reserve Table) button and all primary CTAs. Secondary colors include a warm taupe (#a79f89) for supporting UI elements, borders, and secondary text, and a near-black (#20241f) for body text and tertiary accents. The surface stack is predominantly white (#ffffff) with carefully calibrated grays for container hierarchy: surface-container-low (#f7f7f7) for subtle backgrounds, surface-container (#e6e6e6) for mid-level cards, and surface-container-high (#dddddd) for elevated surfaces. All interactive elements

Typography

The type system is built on two complementary serif families: Shippori Mincho B1 (body, headlines, labels) and Shippori Antique B1 (display/hero text). This pairing communicates heritage and craftsmanship—serif typefaces are associated with established institutions and fine dining. Display text (57.6px, fontWeight 400, lineHeight 64px) is set in Shippori Antique B1 with -0.02em letter-spacing to create visual tightness and authority; this is used for the hero 'SANSARO' heading. Body text (18.88px, fontWeight 500, lineHeight 28px) is set in Shippori Mincho B1 at a generous line-height to ensure legibility and breathing room. Labels and CTAs use fontWeight 600 with 0.02em letter-spacing to add emphasis without increasing size. On small labels over busy backgrounds (e.g., badge components), a

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on desktop while adapting fluidly to tablet and mobile breakpoints. The page rhythm is governed by a semantic spacing scale: gutter (24px) for horizontal padding, lg spacing (40px) for section separation, and md spacing (24px) for component-level padding. The hero section spans full-width with a dark overlay (rgba(32, 36, 31, 0.4)) and subtle blur (backdrop-filter: blur(2px)) to ensure text legibility over background imagery. White-space philosophy prioritizes breathing room: cards and containers maintain minimum 24px internal padding, and vertical rhythm between sections is consistently 40px or 64px. The navigation header uses 24px gutter padding and aligns to the grid. C

Elevation & Depth

Visual hierarchy in this system is achieved through subtle layering and restrained shadow use rather than aggressive depth. Level 1 (Base): white background (#ffffff) with no shadow, representing the primary surface. Level 2 (Standard Card): background #ffffff with 1px border in outline-variant (#6b7280) and elevation.sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)), used for cards, input fields, and secondary containers. Level 3 (Elevated/Modal): background #ffffff with elevation.md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) and a 1px border in outline (#6b7280), used for modals, popovers, and prominen

Shapes

The shape philosophy is 'Architectural Precision'—clean, geometric forms that reflect Japanese minimalism and European modernism. Border-radius is used sparingly and intentionally: buttons and input fields use rounded.DEFAULT (0.5rem / 8px) for a subtle softness without compromising geometric clarity; cards use rounded.md (0.75rem / 12px) for slightly more breathing room; modals and elevated surfaces use rounded.lg (1rem / 16px). Badges and pill-shaped elements use rounded.full (9999px) for maximum softness, signaling secondary or supplementary information. The hero section and full-width cont

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background-color: {colors.primary} (#b91e23), text-color: white, padding: 12px 24px, height: 48px, and rounded.DEFAULT (8px). On hover, the background transitions to {colors.primary-container} (#a72828) over 200ms with ease-in-out timing. The button-secondary variant uses a transparent background with a 1px solid border in primary color and the same text color; on hover, it fills with surface-container-high (#dddddd). Button-ghost is used for tertiary actions: transparent background, on-surface text color, and a surface-container-high fill on hover. All buttons use label-md typography (14px, fontWeight 600, letterSpacing 0.02em) for consistency.

Containers & Surfaces Cards are the prim

Do's and Don'ts

**Do**

• Do use the primary burgundy (#b91e23) exclusively for CTAs, focus states, and brand-critical interactions—never for backgrounds or body text.
• Do maintain 24px minimum padding inside cards and containers; white-space is a design tool, not wasted space.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Shippori Mincho B1 for all body and label text; reserve Shippori Antique B1 only for display-level headings (57.6px+).
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) to small labels and badges when they appear over busy or dark backgrounds.
• Do respect the 1280px container max-width to maintain optimal line-length and readability across all screen sizes.

**Don't**

• Don't use the primary color (#b91e23) for body text, backgrounds, or non-interactive elements—it must remain reserved for high-priority actions.
• Don't apply border-radius greater than 1rem (16px) to primary buttons or cards; this compromises the architectural precision of the system.
• Don't use shadows exceeding 40px blur radius or opacity greater than 0.12; this creates a floating, ethereal effect that contradicts the grounded aesthetic.
• Don't mix serif and sans-serif typefaces in the same component; maintain typographic consistency by using only Shippori Mincho B1 and Shippori Antique B1.
• Don't reduce line-height below 24px for body text (18.88px font size); this sacrifices readability for visual density.
• Don't apply multiple simultaneous animations (e.g., color + scale + shadow) on hover; limit state changes to 1–2 properties to maintain clarity and performance.