Recipe Finder

Overview

Recipe Finder is a culinary discovery platform built on the principles of Warm Minimalism—a design philosophy that balances functional clarity with inviting, food-forward aesthetics. The brand serves home cooks, meal planners, and ingredient-conscious users by transforming pantry searches into delightful recipe discovery. The interface employs a dark-mode-first canvas (rgb(33, 33, 33) surface) punctuated by a vibrant, warm primary accent (rgb(255, 107, 53)—a burnt-orange that evokes the heat of a stovetop and the comfort of home cooking). The emotional response is one of culinary confidence: users feel guided, supported, and inspired to cook.

The brand voice is conversational, encouraging, and practical—never pretentious. Recipe Finder speaks to the cook in you, not the chef. Tone examples: 'Find recipes with what you have,' 'Scale your ingredients instantly,' 'Chat with your AI chef for substitutions.' The vocabulary is accessible (ingredients, not mise en place; servings, not portions) and action-oriented. Every interaction—from search to tool selection—feels like a helpful suggestion from a knowledgeable friend, not a corporate directive.

Colors

The color system is anchored in a warm, high-contrast dark palette designed for extended cooking-session use. The primary color, rgb(255, 107, 53) / #ff6b35, is the signature accent used exclusively on call-to-action buttons ('SEARCH', 'SCALE RECIPE', 'LOG IN'), focus states, and key interactive elements. This warm orange-red commands attention without aggression, evoking the natural warmth of cooking heat. Secondary accent, rgb(247, 147, 30) / #f7931e, is a golden-orange reserved for supporting highlights, secondary buttons, and status indicators (e.g., cooking time badges). Tertiary accent, rgb(253, 200, 48) / #fdc830, is a bright yellow used sparingly for tertiary actions and accent highlights.

The surface stack is deliberately muted to reduce eye strain during long recipe-reading sess

Typography

The type system uses Roboto exclusively, a humanist sans-serif that balances warmth with clarity—essential for recipe instructions and ingredient lists. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and recipe titles with commanding presence. Headline-lg (40px, 600 weight) is reserved for major section breaks (Summary, Ingredients, Instructions). Headline-md (28px, 600 weight) and title-lg (20px, 600 weight) organize subsections and card headers. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for recipe descriptions and ingredient quantities—the 28px line-height ensures comfortable scanning during cooking. Body-md (16px, 400 weight, 24px line-height) is used for secondary text, metadata, and UI labels. Label-md (14px, 600 weight, 0.01em

Layout

The layout follows a fluid 12-column grid with a max-width of 1280px, ensuring the interface scales gracefully from mobile to desktop. The primary container uses 24px gutters (md spacing) on desktop, collapsing to 12px (sm spacing) on tablets and 8px (xs spacing) on mobile. Section separation employs lg spacing (40px) for major breaks (hero to recipe details, ingredients to instructions) and md spacing (24px) for subsection grouping. The recipe hero occupies the full viewport width with a 16px rounded corner (lg radius) on the recipe image, creating a soft entry point. Cards and tool panels use 16px border-radius (lg) to echo the hero image treatment. Input fields and buttons use 4px border-radius (sm) for a more utilitarian, functional feel. White-space is generous but purposeful: the 40p

Elevation & Depth

Depth in Recipe Finder is conveyed through a restrained shadow system that avoids the heavy, dark-mode-typical shadows that can feel oppressive. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle borders and dividers; md (0 4px 12px rgba(0, 0, 0, 0.15)) for standard cards and input fields, creating a gentle lift from the surface; and lg (0 16px 40px rgba(0, 0, 0, 0.25)) for modals, dropdowns, and elevated tool panels. Cards in the 'Recipe Tools' section use md elevation by default, transitioning to lg on hover (120ms cubic-bezier(0.4, 0, 0.2, 1)) to signal inte

Shapes

The shape philosophy is 'Functional Warmth'—combining the approachability of rounded corners with the precision of a well-organized kitchen. Buttons and primary CTAs use 4px border-radius (sm), a subtle rounding that feels modern and clickable without sacrificing the utilitarian aesthetic. Cards, modals, and recipe-image containers use 16px border-radius (lg), creating a softer, more inviting frame that encourages lingering. Input fields use 4px (sm) to align with buttons, reinforcing the action-oriented nature of search. The 'Recipe Tools' action buttons (SCALE RECIPE, ANALYZE INGREDIENTS, SE

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses rgb(255, 107, 53) background with white text, 8px vertical / 16px horizontal padding, and 40px height for touch-friendly targets. On hover (120ms transition), the background shifts to rgb(216, 67, 21) (primary-container), darkening the orange to signal state change. Active state applies an inset shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Button-secondary is transparent with a 1px primary-colored border, allowing secondary actions (e.g., 'Cancel', 'Learn More') to coexist without visual dominance. Buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing for crisp, legible labels.

Containers & Surfaces Cards use surface-container (rgb(33, 33, 33)) background with md elevation (0 4p

Do's and Don'ts

**Do**

• Do use the primary accent (rgb(255, 107, 53)) exclusively on CTAs and focus states—never dilute its impact with decorative use.
• Do maintain 24px gutters (md spacing) between major sections to prevent cognitive overload during recipe reading.
• Do apply body-lg (18px, 28px line-height) to ingredient lists and instructions for optimal scanning during cooking.
• Do use 120ms cubic-bezier(0.4, 0, 0.2, 1) transitions on all interactive elements for consistent, snappy feedback.
• Do pair dark surfaces (rgb(33, 33, 33)) with pure white text (rgb(255, 255, 255)) for maximum legibility in low-light kitchens.

**Don't**

• Don't use the secondary accent (rgb(247, 147, 30)) on primary CTAs—reserve it for supporting highlights and badges only.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0, 0, 0, 0.25)) on dark surfaces; they create visual heaviness and fatigue.
• Don't use border-radius larger than 16px (lg) on cards; it dilutes the functional, organized aesthetic.
• Don't mix Roboto with other typefaces; the system relies on Roboto's warmth and consistency across all weights.
• Don't reduce line-height below 24px on body text; recipe instructions require generous vertical rhythm for comfortable scanning.