Konditorei & Café Schönemühle

Overview

Konditorei & Café Schönemühle is a heritage-driven German bakery and café brand that celebrates artisanal pastry craftsmanship and multigenerational family expertise. The design system embodies a "Warm Traditionalism" aesthetic—a deliberate fusion of classic European confectionery heritage with approachable, human-centered digital interfaces. The visual language prioritizes warmth, authenticity, and the sensory pleasure of freshly baked goods through a carefully curated palette of earth tones (warm browns #b25c2a, soft creams #f5f1ed, and accent teals #147fa9) that evoke the interior of a cozy café. The UI communicates reliability, quality, and generational trust—inviting customers to experience both the physical space and the brand's digital presence as extensions of the same welcoming, craft-focused environment.

The brand voice is conversational yet refined, grounded in German hospitality traditions. Tone markers include phrases like "Herzlich willkommen!" (Warmly welcome!), "Qualität zum Genießen" (Quality to savor), and practical, family-friendly opening hours. The vocabulary avoids corporate jargon; instead, it celebrates ingredients, techniques, and the pleasure of gathering. Example sentence in brand voice: "Wir freuen uns auf Ihren Besuch—bitte größere Mengen an Tortenstücken vorankündigen, denn unsere Kapazitäten sind begrenzt." (We look forward to your visit—please pre-order larger quantities of cake slices, as our capacity is limited.) This reflects both warmth and honest operational transparency.

Colors

The color system is rooted in the sensory palette of a traditional German bakery: warm, earthy, and inviting. **Primary (#b25c2a)** is a rich, burnt-sienna brown—the signature accent used on call-to-action buttons, active navigation states, and brand-defining interactive elements. It evokes the caramelized crust of fresh pastries and appears prominently on the hero banner overlay and primary CTAs. **On-Primary (#ffffff)** ensures maximum contrast and legibility on primary elements. **Primary-Container (#e8d4c8)** is a soft, warm beige used for secondary actions and hover states, creating a gentle visual hierarchy without jarring transitions. **Secondary (#147fa9)** is a muted teal-blue, used sparingly for accent information, links, and focus states—it provides visual relief against the war

Typography

The type system pairs serif and sans-serif families to balance heritage with clarity. **Display (Georgia, 56px, 700 weight, -0.02em letter-spacing)** and **Headline-lg (Georgia, 40px, 600 weight)** use Georgia serif to evoke classical European typography and bakery signage traditions; these are reserved for hero titles, page headings, and brand-defining moments. **Headline-md (Georgia, 28px, 600 weight)** and **Title-lg (Georgia, 22px, 600 weight)** continue the serif tradition for section headers, maintaining visual hierarchy and brand personality. **Body-lg (Droid Sans, 18px, 400 weight, 28px line-height)**, **Body-md (Droid Sans, 16px, 400 weight, 24px line-height)**, and **Label-md (Droid Sans, 14px, 600 weight, 0.02em letter-spacing)** shift to Droid Sans for body content, navigation,

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1200px, centered on the viewport. The page rhythm is governed by the spacing scale: **lg (40px)** separates major sections (hero to content, content to footer), **md (24px)** creates breathing room between cards and content blocks, and **sm (12px)** is used for internal padding within components and between inline elements. The gutter is set to 24px on desktop, creating balanced margins on either side of the container. The hero section spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over the bakery photography. Content sections use a two-column layout on desktop (main content + sidebar for opening hours and contact info), collapsing to single-column on smaller vie

Elevation & Depth

Depth is conveyed through subtle layering and soft shadows rather than dramatic contrast. **Level 1 (Base)**: The warm off-white surface (#f5f1ed) with no shadow, serving as the foundational plane. **Level 2 (Cards & Containers)**: Cards use `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` paired with a 1px border in outline-variant (#cccccc), creating a gentle lift and definition. This shadow is applied to `.card` components, navigation bars, and form inputs. **Level 3 (Modals & Elevated Content)**: Modals and popovers use `box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)`, a softer, more diffuse shadow

Shapes

The shape philosophy is **"Soft-Technical Warmth"**—rounded corners are used consistently but conservatively, avoiding both sharp edges and excessive roundness. **Buttons** use `border-radius: 0.75rem (12px)`, creating a friendly, approachable feel while maintaining a professional appearance. **Cards and containers** use `border-radius: 1rem (16px)`, slightly more generous to suggest comfort and openness. **Input fields** use `border-radius: 0.5rem (8px)`, a tighter radius that signals functional precision. **Navigation items and badges** use `border-radius: 0.75rem (12px)` for consistency wit

Components

Action Elements **Button-Primary** uses background-color: {colors.primary} (#b25c2a), text-color: white, padding: 12px 24px, height: 44px, border-radius: 12px, and box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08). On hover, the background transitions to #a04d1f (a darker brown) over 200ms with ease-in-out timing, signaling interactivity without jarring color shifts. **Button-Secondary** uses a transparent background with a 2px solid border in primary color, same padding and height, and transitions to primary-container background on hover. Both buttons use label-md typography (14px, 600 weight) for clear, scannable text.

Containers & Surfaces **Card** components use background-color: {colors.surface-container} (#f5f1ed), border-radius: 16px, padding: 24px, and a 1px border in outline-vari

Do's and Don'ts

**Do**

• Do use primary (#b25c2a) exclusively for high-priority CTAs, active navigation states, and brand-defining interactive moments—never dilute its impact by overusing it.
• Do maintain generous whitespace (minimum 40px vertical spacing between sections) to reflect the brand's calm, welcoming café atmosphere and prevent visual clutter.
• Do pair serif headings (Georgia) with sans-serif body text (Droid Sans) to balance heritage with digital clarity—never use serif for body text or sans-serif for display headings.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) to small labels overlaid on photographic backgrounds to ensure legibility without compromising the warm aesthetic.
• Do use the full M3 color surface stack (surface-dim through surface-container-highest) to create subtle depth and support future dark-mode implementations.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors—always use the warm off-white (#f5f1ed) and deep charcoal (#333333) to maintain the heritage palette.
• Don't apply box-shadows exceeding 24px blur radius or use multiple layered shadows—the aesthetic favors restraint and clarity, not theatrical depth.
• Don't round corners beyond 16px on cards or 12px on buttons—excessive rounding undermines the balance between classical typography and contemporary warmth.
• Don't use secondary (#147fa9) or tertiary (#5cd435) as primary interactive colors—reserve them for accent information, links, and status indicators only.
• Don't mix serif and sans-serif within a single heading or body paragraph—maintain clear typographic hierarchy by using serif for display/headlines and sans-serif for body/labels.