Branding Identity

Branding and Identity

> A brand is more than a logo. It encompasses all perceptions and experiences people have with a company. Design is strategy, not decoration.

Scope

Use this skill when you:

• Develop or review a brand positioning
• Create a corporate design or brand style guide
• Align a website's visual identity with the brand strategy
• Design portfolio or case study pages
• Define tone of voice and brand personality
• Ensure consistency across all touchpoints

Principles

1. A Brand Is More Than a Logo

Branding encompasses design, communication, service, and behavior. Everything shapes the brand.

2. Consistency Builds Trust

A brand is built through continuous, consistent communication over an extended period. Inconsistency destroys trust.

3. Positioning Is Mandatory

Every company must clearly define what sets it apart from the competition. Without positioning, the offering is interchangeable.

4. Brands Are Formed in People's Minds

The company does not define the brand — the audience's perception does. Branding actively steers that perception.

5. Authenticity Over Staging

Show real people, real work, real results. Disingenuous portrayals lead to disappointment.

Rules

DO: Develop a Positioning

• DEFINE clearly what distinguishes the company.
• IDENTIFY differentiators (quality, communication, pricing, service).
• FORMULATE a positioning statement: "We are [what] for [whom], who [need], because [differentiator]."

DO: Define the Brand Core

• DEFINE 3-5 core values for the brand.
• FORMULATE a brand story: Why does the company exist? What problem does it solve?
• DESCRIBE the brand personality: If the brand were a person — how would it speak?

DO: Implement Corporate Design Consistently

• CREATE a design system with defined colors, fonts, spacing, and components.
• USE the logo in predefined variants (color, black/white, icon-only, with/without tagline).
• DEFINE logo placement, clear space, and minimum size.
• LIMIT the color palette to a maximum of 5-7 colors.
• SELECT a maximum of 2 font families.

DO: Design All Touchpoints

• DESIGN every touchpoint intentionally: website, email, social media, print materials.
• ENSURE that all touchpoints convey the same brand message.
• DEFINE tone of voice: formal/informal, humorous/factual, addressing style.

DO: Use the Portfolio as a Brand Showcase

• SHOW only the best and most representative work (quality over quantity).
• DESCRIBE each project: initial situation, challenge, approach, solution, outcome.
• USE high-quality, large-format images and mockups.
• INTEGRATE client testimonials as social proof.
• UPDATE the portfolio regularly.

DO: Make the About Page Personal

• SHOW yourself/the team with authentic photos.
• TELL the story behind the company.
• OFFER multiple contact options prominently.

DON'T: Equate Branding with Logo Design

• A logo alone does not create brand perception. It requires the full package.

DON'T: Send Inconsistent Brand Signals

• DO NOT use different color schemes across different channels.
• DO NOT change the communication style depending on the medium.
• DO NOT alter the visual identity without strategic justification.

DON'T: Let Trends Dictate Brand Identity

• DO NOT follow every design trend if it does not fit the brand.
• PRESERVE the core identity beyond trends.
• EVOLVE the brand gradually, not radically.

Patterns

Brand Style Guide

A documented reference containing logo specifications, color palette (Hex, RGB, CMYK), typography rules, visual language, tone of voice, spacing, and grid system. The authoritative reference for anyone designing on behalf of the brand. For details, see references/brand-style-guide.md.

Portfolio Project Page (Case Study)

Structured layout: 1. Project title and summary, 2. Initial situation and challenge, 3. Approach and process, 4. Visual results (large-format screenshots/mockups), 5. Measurable impact, 6. Client testimonial.

Brand Personality Spectrum

Define the brand on scales: Formal--Informal, Factual--Emotional, Serious--Humorous, Reserved--Confident. Each scale has a defined value, from which language examples are derived.

Visual Differentiator

Identify one or two visual elements unique to the brand (signature color, illustration style, distinctive typeface, recurring graphic motif). This element appears consistently across all touchpoints.

Before/After Showcase

For relaunch projects: before-and-after comparison as visual proof. Interactive slider or side-by-side. Supplement with measurable results (conversion increase, load time improvement).

Anti-Patterns

Logo-Only Branding

Branding is reduced to logo design with no strategy and no brand core. Solution: Positioning, values, tone of voice, and visual system as the foundation before logo design.

Anonymous Portfolio

Portfolio shows work but no person, no process, no context. Solution: Personal about page, process descriptions, client testimonials, clear contact options.

Trend-Chaser Design

Visual identity is completely overhauled with every trend. Prevents recognition. Solution: Keep the core identity stable; only adopt trends when they fit.

Appearing Larger Than You Are

A sole practitioner presents themselves as a large agency. Clients notice the discrepancy. Solution: Present authentically; communicate the strengths of a small team.

Portfolio Overload

Too many projects, small screenshots, no context. Solution: 5-10 best projects, large-format images, case study descriptions.

Checklist

Strategy

• [ ] Positioning formulated in one sentence
• [ ] 3-5 core values defined
• [ ] Target audience described
• [ ] Brand personality and tone of voice defined
• [ ] Differentiators identified

Visual System

• [ ] Logo available in all necessary variants
• [ ] Color palette defined (max. 5-7 colors with Hex/RGB)
• [ ] Typography established (max. 2 font families)
• [ ] Visual language and image style documented
• [ ] Brand style guide created and accessible

Portfolio

• [ ] Only best work showcased
• [ ] Each project with context and description
• [ ] High-quality, large-format images/mockups
• [ ] Client testimonials integrated
• [ ] About page with personal photo
• [ ] Portfolio updated regularly

Consistency

• [ ] All touchpoints visually unified
• [ ] Communication style consistent throughout
• [ ] Brand style guide actively used

Cross-References

• color-theory -- Color psychology and brand color selection
• web-typography -- Font selection as a brand identity element
• images-media -- Image strategy as part of brand identity
• ui-design -- UI design as the visual expression of the brand
• usability -- Usability as a brand promise
• visual-direction -- Visual direction decisions for the brand

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: flitzrrr
• Source: flitzrrr/frontend-design-skills
• License: MIT

Install and usage instructions live in the source repository linked above.