brand-design

brand-design acts as Head of Brand: it translates abstract brand language ("we want to feel trustworthy and modern") into a concrete, mathematically-validated, implementation-ready design system, writes creative-brief.md as the source of truth for all UI/UX in the project, and can compile it to framework tokens.

Core principle: Compute, never guess. Every color is derived by formula, every contrast ratio is calculated, every type size comes from a modular scale. "Feel" is the input; math is the output.

When to use itCopy Anchor Link

• Starting a new project that needs a design system defined.
• An existing design system needs refinement (color, type, tone, components).
• UI feels inconsistent with the intended brand identity.
• An agent is about to build UI and there is no design authority to consult.

When not to use it:

• A single component needs building and creative-brief.md already exists: read the brief and build.
• Only the token export broke: the token file is derived output; re-run the export step, not the whole skill.

PrerequisitesCopy Anchor Link

A project with a CSS surface (any .css file, <style> usage, or Tailwind dependency) for token export. Brand answers only the repo cannot supply: name, target user, 3–5 personality adjectives, desired feeling, and platform context.

How to invoke itCopy Anchor Link

/pocketto:brand-design

On Pi: "brand-design", "design system", "creative brief", "set up UI tokens".

How it worksCopy Anchor Link

Mode detection first: no docs/pocket/rule/creative-brief.md → discovery mode (full flow); it exists → refine mode (same confirmation gates, scoped).

1. Brand discovery interview: the project is scanned first (README, manifests, existing tokens), then the brand questions are asked one at a time. Personality and platform questions must be answered before anything downstream, never invented.
2. Semantic translation: adjectives map to concrete parameters via lookup tables (hue families, border-radius ranges, font category, modular-scale ratio by platform, copy tone). Every row cites a rule; conflicting adjectives resolve by stated rules, with the winner and why.
3. Mathematical design: OKLCH color derivation, WCAG relative-luminance and contrast computation, modular type scales. Gate 3: no color pair is exempt: every text/background pair is calculated; below 4.5:1 (normal) or 3:1 (large), lightness auto-adjusts until valid.
4. Atomic states + copy guidelines: the 5-state component template and tone-matched micro-copy from the references.
5. HTML preview: a preview page is generated from the fixed template for your confirmation.
6. Brief written: only after you confirm the preview ("type OK to finalize").
7. Enforcement: the brief is enforced across the project via a project-scoped rule file (.claude/rules/brand-design.md).
8. Token export (optional): Tailwind v4 @theme, Tailwind v3 preset, or plain CSS custom properties, from the fixed mapping.

Outputs and artifactsCopy Anchor Link

• docs/pocket/rule/creative-brief.md: the source of truth for all UI/UX
• creative-brief-preview.html
• .claude/rules/brand-design.md
• Optional generated token file: brand.theme.css / tailwind.brand.preset.js / tokens.css

Approval gates and constraintsCopy Anchor Link

• Gate 1: the interview's required questions are answered before translation, with no assumed brand personality.
• Gate 2: creative-brief.md is written only after the HTML preview is confirmed. Refine mode re-confirms too. It is Gate 2 again, scoped.
• Gate 3: contrast validation cannot be skipped for any pair.
• This is a standalone skill: its deliverable is the brief + enforcement rule, not a pipeline handoff.

ExampleCopy Anchor Link

Illustrative: "professional, trustworthy, for a fintech dashboard" → navy/blue hue family, 4–6px radii, geometric sans, 1.25 modular scale, formal CTA register, every contrast pair computed, preview confirmed, brief written, @theme tokens exported.

Related documentationCopy Anchor Link

• Structured research: validate design assumptions separately
• Standalone skills