Brand System · v1.0 · Updated June 2026

The system behind the WORK.

One place for how The Sax Agency thinks, sounds and looks, and a working toolkit for the people who build it. Every color, token and type style below is click-to-copy.

Jump to color tokens Usage rules

01 · Strategic Foundation

Why Sax exists, and the lane it owns.

The core idea

“We move communities of color at scale, and we PROVE it.”

Stop leading with what every agency says. Lead with the one thing only Sax can prove: major institutions trust it to reach communities of color at scale, and it ties the work to a real number.

Mission

Help public institutions, foundations and culture brands reach communities of color, with strategy and creative tied to measurable outcomes.

Purpose

To prove three things at once: that strategy can be disciplined, that creativity can be culturally fluent, and that impact can be measured.

Vision Working draft

A market where reaching communities of color authentically is understood as where relevance and growth live, and where that work is measured, not assumed.

Brand promise

Movements, not impressions. Every engagement maps to a real result you can stand behind.

Positioning statement

For public institutions, foundations and culture brands who must reach communities of color and show results, The Sax Agency is a certified multicultural marketing agency that fuses consultancy-grade strategy with culturally fluent creative. Unlike shops competing on corporate brand budgets alone, Sax is trusted as the prime agency of record on large-scale public campaigns, and proves the outcome.

Core values

01

Authentic

We earn cultural relevance through research and listening, never appropriation or assumption.

02

Confident

Consultancy-grade discipline. We make a recommendation and stand behind the outcome.

03

Inclusive

Polycultural by design. We build work that reaches communities of color at scale.

04

Disruptive

Bold creative that breaks the category template, work that lands, not work that blends in.

05

Accountable

Every project is tied to a real number. Movements, not impressions.

Audience

Primary

Decision-makers at public institutions and government agencies, foundations, and culture brands (sport, entertainment, music, higher ed) who are obligated or motivated to reach communities of color, and accountable for measurable results.

Secondary

Procurement and DEI / community-engagement leads, and the coalition of partner agencies Sax directs as prime agency of record.

What sets Sax apart

  • Prime, not sub. Trusted to lead large public campaigns, not just bid on creative slices.
  • Certified small, minority & women-owned (WBENC, SCMSDC, DBE, ACDBE, SBA WOSB, ANA). Opens government and corporate contracts others can't access.
  • Results, not impressions. Every project tied to a documented number.
  • Neo-corporate. Consultancy strategy + bold, culturally fluent creative.

02 · Messaging

Four pillars. One promise.

Tagline

Culture Forward. Purpose Driven.

Headline promise

We move communities of color at scale, and we prove it.

Elevator pitch

The Sax Agency is a certified multicultural marketing agency in Los Angeles, trusted by public institutions and culture brands to reach communities of color at scale. We pair consultancy-grade strategy with culturally fluent creative, and tie every engagement to a measurable result.

01

Proven at scale

MeansSax is trusted as the prime agency of record on large public campaigns, not a subcontractor.

ProofPrime AOR on California's ~$16M, 58-county, multilingual voter-education campaign, directing a coalition of agencies.

“When the whole state has to be reached, in 10+ languages, institutions choose Sax to lead it.”

02

Outcomes, not optics

MeansWe measure success in movement, not media impressions. Every engagement maps to a real result.

ProofWork tied to documented outcomes across sport, civic, and culture sectors.

“Movements, not impressions.”

03

Neo-corporate

MeansConsultancy-grade strategy and research, fused with bold, culturally fluent creative.

ProofStrategy can be disciplined and creativity can be culturally fluent, at the same time.

“The rigor of a consultancy. The instinct of a culture shop.”

04

Polycultural by design

MeansWe research and listen before we create, cultural fluency is built into the process, not added on.

ProofInsight and community listening lead every engagement.

“We don't guess at culture. We study it, then move it.”

Brand keywords

AuthenticConfidentInclusiveDisruptiveStorytellingCulturally fluentMeasurableNeo-corporate

Words & claims to avoid

  • "DEI" as the headline (keep as proof, not promise)
  • "Purpose-driven" as a standalone claim (everyone says it, show it)
  • Unprovable stats (e.g. the old “<2% of agencies” line)
  • "Impressions" as a success metric
  • Generic agency-speak: “synergy,” “best-in-class,” “move the needle”

03 · Verbal Identity

How the brand sounds.

Confident but never arrogant. Culturally fluent but never performative. Disciplined like a consultancy, bold like a creative shop, the brand should sound like itself everywhere.

Voice traits

AuthenticConfidentInclusiveDisruptiveStorytelling

Tone by context

Website / marketing
Confident, benefit-led, client-focused. Lead with the buyer's world; prove with the record.
Insights / educational
Research-first, sourced, plain-spoken. Cite primary sources; answer the question directly.
Proposals / RFP
Precise, credentialed, outcome-framed. Certifications and numbers up front.
Social / culture
Bold, culture-forward, in the moment, but never performative.

Copy & emphasis rules

  • Emphasis = ALL CAPS in the word's own color. Orange is hero-only (the animated caps word).
  • Outside the hero: never orange, underlined, or reversed for emphasis.
  • Client-focused “you”, open with the buyer's world, reserve “we/our” for proof.
  • Multi-sentence headlines: each sentence on its own line; no orphans or widows.
  • Hyphenated words never wrap (intra-word hyphens become non-breaking).

05 · Color

Click any value to copy.

HEX, RGB and the CSS variable / Tailwind token for every brand color. Tap a chip and it's on your clipboard.

Primary

Zest

Primary

The signature Sax orange. Hero emphasis caps (animated), primary CTAs, links, active nav, eyebrows on dark.

Zest Deep

Primary

The base orange. Button default fill, eyebrows on light surfaces, hairline accents. Higher contrast than Zest for text.

Neutrals

Ink

Neutral

Near-black. Primary text on light surfaces, deepest value, button text on accent.

Sax Dark

Neutral

Muted black. Dark section backgrounds, sticky-nav tint, hero backdrop. Never pure #000.

Sax Muted

Neutral

Warm grey. Secondary / supporting text, captions, metadata.

Sax Light

Neutral

Off-white. Light section backgrounds, surfaces, dividers between dark bands.

White

Neutral

Text on dark, button text on Zest, clean surfaces.

Functional / status Suggested, pending approval

Success

Confirmations, valid form state

Warning

Caution, non-blocking notices

Error

Errors, destructive actions

Info

Neutral informational notices

06 · Typography

Two families. One scale.

Bodoni 72

Serif. Headings & large display numbers only, weight 400. Never small labels or UI.

Inter

Sans. Body (300), and all labels / buttons / UI (600). All small text uses Inter.

Type scale

Move communities
Role
Display / H1
Font
Bodoni 72
Size
clamp(2.5rem → 4.5rem)
Line
1.1
Weight
400
Use
Page hero headline
What we believe
Role
Heading 2
Font
Bodoni 72
Size
clamp(2.25rem → 3.25rem)
Line
1.2
Weight
400
Use
Major section headings
Proven at scale
Role
Heading 3
Font
Bodoni 72
Size
clamp(2rem → 2.75rem)
Line
1.2
Weight
400
Use
Sub-section & article headings
Cultural fluency
Role
Heading 4
Font
Bodoni 72
Size
clamp(1.5rem → 2.25rem)
Line
1.15
Weight
400
Use
Card titles, feature headings
Certified WBE / MBE
Role
Heading 6 / label
Font
Inter
Size
1.3rem
Line
1.2
Weight
600
Use
Small card titles (sans)
A certified multicultural agency built for measurable results.
Role
Lede
Font
Inter
Size
clamp(1.125rem → 1.375rem)
Line
1.6
Weight
300
Use
Intro / lede paragraphs
Every project tied to a real number, not an impression count.
Role
Body
Font
Inter
Size
1.125rem
Line
1.7
Weight
300
Use
Body copy
The Sax Agency
Role
Eyebrow
Font
Inter
Size
0.8125rem
Line
1
Weight
600
Use
Kicker label above a heading

07 · Layout & Spacing

Structure tokens.

Established structure

Container max-width .sax-container, 1280px content cap
Page gutter Left/right inline padding
Section padding (desktop) .sax-section block padding
Section padding (≤991px) Tablet
Section padding (≤767px) Mobile
Card radius Image cards, surfaces (1rem)
Button radius .sax-btn (0.5rem)

Spacing scale Recommended

A consistent step scale for gaps and padding. Tailwind's native scale is available on Relume pages.

XS
S
M
L
XL
2XL
3XL

Composition principles

Clean and breathable: strong hierarchy, generous white space, clear section breaks. Vary the background rhythm (dark → white → light → dark → orange). No two pages share a section template, each page gets its own layout language. Images may bleed off the page edge when it serves the composition.

08 · Components

Live UI primitives.

Primary button

Primary, .sax-btn

Zest fill, white text, 8px radius. Brightens on hover. Main call-to-action.

Outline button

Outline, .sax-btn-outline

Hairline border, transparent fill. Secondary action on dark surfaces.

On accent Outline

On orange, .on-accent

On a Zest background, buttons invert (white fill / ink text) so they never read orange-on-orange.

01

Numbered badge

Hairline circular badge for any numbered-list index, 1px ink/10 stroke, serif numeral, muted. Vertical timelines add a connector line of the same stroke.

Eyebrow label

Eyebrow, .sax-eyebrow

Uppercase Inter 600, Zest, 0.16em tracking. Kicker above a heading. Auto-brightens inside .on-dark.

Not yet established

Form fields, cards, navigation, modals, tabs and alert states are partially defined across the live pages but not yet consolidated here as a formal component library with documented states (default / hover / focus / disabled). To be added.

09 · Imagery & Motion

How the brand moves.

Photography direction

Real people and real communities of color, shown with dignity and energy, documentary over staged corporate stock. Natural light, authentic environments (civic, sport, culture). Diverse, credible, in-the-moment.

Signature treatments

  • Paint effect, a hand-painted brush reveal on hero/section photos. Home page only, above the “neo-corporate” boundary.
  • Framed-image scroll parallax, every framed photo drifts vertically within its frame on scroll (global).
  • Full-bleed parallax bands, the home for branded photography (below); oversized, drifting opposite to scroll between sections.

Branded Photography

The signature image style, reserved for the full-bleed parallax bands. A single, emotion-forward close-up portrait of one subject, set against one saturated, textured color field (never a busy scene). Tight crop, high contrast, real expression, joy, intensity, presence. Editorial and poster-like; unmistakably Sax. Project work, magazine spreads, and event shots belong in galleries, not here.

Asset workflow: one branded portrait per case, tag the band image …-full-width in the client's source folder → convert to public/source/<client>/<client>-full-width.webp → set brandedPhoto on that case and drop it from the gallery. The band always renders; until a case's portrait is set it shows an interim stand-in.

Examples from the site

Branded photography example, a confident professional against a torn-paper brand collage (Brands & Corporate).
Branded photography example, a football player close-up (Sports, Entertainment & Culture).
Branded photography example, cultural-strategy hero.
Branded photography example, community, Sports / Entertainment / Culture.
Branded photography example, LA Opera full-width band.
Branded photography example, brand strategy & research.
Branded photography example, founders / About collage.
Branded photography example, sports strategy.
Branded photography example, campaigns & activation.
Branded photography example, football player close-up (alternate).

Where the palette comes from

The branded imagery isn't styled for fashion, its warm, earth-toned collage palette is drawn from traditional African textiles, rooting the visual identity in the communities of color Sax exists to move. Two traditions in particular:

  • Malian mudcloth (bògólanfini), the earthy foundation: ochre, rust, cream, and a deep near-black, hand-dyed with fermented mud, its geometric marks built to carry stories. This is the root of the layered, torn-paper texture and the muted black ground (#231e1c).
  • Ghanaian Kente, the bold accents and their meaning: gold for worth and royalty, red for passion and lifeblood, green for growth and renewal, black for maturity and ancestral energy. Sax's signature orange, Zest #e38033 and Zest Deep #b56628, lives in that gold/ochre family, with red and green as the supporting accents.

The result reads warm, woven, and hand-made rather than corporate-cool, the color does cultural work, not just decorative work. Keep new branded imagery inside this earth-toned, textile-rooted range; don't drift to cool, desaturated, or neon palettes.

Woven Ghanaian Kente cloth, gold, red, green, blue, and black geometric strips. Folded Ghanaian Kente cloth, bands of gold, maroon, and green with black geometric motifs. A traditional African textile, woven ochre, rust, gold, red, and green on a dark ground.
Reference textiles, Ghanaian Kente and broader African weaves: the woven, earth-toned palette the brand's colors are drawn from.

Motion principles

Fast, smooth, purposeful, motion reinforces hierarchy, never decorates. Standard hover / state transitions: 0.2s ease. Hero headlines: letters fade in sequentially; the orange emphasis word rises up from below, slower than the letters.

Not yet established

Iconography and illustration styles are not yet defined. To be added.

10 · Accessibility

Non-negotiables.

  • Body and UI text meets WCAG AA contrast. Body copy uses Ink / Sax Muted on light, white on dark, never grey-on-grey.
  • Zest is an accent, not a body-text color on white. Reserve orange text for large headings and eyebrows; verify any small orange text against AA, and prefer Zest Deep #b56628 over Zest #e38033 when orange must carry text.
  • Every interactive element is keyboard-accessible with a visible focus state.
  • Every meaningful image has descriptive alt text; decorative images use empty alt.
  • Motion is purposeful and brief; honor prefers-reduced-motion where animation is significant.

11 · Governance

Do & don't.

The rules that keep the brand from drifting. When in doubt, match the home page, it's the guiding design.

Do

  • Emphasize a key word with ALL CAPS in the headline's own color.
  • Use Zest orange for emphasis ONLY in the hero (the animated caps word).
  • Lead copy with client-focused “you”; reserve “we/our” for proof.
  • Give every page its own layout language, vary the composition.
  • Use the hairline circular badge for any numbered list index.
  • Invert buttons on an orange background (white fill / ink text).
  • Use Inter for all small text, labels and UI.

Don't

  • Don't make emphasis orange, underlined, or reversed outside the hero.
  • Don't use pure black, the brand black is muted #231e1c.
  • Don't add hover/glow effects to cards.
  • Don't reuse another page's section template verbatim.
  • Don't use Bodoni (serif) for small labels or UI text.
  • Don't state the LA Opera “+30%” figure as fact (pending verification).
  • Don't link the whole paintable card, only the CTA is a link.

A living document, last updated June 2026.