St. Honoré Bakery

Overview

St. Honoré Bakery is a heritage Hong Kong confectionery brand that marries traditional pastry craftsmanship with contemporary digital commerce. The design system embodies 'Premium Minimalism with Warmth'—a sophisticated yet approachable aesthetic that celebrates the artisanal nature of baked goods through a refined purple-navy color story punctuated by warm gold and cream tones. The brand serves affluent, celebration-focused consumers seeking premium cakes, mooncakes, and seasonal pastries for life's milestones. The UI evokes a sense of indulgence and trust: clean, organized product galleries; prominent promotional banners with rich imagery; and clear, decisive call-to-action buttons in deep purple (#231e77) that command attention without aggression. Voice: warm, knowledgeable, celebratory. The brand speaks in the language of occasions—birthdays, Mid-Autumn festivals, corporate gifting—never clinical or generic. Example sentence: '聖安娜的芝士蛋糕，每一口都是傳統與創新的完美結合。' (Every bite of St. Honoré's cheesecake is a perfect fusion of tradition and innovation.)

Colors

The color palette anchors on a deep, regal purple (#231e77) as the primary accent—used exclusively on CTAs, key navigation elements, and interactive states to signal premium quality and brand authority. This primary is paired with a sophisticated secondary purple (#947de4) and tertiary indigo (#7863c8) that create a cohesive, jewel-toned hierarchy. Supporting purples (#b097ff for containers, #d4c5ff for fixed backgrounds) provide visual breathing room and accessibility contrast. The surface stack is anchored in pure white (#ffffff) with carefully calibrated grays (#f4f4f4 for container-lowest, #dedede for container-high, #7e8092 for secondary text) that maintain legibility without coldness. Accent usage: Primary (#231e77) drives all primary buttons, active states, and brand-critical links.

Typography

The type system prioritizes bilingual clarity, pairing Noto Sans TC (for Chinese) with Ubuntu (for English and numerals) to ensure consistent rhythm and legibility across both scripts. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and campaign headlines with commanding presence. Headline-lg (40px, 600 weight) frames major section titles and product category headers. Headline-md (28px, 600 weight) organizes subsections and promotional callouts. Title-lg (22px, 600 weight) labels product cards and modal headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry descriptive copy, product descriptions, and form labels with generous 28px and 24px line-heights to accommodate Chinese character density. Label-md (14px, 500 weight) and label-sm (12px, 500 weight)

Layout

The layout grid uses a 12-column fluid system with a max-width of 1280px, centering content on desktop and collapsing to single-column on mobile (< 768px). The gutter spacing is consistently 24px (md spacing unit) between grid columns, creating a rhythm that feels spacious without excess. Container padding follows the spacing scale: 24px (md) on tablet and desktop, 16px (sm) on mobile. Section separation uses lg spacing (40px) for major content blocks (hero, product grid, footer), md spacing (24px) for subsections, and sm spacing (12px) for internal component spacing. The hero section spans full-width with a 40px top/bottom padding buffer. Product grids use a 3-column layout on desktop (1280px+), 2-column on tablet (768–1279px), and 1-column on mobile. Card padding is consistently 24px (md

Elevation & Depth

Depth is conveyed through a three-tier shadow system aligned with Material Design principles. Level 1 (Base/Flat): no shadow; used for inputs, chips, and secondary UI. Level 2 (Standard Cards & Buttons): box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); applied to product cards, modals, and primary buttons in default state. Level 3 (Elevated/Hover): box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12); triggered on card hover, button active state, and modal overlays. Shadows use a soft, diff

Shapes

The shape philosophy is 'Refined Geometry'—sharp enough to feel contemporary and premium, yet rounded enough to feel approachable and human. Border-radius follows a strict scale: sm (4px) for buttons and small inputs, DEFAULT (6px) for standard form fields, md (9px) for medium containers, lg (12px) for cards and modals, xl (24px) for large promotional sections, and full (9999px) for badges and pills. Buttons use 4px radius to maintain a crisp, professional appearance aligned with the brand's premium positioning. Cards use 12px radius to soften edges without appearing playful or casual. Inputs

Components

Action Elements Buttons are the primary interaction mechanism. **Button-primary** (background: #231e77, text: white, padding: 8px 16px, height: 40px, radius: 4px, shadow: md) is used for all primary CTAs: 'Add to Cart', 'Order Now', 'Checkout'. On hover, the background darkens to #1a1560 and shadow elevates to lg (0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12)). On active/focus, background shifts to #0f0a42 with a 3px inset focus ring at rgba(35, 30, 119, 0.3). Transition duration is 0.28s cubic-bezier(0.4, 0, 0.2, 1). **Button-secondary** (background: #f4f4f4, text: #231e77, border: 1px solid #cccccc, padding: 8px 16px, height: 40px, radius: 4px) handles secondary actions like 'Continue Shopping' or 'Learn More'. Hover state applies backg

Do's and Don'ts

**Do**

• Do use the primary purple (#231e77) exclusively on CTAs and interactive elements—never on passive text or backgrounds.
• Do maintain 24px gutter spacing between grid columns and 40px section separation to create visual breathing room.
• Do apply the md shadow (0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)) to all cards and buttons in default state.
• Do use Noto Sans TC for all Chinese text and Ubuntu for English numerals and labels to ensure bilingual clarity.
• Do apply 0.28s cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive state changes (hover, focus, active).
• Do reserve 12px (lg) border-radius for cards and modals; use 4px for buttons to signal precision.

**Don't**

• Don't use secondary or tertiary purples (#947de4, #7863c8) on primary CTAs—they dilute brand authority.
• Don't apply shadows to text; use text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) only on text overlaying photography.
• Don't mix rounded and sharp corners on the same component; maintain consistent radius within a component family.
• Don't exceed 0.02em letter-spacing on body text; tighter tracking (0.01em) improves readability for Chinese characters.
• Don't use system fonts (system-ui, sans-serif); always load Noto Sans TC and Ubuntu from Google Fonts to maintain brand consistency.
• Don't apply multiple stacked shadows; each element has one clear shadow that communicates its layer in the hierarchy.