Dulce Consuelo

Overview

Dulce Consuelo is a boutique pastry and bakery brand that celebrates the artistry of traditional confectionery through a contemporary, warmly inviting visual language. The design aesthetic—termed 'Warm Minimalism with Artisanal Soul'—combines soft, muted earth tones (cream #fef7ef, dusty rose #ac4562, sage green #b9cfcf) with elegant serif typography to evoke handcrafted quality, heritage, and intimate care. The brand serves discerning customers who value authenticity, craftsmanship, and the sensory pleasure of baked goods; the UI responds with a serene, unhurried pace that mirrors the slow, deliberate process of pastry-making. The emotional response is one of comfort, sophistication, and trust—a digital extension of stepping into a beloved neighborhood bakery.

The brand voice is warm, conversational, and gently playful. Vocabulary leans toward sensory language ('golden', 'buttery', 'delicate', 'artisanal') and Spanish cultural references, avoiding corporate jargon. The tone is never rushed or aggressive; instead, it invites lingering and exploration. Example sentence in brand voice: 'Nuestra página aún está en el horno'—a charming, humble acknowledgment that mirrors the baking process itself, turning a technical delay into a moment of personality.

Colors

The color palette is rooted in a philosophy of 'warm, grounded elegance'—drawing inspiration from the natural palette of flour, caramel, and aged wood. Primary (#ac4562, a dusty rose-mauve) serves as the brand's signature accent, appearing on all call-to-action buttons, links, and interactive states; it is warm enough to feel inviting yet sophisticated enough to avoid cuteness. Secondary (#b9cfcf, a soft sage-green) provides a calming, supporting accent used in decorative elements, badges, and the social-icon background layer (rgba(183, 207, 207, 0.4)). The surface stack is anchored in cream and off-white tones: surface (#fef7ef) as the primary background, surface-container (#f0e8e1) for elevated cards, and surface-container-highest (#e0d7d0) for the deepest interactive layers. On-surface

Typography

The type system pairs Playfair Display (serif, 700 weight) for all headings—display, headline-lg, headline-md—with Montserrat (sans-serif, 400–600 weight) for body and label text. This pairing communicates 'heritage meets contemporary': the serif headlines evoke the elegance of traditional pastry boxes and vintage signage, while the clean sans-serif body ensures modern readability at small sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements; headline-lg (40px, 700 weight) anchors major sections; headline-md (28px, 700 weight) introduces subsections. Body text is set at 17px (Montserrat 400) with 26px line-height, providing generous breathing room for comfortable reading on both desktop and mobile. Labels and interactive text use Montserrat 600 at 14px

Layout

The layout follows a fluid, centered-column model with a fixed container max-width of 1170px, ensuring content remains readable and focused on desktop while adapting gracefully to mobile via responsive breakpoints (1024px, 680px, 560px). The grid uses 12 columns for complex layouts, though the hero section (section-body) simplifies to a single centered column at 70% width (max 1170px) to emphasize the brand's intimate, gallery-like presentation. White-space is generous and intentional: the logo sits atop 2em (32px) of margin-bottom, the main heading (h2) receives 0.5em margin-bottom (approximately 47px at 2.35em computed size), and the call-to-action button is padded 15px vertically and 50px horizontally to feel substantial and inviting. Section padding is 2em (32px) on desktop, scaling do

Elevation & Depth

Depth in this design system is achieved through a restrained shadow and layering strategy that prioritizes clarity over drama. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and disabled states; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and interactive elements; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces on hover. The custom select dropdown (bb-custom-select-panel) uses md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px solid border at #d0d0d0 and 4px border-radius, creating a crisp, modern ap

Shapes

The shape philosophy is 'Soft-Technical Minimalism'—favoring subtle, human-scaled border-radius values that soften hard edges without introducing organic or playful curves. Buttons use rounded.DEFAULT (0.5rem / 8px) for a clean, approachable feel that avoids both sharp corners and excessive roundness. Cards and elevated surfaces use rounded.md (0.75rem / 12px) to create gentle visual separation while maintaining a professional appearance. The custom select dropdown uses rounded.sm (0.25rem / 4px) for a more restrained, utilitarian look that signals secondary interaction. Social icons use round

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 15px vertical and 50px horizontal padding (Montserrat 400, 19px). The primary button (button-primary) has backgroundColor: {colors.primary} (#ac4562), textColor: {colors.on-primary} (white), and a 1px solid border matching the background. On hover (button-primary-hover), the background transitions to {colors.primary-container} (#f0d9e4, a light mauve) and text to {colors.on-primary-container} (#6c1f38, a dark mauve), creating a soft, non-jarring interaction. The transition uses all 300ms ease to feel responsive without abruptness. Secondary buttons use transparent background with {colors.primary} text and a 1px primary border; on hover, they gain a surface-container-high background without