Skill · Brand identity

Brand identity.

Five elements, designed together, that have to survive the context they actually ship in.

Brand identity is the system of artifacts that expresses an approved direction. Logo, color, typography, imagery, iconography, motion. The system fails when the elements are designed in isolation from each other or from the contexts they have to live in. This skill walks through each element with the application stress-tests that surface the failures before launch.

Set direction firstRead SKILL.md

What this skill produces

A working system, not a logo file.

The output is a structured set of files: a logo system folder with every variant the brand needs (SVG primary plus PNG and JPG exports at common sizes, lockups, monograms, dark backgrounds), a color system document with hex codes and contrast ratios, a typography document with the scale and fallback stack, imagery and illustration direction, an icon set or icon style spec, and motion principles. Three to five application mockups stress-test the system before sign-off.

The showcase demonstrates what this looks like across different briefs. Hewn (skincare) shows considered restraint: a single confident typeface, a small palette, photography that shows ingredients rather than promises. Pulse (music) shows aesthetic push: gradient hero that shifts color, typography that pulses with scroll, motion as identity. Hounder (DTC pet food) shows a personality system: warmer typography, custom dog illustrations, a voice that loves the dog as much as the product.

The framework

Five elements, designed together.

Each element has its own design rules. Each one also constrains and is constrained by the others. Inconsistency between them is the most common identity failure.

1. Logo system

Most brands need a system of marks, not a single logo. The primary mark works at hero size; the wordmark fits in tight horizontal contexts; a glyph or monogram covers app icons, favicons, and social avatars. Lockup variations cover horizontal, stacked, and square applications.

Test at favicon size before signing off the primary mark. The logo has to read as itself at sixteen pixels. If it falls apart, redesign or commit to a separate glyph for small contexts. Every curve and angle of the primary mark should be intentional, documented on a construction grid, and reproducible in single-color for contexts where full color is not available.

Failure pattern: Designing only the primary mark and discovering at launch that the wordmark, glyph, and small-size variants do not exist. Add another four weeks to the launch timeline.

2. Color system

A color system is more than a palette. It is the rules for how color carries meaning. A primary color carries the brand. Secondary colors extend it. Neutrals do eighty percent of the surface area work and carry more weight in the system than the brand color does. Semantic colors handle success, warning, error, info if the brand operates in product UI. Accents handle highlight and emphasis.

Test for accessibility before signing off any color. WCAG AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text. A brand color that fails AA against white means the UI built on the brand will be inaccessible by default. Test for color blindness too: around eight percent of men have some form of color blindness, so critical UI signals should not rely on color alone.

Failure pattern: Picking the brand color in a vacuum and discovering it cannot pair with the typography or fails accessibility in product UI. Limit the working palette to five to eight colors and test pairings before sign-off.

3. Typography

Type is the second-most-recognizable element of a brand after the logo, and the first thing a reader meets on a long-form page. The system has a display typeface for headlines and brand moments, a body typeface for long-form reading (often the same as display, sometimes different), an optional monospace for technical brands, a type scale (typically five to eight steps), and a set of weights and italics that count as part of the system.

Pairing matters. Two typefaces have to work together at body and display sizes. Common patterns: serif display with sans body, or geometric sans display with humanist sans body. Confirm web licensing covers expected pageviews before committing; some popular typefaces have prohibitive web licenses. Specify a system fallback stack and document open-source equivalents for contexts where the brand font cannot ship.

Failure pattern: Specifying typography without checking web licensing. Discovering at deploy that the foundry charges per-pageview for the chosen typeface is a budget-buster no design review catches.

4. Imagery, illustration, iconography

Imagery direction is often underspecified, leading to brand drift over time. Photography direction documents subject matter (what the brand shows), composition style (tight crops or wide environments, candid or posed), lighting (bright and natural, dramatic and directional, soft and diffused), and color treatment (true color, warm shifted, desaturated, high contrast). It also documents what to reject: the stock photo aesthetics and category cliches the brand will not use.

Illustration direction documents style (flat, dimensional, hand-drawn, geometric), color use (full palette, restricted, brand colors only), line treatment, and subject matter. Iconography documents style (filled or outline, rounded or sharp), grid (typically a 16x16 or 24x24 base), stroke weight, and the rules for how new icons get added without drift.

Failure pattern: Skipping imagery direction. Without it, the brand becomes whatever stock photos the next person picks. Six months in, the brand looks like every other site the imagery agency services.

5. Motion principles

Motion is part of identity if the brand lives in any digital product, marketing video, or animated touchpoint. Define easing curves (the default easings used across animations), a duration scale (fast around 100ms, medium 200 to 300ms, slow 500ms or longer), choreography rules for how elements enter, exit, and respond to interaction, and a small set of brand moments (logo build, page transitions, loaders) that signal the brand even at the edges of attention.

Restraint matters. Most motion in product UI should be quick and subtle; reserve dramatic motion for actual brand moments. Always provide a prefers-reduced-motion alternative for users with vestibular sensitivities. Profile every animation on the target devices to confirm 60fps before shipping.

Failure pattern: Treating motion as decoration that arrives last instead of as a system designed alongside color and typography. Inconsistent motion erodes brand cohesion as fast as inconsistent color does.

Composition

Identity is the system layer.

Brand identity gets built on top of an approved direction. If the direction is not yet defined, run creative direction first. The four-axis brief is a required input for the identity skill. The aesthetic axis constrains visual density. The sensory axis constrains how much the system asks of the reader. The tone axis informs the typographic system's range and the color palette's heat. Without the brief, the identity system gets designed against an imagined brand and produces work that is competent and generic in equal measure.

Identity feeds downstream into brand voice (visual identity and verbal identity have to feel like the same brand), into design-standards (the production rules for pages and components built on top of the identity), and into design-system (the component library that operationalizes the identity at scale). The deliverable that ties everything together is the brand-style-guide, which documents the full system for handoff to designers, developers, vendors, or future team members.

The identity system itself is rarely the final artifact a team interacts with. Most teams interact with a component library, a Figma file, a CMS template. The identity system is the source those artifacts derive from. Keep the source authoritative; let the artifacts derive.

Failure patterns

Where identity work goes wrong.

Generic enterprise identity imitation. The team picks reference brands from the same category, or from the current most-celebrated rebrand, and produces a system indistinguishable from the average. Pick reference brands from outside the category. A skincare brand imitating skincare brands looks like every other clean skincare brand. A skincare brand imitating editorial journalism looks like itself.

Color choices made without typography pairing. The brand color tests well in isolation, then fights the typography on the page. A high-saturation accent next to a thin typographic system feels jarring; the same color next to a heavier display weight reads as assertive. Test color and type together at hero scale before sign-off.

Motion principles arriving last. The team treats motion as a finishing detail and discovers at launch that the easings clash with the static identity's mood, that the brand moments do not exist, and that nothing on the page knows how to enter or exit. Design motion alongside color and typography, not after.

Designing only the primary states. The system covers what the brand looks like in good light. It does not cover what it looks like in error states, in dark mode, in a localization where the wordmark needs to flip direction, or under a partner brand's lockup. These are not edge cases; they are the brand. The system is only complete when the edges are covered.

Skipping the application stress-test. Three to five mock applications surface ninety percent of the system's weaknesses before launch. Most teams skip this step and find the same weaknesses two months in, when the cost of fixing them is roughly ten times higher. Build the homepage, the social post, the business card, the product UI, the signage. Where the system breaks is where the system needs revision.

Reference

Source files and related skills.

Frequently asked questions.

What does a complete brand identity include?
Five elements: logo system (primary mark, wordmark, glyph, lockups, monogram), color system (primary, secondary, neutrals, semantics, accents), typography system (display, body, monospace if applicable, scale, weights, fallbacks), imagery and illustration direction (photography style, illustration style, iconography), and motion principles (easing, duration scale, choreography, brand moments). A complete identity covers all five and shows how they reinforce each other under application stress.
How does brand identity relate to creative direction?
Creative direction sets the four directional axes (tone, aesthetic, relationship, sensory). Brand identity is the system layer that gets built on top of those axes. A Restrained-Considered brief produces a different identity system than an Expressive-Resonant brief, even when the underlying brand category is the same. Run creative direction first, then brand identity. The brief is a required input.
What is the most common identity failure pattern?
Designing the primary logo in isolation from application context. The logo looks great on a high-resolution mockup, then fails at favicon size, fails as a single-color screen print, fails on a dark background, and fails when the wordmark needs to lock up next to a partner brand. A complete identity tests the system across the actual contexts it will appear in: web, print, app icon, social avatar, embroidery, signage. The contexts surface the system's weaknesses before launch instead of after.
How do you stress-test an identity before sign-off?
Apply the system to three to five mock applications drawn from the real surfaces the brand will live in: a homepage, a social post, a business card, a product UI screen, a piece of signage. Where the system breaks (the color disappears against a brand photo, the wordmark feels wrong at small sizes, the icon set does not extend to the next category) is where the system needs revision. Identity changes after rollout cost roughly ten times what they cost during design.