Overview
Color
Brand color selection pattern for consistent AI identity signaling across UI surfaces
brandidentitypalette
Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | ColorOption[] | required | Available palette entries with id, label, hex value, and optional description |
selectedColorId | string | undefined | ID of the currently active color option |
onSelectColor | (colorId: string) => void | undefined | Optional callback fired when a color option is selected |
title | string | "AI Identity Color" | Heading shown above the color selector |
showLabels | boolean | true | Whether color labels are rendered alongside swatches |
variant | "swatches" | "chips" | "card" | "swatches" | Visual layout style for the color selector |
Docs
Color assigns a consistent visual signature to AI identity elements such as avatars, badges, and response containers. A stable palette helps users recognize AI-originated interactions at a glance and improves coherence across product surfaces. This pattern should balance recognizability with accessibility so color supports trust without becoming the only indicator.
Variants
- Swatch selector — Clickable color circles used to choose one active AI identity color.
- Labeled chips — Color options paired with textual labels for accessibility and clarity.
- Palette card — A panel showing primary and supporting colors for agent identity systems.
Use Cases
- Configuring brand-aligned AI assistant identities
- Differentiating multiple AI agents in shared workspaces
- Applying consistent color tags to AI-generated content
- Theme customization for enterprise deployments
- Accessibility-conscious visual identity tuning
Best Practices
- Never rely on color alone; pair with text labels or icons.
- Preserve contrast ratios for text and controls on selected colors.
- Keep the palette small and intentional to avoid visual noise.
- Use the same selected color across avatar, badges, and highlights.
- Provide neutral defaults for users who skip customization.