Brand presentation
Stoak Architecture
brand system.
The colours, typography, logos, visual language and voice that make up the Stoak identity. Pulled live from the website's actual design tokens so what you see here is exactly what's on the site.
Voice & tone
How Stoak sounds.
In one line
Warm, plain English. Like a craftsperson talking, not a marketing agency. Short sentences. Concrete details. Honest about what's certain and what isn't.
Person
First-person ("I") for craft and opinion — Stoak is one designer. "We" only when describing the practice as an entity. Never "the team" or "our team".
Do
- Active verbs. "I draw it. I detail it. I lodge it."
- Trade language where it helps — junction, flashing, reclad, NZS 3604.
- Numbers as digits when ≥ 10, words below. Always digits for money, dates, measurements.
- NZ English spelling: colour, organise, metres, neighbour.
- Currency in NZD, just $1,200 (not "NZ$").
Don't
- Marketing fluff: seamless, delightful, modern, holistic.
- Stock empathy: "We understand your dream home is important to you."
- Comparisons that diminish other practitioners.
- Italics for emphasis. The system uses weight or amber.
- Pure black
#000000for body text. Use ink#36342e. - Em-dash padding — drop one in only when it's earning the pause.
Brand language — three lines in active use
- Primary tagline
Drawings that have everything your builder needs.
Services section · About blockquote · meta descriptions sitewide.
- Long-running mark
Designed down to the last nail.
Footer wordmark · home wood-bar · proposal documents. Older line — kept where it earns its place.
- Sidebar wordmark
Stoak Architecture. Bringing the craft back into design.
Bottom-right of the page when the footer enters view (every public page). Two-line pairing — uppercase mono name, sub-line in amber mono.
Colour palette
The paper stack & the inks.
Use these hex codes verbatim. Don't sample from screenshots, don't "approximate", and never use a colour that isn't on this page. The palette is intentionally narrow.
Warms (paper stack)
Amber
- HEX
- #F0AC3D
- RGB
- 240, 172, 61
- Token
--color-amber
Brand primary. Logo, accent strokes, CTA tags, footer, sidebar. One amber moment per page — never wallpaper.
Sand
- HEX
- #EDD3A8
- RGB
- 237, 211, 168
- Token
--color-sand
Soft warm fill. Background bands behind testimonials. Rare.
Cream
- HEX
- #FDF2E1
- RGB
- 253, 242, 225
- Token
--color-cream
Card backgrounds, spec rails, glass-tagline fills.
Paper
- HEX
- #FCF5E9
- RGB
- 252, 245, 233
- Token
--color-paper
Page background. The graph-paper colour. Default for every body page.
Lightest
- HEX
- #FBEFE3
- RGB
- 251, 239, 227
- Token
--color-lightest
Subtle hover wash on cream.
Inks
Black
- HEX
- #000000
- RGB
- 0, 0, 0
- Token
--color-black
Reserved. Don't use for body text or any standard surface.
Ink
- HEX
- #36342E
- RGB
- 54, 52, 46
- Token
--color-ink
Body text, headings, dark buttons. The 'black' of the system.
Grey
- HEX
- #747474
- RGB
- 116, 116, 116
- Token
--color-grey
Captions, eyebrows, meta lines, dotted dividers.
Stone
- HEX
- #B0B0B0
- RGB
- 176, 176, 176
- Token
--color-stone
Disabled states, very quiet rules.
How they combine
Body on paper
Ink #36342e on Paper #fcf5e9. The default for almost everything.
Caption on paper
Grey #747474 on Paper. Eyebrows, meta lines, fine print.
Amber + white
CTA pills, footer, sidebar. White type only on the amber band.
Cream card on paper
Cream #fdf2e1 with 1px grey border at 22% alpha.
Typography
Two faces. Variable. Self-hosted.
Display / Mono
JetBrains Mono
Titles, eyebrows, all-caps watermarks, button labels, numbers, project specs. Tabular figures on. Slight negative letter-spacing on display sizes (-0.015em).
Aa Bb Cc 123
Subtitle in amber.
Stoak Architecture · Rotorua
Body / Serif-free
Nunito
Long-form body, captions, footer headers. Never used for titles — the system reserves those for JetBrains Mono.
A Lede paragraph reads at 16 px / 1.65, calm and easy to scan.
Body copy at 15 px / 1.55. Most paragraphs on the site sit at this size — comfortable for long reads, not so big it shouts.
Eyebrow / section label
Type scale
| Role | Size | Family | Weight | Line height | Notes |
|---|---|---|---|---|---|
| Hero title | clamp 36–72 px | JetBrains Mono | 700 | 1.02 | — |
| Section title | clamp 28–46 px | JetBrains Mono | 700 | 1.08 | — |
| Subtitle | clamp 20–32 px | JetBrains Mono | 600 | 1.15 | Often in amber |
| Heading | 26 px | JetBrains Mono | 600 | 1.15 | — |
| Subheading | 20 px | JetBrains Mono | 500 | 1.15 | — |
| Body | 15 px | Nunito | 400 | 1.55 | — |
| Lede | 16 px | Nunito | 400 | 1.65 | — |
| Caption | 12 px | Nunito | 400 | 1.4 | — |
| Eyebrow | 11 px UPPER | Nunito | 700 | 1.3 | Letter-spacing 0.14em, color grey |
| Mono numeric | 14 px | JetBrains Mono | 600 | 1.4 | Tabular figures on |
Don't
- Set body copy in JetBrains Mono. It gets blocky over a paragraph.
- Italicise. The system has no italic role; use weight or amber for emphasis.
- Use a system-font fallback as a stylistic choice. Embed the variable fonts.
Logos
The wordmark.
Two colourways. Use the ink version on paper / cream / cream cards. Use the amber version when the background is dark or amber-saturated. Always preserve original aspect ratio. Never recolour outside the two approved variants.
Ink on paper
Ink on amber
Amber on ink
Ink on cream
Files
| File | Format | Use |
|---|---|---|
/images/logos/stoak-ink.png | PNG | Default for the web + IG + most documents. Renders consistently at every size. |
/images/logos/stoak-ink.svg | SVG | Hi-DPI print where you've test-rendered first. Renders unreliably below 48 px in some browsers because of nested clipPaths — don't use for favicons or small UI marks. |
/images/logos/stoak-amber.png | PNG | Default for amber-on-ink contexts (dark covers, hero overlays). |
/images/logos/stoak-amber.svg | SVG | Same caveat as the ink SVG — print only, test first. |
/images/logos/stoak-animated.gif | Animated GIF | Reserved for motion contexts (loaders, hero intros, presentation reveals). Don't use for static surfaces. |
/public/favicon-32.png ··· -512.png | PNG (32 / 48 / 96 / 192 / 512) | Browser tabs + home-screen icons. Already wired up in Base.astro. |
Clear space & minimum size
- Clear space: at least 0.5x the logo's height on every side. No copy or graphic encroaches.
- Minimum size on print: 24 mm wide.
- Minimum size on screen: 96 px wide.
- Favicons: use the dedicated PNG set, never shrink the SVG.
Don't
- Recolour outside ink and amber.
- Add drop shadows, glows, outlines, gradient fills.
- Tilt, skew, stretch, or "lean into" the logo for a layout.
- Reproduce on any of the off-palette backgrounds (red, navy, photographs without a darkening layer, etc.).
- Use the logo as a decorative pattern, watermark across an image, or repeating mark.
Visual elements
The patterns that carry the brand.
Graph-paper grid
28 × 28 px square grid. rgba(180, 175, 168, 0.18) 1 px lines on Paper. Sits behind every public page as a fixed background, just visible enough to feel like working drawings without becoming wallpaper.
Amber sidebar / stripe
96 px solid amber bar (#f0ac3d) running the full height of the right edge of every public page. Acts as a brand anchor + hosts the floating menu pill. On marketing collateral, the same stripe runs full-bleed on the right edge of cards and Reels.
Cards
Rounded-rectangle cards with white or cream fill, 14 px border-radius (12 px on smaller cards), 1 px rgba(115, 116, 116, 0.22) border. Hover lifts the card 3 px and switches the border to amber. Used for service cards, area cards, calculator results.
Floating menu pill
Solid-ink pill (66 × 96 px) at top: 24 px; right: 15 px, fixed position, z-index 50. Holds the SOAK glyph + the word "Menu" stacked. Sits over the amber sidebar; clicked to open / close the nav. Pulse animation on the glyph stops once the user has opened the menu once.
Sidebar wordmark
Bottom-right corner mark that fades in when the footer enters the viewport. Two lines: Stoak Architecture. in uppercase mono ink, then Bringing the craft back into design. in mono grey/amber. Disappears on mobile.
Buttons
Three pill variants.
All buttons share one base shape: pill (999 px radius), JetBrains Mono 14 px / weight 500, 14 × 22 px padding, single-pixel border, 220 ms cubic-bezier hover. Three colour variants:
Image style
How photos & renders read.
- Photos & project renders — square or landscape (4:5 or 16:9). Subject (the building) anchored to the centre of the cropped frame via per-image
object-positionwhen the source isn't naturally centred. Service heroes setheroPositionper image insrc/data/services.ts. - Card-thumb desaturation — service / area / calculator cards:
filter: grayscale(0.18)at rest,grayscale(0)on hover. Subtle quietening so a single hovered image draws attention. - Project-gallery desaturation — the home and projects-index thumbs are pushed harder:
filter: grayscale(1) brightness(0.95)at rest,grayscale(0) brightness(1)on hover. Reads as a sketch grid that comes alive when interacted with. - Render style — clean photoreal renders with realistic light, no toon shading, no overcooked HDR. The build itself does the talking.
- People in shots — sparing. The work, not the lifestyle.
- Optimisation — convert PNG renders to WebP at ≤ 1920 px wide via ffmpeg. Aim for under 500 KB per hero image.
- Reveal motion — every above-the-fold element animates in via
.reveal(28 px translateY + opacity, 0.65 s cubic-bezier). Stagger via.reveal-delay-1through-5. Honoured byprefers-reduced-motion.
Deliverables
Where the brand lives.
Digital
- Website — stoak.co.nz (Astro + Cloudflare)
- Instagram — feed posts (1080 × 1350) + Reels (1080 × 1920)
- Email signature — Nunito body + amber line
- Letterheads / invoices — corner watermark + amber footer
- Client portal — same brand, same colour stack
- A4 proposals — 24 mm top margin, mono header, body Nunito
- Business cards — ink on paper, amber stripe
- Site-visit notebooks — graph paper, of course
- Builder's drawing sets — title block in mono, amber accent on the practice mark
When in doubt, ask: would a careful, restrained craftsperson make this choice? If yes, ship it. If it feels marketing-loud, walk it back.