brand-vs-product.md

  1---
  2title: Brand vs product, pick a register
  3tagline: "Two worlds, two sets of defaults. Pick the right one and every command downstream benefits."
  4order: 3
  5description: "Impeccable treats brand work (landing pages, campaigns, portfolios) and product work (app UI, dashboards, tools) as different worlds with different defaults. Learn how to pick a register and how it shapes every command that reads it."
  6---
  7
  8## See the divergence
  9
 10Same element, one register each. A newsletter signup, twice.
 11
 12<div class="docs-viz-hero docs-viz-hero--plain">
 13  <div class="docs-viz-register">
 14    <div class="docs-viz-register-side">
 15      <div class="docs-viz-register-label">
 16        <span class="docs-viz-register-name">Brand</span>
 17        <span class="docs-viz-register-lane">Editorial-magazine</span>
 18      </div>
 19      <div class="docs-viz-register-frame docs-viz-register-frame--brand">
 20        <span class="docs-viz-reg-kicker">No. 04 &nbsp;·&nbsp; Dispatch</span>
 21        <h3 class="docs-viz-reg-title">Letters, occasionally.</h3>
 22        <p class="docs-viz-reg-body">A postcard from the editor, once a month. No tracking pixels, no "just checking in."</p>
 23        <span class="docs-viz-reg-btn">Send me one</span>
 24      </div>
 25      <div class="docs-viz-register-notes">
 26        <span>Serif display, italic display weight</span>
 27        <span>Drenched in the primary hue</span>
 28        <span>Monospaced kicker, editorial voice</span>
 29      </div>
 30    </div>
 31    <div class="docs-viz-register-side">
 32      <div class="docs-viz-register-label">
 33        <span class="docs-viz-register-name">Product</span>
 34        <span class="docs-viz-register-lane">Utility / app shell</span>
 35      </div>
 36      <div class="docs-viz-register-frame docs-viz-register-frame--product">
 37        <span class="docs-viz-reg-kicker">Newsletter</span>
 38        <h3 class="docs-viz-reg-title">Subscribe to updates</h3>
 39        <p class="docs-viz-reg-body">Product changes and release notes, once a month. Unsubscribe at any time.</p>
 40        <span class="docs-viz-reg-btn">Subscribe</span>
 41      </div>
 42      <div class="docs-viz-register-notes">
 43        <span>Neutral sans, semibold for hierarchy</span>
 44        <span>Restrained palette, accent only on state</span>
 45        <span>Short, scannable, mobile-readable copy</span>
 46      </div>
 47    </div>
 48  </div>
 49  <p class="docs-viz-caption">The table below lists what's different. This is what it looks like at the pixel.</p>
 50</div>
 51
 52## Why register matters
 53
 54Every design task belongs to one of two worlds:
 55
 56- **Brand** is where design IS the product. Marketing sites, landing pages, portfolios, long-form content, campaign surfaces. Distinctiveness is the bar. Fonts, motion, density, and color all push toward "this looks like nothing else in the category."
 57- **Product** is where design SERVES the product. App UI, admin, dashboards, tools. Earned familiarity is the bar. Fluent users of Linear, Figma, Notion, Raycast, or Stripe should trust the output on sight.
 58
 59If you ask the same AI to design a dashboard and a campaign page without naming which world, you'll get the average of the two. Brand surfaces will feel too careful. Product surfaces will feel too precious. Register is how Impeccable avoids that.
 60
 61Impeccable tracks register as a single field in `PRODUCT.md`:
 62
 63```markdown
 64## Register
 65
 66product
 67```
 68
 69That is it: a bare value, `brand` or `product`. Every command that does register-sensitive work (`typeset`, `animate`, `colorize`, `layout`, `bolder`, `quieter`, `delight`) loads a different reference file based on what it finds here.
 70
 71## How the two worlds diverge
 72
 73This is not an exhaustive list, the full divergence lives in the `brand.md` and `product.md` reference files, but the shape of the difference:
 74
 75| Dimension | Brand | Product |
 76|---|---|---|
 77| **Type lanes** | Editorial-magazine, luxury, brutalist, consumer-warm, tech-minimal, all available. Swing. | Tighter set: neutral sans + optional mono, sized for dense reading, fluid type reserved for marketing surfaces. |
 78| **Motion** | Choreographed entrances, scroll-driven sequences, decorative moments earn their place. | Restrained. State changes only. Animation serves feedback, not atmosphere. |
 79| **Color** | Full palette, Committed, or Drenched are all on the table. | Restrained by default. Accents carry meaning; color is not decoration. |
 80| **Density** | Whatever the narrative wants. Generous whitespace or packed rule-divided columns both valid. | Comfortable to dense. Every pixel earns its place. |
 81| **References** | Real-world, from the right lane. *Klim specimen pages* or *Broadsheet masthead*, not "modern SaaS". | Category best-tool. *Linear*, *Figma*, *Notion*, *Raycast*, *Stripe*. |
 82
 83The same command, `/impeccable typeset`, pulls from different fonts in the two worlds. The same command, `/impeccable animate`, picks different motion vocabularies. The same command, `/impeccable layout`, assumes different density defaults. You do not re-learn the command: you answer the register question once, and the command adapts.
 84
 85## Step 1. Decide or inherit
 86
 87If you haven't run `/impeccable teach` yet, run it now. The first question is about register:
 88
 89```
 90/impeccable teach
 91```
 92
 93Teach scans your codebase first and forms a hypothesis: routes like `/`, `/pricing`, `/blog`, hero sections, scroll-driven content point toward brand. Routes like `/app`, `/dashboard`, `/settings`, forms and tables point toward product. It leads with the hypothesis rather than starting cold:
 94
 95> From the codebase, this looks like a product surface, does that match your intent, or should we treat it differently?
 96
 97If the project genuinely spans both (a product with a big marketing landing), teach asks which register describes the **primary** surface. Register is per-project, not per-page, but you can override it per task when needed.
 98
 99## Step 2. Verify the register landed
100
101Open `PRODUCT.md` and look for the `## Register` section. It should carry a bare value, not prose:
102
103```markdown
104## Register
105
106brand
107```
108
109If the section is missing (you're on an older `PRODUCT.md` from pre-v3.0), re-run `/impeccable teach`. It will detect the gap and add the field without re-interviewing you on everything else.
110
111## Step 3. Override per task when you need to
112
113Most of the time, register is set once and forgotten. But a product project might occasionally need a single brand surface (a launch landing, an investor one-pager) without flipping the whole project.
114
115You have two options:
116
117- **Name it in the brief.** "`/impeccable craft a launch landing for v2, brand register for this one page.`" The skill honors the override for that task only.
118- **Set a per-surface register.** If the override is lasting, add a short note in `PRODUCT.md` under an explicit section: `## Register overrides: /launch is brand.` Commands that read PRODUCT.md will respect it.
119
120## What to try next
121
122- Run a command that is register-sensitive and watch the divergence: `/impeccable typeset the pricing page` on a product project vs. a brand project will pick different type families, different scale ratios, and different pairings.
123- Pair with [getting started](/tutorials/getting-started) if you haven't installed Impeccable yet.
124- Reach for `/impeccable document` after teach to capture the visual side (colors, components) into DESIGN.md.
125
126## Common issues
127
128- **Register keeps slipping the wrong way.** If you set `product` but commands keep producing brand-feeling output, check that `PRODUCT.md` is at the project root and the `## Register` section has a bare value (no prose, no explanation, just the word). Commands can only read what is there.
129- **The hypothesis teach formed is wrong.** Disagree in the answer. Teach is asking, not telling.
130- **A project is genuinely 50/50.** Pick the primary surface, then use per-task overrides for the minority one. Trying to average the two in PRODUCT.md produces worse output than committing to one.