Phase A — Remaining /brand Responses Design Proposal

Date: 2026-04-22 Scope: Redesign /brand logo + /brand search + /brand help to match the shared design language; add three new subcommands /brand applications, /brand icons, /brand photography.

Shared language is already documented in ~/Projects/brand-guide-mcp/docs/SLACK-UX.md. This doc specifies per-response block structures only.

Emoji anchors (extended set)

Category	Prefix	Rationale
`/brand logo`	🏷	Label = brand mark
`/brand applications`	🖼	In-context usage across touchpoints
`/brand icons`	🔣	"Input symbols" glyph — matches icon library semantics
`/brand photography`	📷	Obvious
`/brand search`	🔎	Obvious
`/brand help`	📖	Reference manual / guidebook

Pattern decisions (additions to design language)

Standalone Don'ts list (not paired with a Do) → rich_text_list with ✗ prefix per item, bold if the source data has a label. One block, scannable, consistent with the "Never use" pattern from /brand messaging.
Paired Do/Don't (like voice examples) → ✅ as full-weight rich_text, ❌ as context block. Unchanged from existing design.
Tags / pill-style metadata → inline-code rtCode() elements, space-separated, in one rich_text_section. Matches foundation's personality treatment.
"Spec" strings that already contain a colon (e.g. "Header: Navy (#112D40) background") → split on first colon, bold the prefix, keep the rest as body. Fallback to plain body if no colon.
File download links → mrkdwn <url|label> inside a context block. Context keeps the download affordance visible but de-emphasized below the content.

Per-response specs

1. `/brand logo`

header: 🏷 Logo
divider
header: Wordmark — Cream
context: Dark backgrounds · <svgUrl|Download SVG>
section: Primary wordmark in cream (#FDF9E3) for use on dark (navy) backgrounds.
divider
header: Wordmark — Navy
context: Light backgrounds · <svgUrl|Download SVG>
section: Navy (#112D40) wordmark for use on light or beige backgrounds.
divider
header: Guidelines
rich_text_list:
  • Clear space (bold) — Maintain a minimum clear space equal to the cap height of the 'C'…
  • Minimum size (bold) — Do not reproduce the wordmark smaller than 120px wide…
divider
header: Don'ts
rich_text_list (✗  prefix per row):
  • ✗  Do not stretch or distort the wordmark
  • ✗  Do not change the wordmark colors outside of approved variants
  … (4 more)
footer (shared)

Logo inline PNG previews come later in Phase B — they'll slot in as image blocks under each variant's context line.

2. `/brand applications`

header: 🖼 Applications
section: [overview paragraph]
divider

(for each touchpoint, 5 total)
  header: Website
  section: [description paragraph]
  rich_text_list (specs — split on first colon, bold prefix):
    • Header (bold): Navy (#112D40) background, beige wordmark
    • Body (bold): Beige (#FDF9E3) background, navy text
    • CTAs (bold): Yellow (#FFBC21) buttons with navy text
    • Headlines (bold): Milo Serif OT, bold weight
    • Body text (bold): Outfit, regular weight
  divider

header: Principles
rich_text_list:
  • Consistency (bold) — Every touchpoint should feel like it comes from the same family…
  • Warmth — The brand should feel approachable and human…
  • Restraint — Less is more…
footer

Block count: ~26. Well under 50.

3. `/brand icons`

header: 🔣 Icons
context: Font Awesome Pro 7 Sharp Solid · Commercial (Font Awesome Pro)
section: [guidelines.library paragraph — context on where this lives]
divider
header: Icon Library
rich_text_list:
  • Arrow Forward (bold) — Navigation, next actions, links
  • Checkmark (bold) — Success, confirmation, completed items
  • Close (bold) — Dismiss, close modals, remove items
  … (5 more)
divider
header: Guidelines
rich_text_list (split on first colon, bold prefix):
  • Sizing (bold) — 16px, 20px, 24px, or 32px. Do not scale below 16px.
  • Color (bold) — Navy (#112D40) or Beige (#FDF9E3). Yellow (#FFBC21) may be used…
  • Spacing (bold) — Maintain at least 8px of padding around icons…
divider
header: Don'ts
rich_text_list (✗  prefix):
  • ✗  Do not use icons as decoration without purpose
  … (3 more)
footer

Block count: ~12. Fine.

4. `/brand photography`

header: 📷 Photography
section: [overview paragraph]
divider

(for each category, 4 total)
  header: Architectural Renders
  rich_text: pills row — `Hero imagery`   `Golden hour`   `Community scale`
  section: [description paragraph]
  divider

header: Mood Rules
rich_text_list: [5 rules, no labels — just bullet + text]
divider

header: Do
rich_text_list:
  • ✓  Show real places and real people
  • ✓  Use warm, natural lighting
  … (3 more)
divider

header: Don't
rich_text_list (✗  prefix):
  • ✗  Use generic stock photography
  • ✗  Oversaturate or apply heavy color grading
  … (4 more)
footer

Block count: ~24. Fine.

Design choice — Do/Don't treatment: Photography's Dos and Don'ts are standalone lists (not paired examples), so both render as rich_text_list with prefixes. The ✓/✗ anchor glyphs do the visual work. This differs from voice examples where Do/Don't are PAIRED (matched semantic content) and get the asymmetric full-weight/muted treatment. Pattern: paired examples → asymmetric; standalone lists → symmetric with glyph anchors.

5. `/brand search`

Results found:

header: 🔎 Search: "{query}"
context: {N} results
divider
rich_text_list:
  • Colors (bold) — {snippet}
  • Voice (bold) — {snippet}
  … (up to search result limit)
footer

No results:

header: 🔎 Search: "{query}"
section: No matches. Try: `colors`, `typography`, `logo`, `voice`, `messaging`, `foundation`, `applications`, `icons`, `photography`.
footer

6. `/brand help`

header: 📖 Brand Guide
section: Ask me about California Forever's brand — colors, typography, voice, messaging, and more. Any command below works as `/brand {name}`.
divider
header: Commands
rich_text_list:
  • `/brand colors` (code) — palette with hex codes, usage, and native Slack swatches
  • `/brand typography` (code) — typefaces + type scale
  • `/brand logo` (code) — wordmarks, guidelines, don'ts
  • `/brand voice` (code) — voice traits, tone by context, writing rules, this/not-this examples
  • `/brand messaging` (code) — tagline, elevator pitch, key messages, boilerplate, naming
  • `/brand foundation` (code) — mission, vision, story, values, personality, audience
  • `/brand applications` (code) — how the system works across touchpoints
  • `/brand icons` (code) — icon library + usage guidelines
  • `/brand photography` (code) — categories, mood rules, do's & don'ts
  • `/brand search {query}` (code) — full-text search across everything above
footer (shared)

New route handler subcommands

Add three cases to app/api/slack/commands/route.ts for applications, icons, photography — wire them through lookup() so they pick up the shared footer automatically.

BrandCategory type in lib/brand-guide.ts needs to include the three new keys. Verify the CF brand guide API exposes them (it does — all three live under /api/brand/{category}).

Open questions before implementation

None blocking. Moving to implementation after approval.

What happens next

Approval on this doc.
Implement all six in lib/slack/format.ts + route handler update.
Preview all 6 via scripts/post-redesign-previews.ts (extend to cover new categories).
Iterate if anything looks off.
Commit atomically, push, deploy, verify in Slack.
Update docs/SLACK-UX.md with the new Per-category specs + any extensions to the design language.
Move to Phase B (logo PNG rasterizer).

Phase A — Remaining /brand Responses Design Proposal

Emoji anchors (extended set)

Pattern decisions (additions to design language)

Per-response specs

1. /brand logo

2. /brand applications

3. /brand icons

4. /brand photography

5. /brand search

6. /brand help