Colors
Figma variablesPrimary
50
#fafafa
100
#f4f4f5
200
#e4e4e7
300
#d4d4d8
400
#a1a1aa
500
#71717a
600
#52525b
700
#3f3f46
800
#27272a
900
#18181b
950 ·∗
#09090b
∗ completes the ramp — used visually but not bound as a Figma variable.
Neutral
50
#f9fafb
100
#f3f4f6
200
#e5e7eb
300
#d1d5db
400
#9ca3af
500
#6b7280
600
#4b5563
700
#374151
800
#1f2937
900
#111827
Semantic
success
#40ac43
warning
#d87112
error
#d94343
info
#0272f2
Surface
base
#ffffff
raised
#ffffff
overlay
#f4f4f5
sunken
#f9fafb
Typography
Inter · Figma type stylesdisplay
Inter 34 / 41 · 700
text-displayh1
Inter 28 / 34 · 700
text-h1h2
Inter 22 / 28 · 700
text-h2h3
Inter 20 / 24 · 700
text-h3body-lg
Inter 16 / 24 · 400
text-body-lgbody-lg-medium
Inter 16 / 24 · 500
text-body-lg-mediumbody
Inter 14 / 20 · 400 · -0.1
text-bodybody-medium
Inter 14 / 20 · 500
text-body-mediumbody-semibold
Inter 14 / 20 · 600
text-body-strongcaption
Inter 12 / 18 · 500
text-captioncaption-semibold
Inter 12 / 18 · 600
text-caption-stronglabel
Inter 11 / 18 · 400 · +0.05
text-labellabel-medium
Inter 11 / 18 · 500
text-label-mediumSpacing
Figma spacing/* = Tailwind 4px grid3xs
4px
2xs
6px
xs
8px
sm
10px
md
12px
lg
16px
xl
20px
2xl
24px
3xl
32px
4xl
40px
5xl
48px
52
52px
6xl
64px
7xl
80px
8xl
100px
9xl
180px
Radius
Components pinned to 2px (xs)xs
2px
sm
4px
md
8px
lg
12px
xl
16px
Design direction: all components use 2px radius. The full ladder is available as reference tokens.
Elevation
shadow-elevation-*sm
shadow-elevation-smmd
shadow-elevation-mdlg
shadow-elevation-lgComponents
Reusable libraryLive examples of shared components. Use these instead of re-implementing inline. Registered on this page as the single source of truth.
EmptyState
components/empty-stateForm fields
components/form/fieldsProject name
Contract sum (AUD)
Contract signed
Contract administered by
FormSection
components/form/form-sectionProject
Project name
Site address
SummaryCard
components/summary-cardMoney
- Contract sum
- $1,287,000 AUD
- GST
- Contract sum includes GST
- Retention
- 5%