Kevin's Natural Foods

Overview

Kevin's Natural Foods is a clean-eating brand that transforms health-conscious consumers' relationships with convenient, allergen-free nutrition. The design system embodies 'Wholesome Authenticity'—a visual language that balances vibrant natural energy with approachable warmth. The primary green (#61ad45) signals vitality and trust, while warm gold accents (#fdbc00) and cream backgrounds (#feffed) evoke homemade quality and transparency. The UI voice is direct, confident, and ingredient-focused: never breathless or trendy, always grounded in real food and real results. Example: 'Keto-certified, ready in 15 minutes—no compromise on taste or ingredients.'

Colors

The color system is rooted in natural, food-forward aesthetics. Primary (#61ad45) is the brand's signature green—used on all CTAs, navigation highlights, and interactive states—evoking clean eating and certified authenticity. Secondary (#fdbc00) is a warm, energetic gold reserved for promotional badges, accent highlights, and call-outs like 'NEW' or limited-time offers; it commands attention without competing with primary. Tertiary (#2474ba) is a professional blue used sparingly for trust signals, certifications, and secondary navigation. The surface stack uses cream (#feffed) as the brightest surface, with carefully calibrated grays (#e8e8e1, #d8d8d0) for container hierarchy. On-surface text is a sophisticated charcoal (#515056), never pure black, maintaining warmth and legibility. Error

Typography

The type system pairs Futura (headlines) with Jost (body) and Poppins (labels), creating a hierarchy that balances geometric precision with organic warmth. Futura's clean, modern geometry conveys brand confidence and food-science credibility; Jost's humanist proportions keep the tone approachable and friendly; Poppins' rounded forms add playfulness to CTAs and badges. Display (60px, 700 weight) anchors hero sections with commanding presence. Headline-lg (40px, 700) and headline-md (28px, 700) structure content zones. Body-lg (18px, 400) and body-md (16px, 400) ensure comfortable reading at 28px and 24px line-heights respectively. Label-md (14px, 700) and label-sm (12px, 700) drive action and micro-hierarchy. All headlines use -0.02em to -0.04em letter-spacing for tightness and impact. Appl

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining fluidity on mobile while anchoring desktop at 1200px. Sections use lg spacing (40px) for vertical rhythm, creating breathing room between hero, product zones, and testimonials. The gutter is consistently 24px, applied as horizontal padding on containers and gap between grid items. White-space philosophy: generous margins around primary CTAs (md spacing: 24px minimum), tighter spacing within card interiors (sm spacing: 12px) to group related information. Hero sections span full-width with 64px (xl) top/bottom padding. Product cards use md padding (24px) with lg gaps (40px) between card groups. The container-max-width of 1280px ensures content never feels cramped on ultrawide displays while maintaining focus on mobil

Elevation & Depth

Depth is conveyed through subtle, food-photography-friendly shadows and strategic layering. Level 1 (Base): flat surface with no shadow, used for primary backgrounds and card interiors. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to product cards, modals, and floating elements to lift them 8px above the base. Level 3 (Elevated/Hover): box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), used on hover states and modal overlays to create depth without obscuring content. All shadows use a warm black (rgba(0, 0, 0, 0.15)) rather than pure black to maintain the brand's warm a

Shapes

The shape philosophy is 'Approachable Precision'—combining geometric clarity with organic softness. Buttons use md radius (0.75rem / 12px), balancing modern sharpness with approachability; they never feel corporate or cold. Cards use lg radius (1rem / 16px) for a slightly softer, more inviting container feel. Input fields use DEFAULT radius (0.5rem / 8px), maintaining functional clarity while staying consistent with the button language. Badges and pills use full radius (9999px), creating a playful, ingredient-tag aesthetic. The rationale: smaller radii (sm: 4px) are reserved for micro-interact

Components

Action Elements Buttons are the primary interaction driver. Button-primary uses primary green (#61ad45) with white text, 18px Poppins 700, 48px height, 12px rounded corners, and 16px horizontal padding. On hover, the background shifts to #599a3e (a darker, earthier green) with a 200ms transition, signaling state without jarring the user. Button-secondary mirrors the primary structure but uses a white background with 2px solid outline in {colors.outline}, maintaining visual weight while offering a softer alternative. Button-tertiary uses the secondary gold (#fdbc00) for promotional or secondary CTAs, ensuring it never competes with primary green. All buttons include a 200ms ease-in-out transition on background-color and box-shadow for smooth, predictable feedback.

Containers & Surf

Do's and Don'ts

**Do**

• Do use primary green (#61ad45) exclusively for primary CTAs, active states, and brand-critical interactions—it's the trust signal.
• Do apply lg spacing (40px) between major content sections to create visual breathing room and guide the eye through the page.
• Do pair Futura headlines with Jost body copy; this combination signals both precision and warmth, core to the brand.
• Do use the full rounded radius (9999px) for ingredient badges and certification pills to create a playful, approachable micro-hierarchy.
• Do transition all interactive elements (buttons, cards, inputs) at 200ms ease-in-out to maintain smooth, predictable feedback.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals; this warm shadow preserves food photography clarity.

**Don't**

• Don't use secondary gold (#fdbc00) on primary CTAs or navigation—it dilutes the primary green's authority and confuses hierarchy.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use pure black shadows; they feel corporate and clash with the warm, natural aesthetic.
• Don't mix Futura and Poppins in the same headline; use Futura for all display/headline levels to maintain geometric consistency.
• Don't use rounded radii smaller than 8px on buttons or cards; they feel overly technical and undermine the approachable brand voice.
• Don't apply transitions longer than 300ms on interactive elements; the brand moves with confidence, not hesitation.
• Don't use the tertiary blue (#2474ba) as a primary accent or CTA color; it's reserved for trust signals and certifications only.