Brand
Changelogv1.4
Home/Brand Profiles · Tenant 62

Agency 22 Insurance

A Wayne, Pennsylvania insurance agency offering reliable, affordable car and homeowner coverage with personal service.

STABLE
Updated Jan 26 2026
BrandOS v1.4

Agency 22 Insurance

3 ramps · 57 tokenised swatches · 7 semantic slots, wired into the shared BrandOS primitives.

agency22insurance.com
BRANDagency22
TOKEN@brandos/tokens/css/agency22
HEADINGPoppins
BODYPoppins

01 · Agency 22 Navy

19 shades of Agency 22 Navy

Primary identity, navigation, and authoritative brand surfaces drawn from the deep agency navy.

02 · Agency 22 Red

19 shades of Agency 22 Red

Accent affordances, CTAs, and error/exception vocabulary from the brand red.

03 · Agency 22 Gray

19 shades of Agency 22 Gray

Neutral surfaces, dividers, and supporting body text.

04 · Semantic slots

Meaning over hue

Components consume semantic slots, never raw ramps. The hue can evolve; the meaning shouldn't.

Brand PrimaryAnchor identity & CTAs
Token
--semantic-brand-primary
Class
bg-primary
Brand AccentHighlights & accents
Token
--semantic-brand-accent
Class
bg-accent
Surface 1Card surfaces & chrome
Token
--semantic-surface-1
Class
bg-base-100
ContentBody & headings text
Token
--semantic-content-primary
Class
text-base-content
SuccessPositive & confirm states
Token
--semantic-status-success
Class
text-success
WarningCaution & warning states
Token
--semantic-status-warning
Class
text-warning
ErrorDestructive & error states
Token
--semantic-status-error
Class
text-error

05 · Typography

Poppins on display · Poppins for everything else

Heading and body families are profile tokens, not app-level font aliases.

Heading--brandOS-font-heading
Aa
PoppinsThe quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & ! ? · —
  • H1 · DisplayThe system in practice48 / 56 · 800
  • H2 · Section78 brands, one system32 / 40 · 700
  • H3 · CardProfile contract20 / 28 · 600
Body--brandOS-font-body
Aa
PoppinsThe quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & ! ? · —
  • LedeA clear, generous opening that orients the reader fast.20 / 30 · 500
  • BodyStandard paragraph text. The quick brown fox jumps over the lazy dog.16 / 24 · 400
  • CaptionSmall print, footnotes, and metadata.13 / 20 · 500

06 · Primitive check

Same components, both modes

One mockup, one set of components, data-theme flips every token in unison.

Agency 22 ConsoleProduction · v2.4.0
Live
Tokens247+12
Sync99.8%stable
Latency42ms−8
Brand audit coverage72 / 100
Last run · 3 min ago
Agency 22 ConsoleProduction · v2.4.0
Live
Tokens247+12
Sync99.8%stable
Latency42ms−8
Brand audit coverage72 / 100
Last run · 3 min ago

07 · Imagery rules

How Agency 22 looks at the world

  1. 01

    Show real families, homes, and vehicles that signal protected assets and personalized local service over abstract insurance visuals.

  2. 02

    Pair the deep navy identity with clean white surfaces and Poppins headings to convey reliability, clarity, and approachability.

  3. 03

    Reserve the brand red for calls-to-action, alerts, and accent moments, never as an ambient background fill.

08 · Example uses

Where Agency 22 shows up

Surfaces where this brand carries weight in production.

01Auto and home policy quote flow
02Client coverage dashboard
03Agency 22 tenant admin console

09 · CDN target

Drop in anywhere

Three lines and an attribute, the whole Agency 22 Insurance brand renders from CDN.

index.html
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/latest/themes/global-tokens.css" />
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/latest/themes/agency22-brand.css" />
<script type="module" src="https://brand.snyder.tech/cdn/latest/index.js"></script>
<html data-brand="agency22" data-theme="light">