sxsphinxstack

Skills / Brand kit

Brand kit

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.

Use this skill. Nothing to install.

Open in ChatGPT Open in Claude prefilled and ready; just hit send
for Gemini, Copilot, or Cursor: paste it, then say "use the brand kit skill"

Don't have an agent?  ·  Raw file: skills/brand-kit.md

Watch the first two minutes

This is how a session goes, including the moment most people realize why the kit exists. Click through it.

​(pastes the skill) my portfolio, my resume and my slides all look like three different people made them
That's the exact job of this skill. First step is an audit: I list every font and every color actually in use across all three, pulling real hex values from the files instead of guessing. Send links or files.
here [links]. how bad can it be
Five fonts and eleven distinct grays. Nobody chose those; they accumulated, one small decision at a time. We'll cut down to two fonts and about four colors, your pick at every step with a one-line trade-off from me.
eleven grays?? ok. but i have no idea which ones to keep
You don't need to know in advance. Your site's dark blue is already on your logo, so that's the honest accent candidate. For text and background we check the contrast and I'll show you the checker. Everything that doesn't make the list is banned by default; that's what makes the kit useful.
what stops me from drifting back in a month
Two things. The kit lives in your repo as one page you can reread in thirty seconds, and the same values ship as CSS custom properties you paste into your site, so the kit runs instead of just sitting there. And we prove it today: we restyle whichever artifact strays furthest, probably the slides.

Scripted example of a real session.

Will I actually use a brand guidelines doc?

Fair suspicion: most brand documents are written once and never opened again. This one is built against that failure. It is a single page, readable in thirty seconds, and where your project has CSS the kit also ships as custom properties, so your site enforces it whether or not you reread it. The do and don't list has at most five entries, all drawn from real mistakes found in your current artifacts rather than generic advice. And the session doesn't end at the document: one real artifact gets restyled to match, which is the proof the kit works.

What you end up with

One page that ends the re-deciding. Here is a real-shaped kit for a student portfolio project.

Example
SAM OKAFOR: BRAND KIT (brand.md)
FONTS 1
Headings: Inter, weights 600 and 700 only
Body: Source Serif 4, weights 400 and 700 only
COLORS 2
Background: #FAFAF7, warm near-white
Text: #1C1C1A, near-black (contrast 15.9:1 on the background, WCAG AA checked)
Accent: #0B5FA5, the blue from the logo. Links, buttons, nothing else
Secondary gray: #6B7068, captions and metadata only
LOGO 3
Minimum 24px tall, clear space of one letter height, black and white variants in assets/. Never on photos.
VOICE
"Plain sentences, first person, no exclamation points."
DO / DON'T 4
Don't reintroduce the old teal (it was #17A2B8, it is retired). Don't center body text. Don't add a fifth gray. Do use the accent for every link. Do keep headings in sentence case.
  1. Two fonts, exact weights named. Naming the allowed weights is what stops the slow slide back to five fonts.
  2. Colors as text, with the contrast stated. Anyone, including future you, can copy the hex and see that the text passes AA without opening a picker.
  3. Logo rules only because a logo exists. No logo, no section; the kit records decisions that are real.
  4. Every don't is a real past mistake. The retired teal was found in the audit. Rules with a history get followed.

Questions people actually ask

Is this free?

The skill is free, no account, no catch. Fonts come from free sources like Google Fonts. The agent you paste it into may or may not be free; Gemini has the widest free tier, and ChatGPT, Claude, and Copilot free plans can also run it.

I haven't picked fonts or colors yet. Can I still start?

If you have truly nothing, the skill itself says to run pick-fonts-and-colors first and come back. The kit's job is writing decisions down and enforcing them; it assumes some decisions exist or get made during the session.

How is this different from pick-fonts-and-colors?

That skill makes the choices. This one turns choices into rules: exact weights, usage lines, a do and don't list from your real mistakes, a CSS block, and a proof step where one straying artifact gets restyled to match.

Can I change the kit later?

Yes, by editing the page. The kit doesn't freeze your style; it makes drift visible. When you want a new accent next year, you change one line and one custom property, and everything that uses the kit follows.

What does "done" mean for this?

Three things, from the skill: the kit page exists in your repo, one real artifact matches it exactly, and you can answer "what color is a button" without opening a color picker.

Where to go from here

Missing a piece the kit needs?

Pick fonts and colors Logo basics Design basics

Put the kit to work:

Portfolio page Slide deck Social post
Curious? Read the full skill — the exact instructions your agent gets 
---
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