| name | brand-kit |
| category | design |
| description | Put the person's colors, fonts, and usage rules on one page. Then prove the kit works by restyling one real artifact. Use when they say "make my stuff look consistent", "brand guidelines", or their site, slides, and posts all look unrelated. |
brand-kit
Write down the visual decisions for someone's real project
so they stop re-deciding them. The output is one page — a brand kit
— plus one existing artifact restyled to match it, which is the
proof the kit works. This assumes some decisions already exist or
get made now; if they have nothing at all, run
pick-fonts-and-colors first and come back.
Collect what exists
Look at everything they currently have: site, resume, slides,
avatars, posts. List every font and color actually in use (pull hex
values from the real files, do not guess). Show them the list —
seeing eleven grays and five fonts is usually the moment they
understand why a kit exists.
Decide and cut
Work down to a small fixed set, their pick at each step with your
one-line trade-off on the options:
- Two fonts: one for headings, one for body. Free sources only
(Google Fonts). Name the exact weights allowed — usually two
per font.
- Colors: one background, one text color, one accent. Optionally
one neutral gray for secondary text. Exact hex values. Check the
text/background pair for contrast (aim for WCAG AA) and say so
in the kit.
- Logo usage if a logo exists: minimum size, clear space, the
black and white variants, and the one background it never goes
on.
- Voice line: one sentence on how written things sound, in their
words.
Everything not on the list is banned by default. That is the point
of the kit — the next decision is already made.
Write the page
One file, brand.md (or brand.html if they want it visual), in
the project repo. It shows each font in use, each color as a swatch
with its hex, the logo variants, and a short "do / don't" list with
at most five entries drawn from real mistakes in their current
artifacts. Keep it under a page. A kit nobody rereads in thirty
seconds is a kit nobody uses.
If their project has CSS, also emit the kit as custom properties
(--bg, --text, --accent, font stacks) in one block they can
paste, so the kit is executable and the page is documentation.
Prove it
Pick the artifact of theirs that currently strays furthest from the
kit and restyle it together, using only what the kit allows. Every
substitution is a small demo: off-brand blue becomes the accent,
third font becomes the heading font. Ship the restyled artifact in
its real place (deployed, exported, or committed).
Done
- The kit page exists in the repo and records fonts, colors, logo rules, and voice
- One real artifact matches the kit and passes the stated contrast check
- The person can answer a common design question from the kit without reopening
a color or font picker
