Board DS — Design System reference
Foundations · components · usage Design system / DS

The studio grammar.

Read Studio's identity reads like an editorial — refined neutrals, serif headlines that hold a narrative, generous whitespace, and one terracotta accent that punctuates rather than declares.

01 — Logo & lockup.

Primary · Bone
READ STUDIO TM
Inverse · Ink
READ STUDIO TM
Horizontal · Concrete
READ STUDIO TM

The wordmark is set in Satoshi Black with −0.04em tracking. Stacked (READ over STUDIO) is the primary application — for navigation and footers. The horizontal lockup is reserved for wide formats (email signatures, social cover images). The mark always renders in a single colour — Ink, Bone, or Ochre — never a gradient.

02 — Colour palette.

Ink--ink#141414
Paper--paper#F4F1EA
Cream--cream#EBE6DA
Cream deep--cream-deep#DDD6C5
Terracotta--accent#B5552D
Umber--accent-2#5C2E12
Stone--stone#6B6B66
Line--line#D7D2C5

Usage — Ink & Paper carry the layout. Cream / Cream Deep are used to break long pages into sections. Terracotta is a punctuation colour: dots, hover states, and one italic word per hero. It is never the dominant colour.

03 — Typography scale.

DisplayHero

Spaces that read.

Fraunces 300 · 88–168px · −0.04em · 0.92 LH
H2Section

Three disciplines.

Fraunces 300 · 36–76px · −0.025em · 1.02 LH
H3Subhead

Architecture & interior design

Fraunces 400 · 24–36px · −0.015em · 1.12 LH
LedeEditorial intro

Read Studio is an architectural, design & visualisation practice — formed to restructure how we collaborate, create and deliver projects.

Fraunces 300 · 22–30px · 1.35 LH · 36ch max
BodyInter regular

A full architectural service from feasibility through to construction. We work residential, hospitality and cultural — at all scales, from a Tamarama house to a 1,200 sqm festival pavilion.

Inter 400 · 16px · 1.55 LH
EyebrowSection labels
— Selected work, 2024–26
JetBrains Mono 500 · 11px · 0.22em · UC

04 — Spacing & grid.

Spacing scale · 8pt base
--s-14 px
--s-28 px
--s-312 px
--s-416 px
--s-524 px
--s-632 px
--s-748 px
--s-864 px
--s-996 px
--s-10128 px
Layout grid · 12 column · 1440 max · 80 gutter
12 / 24 / 80

05 — Component library.

Primary button · pillBTN-01
Inline link · underlineLNK-01
Tag · pillTAG-01
Spring catalogue 2026 Currently · Sydney Festival
Project card · index rowCRD-01
042 Residential
Headland House
Architecture · Interiors · Viz
2025 · TMA
Eyebrow + heading comboHD-01
02 — What we do

Three disciplines. One studio.

Form field · underlineFRM-01

06 — Five design principles.

01

Read the brief first.

Whitespace, hierarchy and pacing should mirror the brief — not announce the studio.

02

One italic per hero.

Italic + terracotta is the editorial signature. Used once per major heading, never twice.

03

Photos lead.

Architectural photography always carries the colour. The palette stays muted to defer to the work.

04

Numbers are dignified.

Mono tracking on metadata gives every project a quiet, archival feel.

05

Slow down.

No animations under 240ms. Hovers should resolve gently — like a heavy door.