Brand Identity

Brand Identity — Define the Foundation, Not the Pixels

This skill emits the brand book — logo brief, color system, type system, usage rules — and a machine-readable design-tokens.json that design consumes. You write the rules every later pixel must obey; you do not paint the live UI.

A brand identity with nothing checkable behind it is a mood board. The bar here is a brand book that compiles: roles named, every color carrying four channels, contrast pairs proven against WCAG, and a tokens file that scripts/verify.sh can validate.

All four parts ship together — logo brief, color system, type system, usage guidelines with the tokens export. A part missing its bar is incomplete, not "lite".

The one-line boundary test: "define what our brand looks like everywhere" → here. "make this surface look premium" → design.

Logo brief

Specify a system, not a single picture. The mark must survive from favicon to billboard, in color and in one ink.

• Variation set — primary (horizontal lockup), stacked (vertical, for square/tight slots), mark-only (the symbol alone, for avatars/favicons), monochrome (single-ink: black, white-knockout). A logo with no mono version fails the moment it lands on a colored background or a fax. Test the mono version first; if it dies in one color, the design is too fragile.
• Clear space — define it relative to the mark, not in fixed px, so it scales: clear space = the cap-height (or x-height of the mark) on all four sides. Nothing intrudes inside it.
• Minimum size — below this, detail collapses. Defaults: 24px wide digital, 10mm wide print for the full lockup; the mark-only may go smaller (favicon).
• File + favicon matrix — ship the formats below. SVG is the digital primary (scales, tiny); PNG carries transparency; JPEG is print-safe; 72 DPI digital / 300 DPI print.

Full variation grid, clear-space/min-size formulas, and the favicon HTML markup + prefers-color-scheme SVG snippet → references/logo-and-assets.md.

Color system

Assign roles first, values second. A color with no role is decoration waiting to be misused.

• Role taxonomy — 2–3 primary (the brand's signature), 2–3 secondary (support), a neutral ramp (text, surfaces, borders), and exactly one accent reserved for CTAs/highlights. One accent keeps "click here" unambiguous.
• Four channels, every color, no exceptions — HEX (web), RGB (screen math), CMYK (print), OKLCH (perceptual + wide-gamut). This one is absolute because a HEX-only palette silently breaks the two places nobody tests: print (no CMYK) and wide-gamut screens (no OKLCH). The W3C Design Tokens Color Module (2025.10) supports CSS Color 4 spaces including OKLCH and Display P3, so wide-gamut color lives in the token file natively — author in OKLCH and let HEX be the fallback.
• AA contrast pairing — every text-on-background pair you document clears WCAG 2 AA: 4.5:1 normal text, 3:1 large text (≥18.66px bold or ≥24px). Not negotiable — it is a conformance threshold, not a taste call, and shipping under it ships an inaccessible product. AAA is 7:1 / 4.5:1 — reach for it on body text where you can. Pair colors explicitly ("fg on bg: 12.4:1 ✓").
• Logo-text exemption caveat — WCAG 1.4.3 exempts logos and brand-name text from the contrast minimums. But a typed sub-brand or tagline that is plain text (not a graphical logo) IS subject to text-contrast rules. Mark logo-only tokens exempt; hold everything else to 4.5:1.
• Light/dark roles — define the role in both schemes from day one (bg/fg invert, brand stays anchored). Retrofitting dark mode onto a light-only palette produces muddy, low-contrast surfaces.

Full role taxonomy, a fully worked palette in HEX/RGB/CMYK/OKLCH, the contrast-pair matrix with computed ratios, and the dark-mode token strategy → references/color-and-tokens.md.

Type system

Two to three typefaces, no more. Most brands need exactly two: one display (headlines, personality) and one text (body, ≤16px legibility); a third is justified only for monospace/data.

• Scale — pick a modular ratio (1.2 minor third for dense UI, 1.25 major third for marketing) and ladder the sizes from it. Document the ladder; do not re-guess sizes per screen.
• Weights — name which weights ship (e.g. 400 body, 500 UI, 600/700 display) and which are banned (no faux-bold, no faux-italic).
• Pairing rationale — one line on why the pair works (contrast in structure: a geometric sans display over a humanist text face; or a serif display over a neutral sans body). "They both look nice" is not a rationale.
• Variable-font note — prefer a variable font where available: one file spans the weight axis, cuts requests, and removes the faux-bold temptation. Pin the named instances you use.