Stats
Actions
Tags
From harness-claude
Maps brand attributes to concrete design decisions, defines brand invariants vs. flex zones, and audits multi-platform coherence for design systems.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:design-brand-consistencyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Visual coherence across every touchpoint — mapping brand attributes to design decisions, voice-to-visual translation, consistency vs. monotony, brand flex zones, and multi-platform coherence
Visual coherence across every touchpoint — mapping brand attributes to design decisions, voice-to-visual translation, consistency vs. monotony, brand flex zones, and multi-platform coherence
Define brand attributes as measurable design axes, not adjectives. Brand attributes like "modern," "trustworthy," or "playful" are useless without translation to specific design parameters. Create a brand-attribute-to-design-decision map:
| Brand Attribute | Color | Typography | Shape | Motion | Photography |
|---|---|---|---|---|---|
| Confident | High saturation, dark values | Bold weights, large scale | Sharp corners, strong | Fast, decisive easing | Direct gaze, centered |
| Approachable | Warm hues, medium saturation | Medium weights, generous spacing | Rounded corners (8px+) | Gentle, spring-based easing | Candid, warm lighting |
| Precise | Cool neutrals, monochrome | Monospace or geometric sans | Right angles, thin lines | Linear, exact timing | Clean backgrounds, isolated |
| Playful | Bright, varied hues, high saturation | Rounded sans, variable weight | Organic shapes, curves | Bouncy, overshoot | Colorful, dynamic angles |
| Premium | Black + one accent, low saturation | Serif or thin sans, ample leading | Minimal, thin strokes | Slow, deliberate, subtle | Studio-lit, desaturated |
Stripe's brand attributes map concretely: "developer-forward" = monospace code snippets in marketing, dark code editor screenshots, terminal-inspired UI elements. "Premium" = generous whitespace (120px+ section padding), thin rule separators (1px, 10% opacity), subtle gradient backgrounds. "Confident" = saturated violet primary at #635bff, bold sans-serif headlines at 56px+, decisive animation curves (cubic-bezier(0.4, 0, 0.2, 1)).
Establish brand invariants — the elements that never change. Brand invariants are the minimum set of design decisions that, if all present, make anything recognizably "your brand." Everything else is negotiable. Typical invariants:
#1DB954. Stripe Violet #635bff. Coca-Cola Red #F40009.Decision procedure: if you remove an element and the design is no longer recognizable as your brand, it is an invariant. If you remove it and the brand still reads correctly, it is a flex zone element.
Define brand flex zones — where variation is permitted and bounded. Flex zones prevent monotony while maintaining coherence. Without them, every page looks identical (boring) or designers improvise (inconsistent). Define bounds, not options:
Concrete bounds example: "Cards may use any background from the neutral palette (gray-50 through gray-200) but must use the brand primary for interactive elements (buttons, links). Card corner radius is fixed at 8px. Card shadow is one of three elevation tokens (sm, md, lg). Card padding is fixed at 24px."
Map brand voice to visual attributes with a translation matrix. Voice and visual are two expressions of the same brand personality. They must align:
Mailchimp's voice is "fun but not silly." Visual translation: illustrations use bright colors and playful characters (fun) but maintain consistent 2px stroke weight and precise geometric shapes (not silly). The illustration characters have expressive poses but realistic proportions — not cartoonishly exaggerated. Typography uses a rounded sans-serif (Cooper Light) for warmth and a clean geometric sans (Graphik) for professionalism.
Stripe's voice is "concise and technical." Visual translation: UI text is short (button labels are 1-2 words, descriptions are 1 sentence). Code is visible everywhere — product screenshots show real code, not mockups. The dark-mode code editor treatment signals "this is a developer tool." Animation is fast (200-300ms) and functional — no decorative motion.
Decision procedure for voice-visual alignment: take a piece of marketing copy and a screenshot of the product. Cover the logo. Would a stranger identify them as the same brand? If not, the voice and visual are misaligned. The most common failure: playful, casual copy paired with a cold, corporate visual design, or vice versa.
Audit consistency across platforms without enforcing pixel-identical replication. "Consistent" does not mean "identical." Each platform has its own conventions, and forcing identical UI across web, iOS, and Android produces an experience that feels native nowhere. Instead, define platform-specific expressions of the same brand invariants:
| Brand Element | Web | iOS | Android |
|---|---|---|---|
| Navigation | Horizontal top nav | Bottom tab bar (UITabBar) | Bottom navigation bar |
| Primary button | Brand color, 8px radius | Brand color, 12px radius (iOS) | Brand color, 20px radius (MD3) |
| Typography | Inter/System stack, 16px body | SF Pro, 17pt body | Roboto, 14sp body |
| Elevation | Box shadow tokens | None (iOS uses blur layers) | Tonal elevation (MD3) |
| Brand color usage | Invariant: same hex value across all platforms | ||
| Logo placement | Invariant: same mark, same clear space, same minimum size | ||
| Voice/copy | Invariant: same tone, same terminology |
Airbnb's iOS app uses native iOS tab bars with platform-standard haptics, while the web app uses a custom bottom navigation on mobile. Both use the same Cereal typeface, the same Rausch coral, and the same photography art direction. The brand is unmistakably Airbnb on both platforms despite different structural patterns.
Measure consistency with a brand consistency score. Subjective assessments ("this feels on-brand") are unreliable across a team. Create a measurable checklist:
A page scoring 8/8 is fully on-brand. 6-7/8 has minor deviations. Below 6/8, the page needs a brand review. Automate where possible — design token linting (Stylelint with custom rules), color extraction from screenshots (compare against palette), and copy tone analysis (Grammarly Business with brand voice profile).
Brand consistency does not mean every page looks the same. It means every page feels like it belongs to the same family. The distinction is between structural consistency (same grid, same tokens, same type scale) and expressive variety (different layouts, different hero treatments, different content hierarchies).
Spotify demonstrates this well: the home screen, search screen, and artist page have completely different layouts — grid of cards, category bubbles, and a full-bleed hero with scrolling track list. But all three use the same dark background (#121212), the same green accent (#1DB954), the same Circular typeface, and the same card corner radius (8px). The structure is consistent; the expression varies.
The danger of excessive consistency is brand fatigue — when every page is so formulaic that users cannot distinguish sections or feel no emotional progression through the experience. Fix: define 2-3 page archetypes (e.g., landing, content, dashboard) with distinct layout templates that share the same brand invariants.
Design tokens are the mechanical enforcement layer of brand consistency. A token system that encodes brand decisions makes consistency the path of least resistance:
--color-brand-primary: #635bff is the Stripe invariant. All components reference the token, never the hex value. Changing the brand color means changing one token.--space-section: 120px ensures consistent section padding. A designer cannot use 80px or 160px without overriding the token — which is flagged in code review.--shadow-card: 0 4px 6px -1px rgba(0,0,0,0.1) ensures every card has the same elevation feel.--radius-default: 8px applied to buttons, cards, inputs, and images creates the rounded brand feel without manual per-component specification.The token layer turns brand consistency from a cultural practice ("we trust designers to be consistent") into an engineering constraint ("the system only allows brand-consistent values").
Adjective-Only Brand Guidelines. A brand guide that says "our brand is modern, friendly, and innovative" without mapping these adjectives to specific design values. Every designer interprets "modern" differently — one uses geometric sans-serif and sharp corners, another uses rounded humanist sans and organic shapes. Fix: translate every brand adjective to specific design parameter ranges using the attribute-to-decision map in step 1. "Modern" must resolve to concrete values: geometric sans-serif (not humanist), 4px corner radius (not 16px), cool neutrals (not warm).
Pixel-Perfect Cross-Platform Cloning. Forcing the iOS app to look exactly like the web app — same 8px corner radius on buttons even though iOS Human Interface Guidelines specify larger radii, same hover states even though mobile has no hover, same navigation even though iOS uses bottom tab bars. The result feels native to no platform. Fix: define brand invariants (color, typeface, voice) that cross all platforms, and allow structural elements (navigation, input controls, elevation, radii) to follow each platform's conventions.
Brand Police Without Flex Zones. A design governance process that rejects any variation from the style guide, producing a product that is technically on-brand but creatively dead. Every page has the exact same layout, the same hero treatment, the same illustration style. Users experience brand fatigue. Fix: define explicit flex zones (step 3) where variation is not just permitted but encouraged. The flex zones are bounded by the brand invariants — variation within them is on-brand by definition.
Voice-Visual Disconnect. Marketing copy is playful and casual ("Hey there! Let's build something awesome") while the product UI is cold and corporate (gray backgrounds, formal labels, no personality). Users experience cognitive dissonance at the transition from marketing to product. Fix: use the voice-visual translation matrix (step 4) to ensure copy tone and visual tone are calibrated to the same brand personality. If the voice is casual, the visuals must be warm and approachable.
Token Bypass. Engineers hardcoding hex values, pixel sizes, and font names instead of referencing design tokens. The product starts on-brand but drifts as hardcoded values are not updated when the brand evolves. Fix: lint for magic values in CSS/styled-components. Every color, spacing, radius, shadow, and font reference should resolve to a token. Hardcoded values are code smells.
Stripe — Consistency Through Restraint. Stripe's brand is recognizable because of what it does NOT do: no gradients on buttons, no decorative illustrations in the product, no color variety beyond the violet/navy/white core. The restraint itself is the brand signal. Every touchpoint — docs, dashboard, marketing, Stripe Press books — uses the same navy text color (#061b31), the same code-block style (dark background, syntax highlighting), and the same generous whitespace. New pages feel on-brand because the design system provides so few choices that off-brand combinations are nearly impossible. Key lesson: brand consistency is easier when the palette of options is deliberately narrow.
Airbnb — Multi-Platform Coherence. Airbnb is one of the few companies whose web, iOS, and Android apps feel like the same brand without being pixel-identical. The invariants: Cereal typeface, Rausch coral (#FF5A5F), warm photography art direction, rounded shapes, and casual-yet-helpful voice. The flex zones: navigation structure follows platform convention (tabs on mobile, sidebar on desktop), component styling respects platform norms, and layout adapts to screen context. An Airbnb user switching between web and mobile feels continuity without uncanny sameness. Key lesson: brand consistency is about recognizability, not replication.
Material Design — Brand as System. Google's Material Design is a brand consistency framework for thousands of apps. It defines invariants (the type scale, the elevation system, the color role architecture) and flex zones (theme colors, shape overrides, component customization). A Material Design app themed with Stripe's colors and Google's with YouTube's colors look completely different — yet both are recognizably Material Design because they share the systematic structure. Key lesson: at scale, brand consistency must be systematic (tokens, constraints, automated checks) rather than manual (design reviews, visual QA).
GitHub — Consistency Through System Fonts. GitHub uses system fonts rather than a custom typeface — SF Pro on Mac, Segoe UI on Windows, Roboto on Android. This means the literal font rendering varies across platforms. But the brand remains consistent because the invariants are: monospace code blocks (the developer identity signal), the Mona octocats (illustration system), Primer design tokens (color, spacing, radius), and the direct, technical voice. Key lesson: brand invariants do not have to include a custom typeface if other elements carry sufficient brand signal.
A systematic audit prevents drift from becoming entrenched:
When brand elements change (new colors, new typeface, new illustration style), the migration must be systematic:
--color-brand-primary from #635bff to #4F46E5 propagates to every button, link, and accent in one change.brand-v2 token layer alongside brand-v1 during transition. Components can opt into the new brand by switching their import. This prevents half-migrated states where some components use old values and others use new.Slack's 2019 rebrand migrated from the hashtag logo and 11-color palette to the aubergine-focused 4-color palette using a token-first approach. The design system's color tokens were updated, and every component that referenced them adopted the new palette automatically. Custom-themed elements that used hardcoded values required manual migration — reinforcing why token coverage matters.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeApplies brand-driven visual design expertise, resisting generic AI defaults. Guides designers on identity systems, typography, color semantics, and usability heuristics.
Generates BRAND-IDENTITY.md file defining colors, typography, spacing, components, accessibility, and responsive design for project roots. Guides via discovery questions or uses user-provided tokens.
Applies Open Session brand standards including color palette (Aperol, Charcoal, Vanilla), typography, and voice guidelines across UI and content work.