FOUNDATIONS & COMPONENTS

The Lisboa system

Warm paper, azulejo blue, sharp edges and hairlines. Editorial typography with a monospace voice for data. One signature motif. Everything below is reused across the landing, the directory, the tools and the guides.

01 · COLOR

Tokens

Azulejo
#1B4D8F · primary
Azulejo Bright
#2E6FC9 · hover
Ochre
#B8841F · accent
Pinho
#2E4F40 · living
Ink
#17161A · headings
Muted
#57534B · secondary
Faint
#8B857A · captions
Paper
#F4F1E8 · page
Card
#FBFAF5 · surface
Tint Blue
#EAF0F8 · info
Ochre Tint
#FBF4E4 · note
Line
#E2DCCC · hairline
02 · TYPOGRAPHY

Three voices

Libre Caslon Display — display & editorial Hanken Grotesk — UI & body Space Mono — labels, data, meta
DISPLAY / 68How to, in Portugal
HEADING / 32Section heading
SUBHEAD / 21Hanken Grotesk Semibold
BODY / 18Body copy is set in Hanken Grotesk at a comfortable reading measure, calm and plain-spoken for newcomers and locals alike.
MONO / 12UPDATED JUN 2026 · 6 MIN READ · €2 089 / MONTH
03 · SCALE & SIGNATURE

Radius

0 · bars
3 · tags
4 · controls
6 · cards

Spacing

4 · 8 · 12 · 16
24 · 32 · section padding
48 · 72 · column gaps

Azulejo motif

Interlocking quarter-arcs on azulejo blue. Used for hero panels, CTA cards and section rules — the one ownable graphic device.
04 · BUTTONS

States

Default Hover Pressed Secondary Ghost link ↗
05 · CATEGORY TAGS
TAXES WORK LIVING HOUSING RESIDENCY GUIDE SOLID / ACTIVE
06 · CALLOUTS
KEY FACTS · INFO
Used for quick reference blocks at the top of a guide — costs, timings, requirements. Blue tint, hairline border, no accent bar.
NOTE · WARNING
Ochre tint for things readers must not miss — deadlines, non-EU rules, exceptions. Same shape, warmer signal colour.