Switch between the rendered Visual preview and the Raw DESIGN.md.
Chowdeck's design embodies a vibrant, approachable marketplace aesthetic with confident energy and instant accessibility. The visual language combines bold, dark green tones with bright accent colors (yellow, purple, blue) that evoke food delivery urgency, community, and trust. The design feels modern yet friendly—suited for a fast-moving e-commerce food and grocery platform serving urban Nigeria. Large, confident typography headlines paired with clean whitespace create a sense of clarity and purpose, while the generous use of neutral grays ensures legibility and focus on product discovery. The aesthetic balances professional reliability with playful energy, inviting users to explore diverse vendor categories quickly.
Key Characteristics
#E5E7EB) supporting content hierarchy#0C513F): Primary actions, call-to-action buttons, navigation highlights, and brand anchors. Conveys trust and safety for transaction-based interactions.#038B5C): Secondary primary actions, accent elements, and verified/active states. Used for modal dialogs and prominent feature cards.#8C77EC): Tertiary actions, badges, category tags, and premium highlights.#004699): Informational elements, links, and data visualization.#99C8FF): Subtle background tints and disabled states for blue hierarchy.#271386): Deep interactive overlays and high-emphasis secondary actions.#68B99D): Soft accent for borders, dividers, and passive visual indicators.#FFC501): Warning states, alerts, and attention-grabbing notifications.#0C513F): Buttons, form controls, and primary interactive elements with full opacity.#0C513F at 90% opacity): Hover states for primary buttons.#E5E7EB): Disabled button backgrounds and inactive form states.#000000): Body copy, paragraph text, and primary heading text.#333333): Secondary labels, metadata, and lighter hierarchy text.#1F2937): Tertiary text, hints, and subtle information.#FFFFFF): Content backgrounds, card surfaces, and primary surface color.#F2F2F2): Minimal background tints and very light surfaces.#E5E7EB): Primary border color for inputs, cards, and dividers. Default stroke for form elements.#E2E8F0): Secondary borders and subtle container outlines.#F3F1FD): Soft background for purple-themed sections and highlights.#E8E4FB): Alternative light background for purple accents.Primary: Plus Jakarta Display, sans-serif, system stack: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
Secondary: Plus Jakarta Display (consistent single family system)
Fallback Stack: "Plus Jakarta Display", system-ui, -apple-system, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display 1 (h1) | Plus Jakarta Display | 112px | 700 | 112px | 0px | Hero headlines, page titles, largest focal content |
| Display 2 (h2) | Plus Jakarta Display | 60px | 700 | 60px | 0px | Major section headers, prominent feature headers |
| Heading 3 (h3) | Plus Jakarta Display | 28px | 600 | 42px | 0px | Section subheadings, card titles, component labels |
| Body Large (span) | Plus Jakarta Display | 16px | 400 | 24px | 0px | Primary body text, descriptions, UI labels |
| Body Small (body) | Plus Jakarta Display | 12px | 400 | 16px | 0px | Supporting text, metadata, captions, form hints |
| Button Text | Plus Jakarta Display | 16px | 600 | 24px | 0px | Button labels, call-to-action text, interactive labels |
| Input Text | Plus Jakarta Display | 16px | 400 | 24px | 0px | Form field text, text input content, placeholders |
| Input Heading | Plus Jakarta Display | 20px | 700 | 28px | 0px | Large input headers, form section titles |
#0C513F#FFFFFF16px60012px 24px45px9999px0px solid #E5E7EBrgba(163, 163, 163, 0.32) 0px 10px 25px 0px24px#0A3F31, shadow intensified to rgba(163, 163, 163, 0.48) 0px 12px 30px 0px#082F26, shadow reduced to rgba(163, 163, 163, 0.24) 0px 8px 20px 0px#E5E7EB, Text Color #999999, Box Shadow none#FFFFFF#00000016px60012px 24px45px9999px1px solid #E2E8F0none24px#F9FAFB, Border Color #CBD5E1#F3F4F6, Border Color #9CA3AF#F3F4F6, Text Color #D1D5DB, Border Color #E5E7EB#0C513F#FFFFFF16px4000px48px48px9999px0pxrgba(163, 163, 163, 0.32) 0px 10px 25px 0px24px#0A3F31, shadow intensified#082F26#FFFFFF#00000016px60012px 24px48px9999px0px solid #E5E7EBrgba(163, 163, 163, 0.32) 0px 10px 25px 0px24px#F9FAFB#FFFFFF#00000016px40024px8px1px solid #E5E7EBrgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px24px#FFFFFF#D1D5DBrgba(0, 0, 0, 0.15) 0px 12px 18px -4px, rgba(0, 0, 0, 0.12) 0px 6px 8px -4px#F9FAFB0px40px 80px0pxrgba(0, 0, 0, 0) (transparent)#1F293716px4000px 0px (rely on height for vertical spacing)64px0px0px solid #E5E7EBnone24px1px solid #E5E7EB (underline style)2px solid #0C513F, Text Color #000000rgba(0, 0, 0, 0.4)#FFFFFF1px solid #E5E7EB8px12px 16px48px20px700rgba(255, 255, 255, 0.4)28px0px 40px 0px 0pxrgba(0, 0, 0, 0) (transparent)#00000016px4000px 80px80px0px0pxnone24px#00000040016px16px 24px56px0px#F3F4F6#0C513F, Font Weight 600, Border Bottom 2px solid #0C513F#0C513F9999px8px 16px40px#E8E4FB#27138612px6004px 12px9999px0px#FFC501#00000012px6004px 12px9999px#E8F5E9#0C513F12px6004px 12px9999pxBase Unit: 8px
Spacing Scale:
8px — Micro spacing between icon and text, internal button padding adjustments12px — Small padding for compact form inputs, tight component spacing16px — Standard padding for input fields, internal navigation spacing20px — Content padding for medium-density layouts24px — Primary padding for cards, container internals, comfortable spacing32px — Medium margin between sections, moderate vertical rhythm40px — Large padding for page-level containers, section padding48px — Extra-large margin between major sections, vertical spacing between hero and content56px — Substantial vertical rhythm for between-section gaps64px — Large padding for full-width containers, prominent spacing72px — Extra spacing for major visual breaks80px — Horizontal page padding, maximum outer marginsContext Usage:
12px 24px24px48px vertical, 80px horizontal0px 80px (horizontal only)12px–16px internalMax Width: 1440px
Horizontal Padding: 80px (outer margin), creating 1280px content width
Column Strategy:
20px gutter1280px centered, left-right 80px paddingSection Patterns:
80px horizontal padding1280px max-width, centered, 48px vertical margin between sections24px gapThe design leverages whitespace as a structural and cognitive tool. Large negative space around headings and cards creates visual hierarchy and breathing room, reducing cognitive load. Generous vertical spacing (48px–80px) between major sections creates distinct content chapters and guides user scanning. Horizontal padding of 80px frames content elegantly without feeling claustrophobic. Within cards, 24px padding balances content density with comfort. The system prioritizes clarity over information density, ensuring users quickly understand information structure and find actionable elements.
9999px — Buttons, badges, icon buttons, fully rounded interactive elements8px — Cards, input containers, modal backgrounds0px — Navigation bars, hero sections, full-width containers, form underlines1px solid #E5E7EB)| Level | Treatment | Use |
|---|---|---|
| Surface (L0) | box-shadow: none | Default content areas, navigation, page backgrounds |
| Raised (L1) | box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Cards, containers, slightly elevated surfaces |
| Floating (L2) | box-shadow: rgba(163, 163, 163, 0.32) 0px 10px 25px 0px | Buttons, interactive elements, modals |
| Modal (L3) | box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px -8px | Overlays, dropdowns, floating panels (inferred) |
Shadow Philosophy: The elevation system uses subtle, naturalistic shadows that suggest depth without visual heaviness. Primary buttons receive a consistent gray shadow (rgba(163, 163, 163, 0.32)) that sits between light and dark, working across light backgrounds. Cards use softer shadows combining both close and distant light sources, creating dimensional quality without drama. The system avoids dark or aggressive shadows, maintaining a clean, approachable aesthetic. Shadows scale with interaction importance—passive containers have minimal shadows, while primary CTAs have stronger elevation to guide focus.
#0C513F for all primary CTAs — Order buttons, sign-up, checkout, and confirmation actions must use primary dark green.9999px) to all interactive buttons and form controls — Maintain the friendly, approachable aesthetic.48px height for touch targets — Ensure mobile usability and accessibility compliance.80px horizontal padding on page-level containers — Creates breathing room and prevents content from feeling cramped on large screens.#E5E7EB borders for form inputs and card dividers — Light gray (not black) maintains softness while ensuring adequate contrast.#FFC501 (warning yellow) sparingly for alerts and time-sensitive information — Bright yellow commands attention; overuse diminishes impact.#000000 on dark green backgrounds — Creates insufficient contrast; use #FFFFFF instead.#8C77EC) for primary actions — Reserve for secondary tags, badges, and tertiary highlights only.#333333 or #1F2937) for body copy on white backgrounds — #000000 provides better readability for paragraphs.48px — Smaller targets reduce mobile usability and accessibility.| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–640px | Single-column layout, 16px horizontal padding, navigation collapses to hamburger, buttons full-width (adjusted padding 12px 16px), font sizes remain consistent, card grid becomes 1 column |
| Tablet | 641px–1024px | Two-column layouts, 24px–40px horizontal padding, navigation switches to horizontal with collapsible menu, buttons maintain 12px 24px padding but width auto-scales, cards 2 per row |
| Desktop | 1025px+ | Full three+ column grids, 80px horizontal padding, full navigation bar, max-width container 1280px, cards 3+ per row, all spacing scales applied fully |
48px × 48px (buttons, icon buttons, form controls)56px × 48px (standard buttons)8px (avoid accidental adjacent clicks)48px (including padding)56px (including vertical padding)fit-content)80px horizontal on desktop → 40px tablet → 16px mobileUse these color codes as your single source of truth for all component styling:
#0C513F) — Order Now, Add to Cart, Checkout buttons#FFFFFF + #E2E8F0) — Alternative options, Cancel, Back buttons#038B5C) — Active states, verified elements, secondary emphasis#000000) — All body copy, headings, paragraph text#333333) — Metadata, muted labels, supporting text#FFFFFF) — Content containers, card backgrounds, primary surface#F2F2F2) — Minimal tinting, very subtle backgrounds#E5E7EB) — Form borders, dividers, card outlines#E2E8F0) — Secondary borders, lighter dividers#FFC501) — Warning states, time-sensitive alerts, attention-grabbing badges#8C77EC) — Tags, badges, tertiary highlights#004699) — Links, informational elements, data statesAll buttons must be pill-shaped (border-radius: 9999px) — No rectangular corners. Primary buttons use #0C513F background; secondary use white background with #E2E8F0 border.
Typography is exclusively Plus Jakarta Display, never switch families — Sizes must follow the exact hierarchy table: h1 112px, h2 60px, h3 28px, body 16px, small 12px. Weight varies: 400 for body, 600 for buttons/headings, 700 for display headings.
Spacing follows 8px grid: use 8, 12, 16, 24, 32, 40, 48, 56, 64, 80px values only — Button padding is always 12px 24px; card padding is 24px; page margins are 80px horizontal. Never use arbitrary spacing values.
Shadow is applied only to elevated components — Default buttons receive rgba(163, 163, 163, 0.32) 0px 10px 25px 0px; cards receive rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px. Never use pure black (#000000) in shadows.
Form inputs use transparent background with bottom border only — Height 48px–64px, padding 12px–16px, border 1px solid #E5E7EB (bottom only for text inputs). Focus state darkens border to 2px solid #0C513F.
Navigation bar is full-width, no max-width constraint, 80px padding horizontally — Background transparent, height 80px, flex layout with space-between. Logo container has #0C513F background, border-radius 9999px, padding 8px 16px.
Minimum touch target is 48px × 48px; all interactive elements must meet this — Buttons, inputs, icon buttons must never be smaller. Maintain 8px minimum gap between adjacent targets.
Responsive breakpoints: Mobile 320–640px, Tablet 641–1024px, Desktop 1025px+ — On mobile: single column, 16px padding, hamburger nav. On tablet: two columns, 40px padding, collapsible menu. Desktop: full grid, 80px padding, max-width 1280px content.
Color contrast must always exceed WCAG AA standards — #000000 on #FFFFFF is ideal; avoid light gray text on white. Dark green (#0C513F) on white is acceptable; white text on dark green is required for CTAs.
Every interactive element must have a visible hover/active state — Minimum change: 2–5px shadow increase or 5–10% background brightness shift. Never leave interactive elements without state feedback.