AI surface
Carbon's AI design vocabulary — popovers, gradient auras, soft borders, translucent skeletons — adopted verbatim and overridden to track Avala's brand accent (#FF5C00) instead of IBM Blue.
Aura
Brand-orange radial gradient that signals an AI-generated artifact. Used by AILabel, Slug, and the chat-sidebar variant of Popover.
Popover
AI-marked popover with the dedicated ai-popover-background tone, two-ring drop shadow (ai-popover-shadow-outer-01 / 02), and the brand-accent caret.
Carbon's AI popover vocabulary, Avala-branded. The caret tone comes from ai-popover-caret-center.
Gradient border
Soft gradient outline (ai-border-start → ai-border-end) around AI regions where a solid border would be too loud.
Body uses layer-02; border uses ai-border-start/end as a 135° gradient.
Same gradient border + an inner highlight + outer drop shadow drawn from ai-inner-shadow / ai-drop-shadow.
Skeleton
Loading states for AI-generated content use a softer skeleton pair (ai-skeleton-background / ai-skeleton-element-background) to signal "AI is composing" rather than "data is loading".
Token reference
Every AI surface role, with its g100 (dark canvas) value. Each maps to its Carbon counterpart byte-for-byte by name; values are Avala-branded.
| Sample | Token | Description | Value |
|---|---|---|---|
--ai-overlay | Modal scrim above AI surfaces. | rgba(15, 15, 30, 0.85) | |
--ai-popover-background | Dedicated background for AI-marked popovers (chat, AILabel callouts). | #1b1b2e | |
--ai-popover-shadow-outer-01 | Outer shadow ring 01 around AI popovers. | rgba(0, 0, 0, 0.12) | |
--ai-popover-shadow-outer-02 | Outer shadow ring 02 around AI popovers. | rgba(0, 0, 0, 0.08) | |
--ai-popover-caret-center | Caret centre tone where popover meets canvas. | #b24e2d | |
--ai-popover-caret-bottom | Caret bottom edge — full brand accent. | #ff5c00 | |
--ai-aura-start-sm | Small-aura inner stop (16% av-accent). | rgba(255, 92, 0, 0.16) | |
--ai-aura-start | Aura inner stop (40% av-accent). | rgba(255, 92, 0, 0.4) | |
--ai-aura-end | Aura outer stop (transparent). | rgba(255, 92, 0, 0) | |
--ai-aura-hover-background | Background under an AI element on hover. | #222222 | |
--ai-aura-hover-start | Aura inner stop on hover (brighter). | rgba(255, 92, 0, 0.5) | |
--ai-border-strong | Solid AI border (selection, focus). | #ff5c00 | |
--ai-border-start | Gradient border inner stop (faded accent). | rgba(255, 92, 0, 0.36) | |
--ai-border-end | Gradient border outer stop. | #ff5c00 | |
--ai-drop-shadow | Outer drop-shadow on AI surfaces. | rgba(0, 0, 0, 0.28) | |
--ai-inner-shadow | Inner shadow on AI surfaces (16% av-accent). | rgba(255, 92, 0, 0.16) | |
--ai-skeleton-background | Skeleton fill on AI surfaces. | #1a1a1a | |
--ai-skeleton-element-background | Skeleton element fill on AI surfaces. | #2a2a2a |
See AILabel, Slug, and the AI variant of Popover for the components that consume this surface in production.