USER INTERFACE

Typography

One typeface, one scale, four text colours — everything every Avava screen is written in.
THEME
01

Typeface

Urbanist 400–900 · mono for IDs
AaTYPEFACEUrbanistGeometric sans with open shapes. Friendly at 12 px, sharp at 56. All weights 400–900 are loaded.
TRY IT · 600 · SEMIBOLD
400Spring 27 · €19,718
500Spring 27 · €19,718
600Spring 27 · €19,718
700Spring 27 · €19,718
800Spring 27 · €19,718
900Spring 27 · €19,718
CHARACTERSABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 € £ $ % × ÷ ± → ← ↑ ↓ ✓ ★ … “ ” ‘ ’ — – · ÆØÅ æøå ÄÖÜ ß Ğ Ş Аа Бб Жж
MONO · FOR CODE, IDS AND KEYS
UrbanistAV-2026-041 · 0O 1lI
MonoAV-2026-041 · 0O 1lI
Use ui-monospace for invoice numbers, IBANs, timecodes and code — characters that must never be confused.
02

Type scale

Eleven styles — drag the viewport to see headings scale
VIEWPORT1280 px
Display56 / 700 · 0.95 · -.04em · 36–56· Hero numbers, cover titlesMývatn at dawn
H134 / 600 · 1.05 · -.02em · 26–34· Page titlesInvoice preview
H226 / 600 · 1.15 · -.02em · 21–26· Section titlesSpring 27 campaign
H320 / 700 · 1.25 · -.01em · 18–20· Card titles, section headersRevenue · 30 days
H417 / 700 · 1.3 · 16–17· Card headings, dialogsPayment plan
Body L15 / 500 · 1.6· Lead paragraphsFour hours of blue light and one cold lake.
Body13.5 / 500 · 1.55· Default UI textSelects are in review; retouch starts Monday.
Small12.5 / 500 · 1.5· Secondary text, metaNordic Thread · due Oct 28
Caption11.5 / 600 · 1.4· Timestamps, helper textUpdated 2 h ago
Label10.5 / 800 · 1.2 · .12em· Eyebrows, column heads (caps)Amount due
Mono12 / 700 · 1.5· IDs, codes, IBANAV-2026-041 · 00:17:04
03

In use

A real page made only from the scale
SAMPLE PAGE · BUILT FROM THE SCALE ONLY
NORDIC THREAD · SPRING 27Label

Mývatn at dawnH1 · 34/600

Four hours of blue light, a crew of five and one very cold lake. Selects are in review; retouching starts Monday.Body L · 15/1.6

This weekH4 · 17/700

Selects review with LenaTueBody · 13.5
Retouch 40 heroesMon–ThuBody · 13.5
Deliver finals & licenceOct 28Body · 13.5
“Calm, honest, lots of daylight — exactly what we asked for.”Lena Strand · Head of MarketingQuote · 17/600 i
AV-2026-041Nordic Thread · final€19,718.30
AV-2026-040Kaya Ceramics · M2€6,920.00
AV-2026-039Fjord Outdoor · deposit€5,210.00
Table · Mono 12 + tabular
Updated by Olivia Lane · 2 h agoCaption · 11.5
04

Numbers & data

Tabular figures, formats, units and deltas
FIGURES
€1,111.11€19,718.30€4,200.00€88,000.07€113,029.48
Every digit has the same width — columns line up.
FORMATS
Money€19,718.30en-IE · 2 dp
Compact€72.9k> €10k in tiles
Percent64 %no decimals
Size1.62 TB2 dp, unit
Duration12 d · 2h 14mshort units
DateOct 17, 2026MMM D, YYYY
Time14:3024 h
IDAV-2026-041mono
BIG NUMBER · SMALL UNIT
€72.9k4.9★64%
▲ 12 %▼ 8 %± 0 %
Unit at 50 % of the number, muted. Deltas always pair colour with ▲ ▼.
05

Colour & hierarchy

Four text levels with live contrast
DARK SURFACE · #151821
Primary#eef0f5 · Titles, body15.5:1 AAA
Secondary#a7abb8 · Descriptions7.7:1 AAA
Muted#8a8f9e · Meta, captions5.5:1 AA
Disabled#5d616d · Unavailable2.9:1 · exempt
Link / accent#9adbe6 · Links, active11.5:1 AAA
Error#ff9b7a · Validation8.6:1 AAA
LIGHT SURFACE · #FFFFFF
Primary#11131a · Titles, body18.6:1 AAA
Secondary#4b5263 · Descriptions7.8:1 AAA
Muted#6b7080 · Meta, captions4.9:1 AA
Disabled#a7abb8 · Unavailable2.3:1 · exempt
Link / accent#2b8a99 · Links, active4.0:1 AA large
Error#b2482c · Validation5.4:1 AA
06

Long text

Measure, wrapping, clamping, languages
JOURNAL · EN

How we shot four hours of blue light on a frozen lake for Nordic Thread’s spring campaign

We arrived at Mývatn at 4:10, an hour before the blue hour, with a crew of five and a van full of sandbags. The brief asked for calm, honest images with lots of daylight — no flash, no haze machines. We scouted three spots along the eastern shore, picked the one with the least wind, and shot the parkas against the low sun until the light turned gold. Every hero frame you see in the lookbook was made in those four hours, and most of them needed only light retouching afterwards.

65 ch✓ comfortable
Controls
MEASURE · 65 ch
HEADLINE WRAP
CLAMP
LANGUAGE
Aim for 60–75 characters per line in body text. Balance short headlines, use “pretty” for paragraphs.
07

Rules

Checklist and Do / Don’t
Checklist7 of 8 checked
DO✓Use the scale — no one-off sizes✓Let weight and colour build hierarchy before size✓Tighten tracking on big type, loosen on caps✓Put units smaller and muted next to big numbers✓Balance short headlines
DON’T✕Go below 11.5 px for anything people must read✕Set paragraphs in caps or bold✕Use pure #fff on dark — use #eef0f5✕Mix more than two weights in one line✕Centre-align long paragraphs