Advisor AI Agent — Design System Token Migration

Before / after report · advisor-ai-agent.html now reads from Advisor DS 2.0 via ds-tokens.css

colours tokenised

exact DS match

snapped to DS

extended (pending DS)

182

total usages

How it now works: a new ds-tokens.css holds the DS 2.0 variables (mirrored from packages/tokens + src/index.css). The prototype links it, the inline tailwind.config maps every named utility to those variables, and hard-coded hex in the <style> block became var(--token). JS chart colours resolve to literal DS hex (so SVG strokes still render). Edit a value in ds-tokens.css → the whole prototype re-themes. The untouched original is saved as advisor-ai-agent.original.html.

1 · Exact DS matches no visual change7 colours

The prototype was already built on Alpheya values — these were identical to DS 2.0 and only got centralised into tokens.

Before		After (DS token)	Uses
`#1f2123`	→	`#1f2123`--foreground	61
`#f2f6f9`	→	`#f2f6f9`--muted	15
`#687178`	→	`#687178`--secondary-foreground	4
`#08d2ae`	→	`#08d2ae`--teal	2
`#e9edf1`	→	`#e9edf1`--accent	1
`#ffffff`	→	`#ffffff`--background	1
`#e6eaee`	→	`#e6eaee`--border	1

2 · Snapped to DS minor visual shift30 colours

Off-token greys, pale surfaces and semantic status colours were realigned to the nearest DS 2.0 token. Each shift is small and moves the prototype onto the system.

Before		After (DS token)	Uses
`#fff`	→	`#ffffff`--background	18
`#c5cbd3`	→	`#dee3e7`--input	8
`#d4d7da`	→	`#dee3e7`--input	5
`#fafbfc`	→	`#f2f6f9`--muted	3
`#0a6c8f`	→	`#193cb8`--info-foreground	3
`#cdd2d8`	→	`#dee3e7`--input	2
`#34d399`	→	`#00a63e`--success-solid	2
`#f7f9fb`	→	`#f2f6f9`--muted	2
`#eef1f4`	→	`#e9edf1`--accent	2
`#e3f1f8`	→	`rgba(43,127,255,0.2)`--info	2
`#9ea5ac`	→	`#687178`--muted-foreground	2
`#e6f4ec`	→	`rgba(0,166,62,0.2)`--success	2
`#0a7c4a`	→	`#016630`--success-foreground	2
`#fbf2dc`	→	`rgba(255,210,48,0.2)`--warning	2
`#6b5b3a`	→	`#8d7e3f`--chart15	1
`#a59169`	→	`#cbbf8b`--chart7	1
`#fe9a00`	→	`#ffd230`--warning-solid	1
`#e9eef4`	→	`#e9edf1`--accent	1
`#eef1f6`	→	`#e9edf1`--accent	1
`#e7f3ef`	→	`rgba(0,166,62,0.2)`--success	1
`#f1ecfb`	→	`#f3e8ff`--badge-purple	1
`#f5f7f9`	→	`#f2f6f9`--muted	1
`#5f6870`	→	`#687178`--secondary-foreground	1
`#f6f8fb`	→	`#f2f6f9`--muted	1
`#9a6b00`	→	`#7b3306`--warning-foreground	1
`#cbd2da`	→	`#dee3e7`--input	1
`#16a34a`	→	`#00a63e`--success-solid	1
`#d99a06`	→	`#ffd230`--warning-solid	1
`#e5484d`	→	`#d2031b`--destructive	1
`#7a5500`	→	`#7b3306`--warning-foreground	1

3 · Components affected where the shifts land

The snapped colours above, mapped to the prototype’s UI. The DS component library (packages/ui-desktop) was not modified — only this standalone prototype was retokenised.

notable shiftmoderatesubtlepreserved

Inputs & controls

Composer / search field	focus border `#d4d7da` → `--input`
Radio / checkbox	border `#cdd2d8` → `--input`
Buttons · starter chips · tiles	hover border `#c5cbd3` → `--input`

Badges & status

Risk indicator (Conservative / Balanced / Aggressive)	`#16a34a / #d99a06 / #e5484d` → DS `success-solid / warning-solid / destructive`
Account-type badge “Robo”	`#f1ecfb` → `--badge-purple`
Verdict badges (core / secondary)	→ DS `success` / `warning` tints
Workflow status dot “In progress”	`#fe9a00` → `--warning-solid` (orange → DS yellow)

Cards

Insight / nudge cards (Opportunity · Needs review · Market)	fg + bg → DS `success / warning / info` tints (deepen to .2 alpha)
All cards	`rounded-lg` 12px → 10px — corners tighten 2px

AI chrome & voice

Mic active + equaliser bars	`#0a6c8f / #e3f1f8` → DS `info-foreground` / `info` (teal-blue → indigo)
Success check + presence dot	`#34d399` → `--success-solid` (mint → DS green)
AI response secondary text · typing dots · date-picker labels	`#9ea5ac` → `--muted-foreground` — darker; the real DS fix (better contrast)
History-rail toggle / recent-item active	`#eef1f4` → `--accent`

Preserved on purpose

Asset-allocation donut & bars	category palette kept exactly — no visual change
Ask-AI aurora / liquid-glass buttons	bespoke effect — excluded from tokenisation

4 · Extended — category / data palette value preserved20 colours

A muted categorical palette (asset-class hues, avatar tints) with no DS 2.0 equivalent. Tokenised as --cat* with their original values — look unchanged, and now flagged for the DS team to fold into an official data-viz ramp.

Before	Tokenised as	Uses
`#2b3a67`	`#2b3a67`--cat4	2
`#0a6c54`	`#0a6c54`--cat6	2
`#5b3aa0`	`#5b3aa0`--cat2	2
`#5f9e92`	`#5f9e92`--cat5	2
`#6b82c4`	`#6b82c4`--cat3	2
`#a08bc4`	`#a08bc4`--cat1	2
`#1f3a5f`	`#1f3a5f`--cat15	1
`#3a6ea5`	`#3a6ea5`--cat14	1
`#1f4f3a`	`#1f4f3a`--cat18	1
`#3a8568`	`#3a8568`--cat16	1
`#4f1f3a`	`#4f1f3a`--cat9	1
`#853a6e`	`#853a6e`--cat8	1
`#2f6a5e`	`#2f6a5e`--cat17	1
`#495da0`	`#495da0`--cat13	1
`#6f5a9a`	`#6f5a9a`--cat7	1
`#9aa9d8`	`#9aa9d8`--cat12	1
`#8fbcb2`	`#8fbcb2`--cat19	1
`#e0c184`	`#e0c184`--cat20	1
`#a894c9`	`#a894c9`--cat10	1
`#c1b0da`	`#c1b0da`--cat11	1

5 · Config, radius, shadow & type structural

Item	Before		After	Why
Config token: `muted-foreground`	`#9ea5ac`	→	`#687178`	Real DS mismatch — DS `--secondary/muted-foreground` is `#687178` (neutral-secondary), not `#9ea5ac`. Darkens muted text ~1 step (improves contrast).
Config colors	`hard-coded hex`	→	`var(--token)`	All `tailwind.config` colours now reference `ds-tokens.css` variables instead of literal hex — single source of truth.
Radius: `rounded-lg`	`12px`	→	`10px`	Snapped to DS `--radius: 10px` (Figma `radius/rounded-button`). Card corners tighten 2px.
Radius: `rounded-sm`	`4px`	→	`6px`	DS scale `calc(--radius − 4px)`.
Shadows	`ad-hoc`	→	`--shadow-2xs / sm / md`	Mapped to DS elevation tokens (node 6735:24752).
Fonts	`Inter · Noto Sans Arabic · JetBrains Mono`	→	`unchanged`	Already match DS (Inter sans / JetBrains mono); Noto Arabic kept for RTL.

6 · Alpha channels

Ink & aqua opacity layers now derive from the token channel vars instead of hard-coded RGB.

Pattern		Now	Uses
`rgba(31,33,35, α)`	→	`rgb(var(--foreground-rgb) / α)`	28
`rgba(8,210,174, α)`	→	`rgb(var(--teal-rgb) / α)`	2

7 · Deliberately excluded left as-is

Bespoke decorative treatments (the “Ask AI” aurora / liquid-glass buttons) and functional black used for luminance masks — no DS token applies, so they stay literal to preserve the effect.

Colour	Kept because
`#000`	Luminance mask / scrim (functional, not a brand colour)
`#000000`	Shadow / scrim base (functional)
`#0b6b5b`	Glass button icon teal
`#151618`	Ask-AI “aurora” gradient stop
`#17181a`	Ask-AI aurora base / icon tile
`#202327`	Ask-AI aurora hover
`#20313a`	“Liquid glass” button text
`#3a4147`	Ask-AI aurora mid-gradient

Generated for the Alpheya Advisor AI Agent exploration · DS 2.0 (Dionysus) · Figma file qgHWlJCc8tS7BjWxoFajmm. Swatches render the actual values; “snapped” rows compare the prototype’s old hex to the DS token value.