Callista Foods

Overview

Callista Foods embodies a 'Warm Artisanal Minimalism' aesthetic that celebrates the craft of wholesale baking through sophisticated restraint and authentic materiality. The brand serves Greater Bay Area food businesses seeking premium, fresh-baked goods—and the design system reflects this positioning through a curated palette of warm earth tones (cream #fcfbf3, burnt orange #ff4802, deep burgundy #760e3a) layered over warm photography of artisanal breads. The visual language evokes the sensory experience of a professional bakery: the warmth of the oven, the richness of ingredients, the precision of craft. Users encounter a calm, confident interface that prioritizes content and product over decoration.

The brand voice is direct, knowledgeable, and unpretentious. Callista speaks to business owners and chefs as peers—not with marketing hyperbole, but with specificity about freshness, process, and reliability. Tone examples: 'Delivered daily from our ovens' (not 'Artisanal magic happens here'). 'Wholesale pricing for serious kitchens' (not 'Exclusive gourmet experience'). The typography pairs Tenor Sans (a refined, geometric serif) for headlines with Open Sans and Poppins for body and interface text, creating a hierarchy that feels both premium and accessible. Every interaction—from button hover states to form focus rings—uses the primary accent (#ff4802) to signal interactivity with warmth and energy.

Colors

The Callista color system is built on a foundation of warm, neutral surfaces anchored by two accent colors: a vibrant burnt orange primary (#ff4802) and a deep burgundy secondary (#760e3a). The primary color is reserved exclusively for call-to-action buttons, active states, and key interactive elements—it appears sparingly but with high impact, drawing the eye to 'Our advantages' CTAs and form submissions. The secondary burgundy serves as a supporting accent for badges, status indicators, and secondary messaging, creating visual rhythm without competing for attention.

Surface colors follow a warm cream palette: the base surface is #fcfbf3 (a soft off-white with warm undertones), progressing through container variants (#eeebe5 for lowest, #d0ccc6 for highest) to create subtle depth without

Typography

The type system balances editorial elegance with functional clarity through a two-font strategy: Tenor Sans (a refined geometric serif from Google Fonts) anchors headlines and display text, conveying craftsmanship and premium positioning, while Poppins (a modern geometric sans-serif) handles labels and UI text, ensuring legibility at small sizes. Open Sans serves body copy, providing warmth and readability at 18px (body-lg) and 16px (body-md) with 28px and 24px line heights respectively. Display text (60px, Tenor Sans, 400 weight, -0.02em letter-spacing) is reserved for hero sections and major page titles; headline-lg (48px, 400 weight) for section headers; headline-md (36px, 400 weight) for subsections. All display and headline text uses -0.01em to -0.02em negative letter-spacing to tight

Layout

The layout system uses a 12-column grid with a maximum container width of 1300px, maintaining generous margins on desktop (40px lg spacing on each side) and collapsing to 24px gutter spacing on tablet and mobile. The page rhythm is built on a semantic spacing scale: 8px unit base, with sm (12px) for tight component spacing, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section spans full-width with a background image overlay (dark gradient overlay at rgba(0, 0, 0, 0.3) to ensure text legibility), containing the headline 'Fresher delights' in Tenor Sans 60px white text, centered vertically and horizontally. Content sections below use md (24px) padding and lg (40px) margin-bottom for breathing room. Cards and com

Elevation & Depth

Depth in the Callista system is achieved through subtle shadows and layering rather than dramatic effects, maintaining the clean, professional aesthetic. The elevation scale uses three levels: sm (0 2px 5px 2px rgba(0, 0, 0, 0.1)) for cards and small components at rest, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hover states and slightly elevated surfaces, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for modals and major overlays. Cards use sm elevation by default, transitioning to md on hover with a 200ms ease-out transition. The primary CTA button ('Our advantages') uses no shadow at rest but gains md

Shapes

The shape philosophy is 'Refined Functionality'—rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons use the full radius (200px, creating pill-shaped buttons) to emphasize their interactive nature and create visual warmth; this generous rounding is a signature of the brand's approachable premium positioning. Cards and containers use md radius (8px), providing subtle softness that feels contemporary without appearing playful. Input fields use the DEFAULT radius (4px), maintaining a more structured, business-like appearance approp

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height with 12px vertical and 32px horizontal padding. Primary buttons (#ff4802 background, white text, Poppins 14px 600 weight) use full 200px border-radius and a 1px solid border matching the background color. On hover, the background darkens to #e63d00 and gains md elevation (0 3px 8px rgba(0, 0, 0, 0.15)), with a 200ms ease-out transition. Secondary buttons mirror the primary style but use transparent background with #ff4802 text and border, reversing on hover to a light orange background (rgba(255, 72, 2, 0.08)). Ghost buttons (used over image backgrounds) use rgba(0, 0, 0, 0.25) background with white text and a 1px rgba(255, 255, 255, 0.3) border, transitioning to rgba(0, 0, 0, 0.35) on hover. A

Do's and Don'ts

**Do**

• Do use the primary accent (#ff4802) exclusively for CTAs, active states, and focus indicators—never for body text or backgrounds.
• Do maintain the warm cream surface (#fcfbf3) as the default background; it's foundational to the brand's approachable premium aesthetic.
• Do pair Tenor Sans headlines with Open Sans body text to create clear visual hierarchy between editorial and functional content.
• Do use full 200px border-radius on buttons and badges to signal interactivity and reinforce the brand's warm, approachable positioning.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) on hover states to provide tactile feedback without overwhelming the interface.
• Do respect the lg (40px) spacing rule for section breaks to maintain generous whitespace and reduce cognitive load.

**Don't**

• Don't use the secondary burgundy (#760e3a) as a primary CTA color—it's reserved for badges and secondary messaging only.
• Don't apply shadows larger than lg elevation (0 8px 24px rgba(0, 0, 0, 0.2)) to maintain the clean, professional aesthetic.
• Don't mix Tenor Sans with sans-serif body text in the same visual hierarchy—use it exclusively for headlines and display.
• Don't use border-radius smaller than 4px on interactive elements; maintain minimum md (8px) for buttons and cards.
• Don't apply text-shadow to body text; reserve it only for small labels over busy backgrounds.
• Don't exceed the container-max width of 1300px; constrain all content to maintain optimal line length and readability.