19
UI components

Square, quiet, stateful.

Components share one construction: 1.5 px black top rule, 1 px line borders, 0 radius (2 px on inputs and chips), Montserrat/Alexandria labels. Red appears only as the marker, the active indicator, the error border and the campaign button.

Buttons

Height 44 px (48 on mobile) · 0 radius · label 13 px 600 caps (Arabic 14 px, no caps). One primary per view.
Primary
Book a tour →
Hover
Book a tour →
Focus
Book a tour →
Disabled
Book a tour
Arabic
احجز جولة ←
Secondary
Get a quote
Campaign (red, black text)
Claim offer →
Text link
Read the guide →
On dark
Book a tour →
Icon + label
Add to calendar

Chips, tabs and status

Chips carry facts (never decoration). Active tab = 4 px red inset. Status squares: red = available (the marker), green = confirmed, amber = limited, gray = full.
FurnishedPrivate officeAvailable nowUnavailableمجهّز
OverviewPricingBranchesFAQ
AvailableConfirmedLimitedFully booked

Form fields and states

Labels above, 44 px fields, 2 px radius. Error = 2 px red border + message in black with a red “!” square — never red text.
Checkbox · radio (square)
✓ParkingLockerMonthly
Select
Private office▾

Cards

Service cards
Service
Private offices
1–20+24/7
Explore →
Service
Virtual office
AddressMail
Explore →
Service
Meeting rooms
4–20 seatsHourly
Explore →
Branch card
Branch · Egypt
10th of Ramadan
Offices available3 services

Pricing, dashboard, empty state, navigation

Pricing / info module
Private office · 2 people
EGP 0,000
per month · placeholder (N-11)
FurnitureIncluded
InternetIncluded
Meeting hours4 / month
Setup feesNone
Get a quote
Member dashboard cards
Next booking
Meeting room · 8 seats
Tue 13 Oct · 11:00–13:00 · North 90
Confirmed
Meeting hours · October
6 / 10 h
Mail
2
new items at reception
Empty state
No bookings yet.
Meeting rooms in every branch, by the hour. Your plan includes 10 hours a month.
Book a room
Mobile navigation · closed / open
Private offices
Virtual office
Meeting rooms
Branches

State model

StateTreatmentToken
DefaultBlack text, 1 px line bordertext-primary · border
HoverBackground shifts one step (black → charcoal, white → mist)charcoal · mist
Focus2 px black outline, 3 px offset — visible on every interactive elementfocus
Active / selectedBlack fill, or 4 px red inset (tabs, options)brand-black · signal
DisabledMist fill, gray text, line bordermist · gray · line
Error2 px red border + black message with red “!”signal · text-primary
SuccessGreen status square + text “Confirmed”success
LoadingA 1.5 px black line drawing across the top edge (motion-base)brand-black
Principle
Components are containers for facts.
Rule
Build from tokens only. Radius 0 (2 px inputs/chips). One primary button and one red signal per view.
When to use
Website, booking, member portal, internal tools.
When not to use
Social artwork (use the canvas templates).
Do
  • Keep 44 px minimum touch targets
  • Mirror layouts for Arabic with logical properties
  • Pair every colour state with text or an icon
Don’t
  • Rounded pills, shadows on cards
  • Red text for errors or links
  • New colours for categories