How to Deliver a Brand Guide to a Client (Without a Designer)
2026-10-13 · zhoujingkang · Founder
If you are a consultant, agency or freelancer delivering brand basics to a client, the deliverable that gets you paid again is not a mood board — it is a brand guide the client's developer can actually build from. The recurring request looks like this: "a finished brand guide file that I can actually hand over to a client", covering the palette, the usage rules and something reusable for the website that comes next. Most people stop at a PDF of hex codes, and the client's developer quietly reinvents everything anyway. This article is the checklist for a brand guide that survives hand-off — and how to produce it in an afternoon starting from nothing more than the client's brand color.
What a client-ready brand guide actually contains
Strip away the 60-page PDFs and a usable brand guide has five parts: the color system with defined roles (not just swatches — which color is text, which is the button, which is the error state); the usage rules (proportions, what never to do); the verified numbers (every text/background pair measured against WCAG, so "is this accessible?" has an answer on file); the files the developer consumes (CSS variables, Tailwind config, token JSON); and a one-page visual summary the client can show their stakeholders.
The difference between this and a color list is the same as the difference between ingredients and a recipe. A client who receives five hex codes will still email you twice a week asking which one is the button. A client who receives a role-based colorway with a report attached can build for a year without asking.
The deliverable checklist (copy this)
Six items, in the order the client will use them:
- Color system with roles — light and dark colorways: background, surface, text tiers, primary, status colors. 23 roles is the practical full set.
- Contrast verification report — every text/background pair measured against WCAG 2.1 (and APCA for dark mode), failing pairs already fixed. This is the page that protects you when the client's auditor asks.
- Developer files — CSS variables and a Tailwind config, so the client's dev pastes instead of transcribing hex codes from a PDF.
- A DESIGN.md file — the color contract that goes in the client's repo, so any AI coding agent they use follows the system instead of inventing colors.
- Preview page — a single self-contained HTML file showing the colorway applied to real UI. Clients approve what they can see.
- Brand asset image — one color-card summary of the system for decks and documentation.
How to build it in an afternoon from one hex
Items 3-6 are where most brand guides fall short — the guide describes the system but nothing in it is buildable. A client-ready guide ships both the documentation and the files.
Start from whatever the client has: an established brand color from their logo, or — if they have nothing yet — a direction chosen from a brand color library. Paste the hex into the Brand Theme Engine and the heavy lifting is done for you: a full light and dark colorway with 23 semantic roles derived in a perceptual color space, every text/background pair measured against WCAG 2.1 and APCA, and failing pairs corrected with one click while keeping the client's hue. What took a designer a week of ramp-tuning now takes minutes, with numbers attached.
Then export the package: CSS variables and Tailwind config for the developer, DESIGN.md for the repo, the preview page for stakeholder sign-off, the brand asset image for the deck, and the colorblind + contrast report as your accessibility receipt. One working session, a complete guide — and a follow-up invoice for the website that the client will now trust you to build.
Pricing and positioning the deliverable
Anchor the price on the verification, not the colors. Any tool can suggest five hex codes; very few deliverables can state, pair by pair, that the system passes WCAG AA in both themes and remains distinguishable for color-blind users — with a report to prove it. That report is what lets an agency answer "is this accessible?" in one sentence instead of a consulting engagement.
It also positions the retainer. Because the guide ships as files (tokens, DESIGN.md, CSS), every future page the client builds starts from the system — and every rebrand, seasonal colorway or dark-mode addition is a natural return engagement built on the same engine.
Continue with a tool
References
FAQ
What should a brand guide for a client include?
At minimum: a role-based color system in light and dark variants, a WCAG contrast verification report, developer-ready files (CSS variables / Tailwind config / token JSON), a visual preview page, and usage rules. Swatches alone are not a guide.
How do I create brand guidelines without a designer?
Start from the client's brand color and use a derivation tool: paste one hex and a complete, contrast-checked colorway is generated automatically — roles, dark mode, and a report included. The Brand Theme Engine does this free.
What format should the developer receive?
Whatever their stack consumes without transcription: CSS custom properties, a Tailwind config, and increasingly a DESIGN.md token file so AI coding agents follow the system automatically.
How much should I charge for a brand guide delivery?
Anchor on verification and completeness, not color count: a guide with measured accessibility, developer files and a preview page replaces days of back-and-forth — price it against the rework it prevents, not the hours it took.
Try it on your own brand color
Paste one hex into the Brand Theme Engine and get a full light & dark web theme — semantic tokens, contrast-checked, export-ready.
Open the Brand Theme Engine →