# Brand Identity

> Use when translating a brand into interface: accent discipline, logo usage, voice-to-visual mapping, illustration style, and keeping product UI distinct from marketing.

- Skill: `agentsorg/brand-identity` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add agentsorg/brand-identity`
- Raw SKILL.md: https://api.skillmd.com/api/skills/agentsorg/brand-identity/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Marketing & Growth
- Author: agentsorg (https://skillmd.com/u/agentsorg)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/agentsorg/brand-identity

---



# Brand Identity in Interface

A brand arrives as a handful of adjectives and a logo file, and the job is converting exactly one of those adjectives into a channel while holding everything else neutral. Default to concentration: one saturated accent, one personality channel at full strength, a system otherwise achromatic and unremarkable. Benji Taylor's site is the clean proof — handwritten marginalia (`[data-variant=cursive]`, `user-select: none`) carries the entire voice while the rest of the page stays grey. Personality sprayed across five channels does not read as five times the personality; it reads as an unresolved system. The sibling this is most confused with is `typography`: that skill picks a family and sets scale, line-height, measure, and rhythm for legibility, and owns every number involved; this skill decides only *whether* the family expresses the brand and at what strength. A scale step or a leading value is `typography`, not here. Likewise `marketing-pages` builds one page; this skill defines the rules every page obeys.

**Read what the brand already is before deciding what it should be.** Find the brand kit, the logo directory, the accent already in the theme, the illustration folder, and any written guideline — then express decisions in the token tiers the project already uses (`design-tokens` owns naming). A brand pass is the most common excuse for a second accent, a second typeface, or a parallel `brand.css` to appear beside a system that already had answers. Extend the existing tokens; never open a second channel to say what the first already says.

## Quick Reference

| Topic | File |
| --- | --- |
| The surviving adjective and the concrete decisions it implies — typeface behavior, accent chroma, where in the motion band to sit, radius, surface treatment, and what it forbids. Open it the moment principle 1 produces a word. | [translation-table.md](references/translation-table.md) |

## Core Principles

1. **Keep only adjectives that pass the antonym test.** If the opposite is absurd, the word carries no information — nobody is building the unclean, unmodern, complicated product. Keep words a real competitor could claim the reverse of: `precise` against `warm`, `loud` against `quiet`, `crafted` against `industrial`. Force-rank survivors to `3`, act on the top one only. *Exception:* an inherited written guideline — keep their vocabulary even when it fails, and run the test on the decisions instead.
2. **One personality channel, everything else neutral.** Choose exactly `1` of: a second typeface, marginalia or handwriting, an illustration voice, a motion signature, a saturated accent, a photographic treatment, a copy voice. The other six stay at system default. *Exception:* a product expressive by nature — a game, a kids' app — may run `2`. Never `3`.
3. **Expression strength is inverse to view frequency.** Emil Kowalski's frequency gate governs personality, not only motion: anything seen 100+ times a day stops being character and becomes noise. Marketing runs the channel at full strength; product chrome runs it reduced or not at all. The accent filling a marketing hero survives into the product on the primary action and the focus ring, nowhere else. *Exception:* first run, empty states, and celebrations are rare by construction and may carry marketing-strength expression inside the product — `delight` decides which moments qualify.
4. **One saturated accent in the entire chrome.** A second saturated hue means neither is the accent, and hierarchy then gets rebuilt out of a grey ladder — which is what a disciplined system uses anyway (benji.org: one accent, a grey ladder underneath). Constructing the value — ramp, chroma, gamut, contrast — is `color`'s job; this skill fixes only the count and the surfaces it may appear on. *Exception:* semantic status colors are not accents. But if the brand accent *is* green, the success state must move hue, or nobody can tell "primary action" from "it worked".
5. **Derive logo clear space; measure logo minimum size.** Clear space is `1×` the mark's own cap height on every side, from the bounding box — a derived rule survives a redraw where a hardcoded `24px` does not. Minimum size is not a taste call: shrink until the mark's thinnest stroke reaches `1px` at 1× density, then stop one step above. Below `32px` — favicon territory, `16×16` and `32×32` — the mark is redrawn, never scaled. *Exception:* a lockup has two minimums; the wordmark's is larger and therefore governs, and below it you ship the symbol alone.
6. **The logo appears once per view and does not animate on load.** In product chrome the mark is the home affordance; a second instance in a splash, watermark, or footer means neither is authoritative. An animated logo on every load is a 100+/day animation by the frequency gate. *Exception:* a cold-boot or first-run moment, once per session, gated on `sessionStorage` as a marketing intro is.
7. **One illustration voice: `3` colors, one line weight, one perspective.** Illustration drifts faster than any other channel because it is commissioned in batches by different hands. Write the constraints down before the second batch: three illustration colors instead of six, a line weight matched to the icon stroke (`iconography` owns that value), one projection. *Exception:* a spot illustration appearing exactly once and never beside another — a 404, a launch graphic — may break the palette.
8. **Motion is never a brand variable.** Across brands in one codebase these may differ: accent hue, logo, typeface pairing, illustration voice, base radius. These may not: spacing scale, motion curve family and durations, component structure, contrast floors. Two tenants animating on different curves read as one broken app. The two published families genuinely disagree — Benji Taylor's `--duration-snappy: 220ms / cubic-bezier(.175,.885,.32,1.1)` and `--duration-swift: 800ms / cubic-bezier(.175,.885,.32,1.275)` overshoot past 1, while Emil Kowalski's `--ease-out: cubic-bezier(0.23,1,0.32,1)` and its siblings all settle. Pick one family per project, never per brand, never mixed (`motion/references/techniques.md`). *Exception:* a white-label product whose tenants never see each other may vary radius and accent per tenant — still not the curves.
9. **Every surviving adjective exits as a rule that can fail.** "Feels premium" cannot be reviewed, so it cannot be enforced, so it decays. "No element carries more than one shadow, every radius is `4px`" can be checked in a diff. Record the rules where the team keeps its tokens, not in a deck. *Exception:* none. An unfalsifiable brand rule is how a system drifts back to framework defaults.

## Smell / Fix

| Smell | Fix |
| --- | --- |
| Brief reads "modern, clean, simple, trustworthy" | All four fail the antonym test. Ask which competitor claims the opposite |
| A display typeface, a saturated gradient, and a custom illustration set on one screen | Three channels. Keep one, return the other two to system default |
| Marketing accent used on every card border in the product | Accent belongs on the primary action and focus ring; borders use the neutral ladder |
| A second brand hue introduced "for variety" | Variety comes from the grey ladder and from weight, not a second saturated hue |
| Guideline specifies `24px` logo clear space | Restate as `1×` cap height so it survives the next redraw |
| Favicon is the full lockup scaled to `16×16` | Redraw as the symbol alone; a wordmark at 16px is a smear |
| Tenant B overrides easing curves as well as color | Curves are product-level. Revert; vary accent and radius only |
| Two illustration batches on one page with different line weights | Pick one weight and redraw the minority set; line weight is the fastest-read drift |
| "Make it feel more premium" as a review comment | Not actionable. Convert to one falsifiable rule before touching code |

## Output Format

Produce a **Brand Translation Record** — a table kept beside the tokens, not prose:

| Ranked adjective | Channel | Full strength | Product strength | Forbids | Falsifiable rule |
| --- | --- | --- | --- | --- | --- |
| 1. Crafted | Marginalia | Marketing, changelog | One surface, never in a form | Stock photography | No stock image ships; marginalia appears on `1` surface per page |
| 2. Quiet | none | — | — | Badges, animated numbers | No badge outside the inbox count |
| 3. Precise | none | — | — | Gradients, rounded display type | Every numeric column is tabular |

Rows 2 and 3 keep an empty channel column. If a second row acquires a channel, the record describes a system with no center.

## Checklist

- [ ] Adjectives run through the antonym test, ranked to `3`, only the top one acted on
- [ ] Exactly `1` personality channel; the other six at system default
- [ ] Channel at full strength in marketing, reduced or absent in product chrome
- [ ] One saturated accent; value construction left to `color`; status hues distinct from it
- [ ] Clear space stated as `1×` cap height; minimum size measured at `1px` thinnest stroke
- [ ] Mark redrawn below `32px`, appears once per view, no load animation
- [ ] Illustration fixed at `3` colors, one line weight, one perspective
- [ ] Multi-brand overrides limited to accent, logo, typeface pairing, illustration, radius
- [ ] One curve family across the codebase — overshooting or settling, chosen once
- [ ] Every kept adjective recorded as a rule that can fail a diff review