Brand system the canonical reference

One firefly. One set of rules.

This page is the single source of truth for the Tosa Marketing brand across web, print, and everything after: tokens, type, components, motion, voice, and the booth. Point any designer, any tool, or any AI here — a plain-text version lives at /brand.md.

01The ideawhy a firefly

Wauwatosa means firefly.

The town’s name comes from the Potawatomi word for firefly, and the whole brand is that one image: a small, precise light that makes itself seen at dusk.

The scene behind every design decision is a southeast Wisconsin owner checking their site after closing time — shop lights off, tomorrow’s calls on their mind. The default surface is night. The glow is the business being findable in it. Day sections exist for contrast: pricing, lists, proof. The tagline is “Built to be seen.” and it is never reworded.

02Logo & marksthe firefly signal

The mark is drawn once, used everywhere.

Tosa MarketıngBuilt to be seen.
Wordmark

The glowing dot is the tittle of the “i” — the firefly signal. It is part of the logotype, not decoration.

Firefly mark

The fly from the logo file, exactly. Never a code-drawn or AI-redrawn stand-in. The lantern stays lime and stays lit.

Ringed mark

The ring sits low-left so the right wing breaks the circle. Never recentre it, never redraw it concentric.

Flight path

The dotted journey line. Used for process and motion moments, always with intent, never as filler.

Clear space: keep at least the lantern’s height of quiet around the mark. Minimum sizes: 20px for the fly, 90px wide for the wordmark. On photography, the mark sits on dusk or a scrim — never directly on a busy area.

03Colorlime is the only hue

Night is the canvas. Luciferin is the light.

The web palette lives as CSS variables in app/globals.css — the swatches below render from the live tokens, so this page cannot drift from the site. Two laws above all: never introduce cream or beige, and luciferin is the only saturated hue on night surfaces. On day surfaces the accent is a night-sky indigo; lime stays a night color.

Night tokens

#0E0E10
Dusk--dusk

The night surface. The default state of the site.

#181719
Dusk 2--dusk-2

Raised night surfaces: cards, panels, stages.

#D8F25A
Luciferin--glow

The brand hue. The only saturated color on night. Never tinted, never gradiented into other hues.

#B8D94B
Luciferin soft--glow-soft

Hover states and secondary glow.

#5B5B5E
Moss--moss

Muted structural gray: rules, borders, quiet marks.

#9C9C9B
Mist--mist

Secondary text on night.

#F7F6EF
Warm white--warm-white

Primary text on night. Never pure #FFF.

Day tokens

#F6F9F1
Day paper--day-paper

The day surface, for pricing, lists, and proof.

#FDFEFB
Day card--day-card

Raised day surfaces.

#14241C
Day ink--day-ink

Primary text on day. Deep pine, not black.

#DFE6D6
Day line--day-line

Hairlines and borders on day.

#58675A
Day muted--day-muted

Secondary text on day.

#3D4B85
Day accent--day-green

Night-sky indigo. The only accent on day; lime stays a night color.

Print scene

Print artwork (cards, booth) runs the firefly scene deeper and bluer than the screen: a night-sky navy instead of charcoal. Values sampled from the canonical print files; for production, the CMYK PDFs in section 08 are the reference, not hex conversions.

#0A1D36
Print dusk

Night-sky navy. The print scene runs deeper and bluer than the screen dusk.

#C2E83F
Print luciferin

The lime, tuned for print artwork.

#EAFF7A
Lantern highlight

The hot center of a glow. Small doses only.

#F7F6EF
Warm white

Type and negative space on print dusk.

#9FB3CC
Mist blue

Secondary print text and quiet detail.

04TypographyCalibre & Tiempos

Two voices: the editor and the operator.

Display — Tiempos Headline · var(--t-display) · clamp(44–76px)
Built to be seen.
H2 — Tiempos Headline · var(--t-h2) · clamp(30–52px)
The quick brown fox jumps at dusk.
Lead — Calibre · var(--t-lead) · clamp(17–20px)

Calibre carries navigation, body, labels, CTAs, and every piece of operational copy. It works; Tiempos speaks.

Label — Calibre semibold, tracked uppercase, used sparingly
What the work is

Both faces are licensed from Klim Type Foundry; WOFF2 files live in public/fonts/klim/. Fallback stacks: Calibre → Inter → system sans. Tiempos Headline → Source Serif 4 → Georgia. Display stays large and confident with tight, readable line-height; emphasis inside display type is italic serif, often carrying the lime . period.

05UI elementsrendered live, never mocked

The working parts, as they ship.

Everything below is the production component or class, not a picture of one. If it looks different here than on a page, the page is wrong.

Buttons on day

On night

Kicker label with a muted continuation
01Section headwith meta note

The section head is the site’s wayfinding device: serif index numeral, tracked label, hairline rule with a firefly node, italic meta. Every section gets exactly one.

List & chips

  • Inclusion rows carry a firefly bullet and a hairline
  • They are the standard list treatment sitewide
Wauwatosa — pill chipMilwaukee — pill chipBrookfield — pill chip
06Motiona controlled glow

Motion behaves like light, not like a slideshow.

  • Every move reads as a glow, a reveal, or a camera move — nothing bounces
  • One entrance animation per section, maximum
  • All effects gate on prefers-reduced-motion and pointer type
  • Video loops are seamless: no flash frames, no hard cuts
  • No preloaders, no scrolljacking, no heavy WebGL on client-facing subpages
  • Phones get stills where motion costs more than it gives
07Layout lawand the standing bans

Night and day, in bands.

Pages alternate night and day sections in asymmetric editorial grids. Night sells the feeling; day carries the facts.

Every section must cite a module from the reference library (tosa-module-library.html) — sections are never invented from taste. New section ideas require a new captured reference first. The following patterns are banned outright, in any medium:

  • Text-left / paragraph-right hero with no other idea
  • Item rows with arrows pinned far right
  • FAQ accordions with a plus on the right
  • Three equal cards with icons above titles
  • White headline over black gradient scrim on a photo
  • Centered header + centered subhead + centered grid, repeated
  • Ghost outline numerals, neon italic accents, particle confetti
  • Cream or beige anywhere in the palette
  • A second saturated hue competing with luciferin
08Print & booththe brand at 300 dpi

The same dusk, on paper and vinyl.

The booth system — retractable banner, table throw, back wall — and the business cards all run the firefly scene on print dusk. Physical pieces carry a QR that lands on /audit. Production rule: print from the CMYK PDFs below; 300 dpi; bleed variants exist for every card format.

Retractable banner — Tosa Marketing booth artwork
Retractable banner
Table throw, front — Tosa Marketing booth artwork
Table throw, front
Back wall — Tosa Marketing booth artwork
Back wall
Business card, front (MOO 3.75″ × 2.25″) — Tosa Marketing booth artwork
Business card, front (MOO 3.75″ × 2.25″)
Business card, back — Tosa Marketing booth artwork
Business card, back
09Voicehow the brand speaks

Plain, priced, and signed.

Plain English

Write like a person explaining work to a neighbor. Every term a customer might not know gets defined, not deployed.

Prices in public

Numbers appear in copy before anyone has to ask. Vagueness about cost is off-brand.

We only talk about what we do

No punching at peers, no naming competitors, no "unlike other agencies." The work argues for itself.

Honest claims only

No guaranteed rankings, no promised outcomes we don’t control. Measured language survives scrutiny; hype doesn’t.

Signed, not anonymous

The work has a person behind it: Joel Kelly, Wauwatosa. Bylines, real photos, a real phone number.

The tagline is law

“Built to be seen.” — never reworded, never extended, never punned on.

10For AI & toolshow to use this system

Read this before generating anything.

Order of truth when producing Tosa Marketing work, in any medium:

1. This page and /brand.md for the rules.  2. The live tokens in app/globals.css for web values.  3. The CMYK PDFs above for print color.  4. The logo SVGs for the mark — never redraw it. When two sources disagree, the live site wins for web and the print files win for paper.

Non-negotiables: night is the default surface; luciferin is the only hue on night; no cream or beige, ever; the tagline is “Built to be seen.” verbatim; the standing bans in section 07 apply to every layout; claims follow the voice rules — plain, honest, priced, signed.

Call JoelContact