Skills · design

`brand-kit`

Capture a brand once as a reusable brand.json — logo files (and an on-dark version), colour roles as hex codes, heading and body fonts, voice, imagery rules, a PowerPoint template, contact details and the legal footer — plus a one-page BRAND.md, with text contrast checked and every value traced to where it came from. Use when the user wants decks, flyers or documents in their branding, says "use our brand", "here's our logo and colours", "set up our brand kit", or hands over brand guidelines.

Pack designTier standardJob Create on brand collateralv0.1.4

npx skilldrop-cli install brand-kit

Other ways to install

With the sibling skills it hands off to:

npx skilldrop-cli install brand-kit --with-related

The whole pack it belongs to:

npx skilldrop-cli install --pack design

By hand, from a clone of the repo:

cp -R packs/design/skills/brand-kit ~/.claude/skills/

In Claude Code, with the design plugin installed, invoke it as:

/design:brand-kit

Try it

A realistic prompt from the skill's acceptance evals:

Set up our brand kit. Logo is ./brand/northwind-logo.png and there's a white version ./brand/northwind-logo-white.png. Our colours are #0E5A46 and #F2A541. We use Georgia for headings. Website is northwindhealth.example.

What a good result looks like

Every colour is a hex code with a role. "Our green" is not a brand colour; #0E5A46 used for title bars is.
Text on background passes 4.5:1, checked by the script rather than by eye.
Every value says where it came from, and inferred values are marked as inferred.
Logo files are real paths that exist, with a PNG for PowerPoint and an on-dark version when the brand has one.
Nothing is invented. A field the user didn't supply and couldn't be read from their sources is left out and listed, not guessed.
BRAND.md fits on one page. A person checks the brand from it without opening the JSON.

Example output

a logo, two colours and a website become a brand kit · the skill's own worked example, source

Input

Set up our brand kit. Logo is ./brand/northwind-logo.png and there's a white version ./brand/northwind-logo-white.png. Our colours are #0E5A46 and #F2A541. We use Georgia for headings. Website is northwindhealth.example.

Output

Wrote ./brand/brand.json and ./brand/BRAND.md.

Filled for you, please confirm: secondary #3D7F6B (a lighter step of your green), background #FFFFFF and text #1F2A28 (near-black with a green cast). Voice is read from your About page and tagged [inferred].

Not set (nothing supplied): body font, tagline, phone, address, legal footer, PowerPoint template. Tell me your body font; until then decks and flyers use their defaults.

$ python3 scripts/check_brand.py ./brand/brand.json
  text on background   14.79:1
  white on primary      8.17:1
WARN accent on background is 2.05:1 — use the accent for shapes and rules, not text
WARN fonts.body is not set; generators fall back to their defaults
OK: brand.json — 0 failure(s), 2 warning(s)

BRAND.md

Role	Hex	Use
primary	`#0E5A46`	Slide title bars, flyer header band, buttons
secondary	`#3D7F6B`	Charts, secondary panels
accent	`#F2A541`	Call to action, highlights; shapes and rules, never body text
background	`#FFFFFF`	Page and slide background
text	`#1F2A28`	Body text

Fonts: headings Georgia (from you); body font not set yet
Logo: full colour on white; the white version on the green. Never the full-colour logo on the green.
Voice [inferred]: warm and plain, short sentences. Says "members", not "patients".

Why this is a good output: it uses every fact the user gave and invents none. It fills only the colour roles a deck needs, says which ones it filled, and leaves the tagline and legal footer empty rather than making them up. The checker's figures show white titles on the green will read, and its accent warning is carried into BRAND.md as "never body text".

How it's checked

Measured against plain Claude Code (2026-10-23): it met 95% of its checks, against 40% without it, and a blind judge preferred it. How skills are checked

19 assertions across 3 acceptance evals, and 7 trigger queries. Every skill's checks

What the output must do

Writes brand.json next to the logo files, with logo.primary and logo.on_dark set to the two supplied paths
colors.primary is #0E5A46 and colors.accent is #F2A541; secondary, background and text are filled and listed as derived
fonts.heading.family is Georgia; the body font is either asked for or marked as a default, not presented as the brand's
Every value has a source, with derived values tagged [inferred]
Runs check_brand.py and reports its contrast figures
Writes a one-page BRAND.md with a colour table (role, hex, use)
Invents no tagline, phone number, address or legal footer
Writes a brand.json that is valid JSON and holds the brand's colours as hex codes, the heading and body fonts, and the logo file
It notices that the two sources give different primary greens (#2E5E3A in the guidelines, #1F4D2B in the website CSS) and says which it used and why, or marks it for the user to confirm; it does not silently pick one
It warns that Blossom Yellow (#F2C94C) text on white is too low in contrast to read, and the summary does not tell volunteers to use it for body text
It says the on-dark logo (logo-white.svg) was not supplied, and brand.json does not point to it as if the file exists
It notices that the website and shop address differ between the guidelines and the contact sheet and says which it used or flags it, and it leaves the registered society number as unknown rather than inventing one
The summary is one page or less, written for poster-making volunteers, and carries the voice and imagery rules (no 'artisanal' or 'craft', no stock photos of apples)
It does not invent colours, fonts, taglines, contact details or rules that are not in the files
Writes a brand.json that is valid JSON with the logo file and the brand colours as hex codes
The teal and coral hex codes are taken from the logo (close to #1A8C8C and #F07E6E), or, if they are guesses, they are clearly marked as suggestions for the owner to check
It does not invent contact details, an address, a website, a tagline, a legal footer or fonts presented as the owner's own; anything missing is marked to fill in
Any text-on-colour pairing it recommends is readable; it does not suggest white text on the coral, which is too low in contrast
Any explanation or summary is short and in plain words, and it delivers without asking questions first

When it should and shouldn't activate

Should activate:

Here's our logo and brand colours — set up a brand kit we can reuse
Use our brand guidelines PDF so everything matches our style
Capture our fonts, colours and logo rules in one place
Make our decks and flyers on-brand — start with the brand settings

Should leave to another skill:

Build a PowerPoint deck for the board meeting
Make a flyer for our open day
Design a new logo for my startup

Related skills

md-to-pptx, md-to-docx

Source

SKILL.md · the whole folder on GitHub.