Babusgatos

Overview

Babusgatos is a hyperlocal artisanal bread delivery platform centered on a mobile food truck serving Hungarian communities. The design philosophy embraces 'Rustic Modernism'—a deliberate fusion of handcrafted warmth with contemporary digital clarity. The aesthetic evokes a farmers' market meets a neighborhood bakery, where earthy browns (#623718 primary, #7d4e2d containers) anchor the interface against a cream-white canvas (#fff8f5), creating an inviting, tactile experience that feels both approachable and intentional. The UI celebrates locality and community through a location-first interaction model (map-centric hero, town search, arrival tracking) while maintaining the visual honesty of real bread photography and hand-drawn logotypes.

The brand voice is warm, conversational, and grounded in Hungarian cultural specificity. Tone: direct yet friendly, never corporate or distant. Vocabulary favors concrete nouns (furgon, település, készlet) and present-tense action verbs (keress, rendelj, követi). The personality is that of a trusted neighbor who knows the schedule, remembers your order, and takes pride in the craft. Example sentence in brand voice: 'Keress településed — menetrend és térkép betöltése' (Find your town—schedule and map loading).

Colors

The color system is anchored in a warm, earthy primary palette that reflects the brand's artisanal bread heritage. Primary (#623718, a deep brown) is the signature accent used on CTAs, interactive elements, and brand-critical UI; it conveys trust, craftsmanship, and the richness of baked goods. Secondary (#765a05, a muted golden-brown) and its container (#ffd87c, a warm honey-yellow) create a secondary accent layer for highlights, badges, and call-to-action buttons—the honey-yellow specifically appears on the prominent 'Kenyerek' (Breads) CTA button, reinforcing the product focus. The surface stack progresses from pure white (#ffffff, surface-container-lowest) through warm off-whites (#fbf2ed, #f5ece7) to soft beiges (#e9e1dc, surface-container-highest), creating subtle depth without harsh

Typography

The type system pairs Libre Caslon Text (serif, for headlines and brand-forward moments) with Work Sans (sans-serif, for body and UI labels), creating a 'heritage meets contemporary' visual rhythm. Display (56px, 700 weight, -0.02em tracking) anchors hero sections and major page titles with serif authority. Headline-lg (32px, 600 weight) and headline-md (24px, 600 weight) use Libre Caslon for section headings and product names, evoking the hand-lettered quality of traditional bakery signage. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) use Work Sans for descriptive copy and product details, ensuring legibility at small sizes. Label-lg (14px, 600 weight, 0.05em tracking) and label-md (12px, 500 weight) are reserved for button text, badges, an

Layout

The layout employs a 12-column grid with a fixed 1200px container max-width on desktop, collapsing to a 390px mobile viewport with full-bleed sections. Page rhythm is driven by semantic spacing: lg (40px) separates major sections (hero, product grid, tracker), md (24px) divides cards and content blocks, sm (12px) creates internal padding within components. The hero section spans full-width with a map background (min-height: 420px) overlaid with a glass-effect search card positioned absolutely at the bottom-left, creating a layered, immersive entry point. Product cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile, each with 24px gutter spacing. The tracker card (arrival estimate, status, town search) sits in a fixed right sidebar on desktop (max-width: 240px)

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast, maintaining the warm, approachable aesthetic. Level 1 (Base): no shadow; surface-container backgrounds provide subtle tonal separation. Level 2 (Standard Cards): box-shadow: 0 2px 8px rgba(30, 27, 24, 0.25)—a soft, close shadow that lifts cards 2-4px from the background. Level 3 (Elevated/Modals/Popovers): box-shadow: 0 16px 36px rgba(30, 27, 24, 0.14)—a larger, softer shadow suggesting 16-20px elevation. Glass-effect overlays (search card, tracker panel) use backdrop-filter: blur(12px) with background: rgba(255,

Shapes

The shape philosophy is 'Warm Geometric'—a balance between soft approachability and modern precision. Buttons and interactive elements use full (9999px) border-radius, creating pill-shaped affordances that feel friendly and clickable. Cards and containers use md (12px) or lg (16px) border-radius, softening corners without appearing overly rounded; this applies to product cards, input fields, and popovers. The map search card and glass-effect overlays use md (12px) to maintain visual cohesion with card-based UI. Input fields use DEFAULT (8px) for a slightly sharper, more utilitarian appearance.

Components

Action Elements Buttons are the primary interaction pattern. The primary CTA button uses secondary-container (#ffd87c) background with on-secondary-container text (#795d08), 8px 16px padding, full border-radius, and label-lg typography (14px, 600 weight, 0.05em tracking). Hover state transitions background to #ffc49f and applies transform: scale(1.02) over 0.15s ease. Secondary buttons use primary (#623718) background with on-primary text (#ffffff), 10px 14px padding, full border-radius, and label-lg typography. Ghost buttons are transparent with a 1px border at primary color, text in primary, and a hover background of rgba(98, 55, 24, 0.06). All buttons must have a minimum height of 44px on touch targets to meet accessibility standards.

Containers & Surfaces Cards use surface-con

Do's and Don'ts

**Do**

• Do use Libre Caslon Text for all headlines and brand-forward moments (page titles, product names, hero copy) to reinforce the artisanal, heritage aesthetic.
• Do maintain the warm color palette—primary (#623718), secondary (#765a05), and their containers—across CTAs, interactive states, and brand-critical UI; never substitute with cool grays or blues.
• Do apply the full (9999px) border-radius consistently to all buttons and interactive pills to signal friendliness and approachability.
• Do use the glass-effect overlay (backdrop-filter: blur(12px), rgba(255, 248, 245, 0.85), 1px border at rgba(214, 195, 184, 0.3)) for search cards, modals, and tracker panels to create visual separation without harsh shadows.
• Do respect the spacing scale: lg (40px) for section separation, md (24px) for card padding and component gaps, sm (12px) for internal component spacing; never hardcode arbitrary values.
• Do ensure all text meets 7:1 contrast minimum (on-surface #1e1b18 on surface #fff8f5 = 15:1); test labels and small text especially carefully.
• Do use the elevation shadow system consistently: Level 2 (0 2px 8px rgba(30, 27, 24, 0.25)) for standard cards, Level 3 (0 16px 36px rgba(30, 27, 24, 0.14)) for modals and popovers.

**Don't**

• Don't use cool accent colors (blues, purples, teals) as primary CTAs; the warm brown and honey-yellow palette is non-negotiable and defines the brand identity.
• Don't apply sharp corners (0px border-radius) to buttons, cards, or interactive elements; minimum md (12px) for cards, full (9999px) for buttons.
• Don't exceed 32px font-size for Libre Caslon headlines on mobile; use headline-md (24px) instead to maintain legibility and visual hierarchy.
• Don't use system fonts (ui-sans-serif, -apple-system) for body or UI text; always load Work Sans from Google Fonts for consistency.
• Don't hardcode color values inside component styles; always reference the color token system ({colors.primary}, {colors.secondary-container}, etc.) to enable future theming.
• Don't apply shadows heavier than Level 3 (0 16px 36px rgba(30, 27, 24, 0.14)); excessive shadows contradict the warm, approachable aesthetic.
• Don't mix serif and sans-serif at the same hierarchy level (e.g., don't use Libre Caslon for body text or Work Sans for headlines); maintain the clear serif-for-headlines, sans-serif-for-body pattern.