Foundations
The token reference: colour, type, radius, elevation, controls, spacing, motion and focus. Every value is resolved live, so switch the colour mode or density in the top bar to compare.
Color
Semantic tokens resolved live in the current mode. Swatches sit on the page background, so translucent tokens show the colour they actually produce.
Surfaces
The page is surface-1 (white / #191919). Dark mode shows elevation by colour: page #191919, raised #1f1f1f, popover #303030. Inside a Panel the raised surfaces collapse to the page.
bg-page · bg-background--cds-page-bg…canvas = surface-1bg-surface-0--cds-surface-0…recessed: wells, railsbg-surface-1 · bg-card--cds-surface-1…page, cardsbg-surface-2--cds-surface-2…panels, card hoverbg-surface-3--cds-surface-3…raised page-level cardsbg-popover · bg-surface-popover--cds-surface-popover…menus, dialogs, toasts, composerbg-surface-panel--cds-surface-panel…side panels, sheetsbg-sidebar--sidebar…flat rail sidebarbg-card-link--cds-fizzy-lake-color-card-link…link-card fill (hover / pressed layers)bg-backdrop--cds-backdrop…modal scrimbg-tooltip--cds-tooltip-bg…ink in light, popover in darkText
Text roles are translucent ink (90 / 60 / 47% in light, 93 / 57 / 40% in dark). Inside controls secondary reads as ink; inside popups and the sidebar muted lifts to secondary. Placeholders are an opaque #878787.
text-primary · text-foreground--cds-text-primary…text-secondary · text-muted-foreground--cds-text-secondary…text-muted--cds-text-muted…timestamps, captionstext-tertiary--cds-fizzy-lake-color-tertiary…disclaimer linkstext-placeholder--cds-fizzy-lake-color-placeholder…opaque, both modestext-disabled--cds-text-disabled…text-accent--cds-text-accent…linkstext-danger · text-destructive--cds-text-danger…text-success--cds-text-success…text-warning--cds-text-warning…text-pro--cds-text-pro…text-on-primary--cds-on-primary…on fill-primaryFills
Control fills. Primary is ink (not clay). Plain hover = ghost-hover, highlighted / selected rows = ghost-selected, hover on a selected row = selected-hover; a light ghost button hovers at 10%. Press states stack layers (layers-*).
bg-fill-primary · bg-primary--cds-fill-primary…bg-fill-primary-hover--cds-fill-primary-hover…bg-fill-secondary--cds-fill-secondary…v2: no ring or drop (FC-1)bg-fill-secondary-hover--cds-fill-secondary-hover…bg-fill-ghost-hover · bg-accent--cds-fill-ghost-hover…bg-fill-ghost-selected--cds-fill-ghost-selected…bg-selected-hover--cds-fizzy-lake-color-selected-hover…bg-fill-button-ghost-hover--cds-fill-button-ghost-hover…ghost button hoverlayers-1-fill-button-layer--cds-fill-button-layer…press layerbg-fill-control--cds-fill-control…bg-fill-field--cds-fill-field…inputsbg-fill-disabled--cds-fill-disabled…bg-fill-accent · bg-ring--cds-fill-accent…focus, checkedbg-fill-danger · bg-destructive--cds-fill-danger…bg-fill-success--cds-fill-success…bg-fill-warning--cds-fill-warning…bg-fill-pro--cds-fill-pro…Borders
Hairlines are translucent ink: border (8% / 4%) for card rings, popups and table rows; border-line (12%) for structural rules. Cards and panels draw rings with box-shadow (outer in light, inset in dark).
border-border--cds-border…8% / 4% inkborder-line--cds-border-line…12%: frame rows, bandsborder-seam--cds-fizzy-lake-color-seam…sidebar edgeborder-strong--cds-border-strong…hover, emphasisborder-stronger--cds-border-stronger…border-accent · ring-accent--cds-border-accent…border-danger--cds-border-danger…border-success--cds-border-success…border-warning--cds-border-warning…border-pro--cds-border-pro…Status & tints
Status backgrounds and tag tints are the hue's fill at a fixed alpha (12-16% light, 8-12% dark), paired with text-X. The -opaque tints mix the same amount into the page.
bg-accent-tint--cds-bg-accent…bg-accent-muted--cds-bg-accent-muted…fill-accent @ 10%bg-danger--cds-bg-danger…bg-success--cds-bg-success…bg-warning--cds-bg-warning…bg-pro--cds-bg-pro…bg-highlight--cds-bg-highlight…<mark>bg-neutral · bg-muted--cds-bg-neutral…chips, user bubblebg-tint-blue--cds-bg-tint-blue…bg-tint-violet--cds-bg-tint-violet…bg-tint-green--cds-bg-tint-green…bg-tint-orange--cds-bg-tint-orange…bg-accent-layer--cds-bg-accent-layer…fill-accent @ 6%: press layerbg-danger-layer--cds-bg-danger-layer…press layerBrand
Clay is the brand fill (bg-brand, sidebar-primary). Illustration colours are identical in both modes.
bg-brand · bg-clay-emphasized--cds-fill-brand…bg-brand-hover · bg-clay--cds-fill-brand-hover…bg-heather--cds-heather…bg-plum--cds-plum…bg-cactus--cds-cactus…bg-mineral--cds-mineral…shadcn-vue contract
The shadcn-vue variables every generated component reads, mapped onto cds tokens.
bg-background--background…= pagebg-card--card…= surface-1bg-popover--popover…= surface-popoverbg-primary--primary…= fill-primarybg-secondary--secondary…bg-muted--muted…= bg-neutralbg-accent--accent…= fill-ghost-hoverbg-destructive--destructive…= fill-dangerborder-border--border…border-input--input…ring-ring--ring…= fill-accentbg-sidebar-selected--sidebar-selected…extrabg-[var(--sidebar-selected-hover)]--sidebar-selected-hover…extraCharts
Mode-specific data palettes (bg-chart-*, fill-chart-*); shadcn chart-1 … chart-5 are the first five categorical colours.
chart-1 … chart-8chart-seq-1 … 7chart-div-1 … 7chart-good · warning · serious · criticalTypography
Role sizes pair a size with a line-height and follow density (switch to compact in the top bar). UI text is the system stack; Claude's voice is Source Serif 4, a free variable serif (wght 200-900, optical size 8-60); replies are serif by default at 15/21.
Role sizes
text-<role> sets size + line-height; leading-* still overrides the line-height.
text-title…Projects and recent chats
page and dialog titles
text-heading…Section heading inside a panel
text-prose…Long-form reading text and message bodies.
text-body…The default UI text: buttons, menus, inputs and rows.
text-footnote…Secondary row text and descriptions.
text-caption…Timestamps, counters, group labels.
text-code…const reply = await claude.complete(prompt)
mono + code size
Weights
text-<role>-<weight> adds the weight. v2 weight roles: -medium / font-medium = control 435, -semibold / font-semibold = header 520, font-badge = 540; serif, display and mono text opt out (500 / 580). In dark mode the variable-font wght axis drops (body 360, control 395, header 480, badge 520) while font-weight keeps its value, as on claude.ai.
text-body-regular…Regular 400
text-body-medium…Control 435
-medium / font-medium = control role (dark wght 395)
text-body-semibold…Header 520
-semibold / font-semibold = header role (dark wght 480)
text-heading-semibold…Header 520
text-caption font-badge…Badge 540
font-badge (dark wght 520)
text-caption-medium…Caption medium
text-footnote-semibold…Footnote semibold
Serif: Claude's voice
font-display is the new-chat greeting. Dark mode lowers serif weights the way claude.ai does.
font-display…Good evening, Ada
new-chat greeting: 38px, weight 330, opsz 48 (dark: weight 300, wght 290)
font-title…A considered serif title
28px, weight 500, opsz 28 (dark: wght 460)
font-heading…Serif heading
24px, weight 500, opsz 24 (dark: wght 460)
font-claude-response-body…Here is a short summary of what changed and why it matters for the release.
Claude's replies (serif by default): 15px / 21px (dark: wght 360)
Prose
.prose = cds long-form text in claude.ai's reply look (15/21, header-weight headings, neutral inline code, primary list markers, open ruled tables); data-prose-font="serif" switches to Claude's voice.
Release notes
The composer now keeps drafts per chat, and links follow the accent colour. Inline code uses the mono stack; highlights use the warning tint.
- Density follows the cds scale
- Focus rings use Tab only
Quotes sit in text-secondary with a 4px rule.
Release notes
The composer now keeps drafts per chat, and links follow the accent colour. Inline code uses the mono stack; highlights use the warning tint.
- Density follows the cds scale
- Focus rings use Tab only
Quotes sit in text-secondary with a 4px rule.
Mono
font-mono = SF Mono, ui-monospace, Menlo, Consolas; ligatures are off for code.
const greeting = 'Hello' // != === => -> ligatures stay off
for (const turn of conversation) render(turn)Radius
The cds radii are named and follow density and data-size: rounded (= rounded-control) is the control radius, 8px comfortable and 6px compact, and rounded-card adds 4px. rounded-xs to 2xl keep Tailwind's fixed values, as on claude.ai, so ported claude.ai markup keeps its corners.
rounded-control= rounded: buttons, inputs, menu itemsrounded-cardcontrol + 4px: cards, menus, popoversrounded-chipnested-control height / 4rounded-checkboxrounded-panelrounded-composerrounded-xsTailwind, fixedrounded-smTailwind, fixedrounded-mdTailwind, fixedrounded-lgTailwind, fixedrounded-xlTailwind, fixedrounded-2xlTailwind, fixedrounded-fullElevation
Shadows deepen in dark mode (--cds-shadow-color), but v2 dark elevation is mostly surface colour (#191919 / #1f1f1f / #303030) and panels are flat (no shadow, radius 0). Rings draw card and field outlines with box-shadow: an outer 1px ring in light, an inset one in dark.
shadow-xsfield dropshadow-smshadow-mdshadow-lgshadow-popovermenusshadow-card-ringouter ring light / inset darkshadow-panelring + popovershadow-panel-mdshadow-composershadow-composer-focusshadow-fieldshadow-field-hovershadow-field-invalidshadow-ring-accentshadow-drop-ringfile drop targetshadow-drop-glowControls
One control height drives buttons, inputs, selects and rows; nested controls (chips, inner buttons) use control-nested. All of it follows density; v2 controls are 28px where a fine pointer can hover and 32px on touch, while nav / list rows stay 32 (h-list-row) and the frame row is 45 / 48.
Control scale
Spacing names: h-control, size-control, min-h-control-nested, size-icon …
h-control28 fine pointer / 32 touch: buttons, inputsh-list-rownav / list rows stay 32h-frame-row45 fine pointer / 48 touchh-control-nesteda control inside a controlh-iconicon boxh-checkboxh-switchh-avatar-smh-avatar-mdh-avatar-lgSpacing
Two density-aware scales. pad-* is inner padding, gap-* separates siblings (cds margins use it too). Use the spacing names with any utility (px-pad-sm, mt-gap-lg, start-pad-md) or the cds shorthands (p-md, gap-xs, m-lg).
Pad scale
w-pad-xsp-xs · px-pad-xsw-pad-smp-sm · px-pad-smw-pad-mdp-md · px-pad-mdw-pad-lgp-lg · px-pad-lgw-pad-xlp-xl · px-pad-xlGap scale
w-gap-xsgap-xs · m-xsw-gap-smgap-sm · m-smw-gap-mdgap-md · m-mdw-gap-lggap-lg · m-lgw-gap-xlgap-xl · m-xlMotion
cds durations and curves as duration-* / ease-* utilities, plus claude.ai's animate-* presets. Turn on Reduce motion in the top bar: animations collapse to their end state and transitions marked motion-reduce:transition-none stop.
Keyframe presets
Same names and timings as claude.ai's utilities; replay with the button.
Focus
The cds focus ring is a 1px accent ring with a soft glow, separated from the control by a page-coloured inset. Apply it with focus-ring (focus-visible only) or shadow-focus; the shadcn-vue components use shadow-focus as well.