What is a brand design system?

It is the set of brand decisions a team makes once and never reopens: named and scaled colors, a fixed type scale, rules that govern how status and action colors interact, and a written voice doctrine. It is delivered as build-ready specs so a designer or developer can construct from it directly, not a mood board or a one-page style sheet.

Why separate action colors from semantic colors?

So an interface never confuses a status with an action. The Quotible system uses one governing rule, green means something happened, blue means do something, which keeps a success badge from ever looking like a button. Separating the layers up front is the difference between a palette and a system.

Why is the orange gradient not used for buttons?

Because it is the brand's precision instrument, not its action color. The system reserves the orange-to-yellow gradient for the logomark, sparing headline treatments, iconography, and dark-panel compositions over navy, and explicitly bans it from CTAs, status states, and body copy. Buttons use Interactive Blue. Defining the banned uses is what keeps the gradient intentional.

What is in the voice doctrine?

Tone, a vocabulary of dealership terms to use and tech-vendor defaults to avoid, fixed CTA wording, and per-buyer adjustments so copy aimed at a general manager reads differently from copy aimed at a BDC director. It lets a writer stay on-brand without the brand owner reviewing every line.

Does this work for a SaaS brand outside automotive?

Yes. The pattern fits any growth-stage B2B SaaS company whose product shipped before its brand system did. Name and scale the color, separate the action and status layers, fix the type scale, define the expressive element by its banned uses, write the voice down, and ship it as spec PDFs the team builds from.

A Color and Scale Design System for Quotible

TL;DR. JustinHarris.AI, the Las Vegas AI Consultant, built Quotible a brand design system: a tokenized color and type scale, separated semantic-color rules, an orange-gradient usage spec, and a written voice doctrine. Each layer ships as a build-ready spec PDF, so a team can construct the product, site, and decks from one source of truth.

What a brand design system actually is

A brand design system is not a mood board and not a single style PDF that names a logo. It is the set of decisions a team makes once and never reopens: every color named and scaled, every type size fixed with exact weight and spacing, every status and action color governed by a rule, and the voice written down so copy stays on-brand without the brand owner in the room. For Quotible, an automotive lead-response platform, the goal was a system buildable by anyone. A designer should be able to pull a token name instead of guessing a hex value. A developer should be able to read a spec PDF and ship the component. A copywriter should be able to open the voice doctrine and write a headline that sounds like Quotible, not like a generic SaaS landing page. The system is the source of truth, and every asset traces back to it.

Color, named and scaled into four separated sub-systems.
Type, a 13-style Graphik scale with exact size, weight, line height, and spacing per token.
Voice, a written doctrine with vocabulary, CTA rules, and per-persona adjustments.
Delivery, each layer as a build-ready spec PDF, not tribal knowledge.

How the color system is built

Color is split into four sub-systems so they never collide. The brand core is deep navy (#0F1D3A), the primary surface and the base for hero sections, with a navy hover state for dark surfaces. The Action Blue ramp runs ten steps from action-50 (#EEF4FF) to action-900 (#081F6E), and action-600 (#155DFC) is the single primary-action color for every button and link in the product and on the site. A neutral scale carries white through near-black for surfaces, dividers, and body text. The semantic set, success, warning, error, info, and attention, is used only for status and feedback. One hard rule keeps the action and semantic systems from blurring together: green means something happened, blue means do something. That single sentence is why a Quotible interface never confuses a success badge with a button. Separating the layers up front is the difference between a palette and a system.

Why the orange gradient is a precision instrument

The most distinctive element of the brand is an orange-to-yellow gradient (#FF6700 to #F7D21C), and the system defines it by both what it can do and what it can never do. The Quotible identity is built on heavy contrast: deep navy, white, and the gradient used as punctuation. So the gradient is approved for the logomark, for sparing headline type treatments, for iconography, and for dark-panel compositions where it is layered over navy to create energy, the kind of high-contrast brand moment a dealership GM who has seen 50 vendor pitches actually stops on. It is banned, explicitly, from CTA buttons (those are Interactive Blue), from status states, from body copy, and from any use where it would drown the navy. Defining the banned uses is what keeps the gradient a precision instrument instead of creeping into everything and turning into noise. A system that only lists approved uses leaves the door open; this one closes it.

The type scale and the voice doctrine

Type runs on Graphik (Monotype) across 13 styles, from a 56px display headline down to an 11px overline eyebrow. Every token carries an exact size, weight, line height, and letter-spacing value, and the headline spacing values are negative on purpose. The spec is explicit: do not loosen the headline kerning in the name of readability, because the tightness is the brand. Underneath the visuals sits a written voice doctrine, the part most brand books skip. It leads with numbers, speaks the dealership language a GM and an internet sales manager actually use (closing rate, internet prospects, BDC, third-party leads), and bans the tech-vendor defaults that make B2B copy sound interchangeable (cutting-edge, seamless, game-changer). It even fixes the CTA vocabulary: Schedule Demo, Learn More, Connect With Us, and never Sign Up Free or Act Fast. The doctrine adjusts per buyer, too, so a line written for a general manager reads differently from one written for a BDC director. The result is a voice a writer can apply on their own and still land on-brand.

Why this matters for any B2B SaaS brand

This pattern is not specific to automotive. Any growth-stage B2B SaaS company whose product shipped before its brand system did has the same problem: 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. Name and scale the color, separate the action and status layers with a governing rule, fix the type scale with exact values, define the expressive element by its banned uses as much as its approved ones, and write the voice down as a doctrine a team can apply. Then deliver it all as spec PDFs a designer or developer can build from directly. The payoff is a brand that looks engineered rather than assembled, and a team that stops re-deciding the same things on every deliverable.

The outcome

Quotible came away with a single source of truth: a tokenized color system, a precise type scale, an orange-gradient usage spec, and a voice doctrine, each delivered as a build-ready document. A team can now construct the product UI, the marketing site, and the sales materials from the same system, without guessing at values or reaching for generic copy. The brand reads the way the product performs: precise, confident, and built to be reproduced.

Related work

Want a brand design system your team can build from instead of guessing at? Get your free AI Audit and we will show you where the brand is leaking and what a single source of truth fixes. Get your free AI Audit.