Brand identity systems guide.
Brand book, modular type scale, accessible color, motion tokens, design tokens. The system that keeps a brand consistent across 50 surfaces.
Brand book plus design system. Both.
A brand identity system has two layers. The brand book defines the strategic foundations — positioning, voice, archetype, audience, value proposition. The design system defines the executional layer — type scale, color, spacing, motion, components, accessibility rules. Brands with only the brand book ship inconsistent visual work; brands with only the design system ship consistent work that does not feel like the brand. The mature setup ships both, traceable to one another, encoded as design tokens in Tailwind or Figma so the entire team works from the same source of truth. Published by Prasun Anand.
Brand book and design system do different work.
The brand book answers strategic questions; the design system answers executional ones. They are complementary, not duplicative. A brand book without a design system produces inconsistent execution. A design system without a brand book produces consistent execution that lacks meaning. Both are required for a brand that scales across 50-plus surfaces.
What goes in the brand book. Positioning statement (one sentence on the brand's distinctive value). Brand archetype (the strategic role the brand plays — the rebel, the explorer, the creator, etc.). Voice and tone guide (how the brand sounds, with do-and-don't examples). Value proposition (the customer benefit, evidenced and specific). Mission statement (why the brand exists beyond commerce). Audience definition (who the brand serves, with empirical persona data). Competitive positioning map (where the brand sits relative to competitors on the dimensions that matter). The brand book is 30 to 80 pages of strategic content; it is read by everyone making brand-affecting decisions.
What goes in the design system. Type scale (10 to 12 size steps with line heights and weights). Color palette (primary plus secondary plus semantic colors with WCAG-compliant pairings). Spacing scale (an 8-point or 4-point geometric progression). Component library (buttons, forms, cards, navigation, all states defined). Motion tokens (durations, easings, choreography). Iconography rules (style, weight, sizing). Photography and illustration direction. Accessibility rules (focus styles, ARIA patterns, keyboard navigation). The design system is encoded in code (Tailwind config, Figma library) and consumed by every designer and engineer.
The link between them. Every design system decision should trace back to a brand book principle. If the brand archetype is the rebel, the type scale leans expressive and contrasty; if the archetype is the sage, the type scale leans classical and restrained. The deeper layout of brand book vs design system, including templates for both, is in Brand book vs design system.
A modular type scale forces typographic discipline.
A modular type scale defines 10 to 12 size steps from 12px caption to 96px display, calculated from a base size and a scale ratio using geometric progression. The constrained set forces designers to choose from defined options rather than inventing new sizes per layout, which produces visual rhythm across pages.
The math. Base size 16px, scale ratio 1.25 (the major third). Steps: 12 / 14 / 16 / 20 / 25 / 31 / 39 / 49 / 61 / 76 / 95 (rounded). Each step is the previous size times the ratio. Pick a different ratio for different brand temperaments — 1.125 (major second) feels restrained and editorial, 1.5 (perfect fifth) feels bold and contrasty. The ratio is a brand-defining decision, not an arbitrary one.
Beyond size: line height and weight. Each step in the scale needs a paired line-height ratio (typically 1.1 to 1.2 for headings, 1.4 to 1.7 for body). Weight assignments per step — display sizes might use 700 weight, body might use 400, captions might use 500 with letter-spacing. The full type system specifies size + line-height + weight + letter-spacing per step; everything else falls out of those four primitives.
Implementation in Tailwind. Extend the fontSize key in tailwind.config.js with the scale steps, encoded as an array of [size, lineHeight] pairs. Use the same custom scale for all text in the system; do not mix Tailwind defaults with custom sizes (one or the other, never both). The full Modular type scale guide walks through ratio selection, the math, and the Tailwind implementation.
A color system needs WCAG compliance baked in.
Three rules: every text-on-background pairing meets WCAG 2.1 AA contrast (4.5:1 normal, 3:1 large); never use color as the only signal (pair with iconography or label); define the system in tokens, not hardcoded values, so the palette can adjust without code changes. Build accessibility-compliant from the start; retrofitting is harder than getting it right.
The structure. Define a primary brand color and 8 to 12 tonal variants (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) following Material Design's tint convention. Define a secondary brand color with the same tonal range. Define neutrals (gray scale or warm gray scale matching the brand temperament) with the same range. Define semantic colors — success, warning, error, info — each with its own tonal range so they can be used at different intensities. The full palette is 50-plus colors; this is normal for a mature brand system.
Pairing rules. Every text-on-background combination in the system should be tested against WebAIM's Contrast Checker. Colors that fail get adjusted in lightness until they pass, then the adjusted color becomes part of the system. Document the validated pairings in the system; designers should reach for them rather than inventing new combinations.
The dark mode story. Every modern system needs a dark mode variant. Build it as a separate token set rather than algorithmic inversion of light mode — algorithmic inversion produces unreadable color combinations in 30 to 50 percent of cases. The full WCAG color system playbook including dark mode is in Color system WCAG compliance.
Motion tokens make animations feel like the brand.
Motion tokens are reusable definitions of duration, easing, and choreography. Animations defined in tokens share rhythm and feel like part of the brand; ad-hoc animations feel chaotic and undermine the visual system. The token set is small — 5 to 8 durations, 4 to 6 easings, 2 to 3 choreography rules — and composes every animation in the product.
Durations. Instant 100ms (state changes that should feel immediate — hover, focus). Fast 200ms (small UI transitions — dropdown open, button press). Base 300ms (most UI transitions — modal open, card flip). Slow 600ms (deliberate transitions that need attention — page section reveal). Deliberate 1000ms (signature brand moments — hero reveal, milestone celebration). The set is a brand-tuning decision; brands with restrained character lean shorter, expressive brands lean longer.
Easings. Entrance (ease-out for elements coming in — feels like landing). Exit (ease-in for elements leaving — feels like accelerating away). Emphasized (custom cubic-bezier for hero moments — adds personality). Standard (ease-in-out for back-and-forth states — toggles, accordions). Each easing is a vibe; the right set per brand is a deliberate choice.
Choreography. Stagger 50ms between sibling elements (a list of cards revealing one after another). Sequence 100ms between groups (header animates, then body animates). Reduced motion respect — every animation honors the prefers-reduced-motion media query; users who request reduced motion get static states. Implementation in Tailwind through the theme.extend.transitionDuration and transitionTimingFunction keys; the playbook with the actual config is in Motion tokens in Tailwind.
When does a brand need a system?
Three scenarios. The brand has a clear positioning that current visuals do not represent (most common at USD 1M to 5M revenue). Scaling to new channels reveals visual inconsistency hurting recognition (USD 5M to 20M). A strategic pivot requires the brand to mean something different (any stage). Below USD 1M, premature; the visual language will need to change again as the business finds product-market fit.
Cost ranges. A complete brand identity system runs USD 25K to 150K depending on scope. The lower end gets you brand book, visual identity, basic design system in Figma. The higher end adds typography commission (custom typeface), illustration system, motion design, photography direction, packaging design, retail merchandising guidelines. Most DTC brands at the right stage land in the USD 50K to 90K range for the work that matters.
What "ready" looks like. The brand has a positioning the team can articulate in one sentence. The audience is well-understood empirically (real customer interviews, not personas invented at the kickoff). The category context is clear — who the brand competes with, where the differentiation lies. Without those three, the brand identity work is being done on top of strategic ambiguity that the visuals cannot resolve. Spend on positioning first if those three are unclear; brand identity is downstream of positioning.
Cross-references for further depth. The complementary topology piece Top ecommerce web design agencies covers selection criteria for the brand-design partner; How to choose a local graphic designer covers the freelancer alternative when scope is bounded.
Six answers.
What is the difference between a brand book and a design system?
A brand book defines the strategic foundations: positioning, voice, tone, brand archetype, value proposition, audience, and the principles that distinguish the brand from competitors. A design system is the executional layer: type scale, color palette, spacing, components, motion tokens, accessibility rules. The brand book answers why; the design system answers how. Brands that have only one fail differently — brand-book-only brands ship inconsistent visual work; design-system-only brands ship visually consistent work that does not feel like the brand. The mature setup ships both, with the design system traceable back to the brand book.
What goes in a modular type scale?
A modular type scale defines a small set of typographic sizes that compose every layout: typically 10 to 12 size steps from 12px caption to 96px display. Each step is calculated from a base size (usually 16px) and a scale ratio (1.125, 1.2, 1.25, 1.333, 1.5, etc.) using a geometric progression. Why modular: a constrained set of sizes forces design discipline, makes responsive type easier to implement (fewer breakpoints to manage), and produces visually consistent rhythm across pages. Pair the scale with line-height ratios and weight assignments to complete the type system.
How do I build an accessible color system?
Three rules. One, every text-and-background pairing must meet WCAG 2.1 AA contrast (4.5:1 for normal text, 3:1 for large text 18pt-plus). Two, never use color as the only signal — pair color with iconography, label, or pattern so colorblind users get the meaning. Three, define the color system in tokens not hardcoded values, so the entire palette can adjust if a contrast failure surfaces. Tools: contrast checkers from WebAIM, axe DevTools color audit, and the in-browser color contrast picker in Chrome DevTools. Build the system contrast-compliant from the start; retrofitting color systems is harder than building them right.
What are motion tokens?
Motion tokens are reusable definitions of duration, easing, and choreography that compose every animation in the system. Common token sets: durations (instant 100ms, fast 200ms, base 300ms, slow 600ms, deliberate 1000ms), easings (entrance, exit, emphasized, standard), choreography (stagger 50ms between elements, sequence 100ms between groups). Why tokens: animations defined in tokens feel like part of the brand because they share rhythm and timing; ad-hoc animations feel chaotic. Implementation in Tailwind: extend the theme with custom durations and easings, reference them in CSS or motion library config.
How do design tokens work in Tailwind CSS?
Tailwind's tailwind.config.js is the design token source of truth. Define brand colors, typographic scale, spacing scale, breakpoints, motion durations and easings, shadow definitions, and z-index scale in the theme.extend block. Tailwind generates utility classes from the tokens (text-moss-600, bg-cream, p-spacing-md). Component-level CSS references the tokens via @apply or the Tailwind utility classes directly. The advantage: the entire visual language is defined in one place, can be swapped or themed without touching component code, and is the single source of truth shared across all team members.
When should a brand commission a brand identity system?
When the brand has a clear positioning that current visuals do not represent (most common at USD 1M to 5M revenue), when scaling to new channels reveals visual inconsistency hurting recognition (USD 5M to 20M), or when a strategic pivot in product or audience requires the brand to mean something different than it did originally. Costs run USD 25K to 150K depending on scope — typography commissions, custom illustration, motion design, photography direction all add cost. The wrong time: pre-product-market-fit when the visual language will need to change again as the business does.
Brand book plus tokens. Both layers.
Published .