FoodBridge

Overview

FoodBridge is a neighborhood-scale food commerce platform serving Lagos and surrounding regions, enabling households and institutions to access affordable staples with flexible financing. The design system embodies 'Accessible Optimism'—a visual language that combines the trust and stability of deep forest green with vibrant secondary accents (warm orange, sky blue) to convey reliability, community, and forward momentum. The UI prioritizes clarity and directness: every interaction surface is legible at a glance, every CTA is unmistakable, and the color palette reflects the physical warmth of a neighborhood market translated into digital space.

The brand voice is conversational, practical, and locally grounded. FoodBridge speaks to users as neighbors, not customers—the tone avoids corporate jargon and instead uses concrete, benefit-driven language. Example sentence: 'Your order arrives tomorrow morning, and you pay next week when you're ready.'

Colors

The color system is anchored by a deep forest green primary (#03350b) used exclusively for CTAs, active states, and brand-critical interactions. This green is not merely decorative; it signals trust and growth in a Nigerian context, evoking both agricultural heritage and financial stability. Secondary accents include a warm orange (#ff8c42) for highlights, promotions, and secondary actions, and a sky blue (#0099cc) for informational elements and delivery status. The surface stack uses a near-white base (#ffffff) with carefully calibrated grays (from #f8f8f8 to #4a4a4d) to establish hierarchy without introducing color noise. All interactive elements use the primary green for focus states: input fields receive a 3px rgba(3, 53, 11, 0.1) shadow on focus, buttons transition from #03350b to #02

Typography

The type system uses Montserrat exclusively, a geometric sans-serif that conveys both friendliness and professionalism—essential for a fintech-adjacent commerce brand. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; headline-lg (48px, 700 weight) drives section titles and card headers; body-md (16px, 400 weight, 24px line-height) forms the backbone of product descriptions and instructional copy. Label-md (14px, 600 weight, 0.01em tracking) is applied to all button text and form labels to ensure crisp legibility at small sizes. When displaying small labels over busy product imagery or colored backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain contrast. The 700-weight variant is reserved for CTAs and emphasis; 600-weight is u

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The hero section spans full-width with a 50/50 split: left side (dark green background, #03350b) contains headline and CTAs; right side features product imagery. Section spacing uses the lg token (40px) for major breaks between features, md (24px) for subsection separation, and sm (12px) for internal card padding. The gutter (24px) is applied consistently to all container edges on desktop, reducing to md (24px) on tablet and sm (12px) on mobile. Product cards are arranged in a 3-column grid on desktop, 2 columns on tablet, 1 column on mobile, with md (24px) gap between cards. The container-max-width of 1280px ensures readability on ultra-wide displays while maintaining focus on content. Whitespac

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the heavy drop-shadows of older e-commerce designs. Level 1 (Base): no shadow; surface is the ground truth. Level 2 (Cards, inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to all .card and .input-field elements. Level 3 (Modals, popovers, elevated cards on hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12). On focus, interactive elements receive an additional inner ring: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(3, 53, 11, 0.1). Transitions between shadow states occur over 200ms using ease timing. N

Shapes

The shape philosophy is 'Friendly Precision'—rounded corners signal approachability while maintaining geometric clarity. Buttons use md (0.75rem / 12px) border-radius, creating a soft-edged rectangle that feels welcoming without appearing childish. Cards and containers use lg (1rem / 16px) for a slightly more generous curve that distinguishes them from buttons. Input fields use DEFAULT (0.5rem / 8px) for a subtle, professional appearance. Chips and badges use full (9999px) for a pill shape, reinforcing their role as discrete, selectable elements. The sm (0.25rem / 4px) radius is reserved for s

Components

Action Elements Buttons are the primary interaction surface. The button-primary component uses the primary green (#03350b) background with white text, md (12px) border-radius, and 12px 24px padding, resulting in a 48px height. On hover, the background darkens to #02240a over 200ms; on focus, add a 3px outline in rgba(3, 53, 11, 0.2). The button-secondary variant inverts this: white background with a 2px primary green border, green text, and the same dimensions. On hover, the background fills with primary-container (#daf2de). Button-ghost removes the border and background, using only text color (primary green) with a transparent background; on hover, the background becomes surface-container-high (#e9ecef). All button text uses label-md typography (14px, 600 weight).

Containers & Su

Do's and Don'ts

**Do**

• Do use primary green (#03350b) exclusively for CTAs and primary interactions—it is the most trusted color in the system and must never be diluted or overused.
• Do maintain at least 24px (md spacing) between major content sections to preserve visual breathing room and reduce cognitive load.
• Do apply the 200ms ease transition to all state changes (hover, focus, active) to create a sense of responsive, intentional interaction.
• Do use Montserrat 700 weight only for headlines and button text; never apply it to body copy, which must remain 400 weight for legibility.
• Do ensure all interactive elements have a visible focus state with a 3px outline or shadow in rgba(3, 53, 11, 0.1) for keyboard navigation accessibility.

**Don't**

• Don't use the secondary orange (#ff8c42) or tertiary blue (#0099cc) as primary CTAs; these are supporting accents only and will dilute the primary green's authority.
• Don't apply shadows heavier than 0 16px 40px rgba(0, 0, 0, 0.12); deeper shadows create visual clutter and contradict the system's clarity-first philosophy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric consistency that makes the system recognizable.
• Don't collapse vertical spacing below 16px between distinct content blocks; whitespace is a design tool, not wasted real estate.
• Don't mix typefaces or use system fonts as fallbacks; Montserrat is the sole typeface and must load reliably via @font-face or Google Fonts.