FoodFlow design system
The UI kit behind FoodFlow's restaurant platform: warm orange actions, KPI, menu and promotion cards, status badges and order tables in light and dark.
- Role
- UX/UI designer
- Year
- 2025
Overview
FoodFlow's system balances an appetising brand colour with a workspace people use all day. Orange is for actions and the main data series, food photography carries the emotion, and order status has its own green, amber and blue.
Everything on this page is rebuilt in code from the original FoodFlow screens: the colours and font sizes were taken from the exported Figma files.
Colour
Brand and data
FoodFlow orange
#FF6B35
Primary actions, active nav, main chart series
Apricot
#FF9A70
Second chart series, hover
Peach
#FFB18F
Past days in revenue bars
Cream
#FFF1E9
Promo codes, tips, soft notices
Completed
#10B981
Completed orders, positive change
Preparing
#F59E0B
Orders in the kitchen
Delivering
#3B82F6
Orders on the road
Surfaces and text
Night
#151C26
Page background in dark
Panel dark
#1C2430
Cards in dark
Line dark
#303A49
Borders in dark
Warm white
#FFFAF6
Page background in light
Line light
#EEF0F2
Borders in light
Charcoal
#1F2937
Headings in light
Slate
#64748B
Secondary text
Typography
Typeface
Inter
- Hero metric
48px · Bold4.8 / 5
- KPI
36px · Bold247
- Greeting
28px · BoldGood Morning, Sarah!
- Price
24px · Bold$12.99
- Page title
20px · BoldMenu Management
- Card title
16px · SemiBoldSpicy Chicken Wings
- Navigation
15px · MediumDashboard Menu Orders
- Body
14px · RegularManage your dishes, prices and availability.
- Caption
12px · Medium↑ 18% vs yesterday
Buttons
Light theme
Primary, secondary and text
States
Dark theme
Primary, secondary and text
States
Inputs and controls
Light theme
Search
Text field
Restaurant name
Focused
Select
Category
Segmented control
Chips, toggle and selection
Dark theme
Search
Text field
Restaurant name
Focused
Select
Category
Segmented control
Chips, toggle and selection
Cards
Light theme
Spicy Chicken Wings
Appetizer
$12.99
Orders
↑ 12%
247
20% OFF
Lunch Hour Special
Code LUNCH20
Dark theme
Spicy Chicken Wings
Appetizer
$12.99
Orders
↑ 12%
247
20% OFF
Lunch Hour Special
Code LUNCH20
Icons
Light theme
- Dashboard
- Menu
- Orders
- Delivery
- Reviews
- Promotions
- Analytics
- Settings
- Prep time
- Popular
- Alerts
- Import
Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.
Dark theme
- Dashboard
- Menu
- Orders
- Delivery
- Reviews
- Promotions
- Analytics
- Settings
- Prep time
- Popular
- Alerts
- Import
Outline icons, 1.5–2px stroke on a 24px grid, set in a soft tinted well when they label a row or action.
Radius, spacing and badges
Corner radius
- Tag Full
- Button 8px
- Card 12px
- Banner 16px
Spacing scale
- 4px
- 8px
- 12px
- 16px
- 20px
- 24px
- 32px
Badges and status