creative-brief-selector

어떤 스킬인가요?

Produce a creative brief grounded in live reference sites and deliberately distinct from existing demos, for any new brand build. Composes with brand-archetype-system and creative-direction. Use this skill at the start of any brand or microsite build when the result needs to land in a specific aesthetic position and not drift into a default house style. Triggers on creative brief, design brief, build brief, brand direction, where should this brand sit, what should this site look like, reference sites for, archetype for, distinct from our other brands, divergence from prior, not the same as. Also triggers when prior builds have come out as siblings and a systematic divergence approach is needed.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

# creative-brief-selector

The skill is [SKILL.md](SKILL.md). Generated by `scripts/build-tested-on.mjs` from openaddict.com. CI checks it against the site, so edit the script, not this file.

## Tested on OpenAddict

Set up for testing, not yet run. What has been searched and run so far: [openaddict.com/skills/coverage](https://openaddict.com/skills/coverage).

# Overview

The case for the skill, the references model, and the trademark posture.

---

## The problem this skill exists for

Portfolios of brand work drift toward house style. The first demo establishes a default; the second demo borrows it; the third has the same skeleton with a different name. Without a deliberate intervention at brief time, every new build leans on the same palette, the same micro-label tracking, the same hero gradient, the same voice register. The output is competent and sibling.

This pattern is observable in any portfolio that has shipped more than two builds. The symptoms show up at the imagery stage, when a stone-and-amber palette that worked for one shape suddenly reads as the brand's signature across three shapes that should not share a signature. The fix is upstream: pick the position before the build starts, and verify it stays distinct as the build renders.

This skill is the deliberate creative direction at brief time.

---

## The hybrid references model

Two parts:

### The curated bank

Files under `reference-bank/`, one per archetype-and-vertical combination. Each file holds three to six live reference URLs that exemplify the position, each with a one-line why and optional palette or type observations. The bank ships with three seed combinations and grows as new combinations are built against.

The bank is the institutional memory of the portfolio. A new build for an archetype-and-vertical combination that has been done before loads the existing references and adapts. A new build for a sparse combination supplies new references during discovery and commits them back as part of its build PR.

### Per-build discovery

When the bank is sparse for a chosen combination, the build's first pass searches the live web for three to six exemplars. Curation rules are in [`reference-bank/README.md`](reference-bank/README.md). The discovered references serve the current build and seed the bank for future builds in the same combination.

This is not a static reference list. The bank is supposed to drift over time as the portfolio grows; the discipline is that the bank reflects what was actually used in real builds.

---

## The two-direction divergence check

The skill runs divergence twice: once on input, once on output.

### Input-side divergence

Before any references are pulled, the skill loads the shipped-demos signatures file (a project artifact, not part of this skill; see [`04-shipped-demos-signatures-example.md`](04-shipped-demos-signatures-example.md) for the illustrative format). Candidate archetypes are checked against the signatures. If a candidate would land sibling to a shipped demo, it is discarded and the rejection is recorded.

The rejection record is itself useful output: it documents what the build was deliberately NOT.

### Output-side divergence

After the brief is rendered, the skill computes the brief's own signature (archetype, dominant hue family, voice register, primary structural pattern) and compares against the shipped signatures one more time. This catches adaptations that drifted back toward sibling territory during step 4 (the adapt step).

The check produces one of three outcomes: `passed`, `warn-with-reasons`, or `block-with-reasons`. A `block` result means the brief cannot ship in its current form and needs adaptation before the next attempt.

---

## Why two directions

Input-side alone catches the obvious overlaps: picking an archetype that another demo already uses with the same palette family. Output-side catches the subtle drift: an archetype was picked clean of any sibling demo, but during adaptation the palette quietly converged on the recurring house family.

The recurring stone-and-amber family is the worked example of this drift. The first build picked it intentionally; the second build adopted it because it was in the air; the third build adopted it because it felt like the brand. Without an output-side check, the brief itself becomes the carrier of the drift.

---

## Trademark and attribution

This skill follows the `brand-archetype-system` convention. Archetypes are named for aesthetic families ("Premium DTC Maker," "Heritage Local Service") not for brands. Live reference sites are cited as exemplars using nominative attribution language:

- "exemplified by [URL]"
- "characteristic of [URLs]"
- "in the register of [URL]"

This is descriptive and nominative fair use. A reference that pivots its identity does not invalidate the archetype it once exemplified, but it should be removed from the bank when the URL no longer shows what it was cited for.

---

## What this skill is not

- **Not a logo designer.** The brief includes a logo direction note ("type-led wordmark with a saddle-tan rule," "graphic mark in the dawn palette") but does not produce the mark itself.
- **Not an identity system.** The brief is the input to `brand-identity`, which produces the system.
- **Not a finished design.** The brief describes tokens; it does not lay them out into a finished page.
- **Not a positioning exercise.** The business spec is assumed to have positioning already. If positioning is open, run `brand-ideation` first.
- **Not a taste machine.** A user with no taste who runs this still produces incoherent work; the brief just makes the incoherence consistent. Taste is upstream of this skill.

# The five-step process

Each step concrete enough to execute. Run in order. Do not skip the divergence steps.

---

## Inputs

The skill takes a business spec:

- **Name** (the brand name to be used in the brief)
- **Vertical** (e.g. western-boot maker, neighborhood barbershop, balloon-ride operator)
- **Shape** (the site shape: ecommerce-catalog, ecommerce-standout, local-service-booking, hospitality-experience, hospitality-food, institution-mission, inventory-listing, subscription-app, b2b-manufacturer, directory-marketplace)
- **One-line vibe** (a sentence describing what the brand wants to feel like)
- **Shipped-demos signatures file** (optional; the project artifact listing prior builds' signatures)

If the shipped-demos file is absent, the build is the first in the portfolio. Run the divergence steps anyway and seed the signatures file with the rendered brief's signature.

---

## Step 1. Locate the design space

Read the business spec. Pick one to two candidate archetypes from `brand-archetype-system` that fit the vertical and shape.

**How to pick:**

- Read the vertical and shape against the 12 core archetypes. Most verticals have two or three plausible candidates; the shape narrows it.
- A western-boot maker maps plausibly to Luxe Considered (heritage premium), Rugged Utilitarian (workwear and craft), or Editorial Restrained (boutique editorial). The shape (ecommerce-standout, with a small editorial collection) narrows toward Luxe Considered with a Rugged Utilitarian secondary.
- A neighborhood barbershop maps plausibly to Warm Conversational (everyday-craft), Retro Nostalgic (period-specific), or Documentary Honest (real-people-real-work). The shape (local-service-booking, with a booking action) narrows toward Warm Conversational with a Retro Nostalgic secondary.
- A balloon-ride operator maps plausibly to Documentary Honest (landscape-and-light), Luxe Considered (aspirational-experience), or Warm Conversational (small-operator-warm). The shape (hospitality-experience, with a named arc and a booking flow) narrows toward Documentary Honest with a Luxe Considered secondary.

**Output of this step:**

- Primary candidate archetype (name)
- Optional secondary candidate archetype (name) with a note on which leads
- Two-sentence rationale tying each candidate to the vertical and shape

---

## Step 2. Run input-side divergence

Read the shipped-demos signatures file. Compare each candidate against every shipped demo using the rules in [`03-divergence-check.md`](03-divergence-check.md).

**Procedure:**

- For each candidate (primary, then secondary if present):
  - For each shipped demo:
    - If archetype matches AND dominant_hue_family matches => discard the candidate as SIBLING.
    - If archetype matches AND voice_register matches AND primary_structural_pattern matches => discard the candidate as SIBLING.
- If all candidates are discarded, return to step 1 and pick fresh candidates from a different position on the four creative-direction axes.

**Output of this step:**

- The surviving candidate (the chosen archetype)
- A rejection log listing any discarded candidates with the reason (which shipped demo collided and on which fields)

The rejection log is part of the brief output. It documents what the build was deliberately NOT.

---

## Step 3. Pull references

From `reference-bank/`, load the file matching the chosen archetype-and-vertical. Read the positive references and the negative references.

**If the bank has the combination:**

- Pull three to four positive references from the bank's list. Prefer the ones marked as canonical or most-recent.
- Read the negative references; they tell the build what register to avoid.

**If the bank is sparse for the combination:**

- Pull whatever positive references are available (one or two if that is all the bank has).
- Augment with one to two discovered live references that exemplify the position. Search the web for the vertical with the archetype's signal terms (e.g. for Luxe Considered DTC western boots: "premium western boot maker editorial photography prices visible").
- Note the discovered references with the same format as the bank (URL plus one-line why). Add them back to the bank as part of the build PR.

**Output of this step:**

- A list of three to four live reference URLs, each with a one-line why
- A note on which references came from the bank versus which were discovered
- A list of negative references (registers to avoid)

---

## Step 4. Adapt

Take the chosen archetype's defaults from `brand-archetype-system` (palette, type, voice, layout, imagery direction). Shift them toward the business spec's specifics.

**Adaptations to document:**

- **Palette.** Pick 6 to 8 specific hex values that fit the brand. Name each with a token name (e.g. `Bone cream #f5ecd7`, `Saddle tan #a8753a`, `Pre-dawn navy #1a1f3a`). Each token gets a role (page background, primary text, primary CTA, accent, etc.).
- **Type system.** Pick the display family (often a serif from the archetype), the body family (often Inter or similar), and the micro-label treatment (tracking, casing, weight). Document the explicit differentiators from shipped demos (e.g. "tight uppercase tracking 0.04em on micro-labels, distinct from the loose 0.18em tracking the hospitality-experience build uses").
- **Voice.** Pick the voice register (e.g. story-forward third-person; atmospheric second-person; fitment-first technical). Write five to ten voice samples in this voice using the brand name.
- **Layout.** Pick the structural pattern (e.g. shoppable-grid-product-forward; arc-timeline-hero; fitment-selector-then-rails). Describe the spine moves the homepage will run (four to six numbered moves).
- **Section shapes.** Pick a `hero_shape` and a `footer_shape` from the vocabulary in [`05-section-shapes-vocabulary.md`](05-section-shapes-vocabulary.md). The hero shape carries the most visual weight on the page; pick it deliberately based on archetype, audience, and the shapes already shipped in the portfolio. Document the rejected shapes in the brief with one-line reasons. Skipping this step means the engine inherits the most recently built hero shape regardless of brief specification, which is the drift signal this skill exists to catch.
- **CTA grammar.** Pick the verb register (e.g. "Shop the collection," "Book a dawn," "See the morning"). Verb-first, shape-appropriate.
- **Imagery direction.** Describe the shoot's register (e.g. "warm-bone studio seamless, three-quarter angle, soft overhead, products fill 70 percent of frame"). Specify aspect ratios per page slot.

**Each adaptation choice gets a sentence of why.** The brief is a referenceable artifact; it should explain itself.

**Output of this step:**

- The full adaptation set, ready to render into the brief template.

---

## Step 5. Render and verify

Render the brief using the template in [`02-brief-template.md`](02-brief-template.md).

After rendering, compute the brief's own signature and run output-side divergence:

- `archetype`: the chosen archetype (from step 1)
- `dominant_hue_family`: derived from the palette tokens
- `voice_register`: from the voice section
- `primary_structural_pattern`: from the spine moves
- `hero_shape`: from the section-shapes choice in step 4
- `footer_shape`: from the section-shapes choice in step 4

Compare this signature against every shipped demo using the full rule set in [`03-divergence-check.md`](03-divergence-check.md). The check now runs seven rules: the original three pairwise rules (archetype/hue, archetype/voice/pattern, recurring hue across archetypes) plus the three aggregate shape rules (hero shape collision warn at two matches, hero shape archetype-collision block at three matches with shared family, footer shape warn at three matches).

**Possible outcomes:**

- **passed.** No overlaps. The brief is ready to hand off.
- **warn-with-reasons.** The brief shares a single field (most commonly dominant_hue_family) with a shipped demo, but not enough to be sibling. Surface the warn with the matched fields so the consumer can make a deliberate call.
- **block-with-reasons.** The brief is sibling to a shipped demo. Return to step 4 and adapt further before re-rendering. Common fixes: swap the dominant accent colour, restructure one of the spine moves, shift the voice register.

**Output of this step:**

- The rendered brief
- The references list (from step 3)
- The divergence-check result with all matched fields if any
- A one-line summary suitable for the build PR's description

---

## Failure modes

- **Skipping step 2.** Picking the archetype that "feels right" without checking against shipped demos is how the portfolio drifts toward house style.
- **Skipping step 5.** Adapting in step 4 without re-checking on output is how the brief itself becomes the carrier of drift.
- **Verbatim copying from the archetype's default palette.** The archetypes provide anchor points, not endpoints. If the brief's palette is the archetype's palette unchanged, the brief is the archetype, not a build.
- **Citing references without why-lines.** A reference URL without a one-line why is decoration. The why is what makes the reference usable in step 4.
- **Hand-waving the divergence check.** The check is not a vibe call. It is a mechanical comparison against the schema. If it produces a block, the adaptation is incomplete.
- **Treating the rejection log as overhead.** The rejection log is part of the deliverable. It tells the next build what is already taken.

# The brief template

A fillable markdown skeleton. Fill every section. A section left blank is a section the build will fill with the house default, which is exactly the drift this skill exists to prevent.

The template is modeled on the structure proven by real shipped builds. The worked example link at the bottom of this file shows the structure rendered against a real build.

---

## Template

```markdown
# Creative direction: <Brand Name> as <archetype position>

A reusable brief for the <Brand Name> build. <One-sentence purpose: what shape is this, what position is this, why this brief>.

Use this brief for:

- <Specific use case 1>
- <Specific use case 2>

Do NOT use this brief for:

- <Adjacent shape that should NOT use this brief>
- <Adjacent position that should NOT use this brief>

## The <N> spine moves

1. **<Move 1 name>.** <One paragraph describing the move, specific to the shape>.
2. **<Move 2 name>.** <One paragraph>.
3. **<Move 3 name>.** <One paragraph>.
4. **<Move 4 name>.** <One paragraph>.
<continue 5, 6 if the shape calls for them>

## Register

- **Positive reference frame**: <one sentence describing what the brand IS, with named exemplars in nominative attribution>
- **Negative reference frame**: <one sentence describing what the brand is NOT, with named non-exemplars>

## Live reference sites

The references this brief draws from. Each is a real site exemplifying the chosen position.

- [<URL 1>] - <one-line why; what specifically this site does that the brief inherits>
- [<URL 2>] - <one-line why>
- [<URL 3>] - <one-line why>
- [<URL 4>] - <one-line why, optional>

Negative references (do NOT pull from):

- [<URL>] - <one-line why this register is the wrong one>

## Section shapes (hero and footer; first-class brief outputs)

Pick a `hero_shape` and a `footer_shape` from [`05-section-shapes-vocabulary.md`](05-section-shapes-vocabulary.md). Document the choice with rationale; the choice is not optional and a brief without these fields does not pass the divergence check.

### `hero_shape`: <chosen shape label, e.g. `wide-photograph-with-band-below`>

<One paragraph: why this shape, what the chosen shape signals to the visitor that the alternatives do not, what shapes were rejected and why. Reference the section-shapes vocabulary by label.>

Rejected shapes:

- `<rejected shape 1>` - <one-line why this shape was wrong for this brief>
- `<rejected shape 2>` - <one-line why this shape was wrong for this brief>

### `footer_shape`: <chosen shape label, e.g. `single-line-strip`>

<One paragraph: why this footer shape, what it does for the page that alternatives do not.>

Rejected shapes:

- `<rejected shape>` - <one-line why>

## Palette token shape (specific to this brand; do not reuse across brands)

| Token | Hex | Role |
|---|---|---|
| <Token 1 name> | `#hex` | <Role> |
| <Token 2 name> | `#hex` | <Role> |
| <Token 3 name> | `#hex` | <Role> |
| <Token 4 name> | `#hex` | <Role> |
| <Token 5 name> | `#hex` | <Role> |
| <Token 6 name> | `#hex` | <Role> |
| <Token 7 name> | `#hex` | <Role, optional> |
| <Token 8 name> | `#hex` | <Role, optional> |

Do NOT re-use <named hue family from a shipped demo, e.g. "stone-50 + amber-300 (the hospitality-experience default from the X build)">.

## Type system

- **Display.** <Family choice with stack notation>, <weight>, <tracking>.
- **Body.** <Family choice>, <weight>.
- **Brand wordmark.** <Family, case, tracking>. Distinct from <named shipped demo's wordmark treatment, e.g. "the loose 0.22em tracking used on the hospitality build">.
- **Micro-labels.** <Family, case, tracking>. <One-line on the explicit differentiator from shipped demos>.
- **Numerics.** <Family, tabular-nums or proportional, treatment for prices>.

## CTA grammar

- **Primary on home.** "<Verb-first label>". <One-line on why this verb>.
- **Secondary on home.** "<Verb-first label>". <One-line on why this verb>.
- **On product or detail page.** "<Label>". Verb-shape-appropriate.
- **On craft or about page.** "<Label>". Should close back to the primary action.

## Image-ready spine

The structure must be image-ready before any imagery pass runs. Per page slot:

| Page | Aspect | Count | Source |
|---|---|---|---|
| <Page slot 1> | <e.g. 5:6 portrait> | 1 | <e.g. the signature product> |
| <Page slot 2> | <e.g. 4:5 portrait> | <e.g. one per product> | <e.g. each product, on its own card> |
| <Page slot 3> | <e.g. 16:9 wide> | 1 | <e.g. one lifestyle scene supporting the craft band> |
| <continue for every page> | | | |

Each slot uses a placeholder during Phase A and is filled by the imagery pass in Phase B. Placeholders carry the alt text the final image will carry, so the swap is structurally drop-in.

## Voice samples

Five to ten lines in the brand's voice, used downstream by content-and-copy and landing-page-copy.

- <Sample 1>
- <Sample 2>
- <Sample 3>
- <Sample 4>
- <Sample 5>
- <Sample 6, optional>
- <Sample 7, optional>

## Honesty contract (unchanging across the portfolio)

- <Functional element, e.g. cart, booking form> is real client-side, <demo surface, e.g. checkout, payment> is a clearly labelled demo that processes nothing.
- Fictitious brand disclosure in the footer and in any JSON-LD `description` field.
- Demo-only labelling on any demo surface in the brand's primary accent colour.
- All prices and figures fictitious. No promotional cadence, no fabricated reviews, no fabricated press quotes.
- No real brand mark. The logo pass, if any, is a separate later run.

## Acceptance checklist (Phase A criteria)

A build matches this brief if:

- [ ] <Move 1 acceptance criterion>
- [ ] <Move 2 acceptance criterion>
- [ ] <Move 3 acceptance criterion>
- [ ] <Move 4 acceptance criterion>
- [ ] Palette is documentable as <N> tokens, distinct from any shipped demo's tokens.
- [ ] Type micro-labels have a distinct treatment from <named shipped demo's treatment>.
- [ ] Per-page image slots are wired with descriptive alt text, ready for a Phase B drop-in.
- [ ] Honesty contract intact.

## Divergence-check result

- **Archetype**: <chosen archetype name from brand-archetype-system>
- **Dominant hue family**: <derived from palette, e.g. "leather-bone-saddle">
- **Voice register**: <e.g. "story-forward third-person">
- **Primary structural pattern**: <e.g. "shoppable-grid-product-forward">
- **Hero shape**: <chosen label from 05-section-shapes-vocabulary.md>
- **Footer shape**: <chosen label from 05-section-shapes-vocabulary.md>

**Input-side divergence**: <passed | warn-with-reasons | block-with-reasons>. <If anything was rejected at step 2, list it here: rejected <archetype> because it collided with <shipped demo slug> on <field>>.

**Output-side divergence**: <passed | warn-with-reasons | block-with-reasons>. <If warn or block, list the matched fields and the colliding demo. Rules 4 and 6 surface as warns; Rule 5 surfaces as a block; Rules 1, 2, 3 surface per their definitions in 03-divergence-check.md.>

---
```

---

## Worked example

The Pinto Mesa Boots store-spine brief at `rampstackco-app/progress/ecommerce-standout-store-spine-brief.md` is a faithful render of this template against a real shipped build (ecommerce-standout shape; Luxe Considered with Rugged Utilitarian influence). It demonstrates:

- The five spine moves (product-forward hero, shoppable grid, honest wayfinding, craft as supporting band, premium trust signals).
- The leather-forward palette with explicit do-not-reuse against the prior hospitality build's stone-and-amber.
- The type differentiation (tight uppercase microlabel tracking, distinct from the prior hospitality build's loose tracking).
- The image-ready spine with per-page aspect / count / source.
- The acceptance checklist as Phase-A criteria.

Use the worked example as a structural reference when rendering new briefs.

---

## Common section failures

- **Skipping the "Do NOT use this brief for" section.** The negative-use section is what keeps the brief from being mis-applied to an adjacent shape.
- **Spine moves that are abstract.** "Lead with the product" is not a spine move. "Lead with the signature product shown large at 5:6 with one primary CTA and price-forward entry" is.
- **Palette without explicit do-not-reuse lines.** The do-not-reuse line is what makes the divergence check checkable.
- **Type system without the explicit differentiator from shipped demos.** This is the single field most likely to drift if not pinned.
- **CTA grammar in mood words.** "Welcoming" is not CTA grammar. "Shop the collection" is.
- **Image-ready spine without aspect ratios.** Without the aspect ratios the imagery pass cannot generate to the right shape.
- **Honesty contract treated as boilerplate.** The contract is part of what makes the brand demo-honest; cut and paste it but verify each line still applies to the specific build.
- **Acceptance checklist as motivational language.** The checklist is the build's pass/fail criteria, not a vibe statement.

# The divergence check

The signature schema, the overlap rules, and the comparison procedure.

---

## Signature schema

Each shipped demo carries a signature with seven fields. The schema is small on purpose: any field that takes judgment to populate gets argued about; a small mechanical schema gets used.

```yaml
- slug: <kebab-case slug, e.g. pinto-mesa-boots>
  archetype: <canonical archetype name from brand-archetype-system, e.g. luxe-considered>
  dominant_hue_family: <named hue family, e.g. leather-bone-saddle>
  voice_register: <named register, e.g. story-forward-third-person>
  primary_structural_pattern: <named pattern, e.g. shoppable-grid-product-forward>
  hero_shape: <named shape from 05-section-shapes-vocabulary.md, e.g. dual-column-image-and-text>
  footer_shape: <named shape from 05-section-shapes-vocabulary.md, e.g. single-line-strip>
```

The last two fields (`hero_shape` and `footer_shape`) are the latest schema additions. The canonical vocabulary for both lives in [`05-section-shapes-vocabulary.md`](05-section-shapes-vocabulary.md).

### slug

The kebab-case slug for the shipped build. Used to identify the demo in rejection logs and warn or block reasons.

### archetype

The canonical archetype name from `brand-archetype-system`. Use the file slug from `references/core-archetypes/` (e.g. `luxe-considered`, `documentary-honest`, `warm-conversational`). If the demo composes two archetypes, record both as a hyphenated pair with the lead first (e.g. `luxe-considered-rugged-utilitarian`).

### dominant_hue_family

The recognizable colour family the demo reads as, in three to four words. Examples:

- `leather-bone-saddle` (Pinto Mesa Boots v2)
- `dawn-navy-coral` (Drift & Dawn after the dawn retune)
- `dark-linen-amber` (Pho Heights)
- `warm-walnut-brass` (Iron & Rye)
- `forest-green-cream` (Clearflow Initiative)
- `slate-and-amber` (the original Drift & Dawn pre-retune, kept for historical reference)
- `stone-and-amber` (the recurring family the imagery passes surfaced as the drift signal)

The naming convention: two to four colour terms separated by hyphens, lowercase. The terms should be specific enough that two demos with materially different palettes get different families even if they share an undertone.

### voice_register

The brand's voice in three to four words. Examples:

- `story-forward-third-person`
- `atmospheric-second-person`
- `fitment-first-technical`
- `evidence-and-mission-first`
- `restrained-citation-bearing`
- `warm-everyday-craft`

The naming convention: hyphenated phrase that names the register the voice samples in the brief operate in.

### primary_structural_pattern

The structural pattern the homepage runs, in three to five words. Examples:

- `shoppable-grid-product-forward`
- `arc-timeline-hero-with-packages-strip`
- `fitment-selector-then-rails`
- `editorial-hero-then-courses-grid`
- `barber-roster-then-services-menu`
- `theory-of-change-hero-then-evidence-band`

The naming convention: name the homepage's primary spine in a way another build can recognize from the rendered page.

### hero_shape

The shape of the hero section, drawn from the vocabulary in [`05-section-shapes-vocabulary.md`](05-section-shapes-vocabulary.md). Examples:

- `dual-column-image-and-text`
- `wide-photograph-with-band-below`
- `full-bleed-image-with-overlay`
- `type-led-prose`
- `centered-single-column`
- `asymmetric-large-image-small-text`
- `grid-of-elements`
- `data-table-or-spec-led`

A build that needs a shape not in the vocabulary documents and proposes a new label per the extension procedure in `05-section-shapes-vocabulary.md`.

### footer_shape

The shape of the footer section, drawn from the vocabulary in [`05-section-shapes-vocabulary.md`](05-section-shapes-vocabulary.md). Examples:

- `single-line-strip`
- `multi-column-sitemap`
- `type-only-no-links`
- `editorial-colophon-with-masthead`
- `newsletter-band-with-credits`
- `dark-cta-then-credits`

---

## Overlap rules

The comparison is mechanical. The skill applies these rules in order; the first rule that fires determines the outcome for that pair.

### Rule 1: Same archetype + same dominant_hue_family

If two demos share `archetype` AND share `dominant_hue_family`, they are **SIBLING (block)**.

Two demos in the same archetype with the same hue family will read as the same brand at a glance. The block forces an adaptation in either archetype or palette before the brief can ship.

### Rule 2: Same archetype + same voice_register + same primary_structural_pattern

If two demos share `archetype` AND share `voice_register` AND share `primary_structural_pattern`, they are **SIBLING (block)**.

This catches the case where the palettes diverge but the underlying skeleton is identical. The build will look different on first glance and identical on the second.

### Rule 3: Same dominant_hue_family across different archetypes

If two demos share `dominant_hue_family` but their `archetype` differs, the outcome is **WARN**.

A recurring hue family across different archetypes is the most common drift signal in a portfolio. The warn surfaces the recurrence so the consumer can choose to break the pattern or accept it as the portfolio's signature.

### Rule 4: Hero shape collision (warn)

If the candidate's proposed `hero_shape` matches the `hero_shape` of two or more shipped demos, the outcome is **WARN**.

The warn surfaces a deliberation note listing every shipped demo using the same shape. The brief author either justifies the repeat (and records that justification in the brief's section-shapes rationale) or picks a different shape from the vocabulary. Two demos sharing a hero shape is acceptable for a portfolio of nine to twelve demos; three or more is the point where the shape starts reading as the engine's house default.

### Rule 5: Hero shape archetype-collision (block)

If the candidate's proposed `hero_shape` matches the `hero_shape` of three or more shipped demos AND any of those matching demos share an archetype family with the proposed brief, the outcome is **BLOCK**.

This catches the case where the brief is heading toward the strongest sibling result possible: the same hero shape AND a related archetype. The block forces the brief to choose differently on at least one dimension (a different hero shape, or a different archetype lead, or a documented justification that escalates to the deliberation notes with explicit reasoning).

Archetype-family overlap is computed by comparing the lead archetype tokens. Composed archetypes share a family if either of their tokens matches. For example, `editorial-restrained` and `editorial-restrained-documentary-honest` share the `editorial-restrained` family; `documentary-honest-luxe-considered` and `rugged-utilitarian-documentary-honest` share the `documentary-honest` family.

### Rule 6: Footer shape collision (warn)

If the candidate's proposed `footer_shape` matches the `footer_shape` of three or more shipped demos, the outcome is **WARN**.

Footers tolerate more repetition than heroes since they carry less visual weight and are more functional than expressive. The threshold (three matching demos for a warn, not two) is correspondingly higher. There is no block-level rule for footer shapes at this scope; if a portfolio-wide footer shape emerges as the house default, it becomes part of the portfolio's signature rather than a per-build distinctness failure.

### Rule 7: Anything else

If no rule above fires, the outcome is **PASSED**.

---

## Why shapes carry weight

Heroes carry the most visual weight on a page and the most signal to the visitor. Hero-shape repetition across a portfolio compresses the perceived distance between builds even when palette, voice, and structural pattern diverge. The early showcase portfolio surfaced this drift signal: most builds shipped a `dual-column-image-and-text` or `full-bleed-image-with-overlay` hero regardless of brief specification, because the engine pattern-matched the most recently built shape.

Footers carry less weight and are typically more functional than expressive. They tolerate more repetition before the repetition becomes a distinctness cost.

Rules 4, 5, and 6 exist to make hero-shape and footer-shape choice an explicit selection at brief time rather than an implicit inheritance from the most recently built demo.

---

## Comparison procedure

```
# Pairwise rules (run on every candidate-shipped pair):
for candidate in candidates:
  for shipped in shipped_demos:
    if rule_1(candidate, shipped):
      record_block(candidate, shipped, fields=['archetype', 'dominant_hue_family'])
      continue
    if rule_2(candidate, shipped):
      record_block(candidate, shipped, fields=['archetype', 'voice_register', 'primary_structural_pattern'])
      continue
    if rule_3(candidate, shipped):
      record_warn(candidate, shipped, fields=['dominant_hue_family'])
      continue

# Aggregate rules (run once per candidate against the full set):
for candidate in candidates:
  hero_matches = [s for s in shipped_demos if s.hero_shape == candidate.hero_shape]
  if len(hero_matches) >= 3 and any(shares_archetype_family(candidate, s) for s in hero_matches):
    record_block(candidate, hero_matches, fields=['hero_shape', 'archetype'])  # rule 5
  elif len(hero_matches) >= 2:
    record_warn(candidate, hero_matches, fields=['hero_shape'])  # rule 4

  footer_matches = [s for s in shipped_demos if s.footer_shape == candidate.footer_shape]
  if len(footer_matches) >= 3:
    record_warn(candidate, footer_matches, fields=['footer_shape'])  # rule 6
```

The check produces three lists: blocks, warns, and a passed flag (true iff blocks and warns are both empty).

### Input-side outcome

- If any block was recorded against the primary candidate, discard it. If the secondary candidate also blocks, return to step 1 and pick fresh candidates.
- Warns at input-side are surfaced in the rejection log but do not discard the candidate.

### Output-side outcome

After the brief is rendered, the brief's own signature is checked against every shipped demo using the same rules. The outcome is one of:

- **passed**: no blocks, no warns. The brief is ready to hand off.
- **warn-with-reasons**: warns only. The brief shares a single field (most commonly `dominant_hue_family`) with a shipped demo. Surface the warn with the matched fields so the consumer can make a deliberate call.
- **block-with-reasons**: at least one block. The brief is sibling to a shipped demo. Return to step 4 of the process and adapt further before re-rendering.

---

## What changes a block to a warn or a pass

Concretely:

- **Shift the dominant_hue_family.** Swap the dominant accent colour, change the page background's temperature, or change the accent colour family (saddle to oxblood to navy). Recompute the family.
- **Shift the primary_structural_pattern.** Change which move leads the page. A "product-forward" pattern becomes "story-forward" by reordering the spine moves. Recompute the pattern.
- **Shift the voice_register.** Change the voice from third-person to second-person, or from atmospheric to technical. Recompute the register.
- **Compose a different archetype pair.** If the chosen archetype is locked, change the secondary archetype to shift the brief's centre of mass.

Each adaptation should be a deliberate choice, recorded in the brief's adaptation notes (step 4 of the process).

---

## The signatures file

The signatures file is a project artifact, not part of this skill. The consuming project maintains it (typically as `progress/shipped-demos-signatures.yml` or similar). The illustrative format is in [`04-shipped-demos-signatures-example.md`](04-shipped-demos-signatures-example.md).

Whenever a new build ships, append its signature to the file. The signatures grow with the portfolio; the divergence check stays current.

---

## Failure modes

- **Filling fields with vibe words.** "vibrant-modern" is not a hue family; "saddle-bone-walnut" is. The schema works because the field values are specific. Vague values produce vague checks.
- **Re-using the same family across builds without recomputing.** When a build's palette shifts during step 4, the dominant_hue_family must shift with it. A stale signature is worse than a missing signature.
- **Treating warns as ignorable.** A warn is the portfolio's drift early-warning. Three consecutive warns on the same hue family is the portfolio adopting a house signature, which is the failure mode this skill exists to prevent.
- **Hand-waving the rules.** The rules are mechanical. If a candidate blocks under rule 1, it blocks; the answer is to adapt, not to argue with the rule.

# Shipped-demos signatures: worked example

An illustrative signatures file with seven worked entries. This file is example-only; the live signatures file for any consuming project lives in that project (typically at `progress/shipped-demos-signatures.yml`), not in this skill.

The schema is defined in [`03-divergence-check.md`](03-divergence-check.md). Each entry has seven fields: `slug`, `archetype`, `dominant_hue_family`, `voice_register`, `primary_structural_pattern`, `hero_shape`, `footer_shape`. The last two (`hero_shape`, `footer_shape`) are the latest additions; their canonical vocabulary lives in [`05-section-shapes-vocabulary.md`](05-section-shapes-vocabulary.md).

The seven entries below are illustrative records of seven sibling-shape demos a portfolio might ship. They are written here as a worked example of what the file looks like in practice. The archetype values reference the canonical names from `brand-archetype-system`.

---

## Example signatures

```yaml
demos:
  - slug: fitfirst-parts
    archetype: technical-precise
    dominant_hue_family: slate-and-amber
    voice_register: fitment-first-technical
    primary_structural_pattern: fitment-selector-then-rails
    hero_shape: dual-column-image-and-text
    footer_shape: multi-column-sitemap

  - slug: iron-and-rye-barbershop
    archetype: warm-conversational-retro-nostalgic
    dominant_hue_family: warm-walnut-brass
    voice_register: warm-everyday-craft
    primary_structural_pattern: barber-roster-then-services-menu
    hero_shape: dual-column-image-and-text
    footer_shape: single-line-strip

  - slug: pho-heights
    archetype: documentary-honest-luxe-considered
    dominant_hue_family: dark-linen-amber
    voice_register: chef-essay-first-person
    primary_structural_pattern: editorial-hero-then-signatures-menu
    hero_shape: full-bleed-image-with-overlay
    footer_shape: single-line-strip

  - slug: volta-robotics
    archetype: technical-precise
    dominant_hue_family: graphite-and-signal-orange
    voice_register: spec-forward-technical
    primary_structural_pattern: product-strip-then-spec-table
    hero_shape: full-bleed-image-with-overlay
    footer_shape: single-line-strip

  - slug: clearflow-initiative
    archetype: editorial-restrained
    dominant_hue_family: forest-green-cream
    voice_register: restrained-citation-bearing
    primary_structural_pattern: theory-of-change-hero-then-evidence-band
    hero_shape: full-bleed-image-with-overlay
    footer_shape: single-line-strip

  - slug: pinto-mesa-boots
    archetype: luxe-considered-rugged-utilitarian
    dominant_hue_family: leather-bone-saddle
    voice_register: story-forward-third-person
    primary_structural_pattern: shoppable-grid-product-forward
    hero_shape: dual-column-image-and-text
    footer_shape: single-line-strip

  - slug: drift-and-dawn
    archetype: documentary-honest-luxe-considered
    dominant_hue_family: dawn-navy-coral
    voice_register: atmospheric-second-person
    primary_structural_pattern: arc-timeline-hero-with-packages-strip
    hero_shape: full-bleed-image-with-overlay
    footer_shape: single-line-strip
```

---

## Why each field is what it is

### fitfirst-parts (ecommerce-catalog)

- **archetype**: `technical-precise`. The build leads with a YMM (year-make-model) fitment selector. Grids, monospace numerics, system-feeling.
- **dominant_hue_family**: `slate-and-amber`. Cool slate ground with warm amber accents on safety and action surfaces.
- **voice_register**: `fitment-first-technical`. The voice asks "does it fit your vehicle" before anything else.
- **primary_structural_pattern**: `fitment-selector-then-rails`. The home leads with the selector, then rails of parts filtered by the confirmed vehicle.

### iron-and-rye-barbershop (local-service-booking)

- **archetype**: `warm-conversational-retro-nostalgic`. Heritage barbershop register; walnut and brass; period-specific cues.
- **dominant_hue_family**: `warm-walnut-brass`. Walnut wood and brass hardware are the recognizable palette.
- **voice_register**: `warm-everyday-craft`. The voice is the shop talking about its work in plain terms.
- **primary_structural_pattern**: `barber-roster-then-services-menu`. Roster (initials) leads, services menu follows, atmosphere gallery threads the page.

### pho-heights (hospitality-food)

- **archetype**: `documentary-honest-luxe-considered`. Dark linen photography, real-food register, premium restraint.
- **dominant_hue_family**: `dark-linen-amber`. Dark linen background dominates; amber surfaces as the accent.
- **voice_register**: `chef-essay-first-person`. The chef-partner essay is the page's voice.
- **primary_structural_pattern**: `editorial-hero-then-signatures-menu`. Edge-to-edge hero, chef essay, signatures section with image-led cards.

### volta-robotics (b2b-manufacturer)

- **archetype**: `technical-precise`. Industrial spec-table register. Same archetype as fitfirst-parts but a different hue family and a different structural pattern (so rule 1 does not fire on this pair).
- **dominant_hue_family**: `graphite-and-signal-orange`. Industrial graphite with hazard-orange accents on action surfaces.
- **voice_register**: `spec-forward-technical`. Specs lead, narrative supports.
- **primary_structural_pattern**: `product-strip-then-spec-table`. Product strip up top, deep spec tables follow.

### clearflow-initiative (institution-mission)

- **archetype**: `editorial-restrained`. Counsel-restrained register; numbers before adjectives; citation-bearing voice.
- **dominant_hue_family**: `forest-green-cream`. Deep forest green sections with warm cream surfaces.
- **voice_register**: `restrained-citation-bearing`. Third-person about the org, low-register confidence, numbers leading.
- **primary_structural_pattern**: `theory-of-change-hero-then-evidence-band`. Theory of change in the hero, evidence band (lives reached, water systems built) follows.

### pinto-mesa-boots (ecommerce-standout)

- **archetype**: `luxe-considered-rugged-utilitarian`. Premium DTC maker register with workwear and craft secondary.
- **dominant_hue_family**: `leather-bone-saddle`. Bone cream ground with saddle tan and walnut accents; oxblood as the demo-only chip.
- **voice_register**: `story-forward-third-person`. The brand talks about itself in the third person, with material before adjectives.
- **primary_structural_pattern**: `shoppable-grid-product-forward`. Product-forward hero, six-boot shoppable grid on the home, by-last wayfinding.

### drift-and-dawn (hospitality-experience)

- **archetype**: `documentary-honest-luxe-considered`. Photography-led, atmospheric, aspirational. Same composed archetype as pho-heights but a different vertical and a different hue family (so rule 1 does not fire on this pair).
- **dominant_hue_family**: `dawn-navy-coral`. Pre-dawn navy with coral and pale-gold accents, deliberately distinct from the hospitality-experience stone-and-amber default the original build used.
- **voice_register**: `atmospheric-second-person`. The brand walks the visitor through the morning in second person.
- **primary_structural_pattern**: `arc-timeline-hero-with-packages-strip`. Hero with arc preview, packages strip with named prices, six-moment timeline on the experience page.

---

## What this example exercises

The seven entries are constructed to exercise the divergence rules:

- **Rule 1 not firing**: `fitfirst-parts` and `volta-robotics` share `archetype: technical-precise` but differ on `dominant_hue_family` (`slate-and-amber` vs `graphite-and-signal-orange`). No block.
- **Rule 1 not firing**: `pho-heights` and `drift-and-dawn` share `archetype: documentary-honest-luxe-considered` but differ on `dominant_hue_family` (`dark-linen-amber` vs `dawn-navy-coral`). No block. The deliberate retune from the original `slate-and-amber` to `dawn-navy-coral` is what kept this pair from blocking.
- **Rule 3 historical case**: the original `drift-and-dawn` (pre-retune, hue family `slate-and-amber`) would have triggered rule 3 against `fitfirst-parts` (also `slate-and-amber`) across different archetypes. The retune resolved the recurring family.

---

## How to use this example

Copy the YAML block to a `progress/shipped-demos-signatures.yml` file in the consuming project. Edit the entries to match the actual shipped builds. Append new entries as builds ship. The divergence check in [`03-divergence-check.md`](03-divergence-check.md) reads from this file.

This file is example-only. The skill does not parse this example file at runtime; it parses the consuming project's signatures file. The example exists to show what the file should look like.

# Section shapes vocabulary

A canonical, open vocabulary of section shapes the brief picks from for the hero and footer sections (with optional later extension to trust-strip, CTA-close, and how-it-works sections). The vocabulary is a starting point, not a closed enum. Builds can document and propose a new shape if none of the listed labels fits.

Section shapes are first-class brief outputs. The brief picks a shape per section explicitly and records the rationale next to palette and voice rationale. Two new fields per signature record (`hero_shape` and `footer_shape`) let the divergence check fire against shape collision across shipped demos.

The divergence rules for shapes are in [`03-divergence-check.md`](03-divergence-check.md) (Rules 4, 5, 6).

---

## Hero shapes (open list, starting set)

### `dual-column-image-and-text`

Image on one side of the hero, heading and lede and CTAs on the other. CSS grid with two columns (often around 1.1fr / 1fr). The engine's house default and the shape most prone to overuse in a portfolio that grows without explicit shape selection.

- **When it fits**: brands where the photograph and the type carry roughly equal weight and the eye is meant to ricochet between them. Premium DTC product hero is the canonical fit; a single product on the image side and a price-and-CTA on the type side.
- **References**: [allbirds.com](https://allbirds.com), [tecovas.com](https://tecovas.com).
- **Archetype affinities**: Luxe Considered, Warm Conversational, Editorial Restrained (mild).

### `wide-photograph-with-band-below`

Single full-width hero photograph (aspect 16:9 or wider) spanning the content width, with structured content (search rail, CTA pair, lede, filter chips) stacked vertically below the photograph. The photograph carries the page; the band below carries the affordances.

- **When it fits**: inventory marketplaces, regional specialists, sites where the photograph signals what the marketplace is for and the band carries the controls. Also fits magazine-style editorial registers where one strong image opens an article.
- **References**: [bringatrailer.com](https://bringatrailer.com), [icon4x4.com](https://icon4x4.com).
- **Archetype affinities**: Rugged Utilitarian, Documentary Honest, Editorial Restrained.

### `full-bleed-image-with-overlay`

Image fills the section (or near-fills, often at `object-cover` with `absolute inset-0`), with type overlaid via a gradient. Dramatic, cinema-poster register. Strongest visual signal of all hero shapes; correspondingly the easiest to over-saturate.

- **When it fits**: hospitality experiences where the place is the product (balloon ride, restaurant, hotel), mission-driven nonprofits where the documentary photograph is the evidence, premium B2B where the product is photographed at scale. Atmospheric and cinematic.
- **References**: [bombasses.com](https://bombasses.com) (hospitality), [charitywater.org](https://charitywater.org) (institution-mission).
- **Archetype affinities**: Documentary Honest, Luxe Considered (composed with Documentary Honest), Editorial Restrained.

### `type-led-prose`

No image in the hero. The H1 and lede do the work; image (if any) appears below the hero as a supporting element. Editorial publication register. The whitespace and the type carry the page.

- **When it fits**: editorial publications, ideas-led brands, B2B SaaS where the proposition is conceptual, premium consultancies, law and finance where understated credibility is the play.
- **References**: [nytimes.com](https://nytimes.com), [stripe.com](https://stripe.com) (mild type-led, with type leading and a subtle product render below).
- **Archetype affinities**: Editorial Restrained, Technical Precise (mild).

### `centered-single-column`

Narrow content column centered on the page, H1 and lede only, minimal. Often paired with atmospheric brand registers where the centered alignment signals "considered, not loud."

- **When it fits**: portfolio brands, atmospheric or contemplative registers, single-product brands where the page is essentially a long-scroll story and the hero is just the opening line.
- **References**: [linear.app](https://linear.app), [framer.com](https://framer.com) (both run centered single-column heroes at times).
- **Archetype affinities**: Editorial Restrained, Luxe Considered.

### `asymmetric-large-image-small-text`

One element dominates the hero (usually an image at 70 to 80 percent of width), the other is caption-scale beside or below it. Distinct from `dual-column-image-and-text` by the imbalance: the dual-column is roughly balanced, the asymmetric leans heavily.

- **When it fits**: magazine cover style, photography portfolios, single-product hero where the product carries everything and the type is a caption-scale credit line.
- **References**: [magnumphotos.com](https://magnumphotos.com), [aesop.com](https://aesop.com) (varies; some pages use asymmetric layouts).
- **Archetype affinities**: Luxe Considered, Documentary Honest, Editorial Restrained.

### `grid-of-elements`

The hero IS a grid: product tiles, listing cards, directory entries, no single anchor image. The inventory or directory itself is the hero. Distinct from `wide-photograph-with-band-below` by having no single dominant image; the grid carries the meaning.

- **When it fits**: directory and marketplace shapes where the breadth of the catalog is the value, ecommerce catalog shapes where shoppability above the fold is the conversion lever.
- **References**: [airbnb.com](https://airbnb.com) (search results hero is the grid), [unsplash.com](https://unsplash.com).
- **Archetype affinities**: Technical Precise, Editorial Restrained (with restraint), Rugged Utilitarian (if the directory is the working catalog).

### `data-table-or-spec-led`

A data table or spec block is the hero element. The numbers and the comparison carry the page. Technical Precise register, B2B engineering context, comparison-led purchase decisions.

- **When it fits**: B2B engineering procurement, hardware comparison sites, financial product comparison, anywhere the buyer is data-anchored before they care about photography.
- **References**: [parametricportfolio.com](https://www.parametricportfolio.com), [substack.com/pricing](https://substack.com/pricing) (pricing-table-as-hero variants).
- **Archetype affinities**: Technical Precise, Editorial Restrained.

---

## Footer shapes (open list, starting set)

### `single-line-strip`

One row carrying the brand disclosure paragraph and the footer nav, no multi-column structure. Mobile and desktop render the same content reflowed. The default across most demos in the showcase portfolio.

- **When it fits**: small-collection brands, single-purpose microsites, demo and showcase contexts, brands where the footer is meant to be functional chrome rather than navigation in its own right.
- **References**: most editorial brand sites with a small surface area.
- **Archetype affinities**: any; this is the chrome default.

### `multi-column-sitemap`

Three to six columns of links plus brand info. Common on larger commerce sites where the footer carries category navigation, popular searches, account shortcuts, customer service, about-the-company, and resources.

- **When it fits**: ecommerce catalog with deep category trees, multi-tenant marketplaces with seller-side and buyer-side links, B2B sites with documentation libraries.
- **References**: [amazon.com](https://amazon.com), [shopify.com](https://shopify.com), most large retailers.
- **Archetype affinities**: Technical Precise, Rugged Utilitarian (if functional), any commerce-heavy archetype.

### `type-only-no-links`

Minimal editorial footer, copyright and disclosure only, no nav. The footer is essentially a colophon.

- **When it fits**: ideas-led brands, single-page narratives, publications where the nav lives in the top chrome and the bottom is just the credit line.
- **References**: [pitchfork.com](https://pitchfork.com) (varies; minimal footer), portfolio sites.
- **Archetype affinities**: Editorial Restrained, Luxe Considered.

### `editorial-colophon-with-masthead`

Masthead-style footer naming the editorial team or contributors. Fits publication register where the footer credits the people behind the work.

- **When it fits**: publications, magazine sites, editorial collectives, organizations where the people are the brand.
- **References**: [theatlantic.com](https://theatlantic.com), [theverge.com](https://theverge.com).
- **Archetype affinities**: Editorial Restrained, Documentary Honest.

### `newsletter-band-with-credits`

Newsletter signup as the dominant footer element, with credits below. The newsletter is the conversion goal; the footer is the conversion surface.

- **When it fits**: content sites, newsletter-first publications, brands where the newsletter is the customer-relationship channel.
- **References**: [substack.com](https://substack.com), most content sites operating newsletter-led growth.
- **Archetype affinities**: Editorial Restrained, Warm Conversational.

### `dark-cta-then-credits`

Two-row footer with a dark CTA band on top and a credits strip below. The CTA band acts as the page-bottom conversion surface; the credits strip is the actual footer.

- **When it fits**: conversion-led sites where the bottom of the page is the second-most-attended surface (after the hero), marketing sites, B2B with a sign-up funnel.
- **References**: [vercel.com](https://vercel.com), [linear.app](https://linear.app).
- **Archetype affinities**: Technical Precise, any conversion-led register.

---

## Optional extensions (not formally checked at this dispatch's scope)

The framework can grow to cover additional section shapes as the portfolio surfaces them. Currently documented loosely; not part of the divergence check fields.

- **Trust-strip shapes**: four-signal block, two-paragraph narrative band, logo wall, citation row.
- **CTA-close shapes**: dark band with single CTA, gradient band with pair of CTAs, image-backed close, newsletter close.
- **How-it-works shapes**: three-card strip, numbered list with images, flow diagram, timeline.

When a brief's shape choice for one of these sections proves load-bearing for the build's distinctness, a future framework dispatch can promote the section to a checked field.

---

## How to extend the vocabulary

A build that discovers a section shape not present in the vocabulary:

1. Documents the shape in the brief with a name (kebab-case), a one-paragraph description, and one or two real-world references.
2. Adds the shape to this file under the appropriate section (hero or footer) with the same format the existing shapes use.
3. Commits the vocabulary addition in the build PR.

The vocabulary grows with the portfolio. Stale shapes (no demo uses them, no live references remain) can be retired in subsequent dispatches.

# Bold-confident-editorial-restrained, AAA-adjacent action game studio

- **Archetype**: `bold-confident` with `editorial-restrained` as the composition secondary. The lead is the cinematic-confident register of AAA-adjacent action studios; the secondary is chrome restraint (the platform-versus-content distinction from the gaming and entertainment vertical file: a studio is the chrome around its games, so the chrome composes while the game key art carries the saturation). The composition is the explicit chrome-restraint dial: pure Bold Confident or composed-with-Vibrant-Saturated is reserved for single-game-title demos.
- **Vertical**: Corporate-portfolio (specifically AAA-adjacent action game studio: a content-creator studio that builds large-scale action games and presents itself as a serious craft-and-scale shop).
- **Position summary**: A studio whose chrome is composed and dark-mode-first, where each fictitious title's key art carries the saturation and energy. Cinematic full-bleed hero, titles portfolio strip, type-led studio band, careers band as the load-bearing conversion surface, dark CTA close.

## Positive references

- [bungie.net](https://bungie.net) - The canonical AAA-action studio chrome register: cinematic full-bleed key-art hero, dark-mode-first ground, restrained type chrome that lets the game art carry. Inherit the cinematic hero treatment, the dark ground, and the chrome restraint.
- [insomniac.games](https://insomniac.games) - Insomniac Games. The studio chrome at composed-cinematic; the titles portfolio surfaced with care. Inherit the titles-portfolio anatomy and the craft-proud-without-arrogance voice.
- [naughtydog.com](https://naughtydog.com) - Naughty Dog. The restrained-cinematic studio register; type-led studio band with the team presented at masthead density. Inherit the studio-band convention and the restrained-cinematic chrome.
- [remedygames.com](https://remedygames.com) - Remedy Entertainment. The composed-cinematic register at the studio level, with a smaller portfolio presented with editorial discipline. Inherit the title-detail-page-as-small-monograph anatomy.

## Negative references

- [steampowered.com](https://steampowered.com) - Steam. Platform chrome that hosts third-party content. Wrong vertical (platform, not studio); the platform chrome reads totally different from a studio's content-creator brand.
- [itch.io](https://itch.io) - Itch.io. Indie game platform; minimal chrome; wrong register and wrong vertical.
- Mobile and casual free-to-play studio sites (the bright-saturated multi-hue cartoon register of casual-mobile studio brands). Wrong register; a AAA-adjacent action studio is not casual-mobile.
- Streaming-service sites (netflix.com, hbomax.com). Adjacent Bold-Confident-leaning register but wrong vertical (streaming distribution vs studio creation). Netflix's content-as-hero treatment is a useful inheritance for the cinematic hero; the rest of Netflix's chrome is platform-distributor, not studio.

## Extension note

- Seeded from the Ironhold AAA-adjacent action studio brief (first portfolio entry in Bold Confident; first portfolio entry in the corporate-portfolio shape applied to a game studio). The brief is the gentler entry into Bold Confident in the showcase portfolio; the upcoming game-title demo is the leap into the saturated single-IP register. The studio composes with Editorial Restrained as the chrome-restraint dial so the title-demo can pull saturation further without colliding. The brief documents a Rule 4 WARN override on the full-bleed-image-with-overlay hero (the canonical AAA-studio cinematic treatment, four shipped matches but no archetype-family share so Rule 5 does not block; the override is justified by the new archetype carrying the shape into a completely different visual reading). Last updated: 2026-05-28.

# Bold-confident-vibrant-saturated, single-IP game-title marketing site

- **Archetype**: `bold-confident` with `vibrant-saturated` as the composition secondary. The lead is the cinematic-confident register of AAA action titles; the secondary is the saturated leap (palette depth, type at title-card scale, key art as the load-bearing surface). This is the expressive content-brand end of the gaming and entertainment vertical, distinct from the studio-portfolio chrome that publishes the title. The pair to `bold-confident-editorial-restrained-aaa-game-studio`: the studio composes with Editorial Restrained chrome restraint, the single title composes with Vibrant Saturated to claim the saturation the studio reserved.
- **Vertical**: Single-IP marketing (specifically a post-launch AAA action game title: the marketing site where one shipped game lives, distinct from the studio portfolio that publishes it). The shape generalizes to any single published work (a single film, album, book, or show); the references here are the game-title instance.
- **Position summary**: A single published title's own brand, dark-mode-first, world-forward, where the world's own palette and the key art carry the saturation. Cinematic launch-poster hero, a trailer or curated key-art sequence, a world-immersion surface, a systems surface, a media gallery, and a follow-or-storefront conversion close.

## Positive references

The references are cited NOMINATIVELY as register exemplars only. A build in this position inherits the register (dark-mode-first, world-forward, saturated, cinematic) and pulls NO trade dress, layout, scroll behavior, font choice, or animation language from any specific real-game marketing site. Marketing-site mimicry is as off-limits as in-game resemblance.

- [marathonthegame.com](https://marathonthegame.com) - The saturated single-IP marketing register at its most committed: a published title's own brand, dark-mode-first, with the title's palette and art carrying the saturation rather than the publisher's chrome. Inherit the world-forward saturated register; do NOT pull the flat-graphic identity or layout.
- [deathstranding.com](https://deathstranding.com) - Single-IP world-immersion marketing: the site immerses the visitor in one world (the setting, the lore) in the game's own voice rather than the studio's. Inherit the world-as-protagonist surface; do NOT pull the atmospheric scroll, type, or identity.
- [cyberpunk.net](https://cyberpunk.net) - Saturated single-IP launch register: type at title-card scale, palette depth carrying the world's own tones. Inherit the type-at-scale and palette-depth treatment; do NOT pull the neon-magenta identity.
- [bandainamcoent.com/games/elden-ring](https://www.bandainamcoent.com/games/elden-ring) - Single-IP lore-immersion marketing: a world page that treats the world as the protagonist with deep lore in the title's voice. Inherit the lore-immersion surface; do NOT pull the dark-fantasy identity.

## Negative references

- Studio and publisher portfolio sites ([bungie.net](https://bungie.net), [naughtydog.com](https://naughtydog.com), and the paired `bold-confident-editorial-restrained-aaa-game-studio` register) - The studio chrome composes and recedes to let many titles share a body of work. The single-IP title's register is the saturated content brand, distinct from the publisher's chrome; a single title is not a portfolio.
- Platform-chrome sites ([steampowered.com](https://steampowered.com), [store.epicgames.com](https://store.epicgames.com), [itch.io](https://itch.io)) - Platforms host third-party content and lean restrained to let the content carry. A single-IP marketing site is the content's own brand, not the platform that distributes it.
- Casual and mobile single-game marketing sites (the bright multi-hue cartoon register of casual-mobile single-game brands) - Wrong register; an AAA cinematic title is dark-mode-first and world-forward, not bright-cartoon.

## Extension note

- Seeded from the Mariner's Gauntlet single-IP marketing brief (first portfolio entry in the single-IP marketing shape; the title side of the Ironhold pair; the first portfolio entry composing with Vibrant Saturated). The title claims the saturated single-IP register that the paired studio brief (`bold-confident-editorial-restrained-aaa-game-studio`) deliberately reserved as forward-divergence headroom. The brief documents the framework's first Rule 5 BLOCK against a same-pair shipped demo: `full-bleed-image-with-overlay` is blocked (five shipped matches plus a shared Bold Confident family with the publisher Ironhold), so the title selects `centered-single-column` as a cinematic launch-poster hero, the intended divergence-within-the-pair. Footer is `newsletter-band-with-credits` (the follow-the-title conversion). Last updated: 2026-05-28.

# Editorial-restrained, documentary-honest, specialty coffee subscription

- **Archetype**: `editorial-restrained` with `documentary-honest` as the composition secondary. The lead is editorial type-led restraint (low-saturation, generous whitespace, considered typography); the secondary is documentary farm and bean photography that grounds the single-origin claim. Premium but approachable; not luxury, not mass-market.
- **Vertical**: DTC food and beverage (specifically specialty coffee subscriptions; the references generalise to tea and other consumable single-origin subscriptions in adjacent registers).
- **Position summary**: A specialty single-origin coffee subscription in the editorial-restrained register. Subscriber-first commerce (cadence picker, pause and swap surfaced as features, not buried in account settings). Named farms, named processes, named roast dates. Documentary farm photography supports the type rather than leads.

## Positive references

- [drinktrade.com](https://drinktrade.com) - Subscriber-first commerce explicit: cadence picker on the home, match-quiz to find your roast, pause and swap surfaced as features rather than buried in account settings. Editorial-restrained type-led layout with documentary product photography.
- [counterculturecoffee.com](https://counterculturecoffee.com) - Specialty roaster with subscription surfaced; documentary photography of farms and farmers carries the page; editorial type. The canonical reference for "farm-direct specialty roaster with a subscription option."
- [onyxcoffeelab.com](https://onyxcoffeelab.com) - Editorial-restrained register at its most refined: type-led, considered photography, premium-but-approachable. Useful as the type-system reference (small-caps, restrained tracking, editorial serifs).
- [atlascoffeeclub.com](https://atlascoffeeclub.com) - Subscriber-first explicitly with a world-coffee-journey narrative. The closest match to the "one origin a month, named farm, named process" positioning. Useful for how to surface the rotation as the value prop.

## Negative references

- [starbucks.com](https://starbucks.com) - Mass-market grocery register; frappuccino lifestyle photography; promotional cadence dominates the homepage. The register a specialty roaster must not pull from.
- [folgerscoffee.com](https://folgerscoffee.com) - Commodity grocery brand; red-can heritage but no specialty register. The bottom of the grocery shelf, conceptually.
- Generic lifestyle-influencer subscription boxes (BarkBox, FabFitFun, Allure Beauty Box and similar) - Lifestyle-spectacle subscription register where the unboxing is the product; the box itself is supposed to be a surprise. Wrong register entirely for a specialty-coffee subscription where the named farm and the roast date are the value, not the unboxing reveal.

## Extension note

- Seeded by the Northbound Coffee Co. brief (Phase 2 live pressure-test of the creative-brief-selector skill, rampstack/rampstackco-app PR #131). The brief was the first live invocation of the selector and discovered these references during step 3 because the bank had no seed for the specialty-coffee-subscription combination. Last updated: 2026-05-27.

# Editorial-restrained, literary quarterly

- **Archetype**: `editorial-restrained` (pure, no composition secondary). The lead is the literary quarterly tradition: typography carries the page, the considered editorial register, the restrained accent, and the absence of marketing inflation.
- **Vertical**: Editorial publication (specifically themed literary and ideas quarterly with multi-author masthead, each issue organized around a single question or theme).
- **Position summary**: A themed literary quarterly where each issue is a single question, the table of contents reads as variations on the question across disciplines, the design is restrained-considered with one literary accent colour. Not politically situated, not generationally branded, not topical, not single-author. The audience is literary readers across disciplines.

## Positive references

- [aeon.co](https://aeon.co) - Multidisciplinary ideas register. Considered design, restrained palette (warm-grey ground with deep type and a single accent), essays at substantial length, multiple disciplines per surface. Inherit the ideas-led register, the considered-but-not-luxe typography, the absence of marketing inflation.
- [thepointmag.com](https://thepointmag.com) - Themed multi-author essay structure at length. The closest peer on the audience axis (broadly literary readers across disciplines). Inherit the multi-author themed-issue treatment and the essay-length expectation.
- [cabinetmagazine.org](https://cabinetmagazine.org) - The closest structural anchor in the field: each issue is organized around a single thematic question rendered with editorial restraint. Inherit the single-theme-per-issue structure and the question-as-masthead treatment.
- [canopycanopycanopy.com](https://canopycanopycanopy.com) - Triple Canopy. Themed digital-first sequenced issues with editorial restraint. Inherit the digital-first design discipline and the sequenced-issue numbering.

## Negative references

- [thedriftmag.com](https://thedriftmag.com) - Politically situated, generationally branded, identity-forward. A considered quarterly must avoid the political-statement register on conversion architecture, palette, and voice.
- [nplusonemag.com](https://nplusonemag.com) - Institutional NY cultural authority register. A considered quarterly should not borrow the geographic or generational positioning.
- [laphamsquarterly.org](https://laphamsquarterly.org) - Historical-source-driven format (passages from historical writing assembled around a theme). A different format entirely; canonical to that publication and not transferable.
- [thebeliever.net](https://www.thebeliever.net) - McSweeney's-adjacent geometric illustration identity. A type-led quarterly should not borrow the illustration-led visual treatment.
- [atavist.com](https://atavist.com) - Single-essay-per-issue reportage register. A multi-essay themed quarterly is a different shape.
- [themarginalian.org](https://themarginalian.org) - Single-author blog register. A multi-author themed quarterly is a different shape.

## Extension note

- Seeded from the Caesura editorial-publication brief (the first portfolio entry in the editorial-publication shape, using the extended creative-brief-selector framework with hero_shape and footer_shape as first-class outputs). The pure `editorial-restrained` archetype combined with the type-led-prose hero and editorial-colophon-with-masthead footer renders as the natural literary-publication fit; the framework's extended rules align with the register's tradition rather than fighting it. Last updated: 2026-05-27.

# Heritage local service, barbershop

- **Archetype**: `warm-conversational` with `retro-nostalgic` as the composition secondary. The lead is warm-everyday-craft (real-room atmosphere, social proof from genuine reviews, real-team page); the secondary is period-specific cues (walnut wood, brass fittings, marble counters, restrained palette).
- **Vertical**: Hospitality and local service (specifically neighborhood barbershops).
- **Position summary**: A heritage neighborhood shop with craft-and-space-led atmosphere, real-people-real-work proof, social proof drawn from review aggregates rather than fabricated testimonials. Initials over fabricated portraits when fictitious-brand demos cannot ethically render faces.

## Positive references

- [therosemontbarbers.com](https://therosemontbarbers.com) - Cuts gallery, interior atmosphere, social-proof badge, real team page in the heritage register.
- [speakeasybarberlounge.com](https://speakeasybarberlounge.com) - Atmosphere-led, period-specific cues (lounge fittings, warm interior), interior photography carries the page.
- [franksdenver.com](https://franksdenver.com) - Heritage register at a higher-end price point; restrained palette, considered editorial layout.
- [alfanisbarbershop.com](https://alfanisbarbershop.com) - Small-operator heritage, atmosphere-forward, real-team page.

## Negative references

- The chain barbershop register (Great Clips, Supercuts, Sport Clips and the like) - High-volume operational chains in the same vertical but in a fundamentally different register: utility-led, promotion-driven, no atmosphere. A heritage maker pulling from this register loses the position.

## Extension note

- Seeded from the Iron and Rye Barbershop atmosphere imagery pass. The seed positive references were used as register cross-checks during the build's still-life and interior shots. Last updated: 2026-05-27.

# Hospitality experience, balloon ride

- **Archetype**: `documentary-honest` with `luxe-considered` as the composition secondary. The lead is photography-led documentary realism (real landscape, real light, the morning as it actually looks); the secondary is aspirational-experience polish (named arc, named prices, named safety signals).
- **Vertical**: Hospitality experience (specifically scenic flight or ride experiences, with the balloon ride as the worked example).
- **Position summary**: A photography-led experience operator with the morning arc surfaced explicitly, named packages with named prices above the fold, four trust signals (FAA certification, lead pilot hours, weather posture, cancellation) surfaced as the booking-confidence layer. No fabricated identifiable faces; environmental imagery only.

## Positive references

- [nvaloft.com](https://nvaloft.com) - Regional operator, atmosphere-forward, dawn-palette imagery.
- [aerogelicballooning.com](https://aerogelicballooning.com) - Atmosphere-led, ride arc surfaced, photography drives the page.
- [rainbowryders.com](https://rainbowryders.com) - Multi-region operator, photography-led, named packages with prices.
- [sundanceballoons.com](https://sundanceballoons.com) - Multi-region operator, considered-warm register, ride-arc framing.

## Negative references

- Generic adventure-tour aggregators (Viator, GetYourGuide, and similar) - Stock photography pile, undifferentiated palette, transactional layout. A photography-led operator pulling from this register loses the atmosphere that justifies the price.

## Extension note

- Seeded from the Drift and Dawn imagery pass and the audited-field competitor set used during that build's Stage 1. The dawn-palette retune was driven by the gap between the original stone-and-amber default and the actual dawn light these references carry. Last updated: 2026-05-27.

# Luxe-considered, curated short-term-stays directory-marketplace

- **Archetype**: `luxe-considered` (pure; no composition secondary). The aspirational curated-stays register the hospitality vertical file names as Aman and Four Seasons: serif-led, understated authority, image-forward, the stay as a designed object. The escapist warmth is carried by a warm palette and a host-voice convention, not by a second archetype. Documentary Honest (the mass-market Airbnb register and a recurring portfolio secondary), Editorial Restrained (another build's exact luxe composition string), and Warm Conversational (the review-platform register) were each considered and rejected as secondaries; pure Luxe is the fit.
- **Vertical**: Directory-marketplace (specifically an aspirational curated short-term-rental marketplace of many independent hosts' standout stays). The second directory-marketplace entry in the bank; with the trades-directory entry it shows the shape across two opposite registers (functional-tool versus escapist-aspirational).
- **Position summary**: A small, curated marketplace a traveler dreams through, where the property photography carries the page and the stay is the product. Image-forward, escapist, design-forward; inventory grouped into curated collections; trust built on a stated verification claim rather than a fabricated-metric arms race.

## Positive references

The references are cited NOMINATIVELY as register exemplars only. A build in this position inherits the register (curated collections, image-forward discovery, the property-as-monograph, restrained booking affordances) and pulls NO palette, type, trade dress, photography style, or grid treatment from any specific real platform.

- [plumguide.com](https://plumguide.com) - The curated-design short-term-stay register: a small vetted collection rather than the long tail, each stay presented with editorial care. Inherit the curated-collection posture and the property-as-monograph anatomy; do NOT pull the palette, type, or the specific listing-grid treatment.
- [boutique-homes.com](https://boutique-homes.com) - The design-led curated-stays register: architecturally distinctive properties grouped by design feeling. Inherit the design-forward collection grouping and the generous property gallery; do NOT pull the trade dress.
- [onefinestay.com](https://onefinestay.com) - The upper-curated hospitality register: a small set of standout homes with a hotel-grade presentation. Inherit the restrained-confident chrome and the aspirational photo direction; do NOT pull the palette or the brand identity.

## Negative references

- Functional-tool consumer directories (the trustworthy-direct-functional trades-directory neighbourhood; the same directory-marketplace shape in the opposite register). The functional tool a user controls is the deliberate opposite of the escapist marketplace a traveler dreams through; the shape and the multi-provider conventions are shared, the register is inverted.
- Single-operator hospitality-experience brands (one operator selling its own arc). The count axis differs: a curated-stays marketplace lists many independent hosts, not one operator's owned experience.
- Mass-market transactional rental platforms (the high-volume long-tail booking engines with urgency banners, opaque ranking, and dense result grids). Wrong register: a curated marketplace presents a small standout set as a publication, not the whole inventory as a funnel.

## Multi-provider conventions (reframed for hosts and stays)

The directory-marketplace shape's multi-provider conventions (first encoded by the trades-directory entry) carry forward, reframed from providers to hosts and stays:

- **Brand versus host voice.** The marketplace brand's voice is the site voice throughout; each property carries a short host voice (a one-line note on why the place is worth the trip) only inside its card and detail, set with a typographic voice-shift. The brand never speaks as a host; hosts never speak as the brand.
- **Discoverability is the spine, image-forward.** The home is a search-and-browse surface where the property photography carries the page (the aspirational counterpart to the functional-categorical discovery of a trades directory). The hero is image-forward, not a functional tile grid.
- **Listing density, organized as collections.** Curated themed collections (coastal escapes, design landmarks, mountain retreats) rather than flat categories; roughly 4 to 6 collections with 4 to 8 properties each (24 to 40 properties). The collection is itself an editorial act.
- **Comparison surface.** Properties comparable within a collection on a small honest set (location, sleeps, stay-type, a demo-only rate band), with a within-collection compare view.
- **Reviews-and-ratings honesty resolution.** A demo-only Verified Host badge with its meaning stated plainly, plus an explicit "Demo: no reviews shown" placeholder slot and an aggregate-rating placeholder. The full trust UX is visible without fabricating a single review, rating, or superhost-style metric. Hosts are represented by their properties and a one-line voice, NOT by fabricated headshots; properties are set in fictitious locations; no real platform is named, even in negation.

## Extension note

- Seeded from the Lodestar curated-stays marketplace brief (the fifteenth and final showcase demo; the second directory-marketplace shape and the same-shape divergence partner to the trades-directory entry, running maximal-distance mode within the shape). Anchored to the hospitality and travel vertical file (`12-hospitality-travel.md`), which names pure Luxe Considered as the aspirational-hospitality register and Documentary Honest as the mass-market Airbnb register. The styled-aspirational property photography carries a real drift profile for the imagery pass: real-listing-platform aesthetic mimicry and fabricated-location-resemblance, both flagged for the build's NEGATIVE_GUARDRAILS, plus no real brand marks in any property image. The palette must read warm-aspirational (a design-hotel sandstone-clay-brass family) and must not reuse the trades-directory's cool functional family or any shipped warm-hospitality family. Last updated: 2026-05-29.

# Luxe-considered-editorial-restrained, residential architectural brokerage

- **Archetype**: `luxe-considered` with `editorial-restrained` as the composition secondary. The lead is the gallery-monograph register: premium, considered, type-and-photography-led, design-literate. The secondary is design-publication restraint: listings rendered as small monographs, the architect-and-year credit at byline weight, the brokerage represented as a practice rather than as a roster of agents.
- **Vertical**: Inventory-listing (specifically residential brokerage of architecturally significant homes: modernist, mid-century, architect-designed new builds, design-forward renovations).
- **Position summary**: A luxe residential brokerage that treats each architecturally significant home as a small monograph. The architect, the design year, the materials, the siting, and the light are first-class fields on every listing. The brokerage speaks as a design-literate practice rather than as a roster of individual agents.

## Positive references

- [themodernhouse.com](https://themodernhouse.com) - The canonical reference for the design-led residential brokerage register at editorial-restrained tier. Each listing reads as a small monograph; the architect is named in the listing card; the photography is disciplined. Inherit the listing-as-monograph anatomy and the considered-restraint voice. (Cited as a register anchor, not for trade dress copy; the negative-reference frame governs which brokerages a build must not pull trade dress from.)
- [phillips.com](https://phillips.com/design) - Phillips's design auction catalog register. The monograph treatment per lot (designer, year, materials, provenance) transfers cleanly to a residential listing. Inherit the per-lot monograph anatomy.
- [dezeen.com](https://dezeen.com) - The architectural press register. Listing-style architecture coverage with architect credits, year, materials, photography. Inherit the architecture-press literacy and the credit-line convention.
- [architecturaldigest.com](https://architecturaldigest.com) - The design-publication register with residential homes covered as design objects. Inherit the photography sensibility and the design-publication restraint.

## Negative references

- [zillow.com](https://zillow.com) - Mass-market portal; algorithmic listing presentation, estimated-value overlays, financing-first conversion. The register a luxe-considered brokerage must avoid on conversion architecture, palette, and voice.
- [realtor.com](https://realtor.com) - Same mass-market portal register; broker-listing-syndication shape, generic photography presentation.
- [redfin.com](https://redfin.com) - Mass-market portal with light brokerage layer; price-anxiety scoring, financing partnerships surfaced as primary CTAs.
- High-volume luxury brokerages whose primary surface is personality-led agent funnels. The architectural-monograph register is a practice, not a personal brand; the no-fabricated-agent-headshots line in the honesty contract is the structural rationale.

## Extension note

- Seeded from the Datum residential-brokerage brief (the first portfolio entry in luxe-residential-architectural-brokerage and the first same-shape divergence test in the portfolio; second inventory-listing build, the first being the rugged-utilitarian Treeline Motors marketplace). The brief documents the Section Shapes Rule 5 block on the two obvious luxe-architectural defaults (full-bleed-image-with-overlay and dual-column-image-and-text) and the resulting selection of asymmetric-large-image-small-text as the hero shape. Last updated: 2026-05-27.

# Minimal-essentialist-documentary-honest, local-trades directory

- **Archetype**: `minimal-essentialist` with `documentary-honest` as the composition secondary. The lead is the functional-tool register (clean, organized, content-forward, reduced chrome; the page is the directory and the chrome recedes to let the listings carry). The secondary is honest-transparency trust (a stated verification claim, honest placeholders where reviews would render, real-context provider photography). The marketplace platform-versus-provider principle is the structural rationale: the directory brand must not compete with the provider identities, so restraint wins.
- **Vertical**: Directory-marketplace (specifically a homeowner-facing local-trades directory of many independent providers across real trade categories: plumbing, electrical, HVAC, carpentry, painting, roofing). The first multi-provider entry in the bank.
- **Position summary**: A clean, trustworthy directory tool the homeowner controls, light-mode-first, where the categories and the providers are the page. Discoverability is the spine, comparison is core, and the trust is built on honest transparency rather than on warmth or on clinical authority.

## Positive references

The references are cited NOMINATIVELY as register exemplars only. A build in this position inherits the register (search-first discovery, category browse, provider listings, a comparison surface, a verification claim) and pulls NO palette, trade dress, logo language, or conversion-funnel pattern from any specific real directory.

- [angi.com](https://angi.com) - The modern consolidated home-services directory register: category-and-location search, provider listings, the lead-handoff conversion. Inherit the search-first discovery spine and the category structure; do NOT pull the orange-and-green palette, the match-now funnel, or any trade dress.
- [thumbtack.com](https://thumbtack.com) - The matched-services register: structured by trade and location, provider profiles with comparable fields. Inherit the comparable-provider-profile anatomy; do NOT pull the blue palette or the get-matched interstitial funnel.
- [houzz.com](https://houzz.com) - The visual-services-directory register: real work photography carrying the provider listings. Inherit the documentary work-in-context photography direction (a trade in progress, a finished job), not glamour shots; do NOT pull the green-and-orange palette or the social-feed product framing.

## Negative references

- Warm-conversational single-provider service brands (a neighbourhood barbershop, a single local shop's site; the heritage-local-service register). Wrong register and wrong count: that is a single provider speaking warmly about itself, not a directory of many providers in a functional-trust tool. A trades directory must not read as one warm shop with extras.
- Magazine-editorial services-content sites (a home-improvement publication, a services-advice editorial). Wrong register: a directory is a functional tool, not a magazine pretending to be a directory; the editorial-publication register buries the listing density behind a narrative.
- Bold-cinematic or saturated AAA visual registers (a cinematic full-bleed experiential hero). Wrong register entirely: a directory reads functional, not experiential; an image-and-overlay cinema-poster hero is the opposite of the page-is-the-directory discovery spine.

## Multi-provider conventions (new ground; inherited by future directory-marketplace briefs)

The directory-marketplace shape is the first multi-provider register in the portfolio. These conventions are first-class and carry forward:

- **Brand versus provider voice.** The directory brand's voice is the site voice throughout; each provider has its own short voice only inside its listing card (a one-line how-we-work statement). The directory speaks as the trustworthy tool; the providers speak as themselves inside their cards. (Single-provider builds never had to navigate this distinction.)
- **Discoverability is the spine.** The home page is a search-and-browse surface (category-and-location search, category tiles, provider cards), not a hero-and-essay narrative. A `grid-of-elements` hero fits naturally; a type-led or image-and-overlay hero does not.
- **Listing density.** A meaningful directory reads as real only at sufficient density: roughly 4 to 6 categories with 4 to 8 providers each (16 to 48 total). Fewer reads as a single-provider demo with extras; more risks bloat.
- **Comparison surface.** Providers within a category are comparable on a small honest set of dimensions (service area, specialties, years in business), not on an opaque ranking score. Comparison is core to the pattern.
- **Reviews and ratings are the canonical fabrication risk, and the resolution is honest UX without fabricated content.** A directory conventionally shows aggregate ratings, review counts, and written reviews; a demo cannot fabricate any of them. The resolution: an explicit "Demo: no reviews shown" placeholder slot where review content and an aggregate rating would render, plus a demo-only "Verified Pro" badge (the directory's own badge, meaning stated, not a real accreditation) where earned. The directory's full trust UX is visible without a single fabricated review, rating, license number, or certification.
- **Real categories, fictitious providers.** The trade categories are real; the providers within them are demo-fictitious, with names vetted against recognizable businesses (a proprietor-surname-plus-trade format), set in a fictitious city, with schematic service-area maps and no fabricated license numbers, certifications, or accreditation marks.

## Extension note

- Seeded from the Tradepost local-trades directory brief (the first directory-marketplace shape and the first multi-provider demo in the portfolio; the seventh selector-led build). The brand-archetype-system has no dedicated home-services, local-services, or trades vertical file; this build used `16-marketplace.md` (the two-sided-platform register) as the closest anchor, and the gap is flagged for a future skill-extension dispatch to add a dedicated local-services-and-trades vertical file. Tradepost runs maximal-distance mode; it is the same-shape divergence partner to a forthcoming vacation rental marketplace (the Browse-AI attended capstone), and the two diverge naturally because the verticals differ. The palette deliberately avoids the recognizable real-brand directory colours (Angi orange-and-green, Thumbtack blue, Yelp red, Houzz green-and-orange, Yellow Pages yellow-and-black). Last updated: 2026-05-28.

# Premium DTC maker, western boots

- **Archetype**: `luxe-considered` with `rugged-utilitarian` as the composition secondary. The lead is premium-considered (editorial layout, prices visible, restrained merchandising); the secondary is workwear-and-craft (heritage materials, hand-welt construction, made-to-last positioning).
- **Vertical**: DTC fashion (specifically western boots).
- **Position summary**: A premium small-collection western-boot maker, leather-forward, product-photographed, prices visible, no discount cadence, no SKU-strip-above-the-fold. Confident, not promotional.

## Positive references

- [tecovas.com](https://tecovas.com) - The elevated-DTC reference: product-forward hero, named prices visible, restrained merchandising. No discount banners above the fold.
- [lucchese.com](https://lucchese.com) - Heritage register; serif-led, craft narrative as a supporting band rather than the lead.
- [oldgringoboots.com](https://oldgringoboots.com) - Smaller-maker, leather-forward photography, restrained editorial set instead of catalog density.
- [ranchroadboots.com](https://ranchroadboots.com) - Small-operator boutique competing in the same position; useful for cross-checking how a peer maker handles wayfinding on a small collection.

## Negative references

- [durangoboots.com](https://durangoboots.com) - Catalog-dense big-box texture; discount cadence, SKU-strip-above-the-fold, sale-badge pile. Not the register a premium small maker should pull from.
- [justinboots.com](https://justinboots.com) - Same big-box texture in a different brand; promotional banners and grid density dominate.
- [bootbarn.com](https://bootbarn.com) - Multi-brand retailer rather than a maker; merchandising-led rather than craft-led.

## Extension note

- Seeded from the Pinto Mesa Boots store-spine brief (the worked example of the brief template). Last updated: 2026-05-27.

# Reference bank

The bank holds curated live reference sites for archetype-and-vertical combinations the portfolio has built against. Each file covers one combination, with positive references (sites that exemplify the position) and negative references (sites in the same vertical but in the WRONG register).

The bank is the institutional memory of the portfolio. A new build for a combination that has been done before loads the existing file and adapts. A new build for a sparse combination supplies discovered references and commits them back to the bank as part of its build PR.

---

## File naming convention

`<archetype>-<vertical-specific-tag>.md`

Examples:

- `premium-dtc-maker-western-boots.md`
- `heritage-local-service-barbershop.md`
- `hospitality-experience-balloon-ride.md`

The archetype prefix is the canonical name from `brand-archetype-system` (composed archetypes are hyphenated with the lead first). The vertical-specific tag is the narrowest description of the vertical the file covers (not the broad shape; the specific category within it).

---

## File structure

Each file has the same structure:

```markdown
# <Archetype>, <Vertical>

- **Archetype**: <Canonical archetype name, with composition note if any>.
- **Vertical**: <Broad shape> (specifically <narrow category>).
- **Position summary**: <One-line position the references collectively exemplify>.

## Positive references

- [<URL 1>] - <one-line why; what specifically this site does that a build in this position should inherit>
- [<URL 2>] - <one-line why>
- [<URL 3>] - <one-line why>
- [<URL 4>] - <one-line why, optional but encouraged>

## Negative references

- [<URL or named category>] - <one-line why this register is the wrong one for this position>

## Extension note

- <When was this file last updated and against which build>
```

---

## Adding references

A build that uses this skill on a combination that has a file already:

1. Loads three to four references from the existing file in step 3 of the process.
2. If the build discovered any new live references in addition (because the bank's references were stale or the build needed more breadth), append them to the positive references list in the same file with a one-line why.
3. Commit the file edit as part of the build PR.

A build that uses this skill on a combination with no existing file:

1. Creates a new file under `reference-bank/` named per the convention above.
2. Fills the file with three to six positive references discovered during the build's step 3.
3. Fills negative references with one to two categories or named sites that the build should not pull from.
4. Commits the file as part of the build PR.

---

## Reference quality bar

Each positive reference should be a real live site that:

- Exemplifies the chosen position observably (palette, layout, voice, imagery, or all four).
- Is operating at a quality level the build can credibly aspire to.
- Has been live recently (within the past year if possible; older references are acceptable if they remain the canonical example).

Each negative reference should be a real live site or a named category that:

- Sits in the same vertical but in a different register.
- Helps the build understand what to NOT pull from.

The one-line why for each reference is what makes the reference usable in step 4 of the process. A URL without a why is decoration; the why is what tells the next build what specifically to inherit or avoid.

---

## When to retire a reference

A reference should be removed from the bank when:

- The URL stops showing what it was cited for (brand redesign, site shutdown, paywall changed the visible register).
- A more canonical example for the same position emerges.
- The build that originally cited the reference has been superseded and the new build uses different references.

Retirement is a normal part of bank maintenance. The bank reflects what is currently usable, not what was once usable.

---

## Seeded combinations

Eleven combinations live in the bank:

- [`premium-dtc-maker-western-boots.md`](premium-dtc-maker-western-boots.md) - Premium DTC maker register applied to a small-collection western-boot maker.
- [`heritage-local-service-barbershop.md`](heritage-local-service-barbershop.md) - Heritage local-service register applied to a neighborhood barbershop.
- [`hospitality-experience-balloon-ride.md`](hospitality-experience-balloon-ride.md) - Documentary-honest hospitality-experience register applied to a scenic-flight operator.
- [`editorial-restrained-documentary-honest-specialty-coffee-subscription.md`](editorial-restrained-documentary-honest-specialty-coffee-subscription.md) - Editorial-restrained subscription-app register applied to a single-origin specialty coffee subscription.
- [`rugged-utilitarian-documentary-honest-regional-used-vehicle-marketplace.md`](rugged-utilitarian-documentary-honest-regional-used-vehicle-marketplace.md) - Rugged-utilitarian inventory-listing register applied to a regional used-truck-and-SUV marketplace.
- [`editorial-restrained-literary-quarterly.md`](editorial-restrained-literary-quarterly.md) - Editorial-restrained editorial-publication register applied to a themed literary and ideas quarterly.
- [`luxe-considered-editorial-restrained-residential-architectural-brokerage.md`](luxe-considered-editorial-restrained-residential-architectural-brokerage.md) - Luxe-considered-editorial-restrained inventory-listing register applied to a residential brokerage of architecturally significant homes (the first same-shape divergence test against the rugged-utilitarian regional-used-vehicle-marketplace entry).
- [`bold-confident-editorial-restrained-aaa-game-studio.md`](bold-confident-editorial-restrained-aaa-game-studio.md) - Bold-confident-editorial-restrained corporate-portfolio register applied to a AAA-adjacent action game studio (the first portfolio entry in Bold Confident; the gentler entry into the bold register before a game-title demo).
- [`bold-confident-vibrant-saturated-single-ip-game-title.md`](bold-confident-vibrant-saturated-single-ip-game-title.md) - Bold-confident-vibrant-saturated single-IP marketing register applied to a post-launch AAA action game title (the first single-IP marketing entry; the title side of the game-studio pair, claiming the saturated leap the studio brief reserved).
- [`minimal-essentialist-documentary-honest-trades-directory.md`](minimal-essentialist-documentary-honest-trades-directory.md) - Minimal-essentialist-documentary-honest directory-marketplace register applied to a homeowner-facing local-trades directory (the first directory-marketplace shape and the first multi-provider entry; encodes the multi-provider conventions and the no-fabricated-reviews resolution).
- [`luxe-considered-curated-stays-directory.md`](luxe-considered-curated-stays-directory.md) - Pure-luxe-considered directory-marketplace register applied to an aspirational curated short-term-stays marketplace (the second directory-marketplace entry; the same-shape divergence partner to the trades directory, showing the shape across two opposite registers; reframes the multi-provider conventions for hosts and stays).

Each seed file was built against a real shipped demo or shipped brief and reflects the references that build drew from. As the portfolio grows, the bank grows with it.

# Rugged-utilitarian-documentary-honest, regional used-vehicle marketplace

- **Archetype**: `rugged-utilitarian` with `documentary-honest` as the composition secondary. The lead is workwear-and-craft (Mountain West heritage utility register); the secondary is data-forward documentary (transparency-first listings, real photography, real source attribution).
- **Vertical**: Inventory-listing (specifically regional used-truck-and-SUV marketplace serving working-vehicle buyers, not full passenger-car market).
- **Position summary**: A regional working-vehicle specialist marketplace, transparency-first on every listing, documentary photography of vehicles in working context, plain-direct voice that speaks with familiarity of the terrain its audience drives. Specialist, not generalist; transparent, not promotional; regional, not national.

## Positive references

- [bringatrailer.com](https://bringatrailer.com) - The canonical listing-detail transparency reference: full ownership history, mileage timeline, photograph density (forty to one hundred photographs per lot is typical), a comments thread that adds provenance. Inherit the listing-detail anatomy and the source-attributed transparency posture. Diverge from the auction format; a fixed-price marketplace borrows the transparency without the closing-clock.
- [icon4x4.com](https://icon4x4.com) - Editorial documentary register applied to working vehicles. Inherit the photography direction (vehicles photographed in landscape and at work, not glamour shots on a studio seamless), the considered editorial type, and the absence of promotional banners.
- [filson.com](https://filson.com) - Mountain West heritage workwear register. Inherit the palette tendency (granite, evergreen, oxblood, aspen gold; cool ground with restrained accents), the documentary photography that supports the type rather than fighting it, and the plain-direct voice.
- [patagonia.com](https://patagonia.com) - The adjacent outdoor-utility register, useful as the second positive on voice (plain-direct, no marketing inflation, the audience treated as competent).

## Negative references

- [cargurus.com](https://cargurus.com) - Mass-market national passenger-car register; price-anxiety scoring as the hero, financing-first conversion architecture. The register a specialist regional marketplace must avoid on conversion architecture, palette, and voice.
- [cars.com](https://cars.com) - Same mass-market national register; promotional banner cadence, broad-inventory generalist posture.
- [carvana.com](https://carvana.com) - DTC mass-market with vending-machine theatrics, financing-first. The register to avoid on theatrics and on conversion-flow priority.
- [autotempest.com](https://autotempest.com) - Meta-aggregator with no editorial voice; utility-only search-across-the-others. A specialist marketplace must not read as utility-only.
- [edmunds.com](https://edmunds.com) - Research-led advisory; content-heavy editorial sitting adjacent to a marketplace. A specialist marketplace must not read as a magazine pretending to be a marketplace.

## Extension note

- Seeded from the Treeline Motors inventory-listing brief (the second batch-two build using the creative-brief-selector skill end to end). The Bring a Trailer reference is dual-positioned: positive on listing-detail transparency, negative on format (auction vs fixed-price marketplace). Last updated: 2026-05-27.

---
name: creative-brief-selector
description: "Produce a creative brief grounded in live reference sites and deliberately distinct from existing demos, for any new brand build. Composes with brand-archetype-system and creative-direction. Use this skill at the start of any brand or microsite build when the result needs to land in a specific aesthetic position and not drift into a default house style. Triggers on creative brief, design brief, build brief, brand direction, where should this brand sit, what should this site look like, reference sites for, archetype for, distinct from our other brands, divergence from prior, not the same as. Also triggers when prior builds have come out as siblings and a systematic divergence approach is needed."
category: brand
catalog_summary: "Live-reference-grounded creative briefs with divergence check against prior builds"
display_order: 6
---

# Creative Brief Selector

A starting-point selector for brand and microsite builds. Given a business spec (name, vertical, shape, one-line vibe, optional list of shipped demos), produces a creative brief grounded in three things:

1. An archetype position from `brand-archetype-system`, picked or composed to be deliberately distinct from the shipped demos.
2. A small set of live reference sites for that archetype-and-vertical combination, drawn from a curated bank plus optional per-build discovery.
3. A divergence check against the shipped demos that flags palette, voice, structural pattern, and section-shape overlap before the brief is handed off.

The brief output is concrete tokens, not abstract families, including explicit section-shape choices (hero shape and footer shape) as first-class outputs alongside palette and voice. It is meant to be loaded by downstream build skills as the single creative artifact for the build.

---

## When to use

- Starting any new brand or microsite build that should land in a specific aesthetic position.
- The first build in a portfolio (no prior builds to diverge from yet, but the divergence schema can be seeded for the next one).
- The second through nth build in a portfolio, where the risk of sibling output is real.
- After a portfolio audit that surfaced sibling builds: this skill is the systemic fix for the pattern.
- When a build's creative direction is being chosen between two adjacent archetypes and the call needs a reference-grounded reason.

## When NOT to use

- The user wants pure aesthetic methodology guidance (use `creative-direction`).
- The user has a finished archetype and a finished brief and is asking for execution (skip to the downstream build skills).
- The user wants a logo or a finished identity (use `logo-design`, `brand-identity`).
- The user wants to define voice for an existing brand (use `brand-voice`).
- Defining brand strategy from zero positioning (use `brand-ideation` first, then return to this skill).

---

## How this composes with other skills

This skill works upstream of build-time skills and parallel to the aesthetic methodology layer:

- **`brand-archetype-system`** (upstream input). The archetype catalog this skill picks from. The skill names the archetype in the rendered brief; it does not redefine the archetype's defaults.
- **`creative-direction`** (parallel input). The four-axis vocabulary the archetypes reference. If the consumer needs the full axis brief, run `creative-direction` first; this skill's brief consumes its outputs.
- **`brand-identity`** (downstream). Once the brief is approved, brand-identity turns it into a finished identity system.
- **`landing-page-copy`, `content-and-copy`, `art-direction`** (downstream). Every downstream skill that produces aesthetic output references this skill's brief.

Direct verbatim copying of an archetype's default palette into a new brand is the failure mode this skill exists to prevent. The brief shifts the archetype's defaults toward the business spec's specifics.

---

## The framework: five steps, three rules, one hybrid bank

1. **Locate the design space.** Pick one to two candidate archetypes from `brand-archetype-system` that fit the vertical and shape.
2. **Run input-side divergence.** Read the shipped-demos signatures. Discard candidates that would land sibling to anything shipped. Record what was rejected and why.
3. **Pull references.** From the curated reference bank under `references/reference-bank/`, load the file(s) matching the chosen archetype-and-vertical. Augment with one to two discovered live references if the bank is sparse. Add discovered references back to the bank in the build PR.
4. **Adapt.** Shift the chosen archetype's defaults (palette, type, voice, layout, imagery direction) toward the business spec. The brief lands as concrete tokens, not abstract families.
5. **Render and verify.** Render the brief using the template in [`references/02-brief-template.md`](references/02-brief-template.md). Run output-side divergence. Output the brief plus the references list plus the divergence-check result.

Full step-by-step in [`references/01-process.md`](references/01-process.md). The divergence schema and its three overlap rules are in [`references/03-divergence-check.md`](references/03-divergence-check.md).

---

## The hybrid references model

A curated bank that grows with each build. Each file under `references/reference-bank/` covers one archetype-and-vertical combination and holds three to six live reference URLs, each with a one-line why and optional palette or type observations. The bank ships with three seed combinations covering western-boot maker, heritage barbershop, and balloon-ride experience.

When a build draws from a sparse combination, the build is expected to commit the live references it discovered back to the bank as part of its build PR. The bank gets denser with use.

---

## The divergence schema

Each shipped demo carries a signature with seven fields:

- `slug`
- `archetype` (the canonical archetype name from `brand-archetype-system`)
- `dominant_hue_family` (the recognizable colour family, e.g. leather-bone-saddle, dawn-navy-coral, dark-linen-amber)
- `voice_register` (e.g. story-forward third-person, atmospheric second-person, fitment-first technical)
- `primary_structural_pattern` (e.g. shoppable-grid-product-forward, arc-timeline-hero, fitment-selector-then-rails)
- `hero_shape` (e.g. dual-column-image-and-text, wide-photograph-with-band-below, full-bleed-image-with-overlay; canonical vocabulary in `references/05-section-shapes-vocabulary.md`)
- `footer_shape` (e.g. single-line-strip, multi-column-sitemap, type-only-no-links; same vocabulary file)

Overlap rules (full set in [`references/03-divergence-check.md`](references/03-divergence-check.md)):

- Two demos share archetype AND share dominant_hue_family => **SIBLING (block)**.
- Two demos share archetype AND share voice_register AND share primary_structural_pattern => **SIBLING (block)**.
- Two demos share only dominant_hue_family across different archetypes => **WARN**.
- The candidate's hero_shape matches the hero_shape of two or more shipped demos => **WARN**.
- The candidate's hero_shape matches three or more shipped demos AND any share an archetype family => **BLOCK**.
- The candidate's footer_shape matches three or more shipped demos => **WARN**.

A worked example file of seven signatures lives at [`references/04-shipped-demos-signatures-example.md`](references/04-shipped-demos-signatures-example.md) for illustration; the live signatures file for any consuming project lives in that project, not in this skill.

---

## Trademark and attribution

Archetypes are NAMED for aesthetic families, NOT for brands, following the convention of `brand-archetype-system`. Live reference sites are cited as exemplars using nominative attribution language: "exemplified by [URL]", "characteristic of", "in the register of". This is descriptive and nominative fair use territory, durable across brand redesigns. A brand that pivots its identity does not invalidate the archetype it once exemplified.

---

## If required data is unavailable

This skill's output depends on data, measurements, or tool results it cannot generate on its own. When a required input, tool, or data source is unavailable or unverifiable, the sanctioned output is the deliverable with the gap stated: what was needed, what was actually obtained or verified, and which parts of the output are affected. Fabricating, estimating, or interpolating a required number to complete the deliverable is never sanctioned. A stated gap is a complete answer.

---

## Reference files

- [`references/00-overview.md`](references/00-overview.md) - The case for the skill, the hybrid references model, the two-direction divergence, the trademark posture.
- [`references/01-process.md`](references/01-process.md) - The five-step process, each step concrete enough to execute.
- [`references/02-brief-template.md`](references/02-brief-template.md) - The fillable brief template with section-by-section guidance.
- [`references/03-divergence-check.md`](references/03-divergence-check.md) - The signature schema and the overlap rules.
- [`references/04-shipped-demos-signatures-example.md`](references/04-shipped-demos-signatures-example.md) - Worked example signatures file with seven demos.
- [`references/05-section-shapes-vocabulary.md`](references/05-section-shapes-vocabulary.md) - Canonical open vocabulary of hero and footer section shapes plus archetype affinities.

The curated reference bank lives in a `reference-bank/` subdirectory under `references/`. The bank ships with a README plus three seed archetype-and-vertical files: `premium-dtc-maker-western-boots.md`, `heritage-local-service-barbershop.md`, and `hospitality-experience-balloon-ride.md`. The bank's purpose and extension procedure are documented in its README; the seed files each carry three to four positive live references and one to two negative references for the chosen position. Load the bank file matching the build's archetype-and-vertical at step 3 of the process.