Imported from markdavidgan/apple-dev-skills (platforms/claude/skills/app-brand-identity/SKILL.md). Install upstream with npx skills add markdavidgan/apple-dev-skills --skill app-brand-identity. Copyright stays with the author.

App Brand Identity

Create a complete brand identity system for Apple platform apps. Produces a wordmark, app icon, design token foundation, brand voice guidelines, and App Store marketing asset strategy. Use before apple-design — this skill creates the visual system that apple-design implements in SwiftUI.

Embody a product designer at Apple. Your brand will live on the App Store, in the Dock, in Spotlight results, and in screenshots on social media. Every decision must survive at 16×16 (menu bar) and 1280×800 (App Store feature). No generic startup aesthetics. No gradient blobs. No AI-slop.

When to Use

• Starting a new app and need a name, logo, or visual identity
• Renaming or rebranding an existing app
• Designing the app icon (macOS rounded rect, iOS squircle, visionOS layered)
• Choosing typography, color palette, or spacing system
• Building a design token system that bridges marketing site and app code
• Preparing App Store screenshots, preview video storyboards, or feature graphics
• Creating a press kit or maker page

When NOT to Use

• Don't use for pure UI component design — that's apple-design
• Don't use for App Store submission logistics — that's asc-submission
• Don't use for pricing decisions — that's app-store-pricing
• Don't use for architecture diagrams — that's apple-architecture-diagram

The Brand Identity Process

1. Discovery & Constraints

Before designing, lock the constraints:

2. Name & Naming Conventions

Product name rules for Apple platforms:

• Searchable — type it into Spotlight and App Store search; is it unique enough?
• Speakable — can someone say it to Siri and be understood?
• Short — 4–6 characters ideal for menubar/Dock labels; 10+ requires truncation strategy
• No generic descriptors — "Photo Editor Pro" is unbrandable. "Orbit" is ownable.
• Domain check — .app preferred, but not required at launch

Naming convention matrix:

3. Wordmark Design

The Wordmark Hierarchy

Every wordmark decision is a trade-off between distinctiveness and legibility:

Default recommendation for indie Apple apps: System sans (SF Pro) + custom mark. It feels native, performs well at small sizes, and doesn't fight the platform.

Typography Selection

Rules:

• Use SF Pro Display for wordmarks unless you have a specific reason not to
• Use Georgia only when the icon already contains serif elements (creates system harmony)
• Never use SF Pro Text for wordmarks — it's optimized for body copy, not display
• Letter-spacing: tight (-0.02em to -0.04em) for modern feel; normal for classic

The Mark (Punctuation/Icon Element)

The mark is the visual signature that makes the wordmark ownable:

Mark construction rules (from Orbit triangle mark):

• The mark must echo the app icon — every wordmark use reinforces icon recognition
• Position in natural whitespace, never clip or modify letterforms
• Scale proportionally: derive size from font metrics (e.g., fontSize × 0.247)
• Use Canvas API or SVG for precise positioning after document.fonts.ready

Wordmark Exploration Template

When exploring wordmarks, produce 4 directions as self-contained HTML:

<!-- Direction A: System sans, bold, no mark -->
<!-- Direction B: System rounded, medium weight -->
<!-- Direction C: Serif + geometric mark -->
<!-- Direction D: System sans + custom mark (Liquid Glass aesthetic) -->

Each direction must show:

• Large (hero size)
• Medium (nav bar size)
• Small (App Store listing size)
• Dark background
• Light background
• With paid tier variant (+ mark)

4. App Icon Design

Platform Geometry

Anti-patterns:

• Don't design the macOS icon as a perfect square with sharp corners — it looks like a Windows port
• Don't put text inside the icon (except single-letter marks at very large sizes)
• Don't use the full wordmark inside the icon — it becomes illegible at 29×29

Icon Design Principles

1. One idea, instantly readable — The icon should communicate the app's core action at 60×60 (Spotlight) and 1024×1024 (App Store)
2. Bold silhouette — The outer shape should be distinctive even when blurred
3. Material honesty — On macOS 26+/iOS 26+, use Liquid Glass or native materials. On older OS, use flat or subtle gradients.
4. Color discipline — 1–2 colors + neutral. Coral + dark is better than rainbow.

Icon Variations Checklist

AppIcon.appiconset/
  ├─ 16x16@1x.png      (menubar, small)
  ├─ 16x16@2x.png
  ├─ 32x32@1x.png      (Retina menubar)
  ├─ 32x32@2x.png
  ├─ 128x128@1x.png    (Finder)
  ├─ 128x128@2x.png
  ├─ 256x256@1x.png    (Dock default)
  ├─ 256x256@2x.png
  ├─ 512x512@1x.png    (Quick Look)
  ├─ 512x512@2x.png    (App Store)
  └─ 1024x1024@1x.png  (App Store marketing)

Critical: The 16×16 menubar icon is the hardest. Design it first — if it works there, it works everywhere.

iOS/iPadOS/watchOS — ship an "All Sizes" catalog when detail is size-fragile

A single-size iOS app icon (one 1024 master, the "Single Size" appiconset) is a trap for any icon with fine or low-opacity detail. iOS does not just show that 1024 on the Home Screen — it downscales it for Spotlight, Settings, notifications, and the App Store / TestFlight list rows. Thin strokes, soft glows, and trailing/ghost elements (anything below ~10–15% opacity or ~1% of the canvas in stroke width) turn to mud below ~64px, so the icon collapses to a flat colored blob exactly where users see it most. The 1024 looks perfect in review and the small renders silently rot.

The fix is the same per-size discipline macOS and tvOS already require: provide an asset for each size and put bolder, simplified art in the small slots.

AppIcon.appiconset/   (iOS "All Sizes")
  ├─ small-variant art → 20pt, 29pt, 40pt @1x/@2x/@3x   (notification / settings / spotlight)
  └─ master art        → 60pt @2x/@3x (home screen) + 1024 (App Store)

Rules:

• Choose the variant by ROLE, not raw pixel count. Spotlight @3x is 120px yet should still get the small art — a Spotlight icon should read like a Spotlight icon on every device. The ~64px figure is the boundary for standalone renders (favicons, complications), not the per-slot decision inside an app-icon catalog.
• Small art = thicker strokes, dropped faint layers, tightened glow, larger glyph. Author it as a separate vector and rasterize per slot; don't just downscale the master.
• iOS app icons must be opaque (no alpha) or you risk ITMS rejection — flatten onto the ground colour and strip the alpha channel after rasterizing.
• Apple sanctions this: "to show more detail at a larger size, you can provide individual assets for the variations" and "For macOS and tvOS, you need to supply an asset for each size." — Configuring your app icon using an asset catalog.
• watchOS has the same problem, more acutely — the watch face renders the icon tiny and circular. If your iOS catalog needed small art, the watch set does too.

Smell test: if your icon's meaning lives in detail finer than a bold silhouette, a single-size iOS catalog will lose that meaning. Render your master at 40px and 60px before shipping; if it reads as a blob, you need the multi-size catalog.

5. Color System

Primary Palette

Rules:

• Signature color must pass WCAG AA on both canvas colors (4.5:1 for text, 3:1 for UI)
• Never use the signature color for error states — reserve red (#FF453A) for errors
• Dark canvas should be subtly tinted toward the signature (e.g., coral-tinted dark #0E1117), not pure gray

Semantic Colors

// Inherit from Apple semantic colors where possible
let success = Color.green      // #34C759
let warning = Color.orange     // #FF9F0A
let danger = Color.red         // #FF453A

6. Design Token System

Tokens bridge marketing (CSS) and app (SwiftUI):

/* apps/website/src/styles/tokens.css */
@theme {
  --color-primary: #0E1117;
  --color-signature: #FF6B5B;
  --font-display: "SF Pro Display", -apple-system, sans-serif;
  --radius-icon: 22px;
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);
}

// Packages/AppCore/Sources/AppCore/Tokens/AppTokens.swift
public enum AppTokens {
    public static let signature = Color(hex: "#FF6B5B")
    public static let canvasDark = Color(hex: "#0E1117")
    public static let canvasLight = Color(hex: "#F5F5F7")
    public static let radiusIcon: CGFloat = 22
}

Sync rule: When tokens.css changes, update the Swift mirror. Document the dependency in both files.

7. Brand Voice

Voice test: Read your App Store subtitle aloud. If it sounds like it could be from any other app, rewrite it.

8. App Store Marketing Assets

Screenshots Strategy

Screenshot rules:

• Use real app UI — never mockups. The gap between screenshot and reality is a rejection risk.
• Include device chrome for iOS; clean UI for macOS (no window chrome needed)
• Maintain color consistency — all screenshots feel like the same app
• Text overlays are optional; if used, keep under 4 words per slide

App Preview Video (Optional)

• 15–30 seconds
• No audio required (most users watch muted)
• Show the core loop: trigger → action → result
• End on the App Store CTA frame

Press Kit / Maker Note

Single-page markdown:

• One-sentence pitch
• 3 bullet differentiators
• 2–3 screenshot links
• Contact / social links
• "Made by [name]" — personal attribution performs better than anonymous studio

Deliverables Checklist

A complete brand identity handoff includes:

• Name — searchable, speakable, ownable
• Wordmark — 4-direction exploration → 1 approved → dark + light variants
• App Icon — 1024pt master → all platform variations → menubar 16×16 validated
• Color system — signature + canvas + surface + semantic + contrast verification
• Typography — display font, text font, mono font (if needed), weights specified
• Design tokens — CSS file + Swift mirror, synced
• Brand voice — tone attributes, do/don't table, example copy
• App Store screenshots — 6-slot strategy + mock descriptions
• Maker note / press kit — single-page markdown

Integration with Other Skills

Anti-AI-Slop Rules