Digital Discovery · Field guide
Vol. I / No. 03

Spacing & rhythm.

8pt grid12-col layout
April 2026
01

Scale — eight-point grid.

Twelve steps · 4 to 128px · gradient bar shows the distance
s-1Hairline
4px · 0.25rem
s-2Tight
8px · 0.5rem
s-3Close
12px · 0.75rem
s-4Default
16px · 1rem
s-5Comfortable
24px · 1.5rem
s-6Loose
32px · 2rem
s-7Section
40px · 2.5rem
s-8Generous
48px · 3rem
s-9Panel
64px · 4rem
s-10Chapter
80px · 5rem
s-11Hero
96px · 6rem
s-12Poster
128px · 8rem
02

Density — editorial & compact.

Same content · different rhythm · default is editorial
Editorials-9 pad · s-5 gap

Discovery calls.

How we work · No. 01

A 45-minute call where we listen more than we talk. You describe the situation. We name the three or four things we'd tackle first, in plain English. You leave with a clearer head — whether or not you hire us.

45 min · no prepNigel · Sydney
Compacts-5 pad · s-2 gap

Discovery calls.

How we work · No. 01

A 45-minute call where we listen more than we talk. You describe the situation. We name the three or four things we'd tackle first, in plain English. You leave with a clearer head — whether or not you hire us.

45 min · no prepNigel · Sydney
03

Layout — twelve columns.

24px gutter · s-11 margin on hero pages · asymmetric balance
— Nigel Price · Founder
Vol. I / No. 01
We make
the impossible.
Digital Discovery · Sydney · 2026
Twelve-column grid. Title spans nine columns. Dek tucks into columns eight-through-twelve — the asymmetric anchor that gives editorial layouts their rhythm.
12 columns · 24px gutter · 72px margin
1400px max content width
04

Radii — five steps.

Tight by default · pill only for chips & toggles
sm2px · hairlines
md4px · cards, buttons
lg8px · modals
xl16px · hero panels
pill999px · chips, toggles
05

Elevation — three weights.

Soft inset shadow · card lift · hover float · never more than one per surface
soft
shadow-soft
Resting elements — input fields, dividers, subtle separation.
0 2px 12px · rgba ink 0.06
card
shadow-card
Standard card — project tiles, testimonial blocks, feature panels.
0 12px 40px · rgba ink 0.08
lift
shadow-lift
Hover & hero — floating cards, CTAs, active modal.
0 24px 60px · rgba ink 0.14