# Brainstorm X — Design System > **AI brand naming, turned into a collaborative 3D game.** Brainstorm X is a collaborative AI naming platform. Teams move through a short wizard, invite collaborators, then enter a shared **Name Arena** — a playful, neon "nebula" space where AI-generated name ideas float, cluster, heat up, cool down and evolve based on group voting. The goal: help a team discover a strong, memorable brand name faster, while making the process feel fun and visual. This design system encodes the brand: a dark cosmic void, neon energy accents, a fire↔ice heat spectrum that drives the voting mechanic, and a playful-but- readable game-meets-SaaS aesthetic ("Holographic Studio × Neon Name Nebula"). --- ## Sources This system was built **from a written product brief** — there was no existing codebase, Figma file, or prior visual identity to recreate. All product context, copy, flows, mechanics, data model and feature naming come from: - `uploads/brainstorm-x-prototype-plan.md` — *Brainstorm X — Collaborative AI Naming Prototype Plan* (prototype brief / product plan, 17 June 2026, prepared for Cloud Design / DesignStack). The brand's visual language (colour, type, glow, motion) was **authored here**, guided by the brief's recommended visual direction (§6, §7, §19): *Neon Name Nebula* for impact, with the clarity of the *Holographic Studio* control-room. Where the brief named features, we kept those names (Name Arena, Name Wave, Keyword Boost, On Fire, Frozen, Finalists, Naming Snapshot, Evolve). > Working title: the brief flags "Brainstorm X" as a working name (§31.5) — the > product could eventually use its own naming process to find a more distinctive > one. Treat the wordmark as provisional. --- ## Content fundamentals **Voice:** Encouraging creative director. Brainstorm X is a calm facilitator that makes a fuzzy task (naming) feel like a game you can win together. Confident, warm, never corporate, never hypey. - **UK English, always.** "favourite", "colour", "shortlist", "organise", "personalise", ".co.uk". (Client is DesignStack, UK.) - **You, not we, in product.** Speak to the user and their team: *"Invite your team"*, *"Watch ideas evolve"*, *"Vote on your favourites"*. Use "we" only for system promises (*"we'll send a secure magic link"*). - **Sentence case everywhere.** Headlines, buttons, labels, nav. Never Title Case UI, never ALL CAPS prose. (Exception: mono eyebrows/labels are uppercase — see Visual Foundations.) - **Short, active, verb-led.** CTAs are imperatives: *Start a naming session*, *Generate next wave*, *Send magic link*, *Join brainstorming session*. Aim for 2–4 words on buttons. - **Plain over clever.** Explain the concept fast and literally before being playful. *"Brainstorm X helps teams create better brand names using AI, live collaboration and an interactive 3D workspace."* - **Naming-domain language.** The product has its own light vocabulary — lean on it, but always gloss it once: *Name Wave* (a generated batch), *Keyword Boost*, *On Fire* (strong group favourite), *Frozen* (rejected direction), *Finalists* (shortlist), *Naming Snapshot* (the AI report). - **Microcopy is helpful, not cute.** *"Add words, themes or existing names that point the AI in the right direction."* Tell people what to do and why. - **Numbers feel alive, not corporate.** Heat scores, vote counts, confidence % are framed as session energy, not analytics. *"On fire — strong team consensus."* **Emoji:** Used **deliberately and sparingly**, and only as part of the heat mechanic. 🔥 marks hot / on-fire names; ❄️ marks cold / frozen ones. They are small reaction markers, never decorative headline garnish. Do not use any other emoji in product or marketing copy. **Tone examples from the brief (reuse verbatim where possible):** - Hero: *"Brainstorm brand names in a live AI-powered 3D space."* - Wizard intro: *"Let's train your naming session."* - Invite: *"Bring your team into the session."* - Arena tooltip: *"Welcome to your Name Arena. Vote on names, boost keywords and generate new waves of ideas. Names that your team likes will grow. Names that miss the mark will cool down."* **Avoid:** trademark/legal claims about name availability (always *"check separately"*), "revolutionary/game-changing" hype, exclamation-mark overload, gendered or exclusionary language, and presenting AI output as final truth — it's a starting point the team shapes. --- ## Visual foundations The brand lives in a **dark cosmic void**. Think a calm, deep-space arena lit by neon energy — anime-inspired colour and glow, but with SaaS-grade clarity and high-contrast, readable type. Everything reads as "a creative strategy tool wrapped in a light game layer." ### Colour - **Foundation is dark.** Pages sit on the void (`--void-1000 #06060E` → `--void-900 #0A0A18`). The signature backdrop (`.bx-nebula-bg`) layers faint cyan / violet / magenta radial glows over a vertical void gradient — never a flat slab, never a busy texture. - **Three neon energies:** cyan `#2DE2E6` (primary — "AI energy"), magenta `#FF3DA6` (the spark), violet `#8A5BFF` (depth/accent). Lime `#A8FF4D` is the affirm/upvote colour. Neon is used as **light** — small fills, glowing edges, glows — not large flat areas. Big neon fills get dark ink (`--text-on-neon`). - **The heat spectrum is the soul of the product** and the main semantic system: warm `#FFC24B` → hot `#FF8A3D` → on-fire `#FF3B5C` for rising names; cool `#4FB0FF` → frozen desaturated `#8198C6` for falling ones; neutral `#6E6BA0` for undecided. State is *always* signalled by more than colour (size, glow, position, icon, label) for accessibility. - **Gradients are reserved.** The nebula gradient (cyan→violet→magenta) and the fire gradient appear only on the wordmark, hero words, and "on fire" name cards. Never use gradients as generic button or card fills. Avoid the AI-slop purple-only gradient — our gradients always travel across the full neon trio or the warm heat ramp. ### Type - **Unbounded** (display) — playful, rounded, geometric. Wordmark, hero headlines, big stat/score numbers. Weights 700/800. Used at large sizes only. - **Space Grotesk** (sans) — all UI, body, buttons, labels. Has techy character without being Inter/Roboto. Weights 400–700. - **Space Mono** — eyebrows, style tags, scores, pronunciation, keyword chips, any "data/console" moment. Uppercase + wide tracking for eyebrows/labels. - Display sets **tight** (`-0.02em`, line-height ~1.05) and balanced; body sets at 1.5 with `text-wrap: pretty`. Minimum body 14px; never below 11px (mono labels). On 1280×720 slides, never below 24px. ### Space, radius, layout - 4px grid; game UI runs roomy — favour the larger steps. - **Rounded and friendly:** controls/inputs at `--radius-md 14px`, cards at `--radius-lg 20px`, name cards & big panels at `--radius-xl 28px`, hero glass at 36px, chips/avatars fully pill. Almost nothing has a sharp corner. - Content max ~1080px; wide shells ~1320px. Controls are 44px tall by default (touch-safe); large CTAs 56px. ### Surfaces, borders, shadows, glass - **Cards** are lifted dark panels (`--surface-1 #14132A`) with a faint violet hairline border (`--line-2`), large radius, and a deep soft shadow (`--shadow-md/lg`). Hover lifts to `--surface-2` and adds a soft glow. - **Holographic glass** (`.bx-glass`) — translucent violet-tinted panels with `backdrop-filter: blur(18px)`, a top sheen highlight, used for floating HUD panels, the arena's side panel, modals, and the nav bar over the nebula. Transparency + blur is used when content floats *over* the 3D scene; solid surfaces are used in plain forms/wizard. - **Glow is the elevation language**, not just shadow. Active/hot/selected elements carry a coloured outer glow (`--glow-cyan/magenta/fire/ice`). Glows are soft and never neon-bright enough to hurt contrast of text inside. - Inputs are recessed wells (`--surface-inset`) with an inner feel; focus draws a 3px cyan ring (`--focus-ring`). ### Motion - **Snappy with a little anime spring.** Default `--ease-out` for most UI; `--ease-spring` (gentle overshoot) for things that "pop" — boosting a keyword, a name becoming shortlisted, vote reactions. Durations 140/240/420ms. - **Arena idle life:** name cards float on slow 6s loops; hot names gently pulse; cold names drift outward and lower opacity; new names drop in like glowing fragments. All motion is gentle and respects `prefers-reduced-motion` (everything collapses to instant). - **Hover:** lift + soft glow + slight brighten (never a hard colour swap). **Press:** scale down ~0.96 and deepen colour — a tactile "squish". - **Micro-reactions:** small spark on upvote, cool mist on downvote, a bounce on keyword boost, a group-glow when several people like the same name. Subtle, supportive, never confetti-spam. ### What we avoid Flat black (#000) backgrounds, pure-white panels in the app, busy textures, hard 1px sharp-corner cards, purple-only gradients, emoji outside the heat mechanic, left-border-accent cards, and any motion that distracts from reading the names. --- ## Iconography - **Primary set: [Lucide](https://lucide.dev)** (CDN), used as line icons at 1.75–2px stroke, `currentColor`, typically 18–20px in UI and 16px inline. Lucide matches the brand's rounded, friendly geometry. Load from CDN; see usage in any UI kit `index.html`. *(Substitution note: there was no brand icon set in the brief — Lucide is our chosen standard, flagged here for your sign-off.)* - **Heat reactions use emoji**, by design (brief §8.3): 🔥 hot / on-fire, ❄️ cold / frozen. These are the *only* emoji in the system and appear only as small heat markers on name cards and vote controls. - **Vote glyphs** map to Lucide: up `arrow-big-up` / `chevron-up`, down `arrow-big-down` / `chevron-down`, shortlist `star`, comment `message-circle`, evolve `sparkles`, generate `zap` / `wand-sparkles`. - **The wordmark / logo** is the word *Brainstorm X* in Unbounded with an "X" rendered as a small four-point spark glyph filled with the nebula gradient — see `assets/`. No separate app icon is defined yet (flagged for the user). - We **do not** hand-draw bespoke SVG illustrations or use icon emoji elsewhere. Decorative "stars/particles" in the nebula are CSS, not icons. --- ## Index — what's in this system **Foundations** - `styles.css` — the single entry point consumers link. - `tokens/` — `colors.css`, `typography.css`, `spacing.css`, `effects.css`, `fonts.css`, `base.css`. Custom properties + base element styles. - `guidelines/` — foundation specimen cards (rendered in the Design System tab). **Brand assets** — `assets/` - `logo-brainstorm-x.svg`, `mark-spark.svg`, `wordmark-*` — logo & spark mark. - nebula backdrop + sample imagery. **Components** — `components//` (React primitives; see each `.prompt.md`) - `core/` — Button, IconButton, Badge, Avatar, Card. - `forms/` — Input, Textarea, Chip, SentimentSlider, ProgressSteps. - `arena/` — NameCard, KeywordOrb, VoteBar, HeatBadge, PresenceStack. **UI kits** — `ui_kits//` - `marketing/` — landing page + how-it-works (the public site). - `app/` — the product: naming wizard, invite, **Name Arena**, shortlist, report. **Skill** — `SKILL.md` (Agent-Skills compatible; for use in Claude Code). See `check_design_system` output for the runtime namespace used to mount components from `window.`.