Croisserie Artisan Bakery

Overview

Croisserie Artisan Bakery embodies Scandinavian Minimalism—a design philosophy that strips away ornamentation to reveal the essence of craft and quality. The brand serves discerning customers who value artisanal production, transparency, and understated elegance. The UI evokes a sense of calm professionalism, mirroring the quiet confidence of a master baker's workspace. Every interaction feels deliberate and purposeful, never rushed or cluttered.

The voice is warm yet precise: knowledgeable without pretension, inviting without excess. Sentences are direct and honest—'Fresh croissants baked daily' rather than 'Artisanal delights crafted with passion.' The brand personality balances approachability with expertise, speaking to both loyal customers and curious newcomers. Example: 'Our laminated dough rests for 18 hours. It's worth the wait.'

Colors

The color system is rooted in monochromatic sophistication with strategic depth. Primary (#121212) is the deep charcoal used on all CTAs, navigation links, and active states—it commands attention without aggression. On-primary (#ffffff) ensures maximum contrast for accessibility and legibility at 16px body text. The surface stack progresses from pure white (#ffffff) through subtle grays (#f3f3f3, #e9ecef, #d0d0d0), creating a hierarchy of containment without relying on color. Secondary (#6c757d) is a warm mid-gray reserved for disabled states, hints, and secondary information. Tertiary (#f0f9fa) is a barely-there off-white used for hover states and subtle backgrounds. Error (#d32f2f) is a restrained red for validation feedback. All surfaces use rgba(18, 18, 18, 0.75) for body text to reduc

Typography

The type system uses a single typeface—Assistant—across all scales, reinforcing the minimalist aesthetic. Display (56px, 400 weight, -0.02em tracking) anchors hero sections and major announcements. Headline-lg (40px, 400 weight) is used for page titles and section breaks. Body-md (16px, 400 weight, 0.06rem tracking) is the workhorse for product descriptions and navigation. The consistent 400 weight throughout creates a calm, unadorned reading experience; 700 weight is reserved for emphasis within body copy only. Line-height is set to calc(1 + 0.8 / var(--font-body-scale)) for optimal readability at 16px base. Small labels (12px) receive 0.05em letter-spacing to improve legibility at reduced sizes. Apply text-shadow: none; to all text—the design rejects depth effects in favor of clean, flat

Layout

The layout uses a 12-column grid with a max-width of 1280px (120rem), maintaining generous margins on desktop (50px horizontal padding on header). Mobile uses full-width containers with 24px gutters. Section spacing alternates between 27px (mobile) and 36px (desktop) padding-top/bottom, creating a breathing rhythm that prevents visual fatigue. The page-width variable is set to 120rem with 0rem margin, allowing content to expand fully while maintaining a sense of containment. Cards and content blocks use 40px vertical padding with 0px horizontal padding, letting text sit flush against the viewport edge on mobile. Whitespace is treated as a design element—never fill empty space with decoration. The grid-desktop-horizontal-spacing is 8px, creating tight but readable product card layouts.

Elevation & Depth

Depth is achieved through subtle shadows and border treatments, never through color or blur. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for micro-interactions like hover states on list items; md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdown panels and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like notifications. Buttons use no shadow by default (--buttons-shadow-opacity: 0.0), relying instead on 1px borders and background color shifts. Input fields use a 1px border at rgba(var(--color-foreground), 0.55) and a focus state with 0 0 0 0.1rem rgb

Shapes

The design philosophy is Architectural Sharpness—all corners are square (0px border-radius) except for badges and pills, which use 9999px (full) for maximum roundness. This creates a stark contrast: utilitarian rectangles for functional elements (buttons, inputs, cards) versus organic circles for supplementary information (badges, avatars). The badge-corner-radius is set to 4.0rem, creating a pill shape that softens the overall aesthetic without compromising the minimalist intent. Product cards, collection cards, and blog cards all use 0.0rem corner-radius, maintaining the clean-lined, gallery

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor: {colors.primary} (#121212), textColor: {colors.on-primary} (#ffffff), padding: 0px 30px, height: 48px, with a 1px solid border at {colors.primary}. On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#505050) over 200ms. button-secondary mirrors this but inverts the colors: backgroundColor: {colors.surface} (#ffffff), textColor: {colors.primary} (#121212), border: 1px solid {colors.primary}. Both use typography: {typography.label-md} (15px, 400 weight). Links in navigation use header-nav-link with textColor: {colors.on-surface}, no underline by default, and header-nav-link-active adds borderBottom: 1px solid {colors.primary} to indicate current pa

Do's and Don'ts

**Do**

• Do use 1px solid borders on buttons and inputs instead of shadows—they align with the sharp, architectural aesthetic.
• Do maintain 40px vertical padding on card sections to create breathing room; never compress content vertically.
• Do apply {colors.primary} (#121212) only to interactive elements (CTAs, active links, focus states); use {colors.on-surface-variant} (#505050) for secondary text.
• Do use Assistant 400 weight throughout; reserve 700 weight for emphasis within body copy only, never for headings.
• Do transition all color and background changes over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional interactions.

**Don't**

• Don't add border-radius to buttons, cards, or inputs—the sharp corners are essential to the Architectural Sharpness philosophy.
• Don't use drop shadows on buttons or cards; rely on 1px borders and background color shifts for visual hierarchy.
• Don't mix typefaces; Assistant is the only font family used across all scales and weights.
• Don't apply color to body text; use rgba(18, 18, 18, 0.75) for 75% opacity on dark text to reduce eye strain.
• Don't use tertiary (#f0f9fa) as a primary background; it's reserved for subtle hover states and secondary surfaces only.