# Tosa Marketing — Brand System (canonical, machine-readable)

> This file is the plain-text twin of https://tosamarketing.com/brand. It exists so any
> tool or AI can produce correctly branded Tosa Marketing work in any medium. When two
> sources disagree: the live site (app/globals.css tokens) wins for web; the CMYK PDFs
> under /brand/print/ win for paper.

## Identity

- Business: Tosa Marketing — web design and local visibility studio, Wauwatosa, Wisconsin.
- The idea: Wauwatosa comes from the Potawatomi word for firefly. The brand is one image —
  a small, precise light that makes itself seen at dusk.
- The scene behind every design decision: a southeast Wisconsin owner checking their site
  after closing time, shop lights off. The default surface is night. The glow is the
  business being findable in it. Day sections exist for contrast: pricing, lists, proof.
- Tagline: "Built to be seen." — verbatim, always. Never reworded, extended, or punned on.

## Color — web (CSS variables in app/globals.css are canonical)

Night tokens (the default surface):

| Token | Hex | Use |
|---|---|---|
| --dusk | #0E0E10 | Page night surface |
| --dusk-2 | #181719 | Raised night surfaces: cards, panels |
| --glow | #D8F25A | Luciferin. THE brand hue; the only saturated color on night |
| --glow-soft | #B8D94B | Hover states, secondary glow |
| --moss | #5B5B5E | Muted structural gray: rules, borders |
| --mist | #9C9C9B | Secondary text on night |
| --warm-white | #F7F6EF | Primary text on night. Never pure #FFFFFF |

Day tokens (contrast bands for pricing, lists, proof):

| Token | Hex | Use |
|---|---|---|
| --day-paper | #F6F9F1 | Day surface |
| --day-card | #FDFEFB | Raised day surfaces |
| --day-ink | #14241C | Primary text on day (deep pine, not black) |
| --day-line | #DFE6D6 | Hairlines, borders |
| --day-muted | #58675A | Secondary text on day |
| --day-green | #3D4B85 | Day accent: night-sky indigo. Lime stays a night color |

Color laws:
- Never introduce cream or beige.
- Luciferin (#D8F25A) is the only saturated hue on night surfaces. No second accent hue.
- On day surfaces the accent is the indigo (--day-green); lime is not a day accent.
- Text on night is warm white / mist, never pure white.

## Color — print

Print artwork runs the firefly scene deeper and bluer than the screen. Sampled canon
(from the booth/card artwork): print dusk #0A1D36 (night-sky navy), print luciferin
#C2E83F, lantern highlight #EAFF7A (small doses), warm white #F7F6EF, mist blue #9FB3CC.
For production color, print from the CMYK PDFs in /brand/print/ — do not re-convert hex.

## Typography

- Serif: Tiempos Headline (Klim) — display, section heads, quotes, editorial emphasis.
- Sans: Calibre (Klim) — navigation, body, labels, CTAs, all operational copy.
- Fallbacks: Calibre → Inter → system sans. Tiempos Headline → Source Serif 4 → Georgia.
- Files: public/fonts/klim/*.woff2 (licensed; web license scoped to tosamarketing.com).
- Scale tokens: --t-display clamp(44–76px) · --t-h2 clamp(30–52px) · --t-h3 clamp(20–28px)
  · --t-lead clamp(17–20px) · --t-body clamp(16–18px).
- Display type is large and confident, tight but readable line-height. Emphasis inside
  display type is italic serif, often ending in the lime period (span.glow-period).
- Labels: Calibre semibold, tracked uppercase (≈0.14–0.18em), used sparingly.

## Logo & marks

- Source of truth: /tosa-marketing-logo.svg (dark contexts), /tosa-marketing-logo-light.svg,
  /tosa-marketing-logo.png. React devices: components/Brand.jsx (FireflyMark, FlightPath),
  components/Wordmark.jsx.
- The firefly mark is the fly from the logo file, exactly. Never code-drawn, never
  AI-redrawn. The lantern stays lime and stays lit.
- Ringed variant: the ring sits offset low-left so the right wing breaks the circle.
  Never recentre or redraw it concentric.
- Wordmark: the glowing dot is the tittle of the "i" (dotless ı + positioned glow dot).
  It is part of the logotype, not decoration.
- Clear space: at least the lantern's height around the mark. Minimum sizes: fly 20px,
  wordmark 90px wide. On photography, the mark sits on dusk or a scrim.

## UI components (production classes in app/globals.css)

- Buttons: .btn-lime (primary on day) · .btn.btn-ink (day secondary) · .btn.btn-glow
  (primary on night) · .btn.btn-ghost (tertiary, both surfaces).
- Kicker: span.hero-kicker.solo — bold lead + muted continuation.
- Section head (every section gets exactly one): .sec-head = serif .sec-index numeral +
  tracked uppercase .sec-label + .sec-rule hairline with firefly node + italic .sec-meta.
- Lists: ul.incl-list — firefly bullet + hairline per row. Standard list treatment.
- Chips: pill-radius (100px) hairline-border spans for city/tag clusters.
- Radius token: --radius 12px. Spacing rhythm: --s-2 / --s-3 / --s-4 (clamp-based).
- Layout: pages alternate night (.spotlight) and day (.day) bands, asymmetric editorial
  grids (.ed-grid, .lede-grid), max-width .wrap.

## Motion

- Motion reads as a glow, a reveal, or a camera move. Nothing bounces.
- One entrance animation per section, maximum.
- Everything gates on prefers-reduced-motion and pointer type.
- Video loops are seamless: no flash frames, no hard cuts. Phones get stills where motion
  costs more than it gives.
- No preloaders, no scrolljacking, no heavy WebGL on client-facing subpages.

## Layout law & standing bans

Every page section must cite a module from the reference library (tosa-module-library.html).
Sections are never invented from taste. Banned patterns, in any medium:

1. Text-left / paragraph-right hero with no other idea
2. Item rows with arrows pinned far right
3. FAQ accordions with a plus on the right
4. Three equal cards with icons above titles
5. White headline over black gradient scrim on a photo
6. Centered header + centered subhead + centered grid, repeated
7. Ghost outline numerals, neon italic accents, particle confetti
8. Cream or beige anywhere
9. A second saturated hue competing with luciferin

## Voice

- Plain English; define terms, don't deploy jargon.
- Prices appear in copy before anyone asks. Vagueness about cost is off-brand.
- We only talk about what we do: no competitor naming, no "unlike other agencies."
- Honest claims only: no guaranteed rankings or promised outcomes we don't control.
- Signed, not anonymous: Joel Kelly, Wauwatosa; real phone, real bylines.
- Tagline law: "Built to be seen." — exact, always.

## Print & booth assets

Physical pieces carry a QR that lands on https://tosamarketing.com/audit.

- /brand/print/tosa-firefly-front-print-CMYK.pdf — business card front (print-ready CMYK)
- /brand/print/tosa-firefly-back-print-CMYK.pdf — business card back (print-ready CMYK)
- /brand/print/booth-retractable-banner.svg — booth banner source
- /brand/print/booth-table-throw-front.svg — table throw source
- /brand/print/booth-back-wall.svg — back wall source
- Cards are MOO size 3.75" × 2.25" (1125×675 @ 300dpi); bleed variants exist in the
  studio archive. All print at 300 dpi minimum.

## Order of truth

1. https://tosamarketing.com/brand and this file — the rules.
2. app/globals.css tokens — web values (live).
3. /brand/print/ CMYK PDFs — print color.
4. /tosa-marketing-logo.svg — the mark. Never redraw it.

When generating anything for Tosa Marketing: start from night, light it with luciferin,
set it in Tiempos + Calibre, keep the copy plain, priced, and signed, and check the
result against the standing bans before shipping.