# GroupGPT Brand System

> Canonical: https://branding.groupgpt.tech
> Tagline: **The social AI**
> Character: monochrome grayscale, dark-first, "lux not crunchy."

## 0. The one rule

There is **no hue accent anywhere** in the GroupGPT UI. The palette is black -> graphite -> silver -> white.
The only sanctioned colors in the entire system are `--error-red #ff4444` (error states) and E2EE green `#10b981` (encryption badge).

The `--purple-*` tokens are **legacy aliases kept for backwards-compatibility only** — every one resolves to black/graphite/grey.
Treat "purple" as a historical variable name, never a color. **Read values, never token names.**

## 1. What GroupGPT is

A multi-user group chat platform where an AI ("Cortez") participates as a real member of the room — not a 1:1 chatbot bolted onto
messaging, but a shared, persistent AI presence for teams, communities, and groups of friends. Rooms build long-term memory
("Neurons"), host multiple custom AI personas at once, support voice/video, and include a public "World Chat" anyone can watch
without signing up.

Feel: restrained, expensive, engineered. Greyscale depth over color, frosted glass over flat cards, quiet motion over bounce.
The product gets its energy from the conversation inside it, never from the chrome around it.

## 2. Logo

Circular avatar mark (`app-logo--branded`). Master asset: `logo.png`, 1080x1080 RGBA.

| Property | Spec |
|---|---|
| Shape | perfect circle, `border-radius: 50%`, `object-fit: cover` |
| Size desktop | 105 x 105 px |
| Size mobile | 68 px |
| Size narrow mobile | 53 px |
| Border | 4px solid, color set dynamically per room |
| Outline | 3px white at 12% opacity |
| Shadow | `0 4px 24px rgba(0,0,0,0.35)` |
| Login screen | uses its own `login-logo.png` — never retune the shared logo for login |

Do: keep it circular at every size; let the border take the room's dynamic color; clear space >= half its diameter.
Don't: square it, recolor/gradient/tint the mark, add a bespoke chip or badge behind it, or stretch it off 1:1.

## 3. Typography

**Primary (all UI + body):** League Spartan — 400, 500, 600, 700, 800
`@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800&display=swap')`
Fallbacks: `Geneva, Verdana, sans-serif`. Base `line-height: 1.6`, weight 400.

**Secondary (display/accent only):** Italiana — 400 only
`@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap')`
Eyebrows, display lines, small caps-style labels. Never body copy or UI labels.

Headlines: League Spartan 700-800, tight tracking (`-.02em` to `-.035em`).
Rendering: `font-synthesis: none`, `-webkit-font-smoothing: antialiased`, `text-rendering: optimizeLegibility`.
No third typeface.

## 4. Color — live tokens

Source: `ggpt-cortex/src/index.css` + `src/App.css`.

| Token | Value | Usage |
|---|---|---|
| `--rich-black` | `#0F1218` | Base background |
| `--accent` | `#1a1a1a` | Filled buttons, active states, focus, text selection |
| `--accent-soft` | `#525252` | Links, icons, hover text |
| `--text-main` | `#ffffff` | Primary text |
| `--text-muted` | `rgba(255,255,255,0.55)` | Secondary text |
| `--text-dim` | `rgba(255,255,255,0.4)` | Placeholder, tertiary text |
| `--error-red` | `#ff4444` | Error states only |
| E2EE green | `#10b981` | Encryption badge only |

Surfaces:

| Token | Value | Usage |
|---|---|---|
| `--bg-gradient` | `linear-gradient(180deg,#161616 0%,#5c5c5c 28%,#9a9a9a 55%,#a0a0a0 100%)` | World chat canvas |
| `--glass-bg` | `rgba(0,0,0,0.05)` | Glass panel fill |
| `--glass-bg-hover` | `rgba(0,0,0,0.09)` | Glass panel hover |
| `--surface-dark` | `rgba(15,18,24,0.8)` | Dark overlay surfaces |
| Input bar fill | `rgba(225,225,225,0.45)` | Frosted light composer on dark chat |
| Scrollbar thumb | `rgba(120,120,120,0.2)` | 6px thumb, transparent track |
| Neuron left | `#dcdcdc` | Left hemisphere, silver |
| Neuron right | `#8d8d8d` | Right hemisphere, graphite |

Legacy aliases (grayscale — do not reintroduce as purple):

| Token | Value | Maps to |
|---|---|---|
| `--purple-mid` | `#1a1a1a` | primary accent (graphite/black) |
| `--purple-light` | `#525252` | secondary accent (grey); `#2a2a2a` in some scopes |
| `--purple-border` | `rgba(0,0,0,0.14)` | Surface borders |
| `--purple-glow` | `0 0 0 3px rgba(0,0,0,0.12)` | Focus ring |

## 5. Shape & layout

| Token / metric | Value |
|---|---|
| `--radius-sm` | 8px |
| `--radius-md` | 12px |
| `--radius-lg` | 20px |
| Avatars | circle (50%) |
| `--sidebar-width` | 320px |
| `--header-height` | 70px |
| Chat column max | 1080px (messages + input share the lane) |
| Send button | 44 x 44 circle |
| Scrollbar | 6px, transparent track |
| Min body width | 320px |

## 6. Design language

- **Monochrome / no hue** — greyscale only, black -> graphite -> silver -> white.
- **Glass-morphism panels** — `backdrop-filter: blur(10-20px)` + `rgba(0,0,0,0.05-0.09)` fills + `rgba(0,0,0,0.14)` hairlines.
- **Dark-first** — `color-scheme: dark`; light surfaces are used for the input area only.
- **Input bar** — frosted light `rgba(225,225,225,0.45)` on dark chat, dark ink text.
- **Send button** — 44x44 circle, filled `--accent`.
- **Text selection** — solid `--accent` background, white text, everywhere.
- **Human vs non-human** — human messages are light cards; Cortez/bot personas are inverted dark cards with light text.
  Cards nested in a bot bubble (search results, scaffolds) must be re-tinted for the dark ground.
- **Icons** — inherit color from the surrounding button. No bespoke chip or badge behind a single icon.
- **Brain/Neuron graph** — left hemisphere silver `#dcdcdc`, right hemisphere graphite `#8d8d8d`.
- **Motion** — card-flip for world <-> private switch; otherwise subtle `0.2s ease`. No bounce, no spring.

## 7. Copy voice

Plain language, no hype, no exclamation marks. Errors say what to do next, not what broke internally
(a rejected room link explains how to ask a member for a temporary invite — it does not surface a 403).
State distinctions explicitly when two things are easy to confuse: the permanent room link does not add new people;
the temporary link is open to anyone until it expires.

## 8. Agent rules

1. **No hue, ever.** Only `--error-red #ff4444` and E2EE green `#10b981` are exempt. Convey state with weight, contrast, or inversion.
2. **Never infer a color from a token name.** `--purple-*` resolves to black/grey.
3. **Verify in the running app.** The live canvas is a grey vertical gradient with frosted light-glass panels and dark ink text — not dark-on-dark, despite `--rich-black` being the base token. Screenshot before styling.
4. **Use tokens, not literals.** Raw hex in a component is a bug unless you are deliberately adding to the token layer.
5. **Two typefaces only.** League Spartan everywhere; Italiana 400 for display. No third family, no Italiana body copy.
6. **Glass over flat.** New panels get `backdrop-filter: blur()` + translucent fill + hairline border.
7. **No one-off treatments.** A bespoke chip/badge nothing else has is a signal to remove the exception, not add it.
8. **Keep the composer in the message lane.** Chat column max 1080px, shared by input.
9. **Motion stays quiet.** 0.2s ease; the world/private card-flip is the only expressive transition.
10. **When this doc and the code disagree, the rendered app wins** — then fix this doc.

## 9. Upstream sources

| Source | Role |
|---|---|
| `GGPT/GroupGPT Branding.md` | Branding vault note — the written spec |
| `ggpt-cortex/src/index.css` + `src/App.css` | Live tokens — wins any disagreement |
| The running app | Final arbiter |