Reference
Building blocks
The section layouts case pages are built from. This page is the living catalogue — we add to it as we design new ones.
01 Content Labeled text — a large preamble over a body paragraph. Right-aligned reading column.
Overview
A large preamble line that sets up the section with a confident, high-level statement.
Then a body paragraph carries the detail — the reasoning, the approach, the context. Enough room to actually say something without turning into a wall of text.
02 Image Full-width media. Optimized, responsive.
03 Image pair Two square images side by side.
04 Image trio Three square images in a row.
05 Colour palette A mosaic of swatches — a large feature colour plus a grid, each labeled with role, name + values.
Brand Primary Emerald #0FA36B RGB 15 163 107 CMYK 91 0 34 36
Brand Secondary Coral #F26B45 RGB 242 107 69 CMYK 0 56 71 5
Brand Tertiary Forest #0E4D3B RGB 14 77 59 CMYK 82 0 23 70
Info Navy #14384A RGB 20 56 74 CMYK 73 24 0 71
Accent Peach #F6C7AE RGB 246 199 174 CMYK 0 19 29 4
Link Cornflower #4C7DE6 RGB 76 125 230 CMYK 67 46 0 10
Success Mint #A9E1C1 RGB 169 225 193 CMYK 25 0 14 12
Warning Butter #F3D98A RGB 243 217 138 CMYK 0 11 43 5
Highlight Sky #AFCDEF RGB 175 205 239 CMYK 27 14 0 6
Black #111114 RGB 17 17 20 CMYK 15 15 0 92
Dark Grey #4B4B4F RGB 75 75 79 CMYK 5 5 0 69
Light Grey #D9D9D9 RGB 217 217 217 CMYK 0 0 0 15
White #FFFFFF RGB 255 255 255 CMYK 0 0 0 0
06 Typography A type scale showing hierarchy — each step at its real size with its spec.
Serif Display 72–132px · DM Serif
Timeless by design
Display Large 56–96px · Medium
Big, expressive ideas
Display 40–72px · Medium
Purposeful design
Heading 26–40px · Medium
Crafted with intention
Preamble 20–24px · Regular
A short lead-in that frames the section.
Body 18px · Regular
Comfortable reading copy for longer passages of text.
Caption 13px · Regular
Small print, metadata, labels
07 Pull quote A large statement or client testimonial, on a dark centered block.
They didn't just make it look good — they made the whole thing make sense.
08 Logo showcase The brand mark repeated across a grid of colour tiles, auto-contrasting on each.
09 Stats / metrics Oversized numbers with labels — how product cases prove impact.
+34% Activation in the first month
3× Faster onboarding vs. the old flow
4.8★ App Store rating up from 3.9
−22% Support tickets quarter over quarter