AI Toolkit v1.0

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.
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.

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.

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.

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

Picked for you

SolidA featured, high-confidence AI moment

AI suggested

SoftStandard in-context marker

AI generated

OutlineQuiet provenance tag

Buttons

SolidThe marquee action

SoftSecondary, in-context

OutlineSubtle, inline

Timeline marker

Upcoming

In progress

Complete (gradient)

Complete (solid)

Sourced 3 vendors

Compared price, warranty, and lead time

In a timeline

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 Input and Card component pages for implementation.

Chat input

Default

Focus · AI gradient border

Input

Default

AI variant

Card (Primary)

Coverage gap

Several claims are missing documentation that may trigger a denial.

Glass · AI gradient shadow

Recommended action

A soft primary surface used for calling attention to recommended actions

Gradient subtle · no border

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

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

Card (selectable)

Card (Group)

AI Identity

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.

Sync to ERP
Queued for the next run
Posting entry
9:16 AM
Writing to the ledger
PV
Approved
9:14 AM
Peter Vachon
Agent reviewed
9:10 AM
PO matched, terms verified
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.

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"

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

$2,499$2,899

MacBook Air 15"

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

$1,499$1,699

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

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

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.