Lyka Pet Food

Overview

Lyka Pet Food is a direct-to-consumer fresh dog food brand that combines premium nutrition with warm, accessible wellness messaging. The design system embodies 'Warm Minimalism'—a philosophy that prioritizes clarity and trust through a refined natural palette (forest teal, soft cream, warm taupe) paired with generous whitespace and purposeful typography. The brand serves health-conscious pet owners who value transparency, science-backed formulations, and the emotional connection between nutrition and their dog's wellbeing. The UI evokes a sense of calm expertise: every interaction feels considered, every color choice intentional, every surface breathable. The emotional response is one of reassurance—users feel they're making a responsible, premium choice for their pet.

Lyka's voice is conversational yet authoritative, warm yet precise. The brand speaks in benefit-driven language ('Better dogpoos in 14 days,' 'Healthier skin & coat') without hyperbole or breathlessness. Vocabulary leans toward wellness terminology (formulated, nutritionist, fresh, real ingredients) and avoids corporate jargon. The tone is encouraging but never patronizing—it respects the user's intelligence while celebrating their pet's health journey. Example sentence in brand voice: 'Fresh food means real results—your dog's coat will thank you.'

Colors

The Lyka color system is rooted in nature and trust. Primary (#10b193, a vibrant forest teal) is the signature accent used exclusively on CTAs, key interactions, and brand moments—it signals action and health simultaneously. This teal appears on 'Get your dog's plan' buttons, active states, and hero typography, commanding attention without aggression. Secondary (#ff886b, a warm coral-orange) provides emotional warmth and is reserved for accent elements, testimonials, and secondary CTAs like 'Try Lyka'—it humanizes the brand and adds approachability. Tertiary (#257960, a deeper forest green) anchors dark-mode sections and creates visual hierarchy in dense content areas.

The surface stack is deliberately warm and minimal: surface (#fcfbf9, near-white with a hint of cream) provides the breat

Typography

The type system pairs Balgin (a geometric, confident sans-serif used for headlines) with Ginger (a warm, humanist sans-serif for body text). This pairing creates visual contrast—Balgin's structural clarity commands attention in headlines (display: 80px, headline-lg: 48px), while Ginger's approachability makes body copy feel conversational and trustworthy (body-md: 16px, body-lg: 18px). Display text (80px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines like 'Discover their healthiest self' and creates immediate visual impact. Headline-lg (48px, 700 weight) is used for section titles and major content breaks. Body-md (16px, 400 weight, 24px line-height) is the workhorse for product descriptions and supporting copy—the 24px line-height ensures readability on mobile and des

Layout

Lyka uses a 12-column fluid grid with a max-width of 1280px, ensuring the design scales gracefully from mobile (16px gutter) to desktop (48px gutter). The spacing scale is semantic: unit (8px) is the baseline; sm (12px) is used for compact component spacing; md (24px) is the default section gutter and card padding; lg (40px) separates major content blocks; xl (64px) creates breathing room between hero and subsequent sections. Container padding follows a responsive curve: 16px on mobile (640px), 24px on tablet (768px), 32px on desktop (1024px), and 48px on large screens (1280px+). This ensures content never feels cramped and maintains the 'warm minimalism' philosophy—whitespace is as important as content. Hero sections use lg spacing (40px) for vertical rhythm, while card grids use md spaci

Elevation & Depth

Depth in Lyka is conveyed through subtle shadows and surface color shifts rather than dramatic layering. Level 1 (Base): the surface (#fcfbf9) provides the foundation with no shadow. Level 2 (Standard Card): surface-container (#dbe6dc) with a soft shadow (0 2px 6px rgba(0, 0, 0, 0.14), 0 2px 2px rgba(0, 0, 0, 0.08)) creates gentle separation from the background—this is used for product cards, testimonial tiles, and accordion panels. Level 3 (Elevated/Modals): surface-container-high (#d4ded5) with a more pronounced shadow (0 8px 32px rgba(0, 0, 0, 0.1)) lifts modals, expanded accordions, and he

Shapes

Lyka employs 'Organic Softness'—a shape philosophy that balances approachability with sophistication. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel friendly and inviting, never corporate or rigid. Cards and tiles use lg radius (1rem / 16px) for a softer, more organic feel than sharp corners, while maintaining enough definition to read as distinct surfaces. Inputs and form fields use DEFAULT radius (0.5rem / 8px) for a subtle, understated presence—they're functional elements that shouldn't compete for attention. Accordions and expandable sections use xl radius (1.

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with full border-radius (9999px) for maximum friendliness. Button-primary uses primary (#10b193) background with white text, applied to 'Get your dog's plan' and main CTAs. On hover, the background shifts to #0a9a7f (a 10% darker teal) with a 0.15s cubic-bezier transition (cubic-bezier(0.4, 0, 0.2, 1)), creating a smooth, responsive feel. Button-secondary uses primary-container (#dbe6dc) background with on-primary-container (#005648) text, ideal for secondary actions like 'Read more reviews.' Button-dark (#005648 background, #dbe6dc text) is used on light sections for contrast; on hover, it shifts to #006b57 with white text. All buttons include 12px vertical and 24px horizontal padding, with

Do's and Don'ts

**Do**

• Do use primary (#10b193) exclusively for CTAs and key interactive moments—it's the brand's signature and should never be diluted or overused.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to preserve the calm, breathing aesthetic that defines Lyka's personality.
• Do pair Balgin headlines with Ginger body text consistently—this pairing is the typographic signature and should never be reversed or mixed with system fonts.
• Do apply shadows conservatively and use the three-level elevation system (Level 1/2/3) to create subtle depth without visual noise.
• Do use full border-radius (9999px) on all buttons to maintain the warm, approachable brand character.
• Do test all interactive elements with a 0.15s cubic-bezier(0.4, 0, 0.2, 1) transition for responsive, polished feel.

**Don't**

• Don't use secondary (#ff886b) or tertiary (#257960) as primary CTAs—they are supporting accents only and will dilute the brand's visual hierarchy.
• Don't apply shadows heavier than 0 8px 32px rgba(0, 0, 0, 0.1)—the brand is minimal and shadows should feel subtle, not dramatic.
• Don't reduce line-height below 1.5 (24px for 16px body text)—readability and breathing room are core to the warm minimalism philosophy.
• Don't mix Balgin and Ginger with system fonts or other typefaces—the pairing is the typographic identity and substitutions will break brand recognition.
• Don't use border-radius smaller than 0.5rem (8px) on interactive elements—sharp corners conflict with the organic softness philosophy.
• Don't apply more than two levels of elevation (Level 1 and Level 2) to standard page layouts—excessive layering creates visual clutter and contradicts the minimal aesthetic.