منزلو
MANZILO DESIGN SYSTEM · THE FRAME · V1

A sharp frame around
a warm workspace.

The mark is a square frame sheltering a roofline. The product is built the same way: dark ink chrome holds the edges, the portfolio lives inside on drafting paper, and the roofline chevron marks whatever is active. Modern in its geometry, human in its voice.

RADII 2–6px
BASE UNIT 4px
SEVERITY REGISTERS 6
00 · START HERE
The whole product,
one click away

Every screen is live and linked — walk any flow end to end. This page is the map; the laws below are what every screen was checked against.

PORTAL · app.manzilo.com START AT THE COMMAND CENTER
MARKETING · manzilo.com
INTERNAL OPS · AMBER CHROME
No backend behind any of this — every state you see is designed, not fetched. Dead ends are labelled, never silent.
01 · COLOUR
Ink, paper,
and three signals

Colour never decorates. Teal is Manzilo acting, amber is waiting on you, clay is legal weight. Everything else is ink on paper.

ink / frame#0C1A1D
paper / canvas#F5F3EE
surface / card#FFFFFF
paper-deep / wells#EFEDE6
TEAL · #118EA4 / #0B6B7E on white Manzilo acting: primary buttons, live agent, cleared money, active nav.
AMBER · #C2891A / #8F5C0C text Waiting on a human. Reversible. Never decorative, never a warning colour for style.
CLAY · #B23A20 / #93301B text Legal consequence only: bounced, returned, breached, emergency. Earned, not styled.
INK LADDER text #101D20 body #3E5156 mute #53666A border 14% rule 8%
02 · TYPE
Three voices,
two scripts

Funnel Display speaks (headlines, money). Instrument Sans works (interface). JetBrains Mono files (codes, labels, dates). Arabic runs on Noto Kufi with its own ramp: one step smaller, 1.8 leading, no letterspacing, weight instead of caps.

display
Funnel 44/1.06/500 Four things need you
title
Funnel 27/1.16/500 Fatima's third cheque came back unpaid.
section
Funnel 20/1.2/600 Needs your decision
item
Sans 15.5/1.4/600 Approve a new water heater — AED 1,850
body
Sans 13.5/1.55/400 Over your AED 1,000 auto-approve ceiling, so the agent paused and brought it to you with the quote attached.
label / meta
Mono 10/.12em/UP REQ-2104-1207 · UNIT 0904 · WAITING 2D
money
Funnel 33/600/tabular AED90,000
ثلاثة أمور تحتاج إليك — والباقي تم إنجازه arabic title
Kufi 23/1.5/500
03 · SEVERITY
Six registers,
not sixty badges

Every status in the domain maps to one of six forms. Form changes with severity — not just colour — so the ladder survives greyscale and colour-blindness. Solid fill is reserved for legal weight.

DRAFT Mute. Bare mono text, no container. draft · pending · invited · idle
SUBMITTED Note. Hollow square marker — something moved, nobody waits on you. sent · deposited · assigned
PROCESSING · 1D 4H Live. Blinking square + elapsed clock, always. processing · under_review · on_the_way · pdc_held
WAITING 2D Attend. Amber tile — yours to clear, reversible. The only register allowed in the decision queue. overdue · pending_signature · expiring
REGISTERED Sealed. Teal tile with seal mark — earned states only: a bank cleared it, a government registered it. cleared · signed · active · paid
BOUNCED Grave. Solid clay fill; on cards it takes the whole top band, never a side stripe. bounced · returned · failed · breached · emergency
04 · SIGNATURE
The unit grid

Every square is a home. One drawing system carries occupancy, vacancy, and payment progress across the whole product — the thing a screenshot of Manzilo is recognised by.

OCCUPANCY · DASHBOARD
Filled teal is let, hollow is open. 28 of 32.
PAYMENTS · CONTRACT
Cheques 1–4: cleared, cleared, returned, held. One glance.
CHEVRON · WAYFINDING
The roofline from the mark points at whatever is active: section headers, current nav, "done" confirmations.
05 · PARTS
Core components

Sharp geometry, generous hit targets, honest states. Whole rows are clickable; hover always answers with something.

BUTTONS · 38PX / 34PX DENSE
FIELDS · MONO FOR ANYTHING A MACHINE READS
TABLE · 44PX ROWS · WHOLE ROW OPENS
PROPERTYTYPESTATUSOCCUPANCY
Marina Heights Tower B Apartment building ACTIVE
Al Barsha Villa 14 Villa · 2 units OWNER NOT INVITED
Jumeirah Garden Compound Compound · 4 buildings DRAFT —
EMPTY STATE · NEVER A SHRUG
No cheques yet They appear when you sign a contract with a payment schedule. Nothing is missing — you just haven't signed a tenant yet.
MOTION · ONLY WHERE IT EXPLAINS
rise 300ms — sections enter bottom-up, staggered 40ms, on load only. blink 2.2s — the live-state square. The only looping motion in the product. fill 600ms — unit-grid squares fill left-to-right when money lands. The seal moment. settle 140ms — status chips cross-fade. Nothing slides, nothing bounces.
06 · UX LAWS
How screens
must behave

Not visual rules — behavioural ones. Every screen from here on is checked against these seven.

1Lead with the sentence, not the grid. Every screen opens by saying what matters today in plain words; the data supports the sentence.
2Every alert carries its actions. Nothing tells you something is wrong without offering the next two or three moves, inline, right there.
3The agent shows its work. Anything done autonomously is logged in one visible place with a timestamp, and anything it declined to do says why.
4Connect the dots for the user. Same tenant in two alerts → say so. Below-market rent at renewal → propose the number. Knowledge the system has, surfaced where the decision happens.
5Zero is a destination. Queues end with “that's everything” — the product tells you when you're done, instead of leaving you scanning for more.
6Counts mean “awaiting you.” A number in the nav is always work owed by you — never a total, never decoration.
7Legal weight looks different. Bounced cheques, breaches and emergencies use the grave register and lead the page. Everything else queues behind them.