Foods Inn

Overview

Foods Inn is a contemporary restaurant discovery and ordering platform designed for urban diners seeking authentic, accessible food experiences. The brand embodies a "Warm Minimalism" aesthetic—combining earthy, sophisticated sage-green (#556056) as the primary accent with warm terracotta tones (#d7aa95) to evoke comfort, authenticity, and culinary craftsmanship. The interface prioritizes clarity and ease of navigation, using generous whitespace (surfaces at #ffffff and #f5f5f5) to reduce cognitive load while maintaining visual warmth through carefully placed accent colors. The emotional response is one of welcoming discovery: users feel guided rather than overwhelmed, trusted rather than sold to.

The brand voice is conversational yet authoritative—knowledgeable about food without pretension, helpful without being intrusive. Vocabulary leans toward descriptive simplicity: "Authentic Flavors," "Select Your Order Type," "Popular Items." The tone avoids marketing hyperbole; instead, it speaks directly to user intent. Example sentence in brand voice: "Choose your location and order type to explore what's fresh today."

Colors

The color system is built on a foundation of neutral surfaces (white #ffffff, off-white #f5f5f5, light gray #f9f9f9) that provide breathing room and reduce visual fatigue during menu browsing. Primary accent #556056 (sage-green) anchors interactive elements—buttons, active states, category headers—and conveys trust and natural authenticity. Secondary accent #d7aa95 (warm terracotta) is used for hover states, text overlays on primary elements, and supporting CTAs, creating a warm, inviting contrast that feels organic rather than corporate. Tertiary accent #fbbf24 (golden amber) highlights promotional badges, stock indicators, and discount tags, drawing attention without aggression. Error states use #fb2c36 (red) for critical feedback. The surface stack progresses from #ffffff (base) through

Typography

The type system uses Poppins exclusively, a geometric sans-serif that balances warmth with modernity. Display (56px, 700 weight) is reserved for hero headlines and brand moments; Headline-lg (36px, 700) for section titles; Headline-md (28px, 700) for subsection headers; Title-lg (20px, 700) for card titles and modal headings. Body-lg (18px, 400) is used for descriptive copy and longer-form content; Body-md (16px, 400) for standard UI text and menu descriptions; Label-md (14px, 700) for button text and interactive labels; Label-sm (12px, 600) for badges and helper text. Letter-spacing ranges from -0.02em (display, to tighten large sizes) to 0.05em (label-sm, to add clarity at small sizes). Line-height is set generously (1.5–1.75 ratio) to improve readability on mobile and desktop. Instructi

Layout

The layout uses a 12-column responsive grid with a max-width of 1280px, enabling flexible content reflow from mobile (single column) through tablet (6 columns) to desktop (12 columns). Horizontal gutter is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Vertical rhythm is established through the spacing scale: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element spacing uses sm spacing (12px). The container max-width of 1280px prevents content from stretching excessively on ultra-wide displays, maintaining comfortable line lengths for body text (~60–80 characters). Whitespace philosophy prioritizes breathing room around interactive elements—buttons, inputs, and cards all have minimum 24px clearance from adjacent content.

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle, layered elevation. Level 1 (Base surfaces): no shadow, relying on 1px border at rgba(0, 0, 0, 0.1) for definition. Level 2 (Standard cards, inputs): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close-proximity shadow that suggests slight lift. Level 3 (Modals, elevated cards, hover states): box-shadow 0 10px 24px rgba(0, 0, 0, 0.12), a larger spread shadow that creates clear separation from the background. Modals also employ a semi-transparent overlay (rgba(46, 46, 46, 0.5)) wi

Shapes

The shape philosophy is "Soft-Technical Warmth," balancing approachability with modern precision. Buttons and primary CTAs use rounded lg (1rem / 16px) for a friendly, inviting appearance that feels less corporate than sharp corners. Cards and modal content use rounded xl (1.5rem / 24px), creating a softer, more organic container that complements the warm color palette. Input fields use rounded DEFAULT (0.5rem / 8px), a subtle curve that maintains visual hierarchy without competing with buttons. Category list items and list elements use rounded md (0.75rem / 12px) for a middle ground—distinct

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background #556056 with text color #d7aa95, padding 14px 16px, and height 48px for comfortable touch targets. On hover, background darkens to #4a4d48 with a 200ms transition. Button-secondary mirrors the primary structure but swaps colors: background #d7aa95, text #556056. Button-tertiary uses the golden accent (#fbbf24) for promotional or secondary actions, with text color #1a1a1a for contrast. All buttons use rounded lg (16px) and label-md typography (14px, 700 weight). Focus state adds a 3px outline at rgba(85, 96, 86, 0.3) to support keyboard navigation.

Containers & Surfaces Cards are the primary content container, with background #ffffff, rounded xl (24px), padding 24px, and elevation md (0 3p

Do's and Don'ts

**Do**

• Do use primary #556056 exclusively for primary CTAs, active navigation states, and category headers—never for body text or neutral backgrounds.
• Do apply the tertiary accent #fbbf24 sparingly and only for time-sensitive promotions or stock indicators to maintain visual hierarchy.
• Do maintain minimum 24px horizontal gutter and 40px vertical section spacing to preserve the warm, breathing aesthetic.
• Do use rounded lg (16px) on all primary buttons and rounded xl (24px) on all cards and modals to reinforce the soft-technical warmth.
• Do apply text-shadow 0 2px 4px rgba(0, 0, 0, 0.15) to small labels placed over food photography to ensure legibility without sacrificing warmth.

**Don't**

• Don't use primary #556056 as a background color for large content areas—it should accent, not dominate.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't apply heavy shadows (lg elevation) to elements smaller than cards; use md elevation (0 3px 8px) for inputs and small components.
• Don't use secondary #d7aa95 as a primary text color on light backgrounds—reserve it for hover states and text on primary backgrounds only.
• Don't reduce gutter or section spacing below 12px on mobile; the warm aesthetic depends on breathing room even at small viewports.