# GroupGPT — Brand Rules for Agents

Canonical: https://branding.groupgpt.tech · Full spec: https://branding.groupgpt.tech/brand.md

## The ten rules

1. **No hue, ever.** The palette is greyscale: black -> graphite -> silver -> white. The only sanctioned
   colors in the whole system are `--error-red #ff4444` and E2EE green `#10b981`. If you are reaching for
   a color to convey state, use weight, contrast, or inversion instead.
2. **Never infer a color from a token name.** `--purple-*` are legacy aliases that resolve to black and grey.
   Read the value, not the name.
3. **Verify in the running app.** Screenshot the live surface before a styling change. The app canvas is a grey
   vertical gradient with frosted light-glass panels and dark ink text — it is *not* dark-on-dark, despite
   `--rich-black` being the base background token.
4. **Use tokens, not literals.** New CSS references `var(--accent)`, `var(--radius-md)`, etc. A raw hex in a
   component is a bug unless it is being added to the token layer on purpose.
5. **Two typefaces only.** League Spartan (400-800) for everything; Italiana (400) for display and eyebrows.
   No third family, and never body copy in Italiana.
6. **Glass over flat.** New panels get `backdrop-filter: blur(10-20px)` plus a translucent fill and a hairline
   border — not an opaque card.
7. **No one-off treatments.** If an element needs a chip, badge, or bespoke icon style nothing else has, that is
   a signal to remove the exception, not to add it. Icons inherit color from their container.
8. **Keep the composer in the message lane.** Chat column max is 1080px and the input shares it.
9. **Motion stays quiet.** 0.2s ease. The card-flip between world and private chat is the only expressive transition.
10. **When docs and code disagree, the rendered app wins** — then fix the docs.

## Paste-ready constraint block

```
GroupGPT brand constraints (authoritative — see https://branding.groupgpt.tech):

- Monochrome grayscale, dark-first, "lux not crunchy". NO hue accent anywhere.
  Only sanctioned colors: --error-red #ff4444, E2EE green #10b981.
- --purple-* tokens are LEGACY ALIASES that resolve to black/graphite/grey.
  Never treat them as purple. Read values, never token names.
- Fonts: League Spartan (400-800) for all UI; Italiana (400) for display only.
- Core tokens: --rich-black #0F1218, --accent #1a1a1a, --accent-soft #525252,
  --text-main #fff, --text-muted rgba(255,255,255,.55), --text-dim rgba(255,255,255,.4)
- Canvas: linear-gradient(180deg,#161616 0%,#5c5c5c 28%,#9a9a9a 55%,#a0a0a0 100%)
- Glass panels: backdrop-filter blur(10-20px) + rgba(0,0,0,.05-.09) fill,
  rgba(0,0,0,.14) border. Input bar is frosted light rgba(225,225,225,.45).
- Radius: sm 8 / md 12 / lg 20. Sidebar 320px, header 70px, chat column max 1080px.
- Send button 44x44 circle filled --accent. Selection = --accent bg, white text.
- Bot/Cortez bubbles are inverted dark cards; human bubbles are light cards.
- Logo is always a circle: 105px desktop / 68px mobile / 53px narrow,
  4px dynamic border + 3px white @12% outline + 0 4px 24px rgba(0,0,0,.35).
- Motion: 0.2s ease. No bounce. Icons inherit color; no bespoke badges.
- Use var() tokens, never raw hex. Screenshot the running app to verify.
```

## Copy voice

Plain language, no hype, no exclamation marks. Errors say what to do next, not what broke internally.
State distinctions explicitly when two things are easy to confuse.