Design System

Zella Visual Identity

Complete logo system, colour palette, typography scale, component tokens, and motion guidelines for the Zella dashboard.

Logo System — Dark Background

Wordmark — size 40

Wordmark — size 28 (sidebar)

Z Mark only — 36px

Z Mark only — 24px (favicon scale)

Logo System — Light Background

Wordmark — light variant

Z Mark only — light diagonal

Colour Palette

Brand (Forest)

#1A6B3C

--brand

Brand Dark

#145530

--brand-dark

Brand Light

#EAF3DE

--brand-light

Leaf (Pulse)

#22C55E

--leaf

Night

#0F1923

--night

Dark

#1A1A2E

--dark

Cream

#F7F5F0

--cream

White

#FFFFFF

--white

Border

#E5E2DA

--border

Muted

#6B7280

--muted

Ember

#E65100

--ember

Amber Light

#FFF3E0

--amber-light

Red

#B71C1C

--red

Blue

#1565C0

--blue

Typography Scale
Display — Syne 800 · 40px · -0.03em

The future of commerce

Section — Syne 700 · 26px · -0.02em

Revenue this month

Card title — Syne 700 · 18px · -0.01em

Recent orders

Body — DM Sans 400 · 15px · 1.65

Zella handles your WhatsApp conversations automatically, processes orders, and sends payment instructions — all while you sleep.

Label caps — DM Sans 500 · 10px · 0.14em
Order status · Active customers · Revenue
Order ref — DM Mono 500 · 13px
ZL-4113 ZL-0042 ZL-9987
Stat Numbers — count-up on mount
Revenue MTD
₦0
Orders
0
Customers
0
Messages
0
Badges
ActiveLiveFailedPendingInfoDraftVerifiedPaidAwaiting receipt
Buttons
Form Inputs
Motion — Amber Pulse (receipt pending)
🧾
ZL-0042

Receipt submitted — awaiting verification

Pending
Live Indicator
AI is active — responding to customers