AI Brand Identity System Design

Most brand identity work delivered to engineering teams is a logo and a color. The team takes the brand book, picks the colors out of it, picks the typeface, and starts shipping. Six months later, the product has eight shades of the primary color (because nobody documented when to use which), four typeface variants in places they were not supposed to appear, and a tonal inconsistency that everyone notices but nobody can pinpoint. The brand book that should have been the foundation is treated as a reference for the launch event and forgotten thereafter. The cost is paid in the design debt that accumulates and the rework that happens when somebody notices the product no longer looks like the brand it was supposed to be.

Brand identity done well is more than colors and a logo. It is a system: a color palette with usage rules per role (primary action, success state, error state, surface, text), a type system with explicit pairing rationale and a complete scale (display, headline, body, mono, with line heights and weights), an iconography style direction so icons added later look like they belong, and a style guide that captures the principles tied to each choice so future surfaces can apply the same reasoning. The discipline takes a focused effort to set up and pays back every time the team adds a new surface. The /form-brand skill produces the system as the default rather than the reference book.

Why generalist AI ships brand fragments

Ask Cursor or ChatGPT for brand foundations. You get a color palette (six hex codes, nicely arranged) and a typeface suggestion. The output is a starting point and an incomplete system. It does not say which color is for primary actions, which is for destructive ones, which is for hover. It does not say what type ramp the team should use. It does not say how to compose the colors and the type into a coherent surface. The team builds the surface and makes the calls themselves, which is how the eight shades of primary appear over time.

The other failure mode is the missing principle layer. A color palette without principles cannot be extended. "What color should this new admin tool be" has no answer if the brand book lists the colors but not the reasoning. With principles ("primary is reserved for the single most important call to action on a screen," "surface colors come from the neutral ramp not the brand ramp"), the team can apply the reasoning to new surfaces and stay consistent. /form-brand produces the principles alongside the tokens.

What a useful brand identity system contains

A brand identity system has five parts. Color palette: primary brand colors, secondary, semantic (success, warning, error, info), and neutral ramp, each with named tokens, accessibility-validated contrast pairs, and a usage rule per role. Type system: the scale (display, h1-h4, body, small, mono), with weights, line heights, letter spacing, and the rationale for the pairing (why this serif with that sans). Iconography style: the visual direction (weight, terminus, corner radius), with example icons and rules for adding new ones. Imagery direction: the photography or illustration style, with sample compositions. Style guide: the principles tied to each choice, written for future application.

The discipline is to express the system as design tokens (CSS custom properties, Figma variables, Tailwind config) rather than as static documentation. Tokens are the bridge between the brand decisions and the implementation; documentation alone produces drift, while tokens enforced by build tooling stay consistent. The token layer is what makes the brand system live in the product rather than in a PDF on someone's desktop.

How /form-brand works

Step one: brand principles

When invoked, /form-brand asks for the brand principles: what does the brand stand for, who is the audience, what tone does the team want to project, what brands does the team admire and which do they explicitly want to avoid resembling. The principles drive every downstream choice. "Trustworthy and minimal" produces different choices than "playful and energetic." The skill is opinionated about not designing past underspecified principles; vague answers produce vague systems.

Step two: color and type

The color palette is built around the principles. Primary brand color, secondary, neutral ramp (typically 9-11 stops), semantic colors. Each pair is contrast-validated for accessibility (WCAG AA at minimum). Usage rules are documented per role. Type system follows the same logic: a primary typeface and a complementary one (mono and one accent typeface optionally), with a complete scale, line heights, and the pairing rationale. Both are expressed as design tokens so the implementation reflects the system.

Step three: iconography and imagery

Iconography style is direction more than a complete set: the line weight, the corner treatment, the terminus style, with example icons in the chosen direction. The same direction is applied when icons are added later by anyone on the team. Imagery direction covers the photography or illustration style if the brand uses imagery; sample compositions ground the direction so future imagery decisions match.

Step four: style guide and tokens

The style guide ties every choice to a principle so future surfaces can apply the same reasoning. The tokens are produced in the format the project uses: CSS custom properties, Tailwind config, Figma variables, design tokens JSON. The token layer is what makes the brand system live in the product.

Tonone's /form-brand skill produces brand identity systems with color, type, iconography, imagery, style guide, and design tokens, each choice tied to a brand principle.

When to use /form-brand, and when not to

/form-brand is the right call when launching a new product that needs a visual identity, when an existing product has grown without a coherent brand and needs foundations, or when a rebrand is planned and the design foundations need to be defined before execution work.

Skip the skill for tactical asset production within an existing brand (use /form-component for components, /form-web for landing pages). For palette generation specifically without the full system, /form-palette is the right call. For design tokens implementation specifically, /form-tokens covers that work.

A worked example: brand for a fintech product

Suppose the brief is: brand foundations for a fintech product targeting small business CFOs. Run /form-brand.

# Brand: Acme Close

## Principles
- Trustworthy: financial software demands precision; the brand must
  feel competent and exact, not playful.
- Calm: the customer is doing high-stakes work; the brand should
  feel like a steady partner, not a Silicon Valley demo.
- Modern: must feel current to compete with newer players, but
  not trendy.

## Color
- Primary: #0F2A4A (deep navy). Confidence + tradition.
- Accent: #C7A26B (muted brass). Distinctive, not playful.
- Neutral ramp: 11 stops from #0B0F12 to #FAFBFC, calibrated
  for surface, border, and text contrast pairs.
- Semantic:
  success #2A7E5D, warning #B57514, error #B53A3A, info #355C99.
- Usage rules:
  * Primary: reserved for the single most important CTA.
  * Accent: brand decoration (logo, header glyph), no CTAs.
  * Surfaces use the neutral ramp, never the primary.
  * Errors use the semantic error, not red from the brand palette.

## Type
- Primary: Source Serif 4 (display, h1-h2). Editorial weight; signals
  precision over playfulness.
- Body: Inter (h3-h6, body, captions). Pairs cleanly with the serif;
  excellent at small sizes.
- Mono: JetBrains Mono (numbers, code, financial values).
- Scale: Display 56/64, H1 40/48, H2 32/40, H3 24/32, H4 20/28,
  Body 16/24, Small 14/20, Caption 13/16.

## Iconography
- 1.5px stroke, 16/20/24px sizes, square terminus, 2px corner radius.
- Sample set: invoice, ledger, audit, report, integration, alert.
- Rule: new icons match the same stroke and terminus.

## Imagery
- Editorial photography only; no stock smiles. Subjects: actual
  finance teams, dimly lit, focused. Reference: Bloomberg Markets.
- Illustration: not used for hero surfaces; reserved for empty
  states only, in the brass-on-navy palette.

## Tokens (Tailwind)
[CSS variables and Tailwind config exported in /tokens/]

Five sections, each tied to the principles. The tokens layer makes the system live in the product rather than in a PDF. Future surfaces apply the same reasoning, so the brand stays consistent as the team adds admin tools, marketing pages, internal dashboards, and partner integrations.

Related skills

/form-brand produces the foundation. For design tokens implementation, /form-tokens is the right call. For palette generation specifically, /form-palette is calibrated to that work. For component design within the system, /form-component produces specs.

Install

/form-brand ships with the Form agent in the Tonone for Claude Code package. Install Tonone, invoke /form-brand from any Claude Code session, and the skill produces a brand identity system grounded in principles with design tokens calibrated to the project's stack.

Brands that stay consistent are the ones built as systems with principles. The skill is built so the system is the default rather than the brand book.