S-01
Style guide
Every colour and text style below is a shared style. Change one here and it updates everywhere on the site. This page is set to no-index and can be deleted before you publish.
S-01
Style guide
Every colour and text style below is a shared style. Change one here and it updates everywhere on the site. This page is set to no-index and can be deleted before you publish.
Colour styles
Graphite
rgb(22, 24, 26)
Concrete
rgb(228, 227, 222)
Bone
rgb(244, 243, 240)
Steel
rgb(88, 92, 98)
Rebar
rgb(99, 95, 86)
Hi-Vis
rgb(255, 74, 13)
Hi-Vis Text
rgb(178, 58, 8)
Hi-Vis Text Inverse
rgb(255, 74, 13)
Blueprint
rgb(127, 168, 196)
Steel Inverse
rgb(154, 157, 161)
Hairline Dark
rgb(46, 50, 54)
Hairline Light
rgba(108, 112, 117, 0.4)
Hi-Vis Hover
rgb(240, 88, 30)
Hi-Vis Press
rgb(230, 80, 22)
Concrete Wash
rgba(228, 227, 222, 0.1)
Graphite Wash
rgba(22, 24, 26, 0.06)
Ink on Hi-Vis
rgb(22, 24, 26)
Colour styles
Graphite
rgb(22, 24, 26)
Concrete
rgb(228, 227, 222)
Bone
rgb(244, 243, 240)
Steel
rgb(88, 92, 98)
Rebar
rgb(99, 95, 86)
Hi-Vis
rgb(255, 74, 13)
Hi-Vis Text
rgb(178, 58, 8)
Hi-Vis Text Inverse
rgb(255, 74, 13)
Blueprint
rgb(127, 168, 196)
Steel Inverse
rgb(154, 157, 161)
Hairline Dark
rgb(46, 50, 54)
Hairline Light
rgba(108, 112, 117, 0.4)
Hi-Vis Hover
rgb(240, 88, 30)
Hi-Vis Press
rgb(230, 80, 22)
Concrete Wash
rgba(228, 227, 222, 0.1)
Graphite Wash
rgba(22, 24, 26, 0.06)
Ink on Hi-Vis
rgb(22, 24, 26)
Text styles
Display 1
We build what others draw.
Display 2
Four sectors. One standard.
Heading 3
How a project runs
Data Numeral
12.4M
Body L
Northfield delivers commercial and industrial projects across six states.
Body
Preconstruction through handover, under one contract.
Label
Delivered on schedule
Text styles
Display 1
We build what others draw.
Display 2
Four sectors. One standard.
Heading 3
How a project runs
Data Numeral
12.4M
Body L
Northfield delivers commercial and industrial projects across six states.
Body
Preconstruction through handover, under one contract.
Label
Delivered on schedule
Layout & conventions
Breakpoints
Desktop from 1200px · Tablet 810–1199px · Phone up to 809px. The text styles change size at the same widths, so type and layout always step together.
Content width
Sections run full-bleed. The Content frame inside each one caps at 1280px and centres, so every section shares the same measure.
Gutters
80px on desktop · 48px on tablet · 20px on phone.
Section rhythm
160px of vertical padding on desktop · 96px on tablet · 64px on phone.
Reading measure
Privacy and Terms cap body copy at 760px. Use the same width for any new long-form page.
Section IDs
Sections carry an element ID like a-04-projects. The site rail reads the a-NN prefix to show the sheet code, and the skip link looks for the first section on the page. Keep the prefix pattern when you rename or add sections.
Method panels
The stage list in A-05 highlights whichever panel is in view, matched by the IDs m-01 to m-04. Keep the rows and the panels in the same order.
Tabular figures
Layers named Numeral, Value, Pay, Area or Duration get tabular figures from the site stylesheet, so columns of numbers line up. Reuse those names for new number layers.
Layout & conventions
Breakpoints
Desktop from 1200px · Tablet 810–1199px · Phone up to 809px. The text styles change size at the same widths, so type and layout always step together.
Content width
Sections run full-bleed. The Content frame inside each one caps at 1280px and centres, so every section shares the same measure.
Gutters
80px on desktop · 48px on tablet · 20px on phone.
Section rhythm
160px of vertical padding on desktop · 96px on tablet · 64px on phone.
Reading measure
Privacy and Terms cap body copy at 760px. Use the same width for any new long-form page.
Section IDs
Sections carry an element ID like a-04-projects. The site rail reads the a-NN prefix to show the sheet code, and the skip link looks for the first section on the page. Keep the prefix pattern when you rename or add sections.
Method panels
The stage list in A-05 highlights whichever panel is in view, matched by the IDs m-01 to m-04. Keep the rows and the panels in the same order.
Tabular figures
Layers named Numeral, Value, Pay, Area or Duration get tabular figures from the site stylesheet, so columns of numbers line up. Reuse those names for new number layers.