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

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

Output Format

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

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