Branding and Visual Identity

Branding is treated as decoration applied at the end. In a crowded category it's a competitive strategy, it's the first thing a customer perceives and the only thing they can judge before they've used anything.

The concept

Brand is not your logo. Brand is what people expect from you before they've experienced you, built from four inputs:

   NAME ──────── what they call you, and can they spell it
   IDENTITY ──── palette, type, imagery, motion — the sensory layer
   VOICE ─────── how you sound; what you refuse to say
   BEHAVIOUR ─── what you actually do (pricing honesty, support, defaults)

The last one dominates over time and the first three dominate at first contact. For a new product with no reputation, the sensory layer is doing almost all the work.

Why identity is strategic, not cosmetic

In an app store, a search results page, or a feed, you are competing for a decision made in about two seconds, on a thumbnail. Two products with identical features and different identities get different conversion rates. That's not vanity, that's the top of your funnel.

The strategic move is usually to look deliberately unlike your category. Every category converges on a visual convention: fintech is navy and gold, wellness is soft gradients and rounded sans, dev tools are dark mode and monospace, AI is purple and gradient-heavy. Convergence happens because it's safe.

For an incumbent, fitting in signals legitimacy. For a new entrant, fitting in is invisibility. Refusing the category convention is the cheapest differentiation available to you, and it costs nothing but nerve.

Naming

Suggestive or abstract is usually right. Descriptive names rank for one keyword and then trap you when the product grows.

Practical checks before you commit, in this order:

1. Say it out loud. Can someone spell it after hearing it once?
2. Domain availability. .com if you can; a good alternative if you can't.
3. Trademark search in your markets, USPTO, EUIPO, UKIPO. This is the check people skip and later regret expensively.
4. App store search, is there a name collision that will bury you?
5. Social handles, consistent across platforms.
6. Unfortunate meanings in other languages.

When your first-choice domain is taken, which is the normal outcome for any good short name, add a word from your product, not a filler. getX, Xapp, tryX are weak and forgettable. A qualifier that carries meaning is stronger than the original: it says something.

The identity system

For a small team, a complete identity is one page:

• Palette: 8-12 colours as tokens. Background, surfaces, one accent, text (primary/muted), semantic (success/warn/error). More than that and you'll drift.
• Type: two families maximum, one display, one body, or one family across multiple weights. Pair on a contrast axis (serif + sans), never two similar sans-serifs.
• Imagery: decide the category of image, not individual images. Photography? Illustration? Public-domain art? Screenshots? Consistency here matters more than quality.
• Motion: duration and easing as a house style. Slow fades or fast springs, pick one and hold it.
• Voice: three adjectives, plus a list of words you never use.

📐 If your identity doesn't fit on one page, it isn't an identity, it's a mood board.

Rights: the part that can end a company

Your identity must be built on assets you have permanent, unambiguous rights to:

• Public domain, safest. Pre-1929 works in the US; museum open-access programmes (the Met, Rijksmuseum, Art Institute of Chicago, National Gallery of Art) explicitly waive claims on reproductions.
• Licensed stock, fine, but terms can change and everyone can buy the same images.
• Commissioned original, you own it; make sure the contract actually says so in writing.
• AI-generated, check your generator's terms; copyright status varies by jurisdiction and is unsettled.
• Someone else's aesthetic, a borrowed style from an anime, a film, or a franchise is an existential risk. A takedown ends the product.

📐 Best practice

Write the identity one-pager before you design screens. Palette, type, imagery rule, motion, voice. Everything downstream gets faster.

Define colours as tokens, day one. Every ad-hoc hex is a crack in the identity.

Deliberately avoid your category's default colour.

Two fonts, not three. Every third font is a decision you'll get wrong.

Warm or cool your neutrals deliberately. Pure white text on a dark background, or pure grey on white, is the tell of an unconsidered palette. Tint neutrals toward your brand hue.

Test your icon at 60×60. It's the only asset seen by 100% of store impressions. If it's illegible small, it's wrong regardless of how it looks in Figma.

Export the full asset set once. App icon (1024), maskable Android icon (66% safe zone), apple-touch-icon, favicon, PWA icons, square social avatar, SVG for web, and an email-safe PNG on a solid background, transparent PNGs composite unpredictably in email clients.

Write down forbidden words. Especially in regulated-adjacent categories, where wording drives store rejection (Chapter 36).

Trademark search before you commit.

💀 Common mistakes

Treating branding as a launch-week task. It's the first thing anyone perceives.

Category-default colours. Fitting in is invisibility for a new entrant.

Palette drift. Random hexes accumulate; the product slowly looks generic.

Three or more fonts.

Pure white on pure black. Harsh, and immediately reads as unconsidered.

An icon designed at 512px and never checked at 60px.

Ignoring maskable Android icons, Android crops to a circle and eats anything near the edge.

Transparent logos in email. They render on unpredictable backgrounds; often black-on-black.

Skipping the trademark search. A rebrand after launch costs your SEO, your app-store reviews, your domain, and your users' recognition.

Building on a borrowed aesthetic. One takedown from over.

Over-designing decoration you can't design. A hand-coded "cinematic" SVG scene looks like a hand-coded SVG scene. Photography or real art with good typography looks premium.

The professional workflow

 1. THREE VOICE WORDS — physical, not abstract
    "warm, mechanical, opinionated" — not "modern, clean, professional"

 2. NAME → say it aloud → domain → ⭐ TRADEMARK SEARCH →
    store collision → handles → other languages

 3. IMAGERY DECISION — which category, and do you have permanent rights?

 4. PALETTE — 8-12 tokens.
    Explicitly reject the category default. Tint neutrals.

 5. TYPE — one display + one body, contrasting. Check licences for
    commercial and app-embedding use.

 6. MOTION — one duration range, one easing. Write it down.

 7. THE ONE-PAGER — palette, type, imagery, motion, voice, forbidden words

 8. ASSET EXPORT — every size, including maskable and email-safe

 9. TEST — icon at 60px · palette contrast (Ch 11) · logo on light,
    dark, and in an email

Tools, websites & costs

Realistic identity cost: $0-100 plus a domain. Constraint produces better results than budget at this stage.

Alternatives & trade-offs

Professional designer vs DIY. A designer costs $2-10k and gives you coherence and speed. DIY with a strong constraint (two free fonts, a tight palette, one imagery rule) gets you 80% there for nothing. Hire when the brand becomes a real asset, not before.

Distinctive vs safe. Distinctive is memorable and polarising; safe is forgettable and inoffensive. For a new entrant with no distribution, memorable beats inoffensive, you cannot be chosen if you're not noticed.

Descriptive vs abstract naming. Descriptive helps early SEO/ASO and caps your future. Abstract needs marketing to give it meaning and never boxes you in.

Illustration vs photography vs art. Illustration is ownable and expensive to keep consistent. Photography is fast and generic unless art-directed. Public-domain art is free, distinctive, and constrains your subject matter.

Rebrand later? Possible but expensive, you lose SEO, store reviews, recognition, and it's a project rather than a task. Get the name and rights right the first time; the palette can evolve.

Checklist

• Three physical voice words written down
• Name passes: spoken · domain · trademark · store collision · handles · other languages
• I have permanent rights to every identity asset
• Palette is 8-12 tokens, defined once
• I have deliberately rejected the category default colour
• Neutrals are tinted, not pure grey/white
• Two fonts maximum, licensed for commercial and embedded use
• Motion style defined and consistent
• Icon tested at 60×60
• Maskable Android icon respects the safe zone
• Email-safe logo on a solid background
• Contrast meets 4.5:1 for body text
• Forbidden words written down
• The whole identity fits on one page

📓 Case Study: an identity as the differentiation

Project: SOLIS, entering a category where the research found every competitor was either anime-skinned ("level up" apps) or minimalist-modern (wellness apps).

The strategic bet, stated in the product plan:

"a distinctive classical aesthetic no competitor has, everyone else is anime; SOLIS is oil paintings and Marcus Aurelius. That's an original, IP-safe identity."

Two separate wins in one sentence, and the second is the one people miss.

Differentiation. In a store listing full of anime characters and soft gradients, a Caravaggio-lit oil painting is instantly distinct. That's top-of-funnel conversion, for free.

IP safety. The competitors built on a borrowed aesthetic carry existential risk, a rights-holder appearing ends the app. Public-domain paintings from museum open-access programmes are permanently, unambiguously free. The research flagged this as a genuine launch-blocker the imitators all shared.

The palette, eight colours doing strategic work:

 --bg      #15100b   deep brown-black       ← candlelit stone, not "dark mode"
 --card    #241b12   surface
 --gold    #d4a24e   the accent
 --gold2   #e8c279   highlight
 --bronze  #a3793a   muted gold
 --crimson #9a4631   sparing; Roman military
 --text    #efe3c8   parchment — NEVER pure white
 --muted   #a8946f

The most consequential decision is the absence of blue. Every wellness competitor is blue or teal. Refusing it is what makes the product unmistakable in a screenshot, and it cost nothing but the decision.

Note --text: #efe3c8 rather than #ffffff. Pure white on dark brown is harsh and instantly reads as a generic dark theme. Warm parchment reads as candlelight. One hex value; large perceptual difference.

Type: two Garamond-family serifs, one display, one body. Serif throughout, in a market of geometric sans-serifs, communicating "this is a book, not a feed" before a word is read.

Total cost of the visual identity: ~$12 (a domain) plus one month of an image generator. Roughly 900 professional-quality images, all rights-clear, permanently.

⚠️ Deviation 1: the trademark search never happened.

The name was checked against domain availability and app-store collisions. There is no record of a USPTO, EUIPO or WIPO search. For a product about to be submitted to a global store under a common Latin word, that's an open risk, and it's a free check.

⚠️ Deviation 2: several screens were hand-drawn in SVG before the constraint was found.

Onboarding screens started as programmatically generated "cinematic" scenes, SVG mountains, sunbursts, decorative laurels. The verdict:

"dont try to make the design yourself, its pretty bad using svg, lets just use an image that is darkened, to match the vibe in the photo i shared"

The fix was to stop drawing and use a darkened public-domain painting with type on top. The commit history reads like a confession, "results, darkened background images instead of SVG-drawn scenes", "time-loss screen, painting with a grey→colour wipe."

📐 The generalisable rule: if you don't have design skill, don't generate decoration, use photography or art. A darkened painting with good typography looks premium. A hand-coded SVG scene looks hand-coded. Constraint beats ambition.

⚠️ Deviation 3: the email logo shipped broken.

The waitlist confirmation email's logo didn't render for recipients. Three causes, all standard: email clients block remote images by default; transparent PNGs composite on unpredictable backgrounds; and the inbox sender avatar isn't controlled by the email at all (it comes from a Gravatar on the sending address, or BIMI).

The asset was designed for the app and shipped to email without an email-safe variant, exactly the export-checklist gap this chapter warns about.

A pattern worth noting: the logo itself went through four attempts, and the winner was the one the founder generated in five minutes and handed over as a file, after rejecting AI-drawn SVG marks. The same pattern as the onboarding screens, real image beat generated vector, twice.

Lessons

1. Identity is competitive strategy for a new entrant. It's what gets you chosen in two seconds on a thumbnail.
2. Refuse the category's default colour. Fitting in is invisibility.
3. Public-domain art from museum open-access programmes is the best free asset class online, and almost nobody uses it.
4. Rights permanence is a business decision. A borrowed aesthetic is a takedown away from over.
5. Never pure white on dark. Warm the text; it's one hex and a large perceptual change.
6. Two fonts, 8-12 colours, one imagery rule. Constraint is what makes non-designers look designed.
7. Don't generate decoration you can't draw. Use real imagery instead.
8. Search trademarks before you commit. It's free, and a post-launch rebrand costs everything you've accumulated.
9. Export the full asset set once, including maskable and email-safe variants. External surfaces mangle what looks perfect in your app.
10. Test the icon at 60px. It's the only asset every impression sees.

Next: Chapter 14: Behavioral Design and Ethics →