branding-system-skill

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: branding-system-skill
description: Use when designing or generating any brand identity, website, poster, UI, motion piece, or visual asset for any project. Always activated before any visual output is produced. Reads the brief, moodboard, and brand preferences to develop a coherent visual system first — covering line language, shape grammar, pattern logic, typography, color, spatial rules, and motion. Prevents generic AI aesthetics and enforces studio-level quality.
---


# Branding System Skill 

## Core Philosophy

You are not making something that looks good.
You are constructing a visual language — a system so coherent that someone 
could recognize the brand without seeing the logo. Every output is an 
expression of that system. Surfaces are just proofs.

The standard is: hex.inc, Pentagram, Sagmeister & Walsh.
Not inspiration — the actual bar.

---

## Step 0 — Read Before You Build

Before anything, extract the following from the brief, moodboard, or 
preferences provided:

- What does this brand do, and who is it for?
- What is the emotional register? (austere, playful, technical, human, raw, refined)
- What are the visual references? Study them — what system logic underlies them?
- What surfaces will this live on? (web, print, motion, environmental, all of the above)
- Is there an existing system to extend, or are we starting from zero?
- What should this brand never feel like?

If the brief is incomplete or ambiguous on any of these, ask one focused 
question before proceeding. Never assume. Never fill gaps with generic defaults.

---

## Step 1 — Derive the System from the Brief

The system is not chosen — it is derived. Every decision below must trace 
back to something in the brief. If you cannot justify a choice with the 
brief, it is the wrong choice.

### Line Language
Determined by brand personality and visual references.

Ask: Is this brand precise and constructed, or gestural and alive? Is there 
tension between those two qualities?

- Geometric / architectural: rigid, technical, grid-anchored, blueprint energy
- Organic / gestural: flowing, hand-drawn tension, loose but intentional
- Hybrid: structured skeleton with organic surface — define where each lives

Define:
- Primary stroke weight and whether it varies across hierarchy
- Corner treatment: sharp, rounded, chamfered — and when each applies
- Line behavior: do they connect, interrupt, trail, loop, react?
- What lines are NOT allowed in this system

### Shape Grammar
Build from 2–3 atomic shapes derived from the brand concept.

- What is the origin of the shape? (logotype geometry, industry reference, 
  abstract concept made visual)
- What transformations are allowed? Define rotation, scale, mirror, fragment rules
- How do shapes combine — union, subtraction, overlap with transparency?
- Does the shape system have a modular grid? Define the snap logic.
- Stress test: can this shape work at 16px and at full bleed?

### Pattern Logic
All patterns are generated from the atomic shapes. No stock textures.

- Define the repeat unit and its construction from atomic shapes
- Define spacing rhythm and density range (sparse ↔ dense)
- Two states minimum: resting and activated (scroll, hover, time-based)
- Micro application: texture, background noise, surface grain
- Macro application: hero sections, print backgrounds, environmental graphics
- Define what makes the pattern feel alive vs static

### Typography System
Type is structure, not decoration. Define it like architecture.

Primary typeface — role: display, brand mark, major headlines
Secondary typeface — role: body, UI, supporting text
Tertiary (if needed) — role: code, data, captions

Type ramp — minimum 6 named sizes:
  display / h1 / h2 / h3 / body-lg / body / caption / label

For each size define:
- font-size, line-height, letter-spacing, font-weight
- When to use uppercase, when not to
- Maximum line length (characters)

Rules:
- Hierarchy must hold in single color — size, weight, and spacin