Confidence before commitment.
Bracen helps homeowners know what they are getting into before they build. This guide sets out how the brand looks, reads and behaves, so every page, post, report and message feels like one calm, checkable source.
Canonical source: the versioned design-system kit in the Bracen product repository (docs/design-system). This page transcribes the locked rules for everyday use. When they disagree, the kit wins.
Overview
Bracen is an independent building decision platform. It helps homeowners understand likely costs, plan the right questions, evaluate options and choose who to contact before commitment. The homeowner is the character. Bracen is the guide and the evidence layer.
The useful customer outcome is: know what you are getting into before you build. Bracen is not a builder directory and does not lead with "find and compare builders". Discovery is one downstream step in a larger decision journey.
Calm. Protective. Specific. Editorial. Grounded in real New Zealand construction.
Like a SaaS dashboard, a generic property-tech template, a lead-auction marketplace or a luxury architecture magazine.
ArchiPro for real project photography and assured whitespace. Consumer Reports and Which? for methodology and comparison hierarchy. GOV.UK for clarity in forms and uncertainty. BuildHub for answer-first pages and visible ranking order. Patterns to learn from, never styling to copy.
Audiences
| Audience | Primary need | What loses trust |
|---|---|---|
| Homeowner planning a build or renovation | Clear costs, risks, next steps and honest evidence boundaries | Hype, vague claims, false precision and bidding-war framing |
| Builder managing a listing | Fair terms, accurate representation and clear commercial separation | Paid status presented as approval or rank |
| Industry, media and research reader | Dated data, method, provenance and limitations | Undated claims or unexplained numbers |
Brand and market architecture
The parent brand and global product system. / is the global brand home.
/nz is the New Zealand market surface and the current complete homeowner journey: costs, consent, guides and builder pathways. Market context is a quiet text label, never a second logo.
The monthly market-intelligence publication under the Bracen brand. It may use its own namespaced publication palette and type, but keeps the wordmark, interaction rules and accessibility floor. Its green never becomes the product action colour.
A separate Bracen product: the installed operating system for a building company. Same identity rules, different job. It is not part of the consumer site.
The inherited NZ acquisition, domain and SEO context. Preserve URLs, attribution and high-intent language. It is not a second visual brand.
Wordmark
The wordmark is live text. Bracen, uppercase B, lowercase remainder, set in IBM Plex Sans Bold. There is no symbol, monogram or alternate lockup, and there never will be one by accident.
Specification
| Case | Uppercase B, lowercase remainder. Never BRACEN, bracen or BraCen. |
| Typeface | IBM Plex Sans Bold (700) on product surfaces. Semibold (600) is acceptable in print and social layouts where Bold is unavailable. |
| Tracking | -0.045em |
| Size | 25px mobile, 28px desktop in the header. Never below 16px anywhere. |
| Colour | Navy ink on light. White on a compliant dark field. Blue where ink would compete with an adjacent action. |
| Clear space | At least one cap height on all sides of the standalone wordmark. |
| Rendering | Live text wherever text works. Image files exist only where a platform demands a logo upload. |
Clear space
The dashed boundary sits one cap height from the letters. Nothing else enters it.
Never
Also out: a house, brace glyph, shield, avatar badge, box, gradient fill, texture or a stacked lockup. The mascot question is closed. There is none.
Colour
Navy and warm paper set the editorial register. Three colours carry meaning, and each has exactly one job. Colour is never the only signal; evidence, status and error always come with words and, where relevant, a date.
The three-colour law
The sole brand and action colour: wordmark, links, buttons, focus, progress and active navigation. Not decoration, not a co-primary palette.
Confirmed completion, verified status or genuinely positive movement. Never identity, buttons, headings or general evidence.
Scarce editorial emphasis: the first ranked result, one decision note or one cost callout. At most once per viewport. Never a button or an alternating band.
Core palette
Verified contrast
Ratios use WCAG relative luminance. Normal text needs 4.5:1, large text 3:1, essential non-text boundaries 3:1.
| Pairing | Ratio | Result |
|---|---|---|
| Navy on paper | 16.04:1 | AAA |
| Bracen blue on paper | 7.99:1 | AAA |
| White on Bracen blue | 8.06:1 | AAA |
| Muted text on paper | 5.59:1 | AA |
| Positive green on paper | 5.47:1 | AA |
| Navy on sand | 12.35:1 | AAA |
| Bracen blue focus ring on paper | 7.99:1 | Passes non-text |
| Control rule on white | 3.54:1 | Passes non-text |
| Former gold focus ring (#F4C54E) on paper | 1.61:1 | Fails. Do not use. |
Usage
| Element | Colour | Notes |
|---|---|---|
| Primary button | Bracen blue, white text | One per action cluster |
| Headings and body | Navy ink | On paper or white |
| Supporting text | Muted | Captions, help text, dates |
| Links | Bracen blue, underlined | Hover to pressed blue |
| Evidence block | Blue wash with a blue rule | Navy text, dated |
| Decision note or number one result | Sand or sand pale | Once per viewport |
| Confirmed status | Positive green plus text | Never for evidence or identity |
| Dividers | Rule | Let spacing do most of the separation |
Typography
IBM Plex Sans is the only Bracen typeface. It owns the wordmark, display, body, navigation, UI, tables and figures in weights 400, 500, 600 and 700. Hierarchy comes from scale, weight and spacing, not from adding another personality.
Know what you are getting into before you build.
Hero H1 · clamp(2.4rem, 5.2vw, 5.15rem) · Semibold 600 · tracking -0.060em · leading 0.96 to 1.00
What a new build costs in Canterbury
Page H1 · clamp(2.4rem, 4.5vw, 4.25rem) · 600 · -0.050em · leading 1.00
Before you sign a building contract
H2 · clamp(2.2rem, 4.2vw, 4rem) · 600 · -0.052em · leading 1.02
What the consent process checks
H3 · 1.4375rem · 600 · -0.025em · leading 1.20
A building consent confirms the plans meet the Building Code. It does not confirm the builder will follow them. This guide covers what gets checked, by whom, and when.
Lead · 1.125rem to 1.25rem · 400 · leading 1.45 to 1.60
Most fixed-price contracts carry provisional sums for items that cannot be priced until the site is opened up. Ask for each one to be listed with its basis. A provisional sum that is not explained is a cost you have not yet agreed to.
Reading body · 1.0625rem · 400 · leading 1.78 · measure 68ch
Get an estimate · Compare builders in Wellington · Updated 12 August 2026
UI and body · 1rem · 400 to 600 · leading 1.60
Companies Office record checked 12 August 2026. Licensed Building Practitioner status not published.
Small and supporting · 0.875rem · 400 to 600 · leading 1.50
Cost guide · New Zealand · 2026
Eyebrow and micro · 0.75rem · 700 · tracking 0.12em · uppercase · leading 1.40
$3,850 to $4,900 /m²
Figures · tabular numerals · units visible · always with region, date and basis
- Sentence case everywhere
- Uppercase only for short eyebrows, status labels and table headers
- Tabular numerals for statistics and tables
- 68ch measure for long-form reading
- Fallback: Arial, sans-serif
- Newsreader, Inter, Bricolage or any second display family on normal pages
- Italic all-caps display text
- Light or thin weights for headings
- Body copy in all caps
- Improvised sizes outside the role scale
The Building Report keeps its existing namespaced publication fonts. That is the sole current exception and it does not travel to other pages.
Layout and shape
Hierarchy comes from whitespace first, then a surface shift, then a fine rule, and only then a shadow. Nothing combines a border with a shadow. Nothing new is rounded past 8px.
Grid and rhythm
| Maximum content width | 1240px |
| Gutter | 24px desktop, 20px mobile. Dense utilities may use 16px at the smallest width, but never a second alignment line on one page. |
| Long-form measure | 68ch. Utility prose may use a 48rem container. |
| Columns | 12 on desktop, 6 on tablet, 4 on mobile. Most pages need a one- or two-column subset. |
| Standard editorial section | 72px mobile, 112px desktop |
| Dense or decision section | 56px mobile, 80px desktop |
| Internal spacing scale | 4, 8, 12, 16, 24, 32, 48, 64px |
| Breakpoints | 640, 768, 1024, 1280, 1536px. Required QA widths: 320, 375, 768 and 1280px. |
Radius roles
buttons, inputs, media
enclosed panels
menus, dialogs
Pills are limited to genuine compact status or market context. Legacy large radius utilities resolve to the 8px ceiling.
Elevation and motion
Whitespace, surface shift, fine rule, then shadow. Shadows are allowed only for popovers and overlays whose depth is functional.
160ms ease for colour, border and small state changes. Motion communicates state, nothing else.
Entrance animation, parallax, auto-advancing carousels, decorative counters or bouncing calls to action.
Mandatory. Under prefers-reduced-motion: reduce, transitions collapse to zero and smooth scrolling is off.
Lucide line icons at 1.5px stroke: 16px inline, 20px in controls, 24px maximum. One colour, currentColor, and they support visible text rather than replace it.
The short blue brace rule beside an eyebrow or evidence block is the only recurring ornament. No feature-icon grids, filled badges, multi-colour icons or spot illustrations.
Components
Every interactive control has a visible label, a 44px minimum target, keyboard access, a visible focus state and a disabled or loading state where relevant. The examples below are rendered from the same tokens the product uses.
Primary: blue, white text, 3 to 4px radius, darker blue on hover. Secondary: white, navy text, control-rule border. Text links are blue and underlined. Loading changes the label to a present-tense verb and sets aria-busy. Green and sand are never button colours. No capsule shapes, gradients or icon-only primary actions.
Evidence is an inline, dated statement of what was checked, against which source, and when. Unknowns use plain words such as Not checked or Not published. Badges state a fact with a date. Payment never implies approval or rank.
We use this to pick the right cost data and builders. It is not shared until you ask us to.
Label above the field, never a placeholder as the label. White field, control-rule border, 44px height. Error text follows help text and is linked with aria-describedby. A real <form> is for real lead capture only.
Prefer a ruled row to a card. Rows stack image, identity, evidence and action in that order on mobile. A content block never combines a border and a shadow. When there is no governed image, use an honest typographic placeholder rather than a misleading stock project.
| Rank | Treatment | Rule |
|---|---|---|
| Before 1 | Criteria, evidence boundary, update date, commercial disclosure | Visible before any ranking |
| 1 | One sand treatment | Only when the documented method supports it |
| 2 and below | Quieter, same structure | No trophies, medals or score gauges |
| Paid | Labelled, unnumbered, separate | Cannot receive the number-one treatment |
Does a consent guarantee the work is done properly?
No. A consent confirms the plans comply with the Building Code. Inspections during the build and the Code Compliance Certificate at the end are what confirm the work matches the plans.
When should I pay a deposit?
After the contract is signed and you have confirmed what the deposit secures. A deposit before a contract is a loan you have not agreed terms on.
Full-width 44px summary, chevron plus weight change on open. Never hide a price, a material limitation or the primary decision behind an accordion.
States
State the fact, then offer the useful alternative route. No joke, no decorative illustration.
Skeletons match final dimensions to prevent layout shift. Prefer a skeleton to a spinner.
State what happened, what was not changed and the next safe action. One recovery action, optional secondary route.
Voice
Direct, protective, specific and calm. We write as an informed party on the homeowner's side of the table. "You" is the homeowner. "We" is Bracen. One idea per sentence, and the limit sits beside the claim it qualifies.
Short declaratives. The answer comes first, then the reasoning. We do not hedge a sentence into meaninglessness; we state the boundary instead.
We assume the reader is about to commit a lot of money and has been given soft numbers before. We flag what to check and what we could not check.
Concrete nouns: quote, consent, contract, deposit, site visit, $/m², Code Compliance Certificate. A range has a region, date, units and basis.
No urgency, no competition framing, no exclamation. Confidence is earned by showing the method, not by raising the volume.
Say this, not that
Patterns
| Situation | Pattern |
|---|---|
| Unknown | Not checked, Not available, Not published |
| Verification | State what was checked, the source and the date |
| Indicative figure | Range, region, date, units, basis and uncertainty |
| Primary action | Verb plus object: Get an estimate, Find my next step |
| Error | What happened, what remains safe, the next action |
| Commercial relationship | Plain disclosure adjacent to the affected content |
| Ranking claim | Never winner, best overall or editor's choice without the visible method that supports that exact claim |
Words we use
Words we do not use
Mechanics
- New Zealand English on NZ pages: colour, organise, metre
- Sentence case in headings, labels and buttons
- Dates in full: 12 August 2026
- Units on every figure, NZD stated where money is shown
- Emoji
- Em dashes
- Manufactured urgency or countdowns
- Multi-builder competition or bidding language
Imagery
A photograph on Bracen is a claim. If it shows a house, a site, a builder or a project, a reader will assume it is real and relevant. So it has to be.
Priority order
Already held, with recorded attribution and permission basis.
Projects, people, process and details, commissioned or contributed with usage rights on record.
Only where it cannot be mistaken for a listed builder's work.
The honest default when provenance is missing. Preferred over any misleading image.
Rules
- Keep verticals vertical; crop with rooflines and heads intact
- Heroes at 3:2 or 16:9, rows at 3:2, grids at 4:3 or 1:1
- Captions name what is shown; attribution only when governed
- Alt text describes the frame and its relevance, not the article title
- Explicit dimensions and responsive sizes on every image
- Stock handshakes, generic foreign architecture, unsourced renders
- AI imagery depicting a house, room, site, builder or project as if real
- Heavy filters or colour grades that change materials
- Presenting any stock or AI image as a builder's work
- An image where a placeholder would be more honest
AI imagery may illustrate an abstract concept only when clearly labelled. The owned photography library is an asset backlog: roughly 40 governed NZ images across homes, builders at work, process, materials and details, each with source, permission, location, subject, approved crops, caption and alt-text on record.
Page families
Every public route belongs to one of eight families. They share identity, foundations and components, and vary composition by the customer job. A new route does not create a ninth style unless none of these jobs fits.
Explain Bracen, make the promise clear and route the visitor to the right next decision. One H1, a decision router, an evidence moment, a builder path and one closing action. Find my next step primary, the online estimate secondary.
Answer a defined question, earn trust and move the reader to one next step. Answer-first opening, reviewed date, 68ch body, sources, limitations and one contextual action. Criteria and disclosure sit above any ranking.
Own builder-discovery intent while showing fit and coverage quality. Visible result count, evidence boundary, image-led ruled rows and honest sparse states.
Help a homeowner assess one company without overstating verification. Source status and dates near the top, explicit unknowns, governed images and one relevant enquiry. Payment never implies approval.
An immediate useful range with its assumptions and uncertainty. NZD, region, date, units, scope, method, limitations and a next step in the first viewport.
Defensible market intelligence that can be cited. Issue masthead, findings before commentary, charts with units, methodology and a share affordance. May use its namespaced publication palette.
Complete a concrete task without looking like a dashboard. Outcome-first header, one action, progress where multi-step, privacy copy and truthful success and error states.
Standards, obligations and recovery made easy to read. Shared chrome, one-column measure, an effective date and one safe recovery action.
Guardrails
These are the rules that keep Bracen from drifting into a template. Each one is locked and changes only through a recorded decision.
No repeated floating cards, capsule calls to action, decorative dashboards, feature-icon grids, glass, glows or generic gradients.
Blue is the only action colour. Blue and green are never co-primary. Sand never becomes a band or a button.
IBM Plex Sans only on normal pages. The Building Report's publication fonts stay inside the report.
The wordmark is text. No monogram, mascot, badge or lockup, ever.
No decorative badges implying verification. Evidence is worded and dated. Paid placement is labelled and separate, and payment never implies approval or rank.
No stock or AI image presented as a real builder, project, site or place.
One dominant action per cluster, with a clearly lower-commitment alternative.
Never frame builders as competing for a homeowner's project. No manufactured urgency.
Visible focus, 44px targets, labelled controls, keyboard use, verified contrast and reduced motion. Not optional, not a backlog item.
Release gate
One H1 and logical heading order. Semantic tokens only, no raw hex in route files. One dominant action per cluster. Evidence, dates, sources and commercial relationships visible where relevant. Every image has a recorded source, permission, caption and crop. No horizontal overflow at 320, 375, 768 or 1280px. Keyboard path, focus, targets, contrast and reduced motion pass. Type check, lint, build and visual QA pass.
For agents
This site exists so that an AI agent can design, write and build to the Bracen brand without a PDF or a briefing call. The canonical kit is published here verbatim, in fetchable text, with tokens generated from the production theme.
Point an agent here
Endpoints
| Path | What it is | Use it for |
|---|---|---|
| /llms.txt | Index and summary in the llms.txt convention | Discovery, first fetch |
| /llms-full.txt | Every kit file concatenated in authority order | One fetch, full context |
| /kit/README.md | Kit index, locked decisions, release gate | Governance, what may not change |
| /kit/foundations.md | Colour, contrast, type roles, layout, shape, motion, icons | Any visual decision |
| /kit/brand.md | Position, audiences, architecture, wordmark, voice, imagery | Copy, imagery, identity |
| /kit/components.md | Component contracts and states | Building UI |
| /kit/page-families.md | The eight page families and their required states | Composing a route |
| /tokens.json | Colour and radius tokens from the live theme | Exact values in code or design tools |
| /tokens.css | The same tokens as CSS custom properties | Drop into a prototype |
Before you hand work back
- Wordmark is live text, Bracen, IBM Plex Sans Bold
- IBM Plex Sans is the only typeface
- Blue is the only action colour; one dominant action per cluster
- Every figure has region, date, units and basis
- Every claim of verification names the source and date
- Radii at or under 8px; no border plus shadow on one element
- Reads in New Zealand English, sentence case, no em dashes, no emoji
- A monogram, symbol, badge or alternate lockup
- Card grids, capsule buttons, gradients, glass, dashboard widgets
- Green or sand used as a button or a band
- Stock or AI imagery presented as a real builder, project or place
- Hype, urgency, bidding language or unearned rankings
The source of this site is the brand/ folder of the Bracen repository. The kit files under /kit/ are copied from docs/design-system at publish time, so they are always the committed version.