Chowdeck

Overview

Chowdeck is a Nigerian food delivery marketplace that transforms the restaurant discovery and ordering experience through confident, accessible design. The platform serves urban food enthusiasts and casual diners seeking convenience, variety, and trust. The aesthetic is 'Functional Warmth'—a design philosophy that combines the efficiency of modern commerce interfaces with the approachability of a trusted local guide. The UI celebrates food through generous imagery and clear hierarchy, while the teal primary color (#0c513f) signals reliability and action. The emotional response is one of ease: users feel guided, not overwhelmed, and confident that their order will arrive as promised. Voice: conversational, encouraging, and locally aware. The brand speaks in the cadence of a knowledgeable friend: 'Your favorite meals, delivered in 25–35 mins.' Example sentence: 'Bigwhizz Reloaded—double the enjoyment with our ChickWhizz Sandwich filled with Soulfully Spiced Fried Chicken.'

Colors

The color system is anchored by a deep, confident teal primary (#0c513f) used exclusively for CTAs, active states, and brand moments. This color appears on the 'Delivery to' button, the 'Login' button, and category underlines, signaling where users should focus their attention. Secondary accent purple (#753ff6) provides visual rhythm on badges and supporting UI elements, while tertiary orange (#ed5e3b) highlights promotional or warning states. The surface stack is clean and light: white (#ffffff) for cards and backgrounds, with subtle grays (#e9ecef, #f0f0f0) for container layers and disabled states. Text hierarchy uses pure black (#000000) for primary content and #6c757d for secondary information. Shadows are soft and restrained (0 3px 8px rgba(0, 0, 0, 0.15) for cards, 0 8px 24px rgba(0,

Typography

The type system uses Plus Jakarta Display exclusively, a geometric sans-serif that balances modern efficiency with warm personality. Display (60px, 700 weight) anchors hero moments and restaurant names. Headline-lg (40px, 600 weight) introduces major sections. Headline-md (28px, 600 weight) titles product categories and modals. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry descriptive content—menu item descriptions, delivery times, and address text. Label-md (14px, 500 weight) and label-sm (12px, 500 weight) handle buttons, badges, and metadata. Letter-spacing is tight (−0.04em on display, −0.02em on headlines) to reinforce confidence and modernity. On small labels over busy product imagery, apply text-shadow: 0 2p

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centering content on desktop while allowing full-bleed imagery on mobile. The gutter is 24px, applied consistently between sections and card columns. White-space philosophy is 'breathing room': sections are separated by 40px (lg spacing) vertically, while internal card padding is 24px (md spacing). The hero section spans full width with a restaurant card (30px border-radius) on the left sidebar, anchoring the page. Product cards are arranged in a 2–3 column grid depending on viewport, with 24px gaps. The search bar and category tabs sit in a sticky header (12px padding, subtle shadow: 0 1px 2px rgba(0, 0, 0, 0.06)) that remains accessible during scroll. Container max-width of 1280px ensures content never feels stretched on

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle transforms. Level 1 (Base): no shadow; used for inline elements and text. Level 2 (Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to product cards, restaurant cards, and input fields. On hover, cards elevate to Level 3 with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) and a 2px upward transform (translateY(-2px)), creating a tactile lift. Level 3 (Modal/Overlay): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); used for modals, dropdowns, and floating elements. The overlay behind modals uses rgba(0, 0, 0, 0.5) to darken the ba

Shapes

The shape philosophy is 'Warm Geometry'—rounded corners that feel friendly without sacrificing modernity. Buttons use 12px border-radius (1rem), creating a soft pill-like appearance that invites interaction. Product cards use 12px radius for a balanced, contemporary look. Restaurant cards use a distinctive 30px radius, making them feel more like physical objects and emphasizing their importance as the primary entry point. Input fields use 4px radius (0.5rem) for subtle, functional rounding. Badges and chips use full radius (9999px) to signal compactness and status. The 30px radius on restauran

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses #0c513f background, white text, 12px horizontal padding, 48px height, and 12px border-radius. On hover (button-primary-hover), the background shifts to #038b5c (primary-container) with a 150ms ease transition. The active state (button-primary-active) uses #0c513f with a subtle inset shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Secondary buttons are transparent with a 1px border in primary teal and teal text; on hover, they gain a light teal background (#f0f0f0). Icon buttons (button-icon-add) are circular (40px × 40px, border-radius: 9999px) with a centered '+' symbol in white on primary teal. Hover state adds a 2px scale transform and shifts to primary-container. All buttons use font

Do's and Don'ts

**Do**

• Do use primary teal (#0c513f) exclusively for CTAs, active states, and brand moments—never dilute it with secondary uses.
• Do apply 24px gutter spacing between sections and 12px padding inside cards to maintain breathing room and scannability.
• Do use Plus Jakarta Display at 600 weight for all headlines and 400 weight for body text to maintain consistent warmth and legibility.
• Do elevate cards on hover with a 2px upward transform and shadow increase (0 3px 8px → 0 8px 24px) to signal interactivity.
• Do use 30px border-radius exclusively on restaurant cards to make them instantly recognizable as primary entry points.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) on labels over food imagery to ensure 100% contrast and readability.
• Do use the verified badge (teal background, white checkmark) to reinforce trust on restaurant cards and high-rated items.
• Do keep all shadows soft and dark-gray (never pure black) to maintain approachability and avoid harsh contrast.

**Don't**

• Don't use secondary purple (#753ff6) or tertiary orange (#ed5e3b) as primary CTAs—reserve them for badges, accents, and status indicators only.
• Don't apply border-radius greater than 12px to buttons or inputs; only restaurant cards use 30px to maintain visual hierarchy.
• Don't use system fonts or fallback sans-serifs; always load Plus Jakarta Display via Google Fonts to preserve brand personality.
• Don't add drop shadows to text or use text-shadow on light backgrounds; only apply it on food imagery where contrast is critical.
• Don't use hard shadows (box-shadow with 0 offset) or pure black in shadows; always use soft, dark-gray tones (rgba(0, 0, 0, 0.15) or lighter).
• Don't exceed 1280px container max-width on desktop; content should never feel stretched or overwhelming.
• Don't mix rounded and sharp corners in the same component; maintain consistency within each component type.
• Don't use opacity below 0.7 for interactive elements; disabled states should use #e9ecef background with #6c757d text instead.