DESIGN.md · Analysis

Bestow Restaurant

dynleaf.com · 29 Aug 2026 · 47 colors · Inter

Bestow Restaurant

A vibrant food-ordering platform for premium restaurants, emphasizing quick WhatsApp-based transactions with a clean, accessible interface that celebrates culinary variety through categorical browsing and instant checkout.

Colors

surface#ffffff

surface-dim#f5f5f5

surface-bright#ffffff

surface-container-lowest#fafafa

surface-container-low#f5f5f5

surface-container#eeeeee

surface-container-high#e9ecef

surface-container-highest#e0e0e0

on-surface#1a1a1a

on-surface-variant#6c757d

inverse-surface#1a1a1a

inverse-on-surface#f5f5f5

outline#9ca3af

outline-variant#d1d5db

surface-tint#38ad00

primary#38ad00

on-primary#ffffff

primary-container#c8e6c9

on-primary-container#1b5e20

inverse-primary#7cb342

secondary#25d366

on-secondary#ffffff

secondary-container#c8e6c9

on-secondary-container#0d3d1a

tertiary#04a12b

on-tertiary#ffffff

tertiary-container#a5d6a7

on-tertiary-container#1b5e20

error#cb202d

on-error#ffffff

error-container#ffcdd2

on-error-container#b71c1c

primary-fixed#c8e6c9

primary-fixed-dim#a5d6a7

on-primary-fixed#1b5e20

on-primary-fixed-variant#2e7d32

secondary-fixed#c8e6c9

secondary-fixed-dim#a5d6a7

on-secondary-fixed#0d3d1a

on-secondary-fixed-variant#1b5e20

tertiary-fixed#a5d6a7

tertiary-fixed-dim#81c784

on-tertiary-fixed#1b5e20

on-tertiary-fixed-variant#2e7d32

background#ffffff

on-background#1a1a1a

surface-variant#e9ecef

Typography

display: fontFamily: Inter · fontSize: 60px · fontWeight: 700 · lineHeight: 68px · letterSpacing: -0.04em
headline-lg: fontFamily: Inter · fontSize: 40px · fontWeight: 600 · lineHeight: 48px · letterSpacing: -0.02em
headline-md: fontFamily: Inter · fontSize: 28px · fontWeight: 600 · lineHeight: 36px · letterSpacing: -0.01em
title-lg: fontFamily: Inter · fontSize: 20px · fontWeight: 600 · lineHeight: 28px · letterSpacing: 0em
body-lg: fontFamily: Inter · fontSize: 18px · fontWeight: 400 · lineHeight: 28px · letterSpacing: 0.02em
body-md: fontFamily: Inter · fontSize: 16px · fontWeight: 400 · lineHeight: 24px · letterSpacing: 0.01em
label-md: fontFamily: Inter · fontSize: 14px · fontWeight: 600 · lineHeight: 20px · letterSpacing: 0.01em
label-sm: fontFamily: Inter · fontSize: 12px · fontWeight: 500 · lineHeight: 16px · letterSpacing: 0.02em

Design guidance

Overview

Bestow is a premium restaurant ordering platform designed for food enthusiasts seeking instant gratification through WhatsApp-based commerce. The brand embodies 'Accessible Vitality'—a design philosophy that combines the energy of vibrant green accents (#38ad00) with clean, minimal surfaces to create an interface that feels both premium and approachable. The UI celebrates culinary diversity through categorical organization and rich imagery, transforming the friction of restaurant ordering into a delightful, friction-free experience. Voice: conversational yet authoritative, encouraging without being pushy. Example: 'Combo Deals—save more with our special combos. Order now, skip the hassle.'

Colors

The color system is anchored in a vivid, high-saturation primary green (#38ad00) that signals action, trust, and the freshness of food. This primary is deployed on all call-to-action buttons (height 48px, padding 12px 24px, border-radius 14px), category tabs, and interactive affordances. The secondary green (#25d366) reinforces WhatsApp integration and payment flows. Tertiary green (#04a12b) provides depth for hover and active states. The surface stack is pure white (#ffffff) with subtle gray containers (#e9ecef, #eeeeee) for layering and visual hierarchy. On-surface text is near-black (#1a1a1a) for maximum legibility at 16px body size. Error states use a warm red (#cb202d) for warnings and validation feedback. All surfaces maintain 1px borders in outline-variant (#d1d5db) to define edges

Typography

The type system uses Inter exclusively across all weights (400, 500, 600, 700) to maintain brand coherence and ensure crisp rendering on mobile and desktop. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and restaurant names. Headline-lg (40px, 600 weight) introduces major sections. Headline-md (28px, 600 weight) titles category groups like 'Combo Deals'. Title-lg (20px, 600 weight) labels individual menu items. Body-lg (18px, 400 weight, 28px line-height) is reserved for descriptive copy and ingredient lists. Body-md (16px, 400 weight) is the default for UI labels and descriptions. Label-md (14px, 600 weight, 0.01em tracking) is used for button text and badges. Label-sm (12px, 500 weight, 0.02em tracking) appears on secondary labels and supplementary information. All t

Layout

The layout follows a 12-column grid with a max-width of 1280px, adapting fluidly from mobile (single column, 16px gutter) to desktop (multi-column, 24px gutter). The hero section spans full width with a 16:9 aspect ratio image and overlaid restaurant name and action buttons. The main content area uses a two-column layout: a 240px fixed left sidebar for category navigation (with 12px padding, 8px item spacing) and a fluid right column for menu items displayed in a 2–3 column grid on desktop, 1 column on mobile. Section separation uses lg spacing (40px) to create breathing room. Card padding is consistently 24px (md spacing), with 12px gaps between items. The sticky footer action bar (height 64px) contains primary and secondary CTAs, using md spacing (24px) for internal padding. Container ma

Elevation & Depth

Depth is achieved through a subtle shadow hierarchy and strategic use of background colors rather than aggressive drop shadows. Level 1 (Base): white surface (#ffffff) with no shadow, representing the default card state. Level 2 (Elevated): 0 4px 12px rgba(0, 0, 0, 0.1) shadow applied to interactive cards and modals, creating a gentle lift. Level 3 (Pressed/Hover): 0 4px 12px rgba(0, 0, 0, 0.1) with a 0 0 0 2px rgba(0, 0, 0, 0.2) focus ring for keyboard navigation. Focus states on buttons and inputs use a 3px inset shadow in primary color (rgba(56, 173, 0, 0.1)) to indicate active focus withou

Shapes

The shape system follows 'Soft-Technical Minimalism'—rounded corners that feel modern and approachable without sacrificing clarity. Buttons use lg radius (1rem / 16px) for primary and secondary actions, creating a friendly, inviting appearance. Cards and containers use md radius (0.75rem / 12px) for a balanced, professional look. Input fields use DEFAULT radius (0.5rem / 8px) for a tighter, more utilitarian feel. Chips and badges use full radius (9999px) to emphasize their role as discrete, self-contained elements. The hero section image uses xl radius (1.5rem / 24px) at the bottom to soften t

Components

Action Elements Primary buttons (button-primary) use #38ad00 background with white text, 14px Inter 700, 48px height, 12px 24px padding, and 14px border-radius. On hover, the background darkens to #2e7d32 with a 0 4px 12px rgba(56, 173, 0, 0.2) shadow and a 200ms transition. On active/pressed, the background becomes #1b5e20 with no shadow. Focus states add a 3px inset ring in rgba(56, 173, 0, 0.3). Secondary buttons (button-secondary) use transparent background with a 2px solid #38ad00 border, #38ad00 text, and the same sizing. On hover, the background becomes #c8e6c9 (primary-container) with #1b5e20 text. Ghost buttons (button-ghost) use transparent background with #6c757d text; on hover, they shift to #e9ecef background with #1a1a1a text.

Containers & Surfaces Cards (card) use w

Do's and Don'ts

**Do**

Do use primary green (#38ad00) exclusively for primary CTAs, category selection, and confirmation states—never for warnings or errors.
Do maintain 48px minimum height for all touch targets (buttons, list items) to ensure mobile accessibility.
Do apply the 0 4px 12px rgba(0, 0, 0, 0.1) shadow only to elevated surfaces (cards, modals); use borders for flat elements.
Do use Inter 600 weight for all labels and button text; reserve 400 weight for body copy and descriptions.
Do preserve 40px (lg spacing) between major sections to create visual breathing room and reduce cognitive load.

**Don't**

Don't use secondary green (#25d366) or tertiary green (#04a12b) for primary actions; reserve them for WhatsApp integration and depth states only.
Don't apply border-radius greater than 1.5rem (xl) to any component; the system maxes out at xl to maintain technical clarity.
Don't nest shadows deeper than Level 2 (0 4px 12px); avoid stacking multiple shadows or using blur values above 12px.
Don't use system fonts or fallback stacks; always load Inter from Google Fonts to ensure brand consistency across all platforms.
Don't reduce padding below 12px (sm spacing) on interactive elements; this creates targets too small for reliable mobile interaction.

---
version: alpha
name: Bestow Restaurant
description: >-
  A vibrant food-ordering platform for premium restaurants, emphasizing quick WhatsApp-based transactions with a clean,
  accessible interface that celebrates culinary variety through categorical browsing and instant checkout.
logo:
  src: https://www.dynleaf.com/favicon/apple-icon-152x152.png
colors:
  surface: '#ffffff'
  surface-dim: '#f5f5f5'
  surface-bright: '#ffffff'
  surface-container-lowest: '#fafafa'
  surface-container-low: '#f5f5f5'
  surface-container: '#eeeeee'
  surface-container-high: '#e9ecef'
  surface-container-highest: '#e0e0e0'
  on-surface: '#1a1a1a'
  on-surface-variant: '#6c757d'
  inverse-surface: '#1a1a1a'
  inverse-on-surface: '#f5f5f5'
  outline: '#9ca3af'
  outline-variant: '#d1d5db'
  surface-tint: '#38ad00'
  primary: '#38ad00'
  on-primary: '#ffffff'
  primary-container: '#c8e6c9'
  on-primary-container: '#1b5e20'
  inverse-primary: '#7cb342'
  secondary: '#25d366'
  on-secondary: '#ffffff'
  secondary-container: '#c8e6c9'
  on-secondary-container: '#0d3d1a'
  tertiary: '#04a12b'
  on-tertiary: '#ffffff'
  tertiary-container: '#a5d6a7'
  on-tertiary-container: '#1b5e20'
  error: '#cb202d'
  on-error: '#ffffff'
  error-container: '#ffcdd2'
  on-error-container: '#b71c1c'
  primary-fixed: '#c8e6c9'
  primary-fixed-dim: '#a5d6a7'
  on-primary-fixed: '#1b5e20'
  on-primary-fixed-variant: '#2e7d32'
  secondary-fixed: '#c8e6c9'
  secondary-fixed-dim: '#a5d6a7'
  on-secondary-fixed: '#0d3d1a'
  on-secondary-fixed-variant: '#1b5e20'
  tertiary-fixed: '#a5d6a7'
  tertiary-fixed-dim: '#81c784'
  on-tertiary-fixed: '#1b5e20'
  on-tertiary-fixed-variant: '#2e7d32'
  background: '#ffffff'
  on-background: '#1a1a1a'
  surface-variant: '#e9ecef'
typography:
  display:
    fontFamily: Inter
    fontSize: 60px
    fontWeight: '700'
    lineHeight: 68px
    letterSpacing: '-0.04em'
  headline-lg:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: '600'
    lineHeight: 48px
    letterSpacing: '-0.02em'
  headline-md:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: '600'
    lineHeight: 36px
    letterSpacing: '-0.01em'
  title-lg:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
    letterSpacing: 0.02em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
    letterSpacing: 0.01em
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.02em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 40px
  xl: 64px
  gutter: 16px
  container-max: 1280px
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.06)
  md: 0 4px 12px rgba(0, 0, 0, 0.1)
  lg: 0 16px 40px rgba(0, 0, 0, 0.12)
layout:
  containerMaxWidth: 1280px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    fontWeight: '700'
    fontSize: 14px
  button-primary-hover:
    backgroundColor: '#2e7d32'
    textColor: '{colors.on-primary}'
    boxShadow: 0 4px 12px rgba(56, 173, 0, 0.2)
  button-primary-active:
    backgroundColor: '#1b5e20'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
    border: 2px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-ghost:
    backgroundColor: transparent
    textColor: '{colors.on-surface-variant}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 12px 24px
    height: 48px
  button-ghost-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  card:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.md}'
    padding: '{spacing.md}'
    boxShadow: '{elevation.sm}'
    border: 1px solid {colors.outline-variant}
  card-hover:
    backgroundColor: '{colors.surface-container-low}'
    boxShadow: '{elevation.md}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 12px 16px
    border: 1px solid {colors.outline-variant}
    height: 44px
  input-field-focus:
    borderColor: '{colors.primary}'
    boxShadow: 0 0 0 3px rgba(56, 173, 0, 0.1)
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.sm}'
    typography: '{typography.body-md}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.primary}'
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: 4px 12px
    fontWeight: '600'
  chip-active:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 8px 16px
    height: 36px
  chip-inactive:
    backgroundColor: '{colors.surface-container}'
    textColor: '{colors.on-surface-variant}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: 8px 16px
    height: 36px
  chip-inactive-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary buttons (button-primary) use #38ad00 background with white text, 14px Inter 700, 48px height, 12px 24px padding, and 14px border-radius. On hover, the background darkens to #2e7d32 with a 0 4px 12px rgba(56, 173, 0, 0.2) shadow and a 200ms transition. On active/pressed, the background becomes #1b5e20 with no shadow. Focus states add a 3px inset ring in rgba(56, 173, 0, 0.3). Secondary buttons (button-secondary) use transparent background with a 2px solid #38ad00 border, #38ad00 text, and the same sizing. On hover, the background becomes #c8e6c9 (primary-container) with #1b5e20 text. Ghost buttons (button-ghost) use transparent background with #6c757d text; on hover, they shift to #e9ecef background with #1a1a1a text.

### Containers & Surfaces
Cards (card) use w

## Do's and Don'ts

**Do**
- Do use primary green (#38ad00) exclusively for primary CTAs, category selection, and confirmation states—never for warnings or errors.
- Do maintain 48px minimum height for all touch targets (buttons, list items) to ensure mobile accessibility.
- Do apply the 0 4px 12px rgba(0, 0, 0, 0.1) shadow only to elevated surfaces (cards, modals); use borders for flat elements.
- Do use Inter 600 weight for all labels and button text; reserve 400 weight for body copy and descriptions.
- Do preserve 40px (lg spacing) between major sections to create visual breathing room and reduce cognitive load.

**Don't**
- Don't use secondary green (#25d366) or tertiary green (#04a12b) for primary actions; reserve them for WhatsApp integration and depth states only.
- Don't apply border-radius greater than 1.5rem (xl) to any component; the system maxes out at xl to maintain technical clarity.
- Don't nest shadows deeper than Level 2 (0 4px 12px); avoid stacking multiple shadows or using blur values above 12px.
- Don't use system fonts or fallback stacks; always load Inter from Google Fonts to ensure brand consistency across all platforms.
- Don't reduce padding below 12px (sm spacing) on interactive elements; this creates targets too small for reliable mobile interaction.

Edit, then copy or download.