A calm, confident home for City Property Services.
A monochromatic, whitespace-first system built on Apple’s interface principles, with soft 16px radii, diffuse shadows, and one deep-navy accent drawn straight from the logo.
Assumptions
Light theme only. Deep navy #085070 is the single accent; sky blue is a sparing highlight. Real photography replaces every .ph slot.
Principles
Generous whitespace over density. One accent, used decisively. Motion is gentle and purposeful, with lifts, fades and zoom on hover.
What’s inside
Foundations (logo, color, type, space, motion) and components (buttons, fields, search, cards, chips, maps, nav, footer).
Sample screens
The real pages, assembled from this system.
Logo
Three lockups for different surfaces.
Color
A cool monochrome neutral scale carries the interface; navy does all the work.
Typography
The native system stack, SF Pro on Apple and system-ui elsewhere.
clamp 40 to 68
700 · -3.2%
clamp 32 to 44
700 · -2.6%
clamp 25 to 32
650 · -2%
21 · 600
18 · 1.6
16 · 1.55
13
12.5 · .12em
Space, radius & elevation
A 4px base rhythm, soft corners, and layered shadows that lift on interaction.
Buttons & controls
Pill buttons with a gentle lift on hover.
Chips, tags & location pins
Property types and localities as selectable chips; status tags for cards.
Components in context
See property cards, fields, the search bar and maps working together on the homepage, listings and property detail pages.