Skip to content

BRAND DESIGN SYSTEM

Decide It Once, Then Never Again.

Quotible shipped a product before it had a system, so every new asset reopened a settled decision. I closed them in writing, with values a developer can read off a page.

trusted by: UFC, Caesars Entertainment, Churchill Downs, Neighborly, Supercuts, City of Las Vegas, SDMI, Switch, Silverton, Panda Express, TAO, Ellie Mental Health, Dollar Loan Center, Dot Vegas Domains, HFC, Lithion Battery

UFC
Caesars Entertainment
Churchill Downs
Neighborly
Supercuts
City of Las Vegas
SDMI
Switch
Silverton
Panda Express
TAO
Ellie Mental Health
Dollar Loan Center
Dot Vegas Domains
HFC
Lithion Battery

Trusted by UFC, Caesars Entertainment, City of Las Vegas, Supercuts

Justin's expertise, responsiveness, and genuine investment in our success have been evident throughout this process. We are truly grateful.
Dr. Linda Silvestri & Dr. Angela Silvestri-Elmore, Co-authors, Saunders Pyramid to Success · 14 years · 300+ Las Vegas businesses · 5-star rated
drop: Brand design system delivered as printed color and type specification pages

at a glance

A brand design system for Quotible, an automotive lead-response software company: a tokenized color scale with a deep navy core, a ten-step Interactive Blue action ramp and an orange gradient treated as a precision instrument, a thirteen-style Graphik type scale with intentional negative kerning, a separated semantic-color layer governed by one written rule, and a voice doctrine, all delivered as build-ready specs.

the problem
Quotible had a strong product and real proof, but its visual brand was inconsistent, with no single source of truth for color, type or voice.
who has it
Growth-stage business software companies whose product shipped before a brand system did, so color, type and tone drift across the site, the app, sales decks and customer-success assets.
the pain
Every new asset reopens a settled decision. Designers guess at hex values, copywriters reach for vendor defaults, and the brand looks like generic software instead of a precise platform.
cost of doing nothing
A diluted brand that a dealership general manager who has seen fifty vendor pitches scrolls past, plus the compounding rework of redefining the same colors and tone on every deliverable.

01 · WHY BRAND GUIDELINES FAIL

Why brand guidelines fail.

Quotible sells lead-response software into car dealerships. Strong product, real proof, and a visual brand with no single source of truth for color, type or tone.

That has a predictable cost. A designer guesses at a hex value, a developer picks something close, a copywriter reaches for the same interchangeable adjectives every software vendor uses. Nothing is wrong enough to fix, and the whole thing drifts.

A one-page style sheet does not solve it either. Naming a logo and four colors does not survive contact with a real build, because the build asks questions the style sheet never answered.

02 · DESIGN TOKENS AND COLOR SCALE

The four color layers.

Color is split into four sub-systems so they cannot collide, each named and scaled rather than described.

Brand coreA deep navy as the primary surface and the base for hero sections, with its own hover state for dark surfaces. The anchor everything else sits against.
Action rampAn Interactive Blue scale running ten steps from lightest tint to darkest shade, with one step named as the single primary action color for every button and link.
Neutral scaleWhite through near-black for surfaces, dividers and body text, so nobody has to invent a grey mid-build.
Semantic setSuccess, warning, error, info and attention, used only for status and feedback, never for anything a person is supposed to click.

03 · SEMANTIC COLOR RULES

The rule separating action and status color.

The action layer and the status layer blur together in most interfaces, which is how a success badge ends up looking like a button.

One sentence governs the boundary. Green means something happened. Blue means do something.

That is the whole rule, and it is why a Quotible screen never asks a user to guess whether a thing is a report or a control. Separating the layers before anybody builds is the difference between a palette and a system.

04 · TYPE SCALE DESIGN SYSTEM

Thirteen type styles with exact values.

Type runs on Graphik across thirteen styles, from a large display headline down to a small overline eyebrow. Every token carries an exact size, weight, line height and letter-spacing value.

The headline spacing values are negative on purpose, and the spec says so out loud: do not loosen the headline kerning in the name of readability, because the tightness is the brand.

Writing the reason next to the number is what stops a well-meaning person from undoing it six months later.

05 · BRAND GRADIENT USAGE SPEC

How the brand gradient may be used.

The most distinctive element in the brand is an orange-to-yellow gradient, and the spec defines it by its banned uses as much as its approved ones.

It is approved for the logomark, for sparing headline treatments, for iconography, and for dark-panel compositions layered over navy, the high-contrast moment a dealership general manager who has sat through fifty vendor pitches actually stops on.

It is banned from buttons, which are Interactive Blue. Banned from status states. Banned from body copy. Banned anywhere it would drown the navy. A system that only lists approved uses leaves the door open, and the gradient walks through it.

06 · BRAND VOICE DOCTRINE

The written brand voice doctrine.

Underneath the visual system sits a written voice doctrine, because a brand that looks consistent and reads generic is still inconsistent.

It leads with numbers. It speaks the language a general manager and an internet sales manager actually use, closing rate, internet prospects, BDC, third-party leads, and it bans the interchangeable adjectives that make software copy sound like every other software company.

It fixes the button words too, Schedule Demo, Learn More, Connect With Us, and rules out the pushy ones. And it adjusts per buyer, so a line for a general manager reads differently from one for a BDC director.

07 · B2B SAAS BRAND SYSTEM

Who this brand system is for.

Any growth-stage business whose product shipped before its brand system did. The symptom is always the same: color, type and tone drift across the site, the app, the sales deck and the customer-success assets, and every new piece reopens a settled decision.

The fix is structural, not aesthetic. Name and scale the color. Separate the action and status layers with a written rule. Fix the type scale with exact values. Define the expressive element by its banned uses. Write the voice down. Ship all of it as specs somebody can build from without asking the author.

The payoff is a brand that looks engineered instead of assembled, and a team that stops re-deciding the same four things on every deliverable.

08 · BRAND DESIGN SYSTEM PRICING

What a brand design system costs.

$1,000 a month for branding and design. Same number I quote everybody, printed here instead of held back for a call. Two services together are $1,799 and three are $2,499. No setup fee.

No setup fee. Three months, then month to month with thirty days' notice. Every token value, every spec document and every source file is yours, which is the point of a system: somebody else has to be able to build from it.

Scope moves the total, not negotiation. One service line is five hundred a month, and adding a second applies the bundle rate to both.

09 · COMMON DESIGN SYSTEM QUESTIONS

Design system questions.

What is a brand design system?
The set of brand decisions a team makes once and never reopens: named and scaled colors, a fixed type scale, rules governing how status and action colors interact, and a written voice doctrine, delivered as specs a designer or developer builds from directly.
Why separate action colors from semantic colors?
So an interface never confuses a status with an action. One governing rule, green means something happened and blue means do something, keeps a success badge from ever looking like a button.
Why is the gradient not used for buttons?
Because it is the brand's precision instrument, not its action color. It is reserved for the logomark, sparing headline treatments, iconography and dark-panel compositions, and banned from buttons, status states and body copy.
What is in a voice doctrine?
Tone, a vocabulary of the buyer's own terms to use and the vendor defaults to avoid, fixed button wording, and per-buyer adjustments so copy aimed at a general manager reads differently from copy aimed at a department head.
Does this work outside automotive?
Yes. The pattern fits any company whose product shipped before its brand system did. The vocabulary changes, the structure does not.
Who does the work?
I do. AI is the engine underneath it, which is how one person delivers a full token system, a type scale and a written doctrine, and every decision in it is mine.

10 · GET FREE AUDIT

Ask for the free audit.

I crawl your whole site, score it 0 to 100, and send a ranked list of what is costing you customers, including where your brand stops holding together. About a day. No call needed.

If the fix is not something I do, I will say so.

who did the work

Justin Harris

This is a named client whose system is live.

More than three hundred Valley businesses, 5-star rated on Google.

I do not sell the work and then pass it along.

See what this would find on your website.

Free, in minutes. Same-day reply from Justin, personally.