Skip to Content
GuidelinesAI ToolkitVisual Expression

Visual Expression v1.1

A working style guide for the AI expression across the design system: the mark (full size and small), the mark paired with the wordmark, and the mark inside components like badges and cards.

Principles

  • Match the expression to the moment. A quiet tag marks provenance, a glow highlights a recommendation, the full mark signals a judgment call.
  • Disclose in proportion. The more the AI decides, the more you tell the user. A tag is enough to show where something came from, a recommendation should point out what to check, and an action should ask before it runs.
  • Mark the group once, not every control. Set the AI context at the boundary so the mark keeps its meaning.
  • Pair a glow with a label. The glow draws the eye and the label says why. Limit it to one best match per view.
  • Use it sparingly. The expression only reads as special when most of the UI stays neutral.

Color

Two ramps anchor the AI expression: Primary, the brand cyan, and Insight, the violet that signals intelligence. The AI gradients blend the two: the strong gradient runs Insight 600 to Primary 300, and the subtle gradient is a soft tint pair for surface fills. The full token reference lives in Foundation → Colors.

Which gradient to use

  • --ai-gradient-strong: the hero gradient. Use for AI marks, icon fills, and glows. Never place text on it.
  • --ai-gradient-fill: the same gradient, darkened to carry white text at AA. Use for badges and buttons.
  • --ai-gradient-text: use when AI text itself needs the gradient, clipped onto the letters.
  • --ai-gradient: the quiet tint. Use for AI surface fills and backgrounds.

Primary

The brand cyan.
50
oklch(0.95 0.035 218)
100
oklch(0.92 0.045 216)
200
oklch(0.86 0.060 214)
300
oklch(0.80 0.080 212)
400
oklch(0.75 0.100 210)
500
oklch(0.69 0.112 207)
600
oklch(0.64 0.115 208)
700
oklch(0.52 0.120 210)
800
oklch(0.46 0.095 220)
900
oklch(0.2394 0.0455 252.445)

Insight

The violet that signals intelligence.
50
oklch(0.96 0.03 277)
100
oklch(0.92 0.05 277)
200
oklch(0.86 0.09 277)
300
oklch(0.78 0.14 277)
400
oklch(0.70 0.19 277)
500
oklch(0.62 0.22 277)
600
oklch(0.56 0.20 277)
700
oklch(0.48 0.17 277)
800
oklch(0.38 0.13 278)
900
oklch(0.30 0.10 278)

Same in light and dark

Theme-invariant
White text

AI Gradient (fill)

--ai-gradient-fill

A solid fill for badges and buttons. White text on it passes AA (4.97:1+). Stays dark in dark mode so the white text keeps contrast; the text gradient lifts instead.

Insight 600oklch(0.56 0.20 277)toPrimary 700oklch(0.52 0.120 210)

AI Gradient (strong)

--ai-gradient-strong

The full-strength gradient for AI marks, icon fills, and glows.

Insight 600#6C5AEFtoPrimary 300#69C7DD

Adapts per theme

Different ramp steps per mode
Gradient text

AI Gradient (text)

--ai-gradient-text

Use when AI text needs to sit on a theme-colored surface. Matches the fill colors in light mode, and lifts to lighter steps in dark mode to hold AA contrast.

LightInsight 600oklch(0.56 0.20 277)toPrimary 700oklch(0.52 0.120 210)
DarkInsight 400oklch(0.70 0.19 277)toPrimary 400oklch(0.75 0.100 210)

AI Gradient (subtle)

--ai-gradient

The soft tint for AI surface fills and backgrounds. The base name is the subtle tint, not the default gradient.

LightInsight 100oklch(0.92 0.05 277)toPrimary 50oklch(0.95 0.035 218)
DarkInsight 800oklch(0.38 0.13 278)toPrimary 800oklch(0.46 0.095 220)

Mark and wordmark

The mark, the Astroid icon, paired with the wordmark, set bold with tight letter spacing. Two fills: the AI gradient for expressive moments, and a solid fill for dense or small contexts.

The mark is not only brand. It is also the label that tells someone a feature is AI, the baseline transparency the EU AI Act calls for, so keep it visible wherever AI is at work rather than tucked behind a hover.

AI Identity

Gradient

AI Identity

Solid fill

In components

The small mark in context: section headers, badges, and buttons. Each example below is labeled with when to use it. Gradient fill uses the text-safe --ai-gradient-fill (white text, AA); soft tint uses --ai-gradient with foreground text. To implement these, use the AI variants on the Badge and Button components.

Section header

AI insights
Header

Badges

Best match
SolidHighest emphasis. Low-density spots with room, like a page header or a single featured card.
AI suggested
SoftMedium emphasis. The default inside cards and content.
AI generated
OutlineLowest emphasis. Dense contexts like tables, lists, and toolbars.

These are sensible defaults; use them as-is when they fit. The variant carries the meaning, not the label, so any label can take any variant; choose by emphasis and how dense the surface is. The caveat that AI can make mistakes is separate: it is not a badge passenger in any variant. It belongs to the surface around the content, shown once at the recommendation or action level.

Buttons

SolidHighest emphasis. The primary action in a view. Use one at a time.
SoftMedium emphasis. Supporting actions inside cards and content.
OutlineLowest emphasis. Inline or dense placements, and tertiary actions.

These are sensible defaults; use them as-is when they fit. The variant carries the meaning, not the label, so any label can take any variant; choose by how prominent the action should be and how dense the surface is. Keep one solid action per view so the primary choice stays clear.

Timeline marker

Upcoming
In progress
Complete (gradient)
Complete (solid)

Sourced 3 vendors

Compared price, warranty, and lead time

From Coupa catalog and 2 supplier quotes

In a timeline

Source line. When an AI step drew on retrieved data, name where it came from so the result is explainable and the user can trace it back. The names link to the source.

Thinking

Idle
Thinking

Surfaces

AI surfaces. The chat input takes an AI gradient border on focus. Cards come solid or glass, and a glow, an AI gradient shadow, can sit behind either. See the Card component page for implementation. The AI input variant is experimental, shown here for exploration.

Chat input

Default
Focus · AI gradient border

Input

Default
AI variant · Experiment

Card (Primary)

Coverage gap
Several claims are missing documentation that may trigger a denial.
The output is AI generated. Please review.
Glass · AI gradient shadow
Resubmit denied claims
12 have corrected modifiers ready and close their 90-day window this week.
The output is AI generated. Please review.
Gradient subtle · no border

Matches your request. $350/unit cheaper with EPP applied.

The output is AI generated. Please review.

Regular · icon lockup. Use with or without a border. Padding is built into the card surface.

Card (selectable)

Caveat footer. The glow and badge carry the confidence up top; the caveat sits quiet below, marked by a small info icon. Show it wherever AI generates content the user reads or acts on: recommendations, actions, and AI-generated insights. The mark, badges, and buttons are identity, not content, so they don't need it. Disclose once per surface: a footer on a single card, once under the mark for a group headed by the mark, and once below the group for a grid of equal-height cards.

Card (Group)

AI Identity

The output is AI generated. Please review.

Denials
Denial volume is trending down for the third straight week.
Payer anomalies
Two payers are flagged for a closer look this cycle.
Forecast on track
Projected recoveries remain on pace for the quarter.
Three glass cards over one shared, amorphous glow

Examples

Compositions that combine the mark, color, and components into real patterns. Each example shows the AI expression working alongside standard UI.

Activity timeline

A mix of AI and user activity. AI steps carry the mark across its states (complete, in progress, upcoming), while people appear as avatars.

  1. Sync to ERP

    Queued for the next run

  2. Posting entry

    9:16 AM

    Writing to the ledger

  3. PV

    Approved

    9:14 AM

    Peter Vachon

  4. Agent reviewed

    9:10 AM

    PO matched, terms verified

    From PO #8801 and vendor terms

  5. Data extracted

    9:08 AM

    Invoice parsed successfully

Product recommendation

Three glass product cards. The first is the AI pick: it uses the primary glass card with the glow and a gradient fill badge to set it apart from the standard results.

MacBook Pro 14"Best match

MacBook Pro 14"

M4 Pro · 14" Liquid Retina XDR · 24GB · 1TB

Matches your request · $200/unit cheaper with EPP applied

$1,999$2,199
MacBook Pro 16"

MacBook Pro 16"

M4 Max · 16" Liquid Retina XDR · 36GB · 1TB

$2,499$2,899
MacBook Air 15"

MacBook Air 15"

M3 · 15" Liquid Retina · 16GB · 512GB

$1,499$1,699
The output is AI generated. Please review.

Pairing a glow with a label

The glow lifts the recommended card off the grid, and the gradient fill badge names why it stands out. The two work as a pair: the glow draws the eye, the label explains the emphasis. Use the combination for a single best match per view so the signal stays meaningful, and keep the glow soft. It guides attention without the hard edge of a border or a solid color block.

Recommended actions

A card group over one shared glow, headed by the mark. Each card pairs an action with its impact metrics and offers to automate or dismiss it.

Recommended actions

The output is AI generated. Please review.

Verify coverage pre-service

Automate batch eligibility checks 3 days before service date and flag inactive policies for patient outreach

$431.5K

revenue impact

11.7%

of total denials

129

related denials

Correct coding mismatches

Deploy coding scrubbers that cross-reference NCCI edits and payer modifier rules before claim generation

$288.7K

revenue impact

15.6%

of total denials

87

related denials

Mark the group once, not every control

When several AI recommendations are grouped together, establish the AI context a single time at the section level. The shared glow contains the group, and the mark with the section title signals that everything inside is AI generated. Repeating the mark on every card, badge, and button within dilutes it and leads to mark fatigue, so the controls inside can stay neutral. Setting the expression at the boundary keeps it present and meaningful without overuse.

Plan selection

Selectable cards in a guided choice. The agent's pick is the AI variant with its gradient glow on select and an Agent pick badge, while the alternatives are standard. An AI note frames the recommendation above the options.

Which plan tier for the Denver lines?

Your T-Mobile MSA includes three business tiers. Based on the SE team's usage, Business Pro fits.

The output is AI generated. Please review.

See how this toolkit meets AI transparency and disclosure requirements →

Last updated on
Solution testsLegal