Nothing Bundt Cakes

Overview

Nothing Bundt Cakes is a premium, handcrafted cake brand that celebrates warmth, indulgence, and occasion-driven joy. The design system embodies 'Artisanal Minimalism'—a philosophy that pairs rich, earthy tones (chocolate browns at #4e3e30, deep navy at #1d4494) with clean, modern typography to create an approachable yet sophisticated interface. The brand serves customers seeking customizable, high-quality cakes for birthdays, weddings, and celebrations, evoking feelings of comfort, celebration, and culinary craftsmanship.

The voice is warm, conversational, and action-oriented—never pretentious, always encouraging. Tone examples: 'Skip the trip, and get your favorite cakes delivered' (direct, benefit-focused); 'Joining is quick, easy and free' (reassuring, accessible). The vocabulary favors concrete, sensory language ('handcrafted,' 'bursts of brown sugar,' 'cinnamon caramel sauce') over abstract marketing speak. Brand personality: a trusted friend who knows cake, celebrates with you, and makes ordering effortless.

Colors

The color system anchors on a warm, earthy foundation reflecting the brand's cake-centric heritage. Primary (#1d4494, a confident navy) drives all interactive elements—buttons, links, focus states—and appears on the 'ORDER NOW' CTA, the header navigation, and the Bundtastic Rewards badge. This blue conveys trust and premium quality while standing apart from the warm palette. Secondary (#ac3864, a muted mauve-rose) supports accent moments and secondary CTAs, creating visual rhythm without competing for attention. Tertiary (#e02b27, a warm red-orange) highlights limited-time offers, new product badges, and error states, evoking urgency and freshness.

The surface stack is built on warm neutrals: surface (#ffffff) for primary content areas, surface-container (#eae6e1) for grouped content, and

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that balances warmth with modernity—essential for a brand that must feel both premium and approachable. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines like 'CINNAMON ROLL CAKE,' commanding attention without aggression. Headline-lg (40px, 600 weight) anchors section titles; headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and product descriptions, ensuring legibility at arm's length. Body-md (16px, 400 weight) is the workhorse for UI labels, form text, and secondary content. Label-md (14px, 600 weight, 0.02em tracking) emphasizes button text and badges, creating visual hierarchy through weight rathe

Layout

The layout follows a 12-column grid with a 1280px max-width container, centered on desktop and full-bleed on mobile. The header uses a fixed, sticky pattern with the logo (left), bakery selector (center), and action icons + primary CTA (right), maintaining 24px horizontal gutter on desktop and 12px on mobile. Hero sections span full-width with 64px vertical padding (lg spacing) on desktop, 40px on mobile, creating breathing room around hero imagery and text. Product grids use a responsive 4-column layout on desktop (1280px+), 3-column on tablet (768px–1279px), and 1-column on mobile, with 24px gap between items. Modals and cards use 24px padding (md spacing) internally, with 40px (lg spacing) separating major sections. The container-max-width of 1280px ensures content never stretches uncom

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surfaces rather than dramatic depth effects. Level 1 (Base): flat surfaces at surface (#ffffff) with no shadow, used for primary content areas and the page background. Level 2 (Cards & Containers): 0 4px 12px rgba(0, 0, 0, 0.08) shadow with a 1px border at outline-variant (#ccc4bb), used for product cards, input fields, and grouped content. Level 3 (Modals & Elevated): 0 16px 40px rgba(0, 0, 0, 0.12) shadow with a 1px border, used for modals, dropdowns, and the fulfillment drawer (background-color: #c7d6e7). Hover states elevate card

Shapes

The shape philosophy is 'Warm Geometry'—rounded corners that feel handcrafted rather than mechanical. Buttons use rounded.lg (1rem / 16px border-radius), creating a friendly, approachable feel without the softness of full-rounded (9999px). Cards and modals use rounded.xl (1.5rem / 24px), echoing the rounded edges of a cake box or plated dessert. Input fields use rounded.DEFAULT (0.5rem / 8px), a subtle curve that signals interactivity without distraction. The product image backgrounds use 15px border-radius (observed in live CSS), a custom value that sits between lg and xl, creating visual con

Components

Action Elements Buttons are the primary interaction pattern. The button-primary uses background-color: #1d4494 (primary), text-color: #ffffff, padding: 10px 24px, height: 48px, border-radius: 1rem, font-weight: 700, and font-size: 14px. On hover, the background transitions to #c7d6e7 (primary-fixed-dim) over 200ms with cubic-bezier(0.2, 0, 0, 1) easing, providing clear feedback. The button-secondary uses background-color: #edf2fa (primary-container), text-color: #1d4494, and a 1px border at #ccc4bb (outline-variant), creating a lower-emphasis alternative for secondary actions like 'Sign In' or 'Learn More.' Button-ghost removes the background entirely, using only a 2px border at primary (#1d4494) and transparent background, transitioning to primary-container on hover. All buttons must

Do's and Don'ts

**Do**

• Do use primary (#1d4494) exclusively for interactive CTAs, links, and focus states—never for body text or backgrounds.
• Do apply 24px (md spacing) between major sections and 12px between related elements to maintain the 'handcrafted' breathing room.
• Do use Montserrat at 600+ weight for headlines and 400 weight for body text; never mix font families within a single component.
• Do transition all hover/focus states over 200ms with cubic-bezier(0.2, 0, 0, 1) easing to feel responsive without jarring.
• Do layer surfaces using the surface-container stack (lowest, low, DEFAULT, high, highest) rather than inventing new background colors.
• Do ensure all interactive elements have a minimum 48px × 48px touch target and a visible focus indicator (3px box-shadow or 2px border).

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#4e3e30) for dark text and on-primary (#ffffff) only on primary backgrounds.
• Don't apply border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii like 15px should be normalized to the nearest scale value.
• Don't stack multiple shadows or use blur-radius > 40px; keep elevation subtle and grounded to maintain readability.
• Don't use secondary (#ac3864) or tertiary (#e02b27) as primary button backgrounds; reserve them for accents, badges, and secondary CTAs.
• Don't mix Montserrat with system fonts or fallback stacks; always declare Montserrat as the primary family with explicit fallbacks (Helvetica Neue, Arial).
• Don't animate transitions faster than 150ms or slower than 300ms; use cubic-bezier(0.2, 0, 0, 1) for all interactive state changes to maintain consistency.