01
Colors
Ink
#171614 — text, lines
Paper
#F3F1EC — background
Paper Light
#FBFAF7 — panels
Terracotta
#B0502B — accent
Graphite
#6E6A63 — secondary text
Body Text
#3D3A35 — paragraphs
Stone
#E4E0D8 — image placeholder
Line
rgba(23,22,20,.14) — hairlines
White
#FFFFFF — text on images
02
Typography
Geist (300 / 400 / 500) for text and titles — Geist Mono for labels, numbers and data.
Display — 128/122 · 300 · −5%
Drawn slowly
Heading 1 — 80/80 · 400 · −4%
Voiron Cultural Centre
Hero Title — 68/69 · 400 · −3.5%
Quiet, exact buildings for public life.
CTA Title — 60/61 · 400 · −3.5%
A building to imagine, a site to understand?
Article Title — 48/53 · 500 · −3%
Why we still draw by hand
Statement — 36/43 · 400 · −2%
Quiet, exact buildings for public life.
Rich H2 — 30/36 · 500 · −2%
Why we still draw by hand
Section Title — 28/34 · 400 · −2%
Selected works
Quote — 24/32 · 500 · −1.5%
Before a model, before a render, there is a pencil line on tracing paper.
Lead — 22/32 · 400 · −1%
Competitions, public commissions, feasibility studies.
Card Title — 19/25 · 500 · −1.5%
Lycée des Cèdres
Paragraph — 16/28 · 400
The slatted façade filters western light and gives the building a single, calm silhouette.
Link Underline — on Small 14/21 · 1px · hover Terracotta
Label Mono — 11/14 · 400 · caps · +4%
N°01 — Culture — 6 800 m²
Data Mono — 11/14 · 400
45.7640° N — 4.8357° E
03
Buttons
Submit Button
Text link
04
Components
Header · Solid
Header · Transparent
Project Card
Project Row
Filter Chip
Section header + dimension line
01
Selected works
06 Projects
Metadata row
Area
6 800 m²
Client
City of Voiron
Form field
Image cursor
Preview N°01
X 040 · Y 040
05
Rules
5.1
Terracotta only for numbering, active states and one primary action per screen.
5.2
Radius 2px max. Hairlines 1px: ink for section starts, 14% ink between rows.
5.3
Spacing scale 8 · 16 · 24 · 48 · 64 · 128 · 160 · 200 px. Gutter 24px, max width 1440px.
5.4
Every project is numbered N°00. Mono for all data: dates, areas, coordinates.