Design system · v2.2

Design system · v2.2

Everything the brand is built from.

Tokens, logo, colour, type, motion, voice and every component behind SaferSmart Zones™, all on one page and measured from source. Components read only band tokens, so everything below works on a white or navy section, in either appearance.

See the components Start with colour Collateral

31

Components

Core, forms, layout, content and product. None invented; each maps to a class family in theme.css.

4

Bands

data-band × data-theme. One component, four contexts, no variants.

2

Typefaces

Manrope for sentences. IBM Plex Mono for every number, identifier and label.

37

Templates

Decks, documents, spec sheets, email, print, social, a campaign set and a site page, in English and French.

Brand foundations

Roadway safety program intelligence.

Buyers default to filing SSZ under automated enforcement. The category to claim is software that helps an organization understand a behaviour, validate it, and build a defensible program around it, of which enforcement is one possible response.

PURPOSE

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.

Every surface, from the site to the review console, is built to keep that promise visible.

Four things the brand holds to.

Stated on the site, specific and falsifiable, adopted verbatim.

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.

Technology with purpose

Every deployment is tied to a defined challenge in a defined place. Not monitoring for its own sake.

Awareness that connects

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

Action with confidence

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

The program model: five moves, in order.

Two full stages sit ahead of any technology decision. The human stage is always tinted.

  1. 01

    Understand

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

  2. 02

    Validate

    Capture reliable information about what is actually happening there.

  3. 03

    Design

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

  4. 04

    Communicate

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

  5. 05

    Act

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

    Authorized human review

The automation boundary is absolute.

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.

Colour

Navy, teal and red.

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. Teal is the working tone; red is the signal, kept for calls to action and the moments that need to stop someone. Select any swatch to copy its hex.

Navy: brand and canvas.

navy-800 is Academy Navy, the logo's only colour.

Teal: the tone.

Which step is correct depends entirely on the band. That is the single most important thing to understand about SSZ colour.

Red: the signal.

Red marks the one action that matters on a screen, and carries the public awareness work. Use it sparingly: one red element per view, never for decoration or body text.

  1. Red buttons carry white text: red-500 at rest, red-600 on hover.
  2. On navy, use red-300 for red text or icons. red-500 is 3.30 on navy, so it is for filled buttons only.
  3. Red never replaces --tone. Links, focus rings and the wave stay teal.

The four-band model.

Two independent axes, data-band × data-theme, give four combinations. Every body-text token clears AA or AAA in all four.

light band · light theme

White section

--tone: teal-700
--ink: #071C42
ink 16.75 · soft 7.45 · mute 5.49
dark band · light theme

Navy section

--tone: teal-400
--ink: #FFFFFF
ink 16.75 · soft 10.12 · mute 6.64
light band · dark theme

Navy page

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

Deep navy section

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

Semantic band tokens.

The only colour names a component may read. Never a raw teal or navy step: a raw value cannot serve four contexts.

--bg / --bg-2
Section ground and its tint.
--ink / soft / mute
Headings, body, meta.
--edge / --edge-control
Decorative hairline, then the 3:1 control border.
--tone / --tone-bright
The accent role, not a colour. Hovers darken on light, brighten on navy.
  1. Components read only band tokens: --bg, --ink, --edge, --surface, --tone and their siblings.
  2. --tone is a role. Light band: teal-700. Dark band: teal-400. Writing a raw teal on a component breaks it on navy.
  3. Set data-band on every section. Forgetting it is the most common way to break this system.

The logo-guide palette.

Only Academy Navy survived into the built system. The other three are recorded for reference and should not be used in digital work.

Typography

Manrope and IBM Plex Mono.

Two families, and only two. Headings are weight 800 with negative tracking and balanced wrapping. If a value is a number, an identifier or a label, it is mono; if it is a sentence, it is sans.

Display: Manrope 800.

Sentence case, and always a full stop. Never title case, never an exclamation mark.

--t-ctaclamp(36–76px)
1.0 · −.045em
See the zone.
--t-heroclamp(34–56px)
1.04 · −.042em
Technology is only part of the solution.
--t-sectionclamp(30–50px)
1.1 · −.03em
Five moves, in order.
--t-h3clamp(19–24px)
1.26 · −.022em · 700
A workflow, not a black box.

Body and reading measures.

Lede at 60ch, article prose at 68ch.

--t-ledeclamp(16.5–19px)
1.62 · 60ch

Most roadway safety problems are not a mystery to the people who live with them. What is usually missing is reliable information about what is actually happening, and a defined way to act on it.

--t-prose17.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.

--t-caption13.5px · 1.55

Sample, non-identifying data shown for illustration.

Mono: load-bearing, not decorative.

Roughly thirty distinct uses. Figures are tabular wherever they sit in a column.

Eyebrow11.5px · 500
+.16em · uppercase

Use cases

Record fields12.5px · tabular

EVT-4821   2026-05-14   10:42:17

Step numerals11.5px · +.12em

01   02   03   04   05

Field label10.5px · +.13em

Organization

Jurisdiction codeclamp(30–46px) · 500

CA   US

The section pattern.

In order, every time.

The program model

Five moves, in order.

Two full stages sit ahead of any technology decision. That ordering is the brand's clearest structural claim, and the reason a program is not a camera.

RuleEyebrow, then a statement headline with a full stop, two lines at most, broken for meaning rather than fit. Then a 60ch lede.

Spacing and shape

Measured values, not a synthetic grid.

A 1280px shell, a clamped gutter and a clamped section rhythm. Every grid track is minmax(0, …), so one long unbreakable word can never widen a column past the viewport.

Step ladder.

The values actually used in source.

4
6
8
10
12
14
18
22
26
32
40
52
72
Layout frame
--shell
1280px
--gutter
clamp(20px, 4vw, 52px)
--section-y
clamp(72px, 9vw, 148px)
--head-gap
clamp(38px, 4.5vw, 68px)
--hit-min
44px
Corner radii · nothing between
--r-sm · 6
Thumbnails, badges
--r-md · 10
Buttons, inputs, nav
--r-lg · 14
Cards, strips
--r-xl · 20
Hero media, tiles
--r-pill
Tags, chips, filters

Shadow system.

Navy-tinted on white, black on navy. Cards carry none at rest; the hairline does that job.

rest
Card, tile, panel at rest. Hairline only.
--shadow-sm
Stuck masthead, pressed segment.
--shadow-md
Card hover, review record, form.
--shadow-lg
Hero media, mega menu, modal, toast.

Motion and the wave

One curve. Four reveals. One motif.

No bounces, no springs, no overshoot anywhere. Reduced motion forces every hidden resting state visible rather than merely cancelling the animation.

Editorial text.
A

Editorial text

Opacity 0 to 1 with a 22px rise.

B

Photography

The mask opens; the image settles from scale(1.045).

C

Hairline

scaleX(0 to 1) from the left, or a stroke draw.

See the zone.
D

Statement

Each line clips upward from translateY(105%).

--ease cubic-bezier(.22, 1, .36, 1) · --t-fast .18s · --t-mid .32s · --t-reveal .8s · --stagger 90ms

The hairline wave.

The single signature motif. Families of long, nearly-parallel hairlines, each the sum of three incommensurate sine terms, so the field never visibly loops.

Signature motif

Photography leads. The wave stays behind it.

Never interactive, never above content, never recoloured by hand. It reads --wave-color and --wave-alpha from the band and re-tints on theme change without restarting.

01Hero9 lines · amp 46 · band 86%
02Panel7 lines · amp 34 · band 78%
03Flow3 lines · amp 18 · band 30%
04CTA10 lines · amp 52 · converges
05BootAs hero, drawn in sequence

Five places onlyAdding a sixth placement, or a fifth reveal type, is a design decision, not an implementation one.

Iconography

One drawing rule, no icon library.

The source inlines one-off SVGs per component, and every one shares the same rule: no fill, a currentColor stroke at 1.5, round caps and joins. Icons are supporting furniture. Photography and the wave carry the identity.

camera
shield-check
map-pin
activity
layers
share-2
sun
moon
Sizes in use
14 · inline
17 · flow
22 · tile
42 · success
64 · tech card

A flagged substitution.

No icon set was supplied, so the system uses Lucide, the closest match to the source's own drawing rules. It is inlined so currentColor resolves. If SSZ adopts its own glyph set, replace the source and nothing else changes. No emoji, and no unicode characters as icons, ever.

Photography

Photography leads.

Cool, neutral, documentary. Overcast daylight, desaturated municipal greys and asphalt browns, with teal appearing only where it is real infrastructure. No warm grade, no film grain, no vignette.

A roadside camera over an active construction zone, the vehicle plate replaced with a blank panel
Plate remediated · overlay reads SAMPLE
A municipal arterial corridor at dusk with a pole-mounted camera and posted 40 limit
Plate remediated · overlay reads SAMPLE
A school-zone approach with the Don't Try to Beat the Red sign
Needed no change · the model for open briefs

RemediationBlurring the vehicle while the overlay still spells the plate is not remediation. Compliant copies re-set the overlay as SAMPLE and replace the plate with a neutral blank panel; originals are untouched.

Do.

  • Real locations, real infrastructure, real weather.
  • Natural available light. Overcast reads documentary.
  • Eye level: the view of someone who works there.
  • Winter and adverse conditions. They are the operating reality.
  • Negative space reserved for type.

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 and no "AI" visual clichés.

When the photograph does not exist yet.

PhotoPending holds the frame and states its own brief on the page. Never a gradient, never stock, never an illustration.

Photography to be supplied

The bus stop. A municipal transit stop on an arterial road, a bus pulled in with vehicles passing on the left. Overcast daylight, eye level, documentary framing, no readable license plates, no identifiable people.

Voice

Plainly written, and honest about what is not yet known.

The reader will have to defend a decision in a council chamber, so the writing never oversells and never uses a number it cannot show the working for. We, not I. Second person for the reader. No emoji, ever.

Settled spelling · Canadian English, two American exceptions
UseNever
programprogramme
license, noun and verblicence
curbkerb
behaviour, colour, favourbehavior, color
organization, authorizedorganisation, authorised
centre, metre, defencecenter, meter, defense
organizationagency
Canada and the United Statesglobal, worldwide, international

Headlines.

Sentence case, ending in a full stop. "See the zone." "Five moves, in order." Eyebrows are uppercase mono, two or three words, unpunctuated.

Dates and times
In prose
7 January 2026
In a data field
2026-01-07
Times
10:42:17
The verification marker

[NAME TO BE VERIFIED]
[CAMERA COMPATIBILITY TO BE VERIFIED]
[CONTENT TO BE VERIFIED]

A placeholder that looks like copy gets published; one that looks like a defect gets fixed. The brand would rather look unfinished than unsubstantiated.

Components

Thirty-one components, one token set.

Each corresponds to a class family that exists in theme.css; none is invented. Switch any group to the navy band to watch every token re-resolve while the component stays the same.

Core

Logo · Button · LinkArrow · Tag · Chip · Eyebrow · Note · Callout · Marks · Icon

Use cases

Logo
Button
Tertiary
Tag · chip
Work zonesPublishedPending reviewIntersections
Icon
Marks
  • Encrypted in transit and at rest
  • Reviewer identity and time on every decision

The automation boundary

The system prepares the record; it does not conclude it.

VerifiedEvery contrast ratio is calculated from the real hex values in source.

Forms

Field · Segmented · FilterBar

Added--edge-control gives inputs a 3:1 border, and --error follows the band. Both close contrast failures found in the source audit. An error always carries text and an icon, never colour alone.

Layout

Masthead · Section · SectionHead · Footer

The program model

Five moves, in order.

Two full stages sit ahead of any technology decision, which is the clearest thing that separates a program from a camera.

Navy band

Every token re-resolves.

A navy section changes --tone from teal-700 to teal-400 and --ink to white. The component does not change.

Footer · shown at the end of this page

Content

Card · UseCasePanel · FlowStrip · LayerCard · StatStrip · FactList · PostCard · MemberCard · SideCard · Steps

UseCasePanel
FlowStrip
  1. 01

    Understand

    Define the challenge in a specific place.

  2. 02

    Validate

    Capture what is actually happening.

  3. 03

    Design

    Turn patterns into a defined program.

  4. 04

    Communicate

    Say what is happening and why.

  5. 05

    Act

    Support the response, with review.

    Authorized human review
StatStrip · Card · LayerCard

2

Stages before technology

Understand and validate come first.

100%

Decisions with a reviewer

The record names who decided, and when.

CA · US

Operating region

Named, not hidden behind a global claim.

01

Purpose

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

02

Brand promise

You will be able to show why you acted.

 03

Approach

From a described problem to a defined response.

Read the approach
FactList · Steps · PostCard · SideCard
Data residency
Hyperlocal to the market served
Access
Per-user named access
Record
Reviewer identity and time on every decision
Region
Canada · United States
  1. Define the challenge and the location.
  2. Assess camera compatibility on site.
  3. Capture a baseline before any program starts.
MemberCard · SideCard (CTA)
Portrait to be supplied

[NAME TO BE VERIFIED]

Operations

Biography to be supplied.

Email operations

Product

ReviewRecord · PhotoPending · ProgramTile · RegionPanel · Toast

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.

Arterial work zoneWork zones

Active construction zones

Speeds through a live work zone

Measure what is actually happening before the program is designed.

  • Approach-speed distribution
  • Time-of-day pattern
  • Reviewable event record

Operating region

  • CACanada
  • USUnited States

Data residency is hyperlocal to the market served. Deliberately not a map: an inaccurate outline would mislead.

Photography to be supplied

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

Link copied Toast · confirmations only, never errors or warnings. Try Share above.

Campaigns

A public-facing sub-identity.

"Stop. Don't Try to Beat the Red" speaks to drivers, not buyers, so it gets its own voice: campaign red, Anton, one signal photograph. The same red now sits in the main palette as red-500, so the campaign and core SSZ surfaces share one red.

  • Red and white only, full-bleed.
  • Anton, all caps, every line fitted to the frame width.
  • One signal photograph, red lamp lit.
  • English and Canadian French sets ship as pairs.

Templates and UI kits

Starting points, already on brand.

Every template below opens as a live, public page. Select a card to view the full deck, one-pager or spec sheet in a new tab; no sign-in needed.

Sales decks.

First-meeting and workflow decks, one per program type.

Deck · 14 slides

Construction sales deck

Work-zone programs: problem, program model, field devices, review console, automation boundary, economics, the ask.

Open Deck · 12 slides

Red light sales deck

Legacy in-signal costs, the 75 to 100 foot setback, the speed ladder that proves intent, ranked evidence and privacy layers.

Open Deck · 12 slides

Transit sales deck

The blocked stop, two sub use cases, event anatomy, camera-agnostic deployment, ranked evidence and the automation boundary.

Open Deck · 12 slides

Secure evidence workflow deck

Seven-stage pipeline, architecture, detect, preserve, package, transmit, chain of custody, verify and audit.

Open Deck · 19 slides

NY red light deck

New York State deck for Stop. Don't Try to Beat the Red: Vision Zero, crash data, the evidence, NY law and the path forward.

Open Deck · FR

NY red light deck (FR)

Canadian French version of the 19-slide New York deck.

Open

Single slides.

One 16:9 slide each, navy and white.

Slide · 16:9

Evidence pipeline slide

The seven-stage camera-agnostic pipeline with edge privacy, data privacy and four cross-cutting guarantees.

Open Slide · 16:9 · white

Evidence pipeline slide (white)

The same pipeline slide on a white ground.

Open

One-pagers and briefs.

Letter portrait, print-ready.

One-pager · Letter

Evidence flow one-pager

Capture to secure distribution in seven stages, the two SSZ privacy layers, stakeholders and a compliance strip.

Open One-pager · white

Evidence flow one-pager (white)

The same evidence flow on a white ground.

Open One-pager · Letter

NY red light one-pager

Leave-behind: Vision Zero stats, what makes SSZ different, the five-step NY path and NY rules.

Open One-pager · FR

NY red light one-pager (FR)

Canadian French version of the New York leave-behind.

Open Brief · Letter

Program brief

The challenge, the program, what SSZ can support, how it runs, and the automation boundary.

Open

Spec sheets.

Two printable pages each.

Spec sheet · 2 pages

Product spec sheet

Positioning, key metrics, technical specification table, capabilities and the automation boundary.

Open Spec sheet · 2 pages

SuperWalzCAM spec sheet

The compact LPR camera: positioning, metrics, specification table and capabilities.

Open Spec sheet · 2 pages

Guardian SmartFlagger spec sheet

The AFAD: positioning, key metrics, dimensions, capability specification and the automation boundary.

Open

Campaign and web.

The public awareness set and a full site page.

Campaign · EN

Don't Try campaign

Two 1920 × 1080 landscape and four 1080 × 1920 story artboards in campaign red and white.

Open Campaign · FR

Don't Try campaign (FR)

Canadian French set: « Arrêt. Ne tentez pas de devancer le rouge ».

Open Web · 1280

Site page

Masthead, hero with the live wave, a tinted use-case band, the program model on navy, navy CTA and footer.

Open

Phase 2 startup kit.

Every item ships in English and Canadian French. Bracketed values are placeholders.

Canvas

Stationery

Letterhead, business card front and back, and a #10 envelope.

Open Canvas · FR

Stationery (FR)

Canadian French letterhead, business card and envelope.

Open Email

Email signature

Full and compact table-based signatures. Host the logos in assets/logos/email before use.

Open Email · FR

Email signature (FR)

Canadian French full and compact signatures.

Open Email · 600 px

Email newsletter

A 600 px monthly newsletter.

Open Email · FR

Email newsletter (FR)

Canadian French monthly newsletter.

Open Document · 5 pages

Pilot proposal

A city-facing pilot proposal that doubles as the municipal use-case document.

Open Document · FR

Pilot proposal (FR)

Canadian French pilot proposal.

Open Document · 2 pages

Case study

A pilot results template. No results are invented; every figure is a placeholder.

Open Document · FR

Case study (FR)

Canadian French pilot results template.

Open Document

Resident FAQ and notice

A resident FAQ plus a notice-of-liability letter. Statutory wording is left to the municipality's counsel.

Open Document · FR

Resident FAQ and notice (FR)

Canadian French FAQ and notice letter.

Open Document · 4 pages

Installation guide

D-Cop 6 checklist, mounting, specs, commissioning and sign-off. Specs are unverified.

Open Document · FR

Installation guide (FR)

Canadian French D-Cop 6 installation guide.

Open Social · 6 formats

Social post set

Six social formats with usage rules, covering the three-posts-a-week cadence.

Open Social · FR

Social post set (FR)

Canadian French social formats.

Open Print

Tradeshow booth

Two roll-ups and a 10 × 8 ft backdrop, with print notes.

Open Print · FR

Tradeshow booth (FR)

Canadian French roll-ups and backdrop.

Open

UI kits.

Full recreations of the real surfaces.

KIT 01

Marketing site

Home, Programs, Article, News and Contact as a click-through recreation, with real theme switching and the live wave field.

Open the kit KIT 02

Evidence review console

The authorized-review surface: queue, capture package, event record and the decision panel. Fully interactive.

Open the console

Open items

What's open, and what's still to settle.

The system says so plainly when something is a substitution or a decision still to make. That is the brand's own rule, applied to itself.

Fonts
Loaded from Google Fonts. No licensed webfont files exist in the sources yet.
Icons
Lucide stands in for a glyph set SSZ does not have.
Two palettes
Logo guide versus built system. This system follows the built values; the decision is the brand owner's.
Clear space
Proposed as one cap height of the "S" on all four sides. Awaiting sign-off.
Icon form
Left or right single form. They are exact mirrors; the produced asset uses the left.
Photography
Eight images is a starter set. The commission is the brand's largest gap.
Contacts and team
Held behind verification markers on purpose.
Print colour
[PMS / CMYK TO BE VERIFIED]. HEX is canonical until they are specified.