Design systemsDesign systemUI kitMobile

Hayy design system

The UI kit behind the Hayy: cedar green actions, terracotta for paying, chat bubbles, store and order cards, chips and inputs in light and dark.

Role: UX/UI designer
Year: 2025

Overview

The Hayy's system feels local and warm: linen backgrounds, cedar green for actions and sent messages, and terracotta only for paying. Components mix messaging (bubbles, voice notes) with commerce (menus, steppers, order cards).

Everything on this page is rebuilt in code from the original Hayy screens: the colours and font sizes were taken from the exported Figma files.

Colour

Brand

Cedar green
#2D5D3B
Primary buttons, active chips, sent messages
Sage
#8DC397
Prices and links in dark
Mint
#ECF1E9
Order status and tips in light
Moss
#303A30
Order status and tips in dark
Terracotta
#C56349
Confirm & pay, prices in chat
Heart red
#E5484D
Saved places

Surfaces and text

Linen
#FAF9F6
Background in light
White
#FFFFFF
Cards in light
Black
#121212
Background in dark
Graphite
#242424
Cards in dark
Ink
#1A1A1A
Text in light
Fog
#ADB3BC
Secondary text in dark
Gray
#6B7280
Secondary text in light

Typography

Typeface

Inter

Status
29px · ExtraBold
Ready in 15 min
Product
27px · ExtraBold
Classic Zaatar
Greeting
26px · ExtraBold
Sabah el kheir!
Page title
24px · Bold
Explore
Store name
22px · Bold
Al-Dayaa Bakery
Section
18px · Bold
Around the corner
Body
15px · Regular
Sabah el noor! Yes please, save me 3 Zaatar.
Small
13px · Medium
Order Request #402
Caption
12px · SemiBold
Achrafieh, Beirut

Buttons

Light theme

Primary, secondary and text

Add to order · 150,000 LBPLocationOrder again

States

PressedDisabled

Accent and icon buttons

Confirm & pay

Dark theme

Primary, secondary and text

Add to order · 150,000 LBPLocationOrder again

States

PressedDisabled

Accent and icon buttons

Confirm & pay

Inputs and controls

Light theme

Search shops, food & services

Text field

Note for the bakery

Add special instructions (optional)

Focused

Add special instructions (optional)

Select

Appearance

Light

Segmented control

All ordersActiveCompleted

Chips, toggle and selection

AllFoodShopsServices

Order updates

SelectedNot selected

Dark theme

Search shops, food & services

Text field

Note for the bakery

Add special instructions (optional)

Focused

Add special instructions (optional)

Select

Appearance

Light

Segmented control

All ordersActiveCompleted

Chips, toggle and selection

AllFoodShopsServices

Order updates

SelectedNot selected

Cards

Light theme

Al-Dayaa Bakery

Fresh manakish & local favorites

★ 4.8 (124) · 0.3 km · Open now

Your order #402

Al-Dayaa is getting it ready

Ready in 15 min · Track order →

Classic Zaatar

150,000 LBP

− 3 +

Sabah el kheir! ☀️ Fresh manakish just came out of the oven.

Sabah el noor! Save me 3 Zaatar and 1 Cheese.

▶0:15

LocationMenuHours

Dark theme

Al-Dayaa Bakery

Fresh manakish & local favorites

★ 4.8 (124) · 0.3 km · Open now

Your order #402

Al-Dayaa is getting it ready

Ready in 15 min · Track order →

Classic Zaatar

150,000 LBP

− 3 +

Sabah el kheir! ☀️ Fresh manakish just came out of the oven.

Sabah el noor! Save me 3 Zaatar and 1 Cheese.

▶0:15

LocationMenuHours

Icons

Light theme

Home
Explore
Messages
Profile
Search
Location
Menu
Hours
Call
Voice note
Save
New chat

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

Home
Explore
Messages
Profile
Search
Location
Menu
Hours
Call
Voice note
Save
New chat

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

Chip Full
Button 12px
Card 16px
Bubble 18px

Spacing scale

4px
8px
12px
16px
20px
24px
32px

Badges and status

Open nowHot & FreshOn the wayCompleted