The generative state problem
Traditional UI color handles two states: active (doing something) and passive (waiting). AI interfaces introduce a third state: generative — an in-progress computation with an unknown, streamed output. The gray spinner used for loading (a known outcome arriving) is not the right treatment for generation (an unknown outcome emerging). AI-native products benefit from a dedicated visual language for generation-in-progress: a pulsing accent color, a streaming gradient, or a visible in-progress cursor that signals active computation rather than passive waiting.
Streaming text color treatment
When LLM output streams character by character into the interface, the in-progress text needs visual distinction from completed text. A common and effective pattern: render streamed text at a slightly reduced opacity (75-85%) as it arrives, transitioning to full opacity as generation completes or reaches a completion boundary. This creates a natural fade-in quality — the interface visually communicates that content is still forming. The active cursor or generation point can use a subtle accent color pulse to track the streaming head without demanding foreground attention.
Confidence without numbers
Some AI features benefit from communicating model confidence: tag suggestions, autocomplete alternatives, content classifications. Color is one encoding channel for confidence gradients — a high-confidence suggestion in full color versus a lower-confidence alternative in muted gray uses value and saturation as probability proxies. Use this pattern for subliminal prioritization, not for cases where users need explicit probability values. If a decision is high-stakes (a medical diagnosis, a financial recommendation), surface numerical confidence alongside any color encoding rather than relying on color alone.
AI error and refusal states
AI models produce refusals, content policy blocks, and tool failures alongside normal output — these need color distinction from both successful output and standard form validation errors. A standard red inline error treatment is inappropriate for a model refusal that appears within a conversation stream. Most AI products use a visually contained block — a distinct background color (muted amber or neutral gray), a subtle left border accent, or a contained system-message treatment — to set off model-generated system messages from user/AI turn content while preserving the conversational visual rhythm.
Dark mode first for AI products
AI products are statistically more likely to be used in dark mode and disproportionately default to dark-first visual design. The terminal aesthetic, technical-professional positioning, and visual weight of large text blocks all favor dark backgrounds. If building an AI product, design the dark mode color system as the primary context and derive the light mode as the secondary variant — not the reverse. Test all generative state colors, streaming treatments, and confidence encodings in dark mode first.
