The deliverable

Six interconnected layers.

A brand system is not one document. Each layer is a standalone file with its own audience and its own job.

01

Brand Book

Purpose, mission, vision, values, promise, positioning, differentiation, story, architecture, naming — plus audiences, ICPs, five buyer personas, jobs to be done, triggers, objections, and the open-facts register. The canonical domain is now settled.

Open Brand Book →
SSZ-01-Brand-Book.md · v2.0
02

Visual Design System

A full logo chapter — variations, palette, clear space, colourways, sixteen misuse rules, the master-file suite. Plus the navy and teal system, four-band tokens, Manrope and IBM Plex Mono, the wave motif, four reveal types, ~60 components, eleven breakpoints, and three verified contrast failures.

Open Visual Design System →
SSZ-02-Visual-Design-System.md · v2.0
03

Messaging Playbook

Master narrative, 25/50/100-word descriptions, boilerplate, four messaging pillars, an eight-row messaging matrix, verbal identity, the settled spelling rules, ten objection scripts, CTA library, taglines and approved claims.

Open Messaging Playbook →
SSZ-03-Messaging-Playbook.md · v2.0
04

Communications & Content Playbook

Format standards, sensitive-content rules, crisis communications, the sales asset inventory, discovery framework — plus governance: the CMS workflow, ownership, approvals, file naming, AI policy and the open-items register.

Open Communications Playbook →
SSZ-04-Communications-Content-Playbook.md · v2.0
05

Brand Asset Library

Far more exists than first appeared — a design system in code, a fifteen-block template library, three guides, a multilingual runtime. The real gaps: logo master files, photography, contact values and sales collateral.

Open Asset Library →
SSZ-05-Brand-Asset-Library.md · v2.0
06

AI Brand Kit

The system as machine-readable instructions: a master system prompt, ten task prompts, an image prompt library with real brand hex values, and a validation checklist. Ships with ssz-brand-kit.json — 25 structured domains.

Open AI Brand Kit →
SSZ-06-AI-Brand-Kit.md · ssz-brand-kit.json

Layer 01 · Foundation

The idea the whole brand rests on.

The best writing on the site, and the truest expression of the brand. It sits in two separate sections of /approach/ — both quoted exactly as they appear.

Most roadway safety problems are not a mystery to the people who live with them. A particular approach, a particular stop, a particular work zone — someone already knows it is a problem. What is usually missing is reliable information about what is actually happening, and a defined way to act on it.

Hero, under "Technology is only part of the solution."

SaferSmart Zones exists to close that gap. We help organizations identify a behaviour worth changing, measure it properly, understand the pattern behind it, and build a program that responds — with public awareness, operational change, enforcement, or some combination of the three.

Under "Why we exist" · "From a described problem to a defined response."

Purpose

To close the gap between a roadway problem people already know about and a response an organization can defend.

Brand promise

You will be able to show why you acted. Everything the platform does resolves into that one promise.

Four things we hold to.

Stated on the site, and unusually good — specific, falsifiable, written with a point of view. Adopt verbatim.

01

Data before decisions

A program built on an assumption is a program that will be argued with — by council, by the public, and eventually by a court.

02

Technology with purpose

Every deployment is tied to a defined challenge in a defined place. We are not interested in monitoring for its own sake.

03

Awareness that connects

Awareness is not a consolation prize before enforcement — it is often the part that changes behaviour.

04

Action with confidence

Validated information and a reviewable record are what make a decision defensible after the fact.

The category to claim

Buyers default to filing SSZ under automated enforcement / red-light camera vendor — a category loaded with revenue-generation accusations and due-process baggage.

Claim instead: roadway safety program intelligence. Software that helps an organization understand a behaviour, validate it, and build a defensible program around it — of which enforcement is one possible response. That framing is already implicit across the site, and it is the single most valuable positioning move available.

The program model

Five moves, in order.

The brand’s core structural device, and its clearest differentiator: two full stages sit ahead of any technology decision. This section is a navy band — every token below re-resolved automatically.

  • 01

    Understand

    Define the safety, compliance or mobility challenge in a specific place.

  • 02

    Validate

    Capture reliable information about what is actually happening there.

  • 03

    Design

    Turn events into patterns, and patterns into a defined program.

  • 04

    Communicate

    Tell people what is happening and why the program is running.

  • 05

    Act

    Support the appropriate response, with authorized review where it applies.

    Authorized human review

The automation boundary — absolute, not subject to exception

The tightest formulation in the whole brand, from the style guide:

"Defined program decisions remain subject to authorized review inside the organization responsible for the outcome. The system prepares the record; it does not conclude it."

Every description of an automated step is followed, in the same section, by the statement that a person decides. Not a disclaimer bolted on — the product position.

Layer 02 · Colour

Navy and teal.
Light on white, dark on the brand navy.

Transcribed from theme.css. Light mode is built on #FFFFFF; dark mode is built on the brand navy #071C42 — which is why the dark theme reads as a brand rather than an inversion.

Navy — brand and canvas

navy-950
#030A18
19.80 AAA on white
navy-900
#04122E
18.57 AAA
navy-800 · brand
#071C42
16.75 AAA
navy-700
#0B2650
14.92 AAA
navy-600
#113463
12.39 AAA

Teal — the tone

The working end of the system. Which step is correct depends entirely on the band — the single most important thing to understand about SSZ colour.

teal-200
#A5F3EC
1.26 white13.26 navy
teal-300
#5EEAD9
1.47 white11.36 navy
teal-400 · tone on navy
#2DD4BF
1.86 white9.00 AAA navy
teal-500
#14B8A6
2.49 white6.73 AA navy
teal-600
#0D9488
3.74 white4.96 AA navy-900
teal-700 · tone on white
#0F766E
5.47 AA white
teal-800
#115E56
7.61 AAA white
amber · tags only
#96430A
5.90 AA on own tint

Verified The source comment on --teal-700 reads "AA-safe as text on white" — confirmed at 5.47. The comment on --amber reads "darkened: AA on its own 9% tint, not just on white" — confirmed at 5.90 on its own tint, 6.77 on white. That is genuinely careful colour work; most systems check text against the page, not against the tinted chip it actually sits in.

The band system — the core concept

Two independent axes — data-band (light or dark section) × data-theme (light or dark theme) — giving four combinations. Components read only the semantic tokens, so one component works in all four without variants. Switch the appearance control in the header to see both themes.

light / light

White section

--tone: teal-700
--ink: #071C42
ink 16.75 · soft 7.45 · mute 5.49

light / dark

Navy section

--tone: teal-400
--ink: #FFFFFF
ink 16.75 · soft 10.12 · mute 6.64

dark / light

Navy page

--tone: teal-400
--ink: #EDF3FF
ink 15.05 · soft 9.09 · mute 7.06

dark / dark

Deep navy section

--tone: teal-400
--ink: #FFFFFF
ink 18.57 · soft 10.40 · mute 6.35

All pass Every body-text token clears AA or AAA in all four bands. This is a well-built system.

Three rules that keep the band system intact

  1. Components read only band tokens--bg, --ink, --ink-soft, --ink-mute, --edge, --surface, --tone. Never a raw --teal-* or --navy-*. A raw value cannot serve four contexts and will fail in at least one.
  2. --tone is not a colour, it is a role. Light band: teal-700. Dark band: teal-400. Writing color: var(--teal-700) on a component breaks it on navy.
  3. Set data-band on every section.

Three verified contrast failures

Found by calculating every value in the source. All three are real and actionable.

#IssueFixSeverity
1--tone-bright resolves to teal-600 #0D9488 on the light band. 3.74 on white — below 4.5:1 for text under 24px. Used as text in .cta__region (12px), .readmore:hover (11px) and link hovers. Fine on navy bands, where it is teal-300 at 11.36.Set --tone-bright: var(--teal-800) on the light band — 7.61 AAA. Two declarations to change.High · 1.4.3
2Form input borders use var(--edge), which fails 3:1 in all four bands (1.23 on white). An input border is a non-text UI component under WCAG 1.4.11. The contact form is the primary conversion surface.Add an --edge-control token meeting 3:1 and apply to form controls. --edge stays correct for decorative hairlines.High · 1.4.11
3The invalid-field colour #FF8A5B is 2.32 on white, and is the only colour hard-coded outside the token system — so it cannot follow a band.Tokenise as --error per band. Also add per-field text and an icon — WCAG 3.3.1 means an error must not rely on colour alone.High · 1.4.11 / 3.3.1

Layer 02 · Typography

Manrope and IBM Plex Mono.

Real values from source, rendering in the real fonts. Headings are weight 800 with negative tracking and text-wrap: balance. The mono is load-bearing, not decorative — it carries every eyebrow, category label, numeral and record field, roughly thirty distinct uses.

.cta__title
clamp(36–76px)
1.0 · −.045em · 800
See the zone.
.hero__title
clamp(34–56px)
1.04 · −.042em · 800
Technology is only part of the solution.
.section__title
clamp(30–50px)
1.1 · −.03em · 800
Five moves, in order.
.ssz-prose h3
clamp(19–24px)
1.24 · −.022em · 700
A workflow, not a black box.
.section__lede
clamp(16.5–19px)
1.62 · 60ch
Each zone has its own rules, its own evidence requirements and its own operational owner.
.article .ssz-prose
17.5px · 1.72 · 68ch
Automation supports identification, classification, organization and validation. Defined program decisions remain subject to authorized review inside the organization responsible for the outcome.
.eyebrow
11.5px mono · 500
+.16em · uppercase
Use cases
mono · tabular
12.5px
EVT-4821   2026-05-14   10:42:17
step numerals
11.5px mono · +.12em
01   02   03   04   05   06

The section pattern

EYEBROW                     ← mono 11.5px / 500 / +.16em / uppercase / --tone
                              with a 6px --tone dot, 9px gap, 18px below

Statement headline.         ← 800, negative tracking, sentence case,
Second line for meaning.      FULL STOP, text-wrap: balance

Supporting copy at 60ch     ← --ink-soft, line-height 1.62

Plus .rule — a 56 × 1.5px --tone hairline that draws in ahead of the copy. Visible at the top of the Colour section above.

The settled spelling rules

Canadian English with two deliberate American exceptions: program (never programme, 201 instances) and license for both noun and verb — it is a license plate. Also curb, never kerb (corrected in 33 places).

Keep the -our (behaviour, colour) and -ize (organization, authorized). Keep centre, metre, defence, travelled, cheque. Dates: 7 January 2026 in prose, 2026-01-07 in data.

Say "organization", not "agency" — agency is narrower than the audience and quietly writes construction contractors out. And never global, worldwide or international: the region is Canada and the United States, and that is a commitment rather than a limitation to hide.

Layer 02 · Components

Everything a reviewer needs, in one place.

Live components built from the real token system. Roughly sixty exist in source, fifteen of them as saved Elementor templates — don’t rebuild what is already built.

Buttons

Verified White on teal-700 = 5.47 AA · hover teal-800 = 7.61 AAA · dark theme uses #04202B on teal-500 = 6.77 AA · dark band uses #042A26 on teal-400 = 8.27 AAA. The near-black text on bright teals is the correct call — white on teal-400 would fail. Tab through to see the 2px --tone focus ring at 3px offset.

The evidence review record

The brand's most distinctive UI object. Mono tabular figures, ISO dates, and the authorized reviewer required line that is mandatory and never removed.

Evidence reviewPending review
Event
EVT-4821
Date
2026-05-14
Time
10:42:17
Location
Sample Ave / 3rd St — NB approach
Event image
Context image
Approach view
Authorized reviewer required

Sample, non-identifying data shown for illustration.

The photography-pending component

A purpose-built answer to an incomplete asset set: a pending photograph holds its frame and states its own brief on the page. The same pattern covers portraits. This is the right way to ship an incomplete brand — the remaining task is to commission the photography, not to fix the site.

Photography to be supplied

The corridor. A municipal arterial road with roadside camera infrastructure mounted on a utility pole, vehicles approaching in both directions and a posted speed-limit sign. Overcast daylight, documentary framing, no readable license plates.

The four reveal types — the whole motion vocabulary

From the source: "Four types only. A: editorial text. B: photography mask. C: hairline draw. D: large statement clipping up. Everything else reuses one of them." One easing curve, cubic-bezier(.22, 1, .36, 1). Adding a fifth type is a design decision, not an implementation one.

A

Editorial text

Opacity 0→1 with a 22px rise.

B

Photography

Mask clip-path opens; image settles from scale(1.045).

C

Hairline

scaleX(0→1) from left, or a stroke-dashoffset draw.

D

Statement

Each line clips upward from translateY(105%).

Reduced motion — the pattern worth copying

Every element whose resting state is opacity: 0 or a clip-path is explicitly forced visible — not merely un-animated. A naive implementation that only cancels animations leaves reveal content permanently invisible. This one doesn't. The boot loader and page transition are removed entirely rather than sped up.

Any new animated component must add its resting state to that block.

The wave — five placements only

The brand has one graphic device and the source is emphatic about its restraint: "Photography leads. The SSZ hairline wave is the signature motif, used in five places only." Hero, panel, flow, CTA and the boot sequence. Never interactive, never above content, never recoloured — it reads --wave-color from the band and re-tints automatically.

The hairline recurs as a family, which is what makes it a system rather than a decoration: .rule, .panel__thread, .flow__thread, .wire__links, .arch__link, .ptile::after, .xfade__line, and custom list markers — "a short SSZ rule rather than a browser bullet."

✓ Photography do

  • Real locations, real infrastructure, real weather
  • Natural available light — overcast reads documentary
  • Eye-level: the perspective of someone who works there
  • Winter and adverse conditions — operating realities, and showing them is credibility
  • Negative space for type overlay

✕ Photography don't

  • No readable license plates — blur or replace, non-negotiable
  • No identifiable individuals without written release
  • No collision, injury or emergency-aftermath imagery
  • No children in an enforcement context
  • No surveillance aesthetics, no "AI" visual clichés
  • No synthetic people in an authority role

Governance

What's open, and what just closed.

Eight items closed when the source files arrived. Thirty remain open, six of them blocking — and four of those need only a decision rather than production work.

The marker convention is a brand asset, not a defect

v1.0 of this system treated the [… TO BE VERIFIED] markers as failures. They are a deliberate, documented convention with drafted replacement text and a live approval trail. The style guide explains why:

"The marker is visible on the page on purpose. A placeholder that looks like copy gets published; one that looks like a defect gets fixed."

Same instinct as the photography-pending component, and as the rule that says write nothing rather than an unmeasured claim. The brand would rather look unfinished than unsubstantiated. For this audience that is exactly the right trade. Progress: 58 markers reduced to 22.

✅ Closed since v1.0

ItemResolution
Security, encryption, residency, retentionPublished. Encrypted in transit and at rest; per-user named access; reviewer identity and time on every decision; residency hyperlocal to the market served. This was the most likely deal-breaker in the pipeline.
Camera compatibilityPublished as assessment criteria — network reach, format and resolution, clock accuracy, field of view. Describes the assessment, not a list, so it does not become false when a new device appears.
Program integrationsPublished with a conditional "where the organization can expose…" clause. Never drop that clause.
Colour and font valuesExtracted. Layer 02 rewritten from source.
programme vs. programSettled: program.
kerb vs. curbSettled: curb.
Partner nameSettled: Site2020, one word, an independent partner company.
Alt textPartly a false finding. Empty alt on a decorative image inside an aria-hidden link is correct practice.
FrenchAlready built — three languages, switcher hidden, one line to re-enable. The task is validation, not creation.

🔴 Still blocking

ItemWhat's needed
Logo master files & palette divergenceNo exportable artwork exists, and only 1 of 4 logo colours matches the built system. Blocks every piece of collateral.Blocking
Which build is canonicalSource files and the live site disagree on team, markers, naming and languages. Resolve first — it changes which findings are live.Decision
Contact valuesSix positions. One phone number or none — "a number that rings nowhere is worse than a form." City and province, not a street. Role addresses, not personal ones — the live build publishes three personal addresses.Decision
Team dataSix slots: name, title, two-to-three sentence bio, square-cropped portrait, work email, LinkedIn. "No adjectives about passion, no 'thought leader'."Decision
Privacy, Terms, AccessibilityOn the older build all three footer links point to the homepage. Confirm the newer build publishes them.Blocking
Three contrast failures--tone-bright, form input borders, invalid-field colour. Small, well-defined code changes.Code
Brand name formBoth forms in use on the older build, plus decks and biographies already in circulation.Blocking

Also worth fixing quickly

Every external research citation on the two long-form use-case pages carries ?utm_source=chatgpt.com in its href, the FHWA is labelled "Administration Fédérale des Autoroutes" in English copy, and the logo filename contains a literal ™. Individually small; collectively a visible provenance trail on exactly the pages carrying the brand's only statistics.

Separately: the site cites IIHS at 21% in body copy while its own reference list includes a paper titled "…Reduces Fatal Red Light Running Crashes by 24 Percent." Read both papers and reconcile before either number appears in a deck or a council presentation.

Layer 06 · AI Brand Kit

AI may draft.
AI may not claim.

The system as machine-readable instructions, so you can stop saying “write this in our brand voice” and start giving a model enough structure to reliably operate inside the brand — including knowing what it is not allowed to say.

Master system prompt

What the company is, voice, terminology, the corrected spelling rules, the automation boundary, approved and forbidden claims, audiences and structure patterns.

Ten task prompts

Blog, LinkedIn, one-pager, council material, campaign copy, outreach, RFP response, press release, voice rewrite, compliance review.

Image prompt library

Visual-DNA prefix, seven subject prompts, and diagram prompts carrying the real brand hex values — with the rule to pick the teal by background.

ssz-brand-kit.json

25 structured domains. Every design token with its calculated contrast ratio, the four-band map, all personas, the messaging matrix, and the open-items register.

Validation checklist

Ten blocking checks, nine high, six medium, and a final human gate. One blocking failure stops publication.

Marker convention

The seven approved markers, and the rule that a marker always beats an estimate — and that softening one into a hedge is worse than either.

The hard rule

No AI system may generate a statistic, performance figure, case study, testimonial, client quote, named certification, named camera model, or encryption version for SaferSmart Zones™. Every AI-assisted asset requires human review and named sign-off before publication.