Typography
Font families, the full type scale, text component variants, reading-width guidance, and bullet lists.
Typography
Font Families
Two named slots — --font-family-sans for UI and body copy, --font-family-display for headlines — plus the platform mono stack for code and identifiers. Both slots are brand CSS variables: switching the active brand (top-right toggle) swaps the typeface system-wide with no component changes. The two-slot structure exists so a brand can assign a separate headline face without touching any component code.
--font-family-sansBody text, labels, UI controls, headings h4–h6. Applied via the font-sans utility.
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 — ? ! . ,
Saadiyat Island
Saadiyat Island
Saadiyat Island
Saadiyat Island
Saadiyat Island
Adres, ThinkProp — Switzer (Fontshare). Geometric sans, wide optical range, 300–700.
Propify — Poppins (Google Fonts). Rounder, higher contrast.
--font-family-displayHero headlines, marketing copy, t-display-* tokens. Applied via the font-display utility and baked into every t-display-* class.
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 — ? ! . ,
Saadiyat Island
Saadiyat Island
Saadiyat Island
Saadiyat Island
Saadiyat Island
ThinkProp — Satoshi (Fontshare). High-contrast editorial sans with strong optical weight at large sizes. Pairs with Switzer for UI copy.
Adres, Propify — same as sans. No separate display face; the slot exists for future brand flexibility.
font-monot-code · <code> · <kbd> · <pre>. Property IDs, CSS variables, keyboard shortcuts.
Aa
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9 — ? ! . ,
ADR-2024-SAA-0042
--color-primary: hsl(358 100% 68%)
getCountdownLabel(iso, "Live now")
Platform system stack — no custom load. SF Mono on Apple, Consolas on Windows, Liberation Mono on Linux.
ui-monospace · SFMono-Regular · Menlo · Monaco · Consolas · Liberation Mono · Courier New
Type Scale
Display
.t-display-2xl72px · 600Find your place in the UAE.
.t-display-xl64px · 600Find your place in the UAE.
.t-display-lg56px · 600Saadiyat Island Residences
.t-display-md48px · 600Saadiyat Island Residences
.t-display-sm36px · 600Saadiyat Island Residences
Heading
.t-h128px · 700Saadiyat Lagoons Development
.t-h222px · 700Overview of available listings
.t-h318px · 600Villa 04 — 4 Bed, 5 Bath
.t-h416px · 600Property highlights
.t-h514px · 600Floor plan details
.t-h612px · 600Last updated 3 days ago
Body
.t-body-xl20px · 400Verified properties across the UAE's most sought-after communities.
.t-body-lg18px · 400Verified properties across the UAE's most sought-after communities.
.t-body-md16px · 400Verified properties across the UAE's most sought-after communities.
.t-body-sm14px · 400Verified properties across the UAE's most sought-after communities.
.t-body-xs12px · 400Verified properties across the UAE's most sought-after communities.
Label
.t-label-lg18px · 500Browse listings
.t-label-md16px · 500Browse listings
.t-label-sm14px · 500Browse listings
.t-label-xs12px · 500Browse listings
.t-label-2xs10px · 500Browse listings
Utility
.t-caption12px · 400Prices are indicative and include fees. Last updated 3 days ago.
.t-overline12px · 600 · capsNew development · Q4 2026
.t-code14px · 400 · monoADR-2024-SAA-0042
In Context
New development · Saadiyat Island
Beachfront living on Abu Dhabi's cultural coast.
Saadiyat Lagoons offers 1–5 bedroom residences steps from the Louvre Abu Dhabi and pristine white-sand beaches. Prices start from AED 3.2M.
Property highlights
Direct beach access · Aldar-managed · 5-minute drive to Louvre Abu Dhabi · Smart home ready
Text — Sizes
Text — Weight
Text — Color
Text — Align
Left — Find your home
Center — Find your home
Right — Find your home
Text — Wrap & Truncate
balance
Connecting buyers and sellers across Abu Dhabi's most desirable developments.
pretty
Connecting buyers and sellers across Abu Dhabi's most desirable developments.
truncate
Connecting buyers and sellers across Abu Dhabi's most desirable developments.
Text — As
Paragraph — property overview
Strong — AED 6,250,000Em — last updated 3 days agoReading Width
Optimal line length is 45–75 characters per line (Bringhurst, The Elements of Typographic Style). Too short disrupts reading rhythm; too long tires the eye as it tracks back across the page. Use max-w-prose (65ch) for all continuous body text.
45ch— Choppy rhythm — avoid for proseThe Adres platform connects buyers and sellers across Abu Dhabi's most desirable communities — from Saadiyat Island beachfront villas to Yas Island waterfront residences and Downtown Dubai apartments.
65ch— max-w-prose — use for all body copyThe Adres platform connects buyers and sellers across Abu Dhabi's most desirable communities — from Saadiyat Island beachfront villas to Yas Island waterfront residences and Downtown Dubai apartments.
80ch— Eye fatigue — avoid for running textThe Adres platform connects buyers and sellers across Abu Dhabi's most desirable communities — from Saadiyat Island beachfront villas to Yas Island waterfront residences and Downtown Dubai apartments.
Bullet lists — sm · md · lg
BulletList + BulletListItem render short item lists with a foreground-strong dot, body-text rhythm, and a vertically centered marker. Three sizes scale the text, dot, and row spacing together — pair with the matching body-text size in the surrounding context. Use for goals, features, qualities, or any short list where the heading already lives outside the list.
sm
- Pay service charges and rent reliably
- Submit and track maintenance requests
- Access and manage tenancy documents
md
- Pay service charges and rent reliably
- Submit and track maintenance requests
- Access and manage tenancy documents
lg
- Pay service charges and rent reliably
- Submit and track maintenance requests
- Access and manage tenancy documents