Audit
The manager’s token, class, and icon inventory reconciled against source usage. Public consumer approval remains ID-first in the element contract; this census catches dead legacy rows and off-system values without promoting them into that contract.
Generated 2026-08-14T15:01:55.185Z. Doc-only = referenced only by documentation pages. Catalogue = an icon shown in the Iconography library but not yet placed in product — available, not dead. Dynamic = matched via a template-constructed class.
Tokens
A token is in use when a stylesheet, component or another token references it. Unused tokens are candidates for retirement — or for the near-future work they were designed ahead of.
| Token | Group | Styles | Components | Docs | Status |
|---|---|---|---|---|---|
--ss-color-brand | brand | 32 | 0 | 4 | In use |
--ss-color-brand-active | brand | 9 | 0 | 0 | In use |
--ss-color-brand-subtle | brand | 18 | 0 | 0 | In use |
--ss-color-on-brand | brand | 5 | 0 | 0 | In use |
--ss-color-accent | brand | 6 | 0 | 1 | In use |
--ss-color-accent-subtle | brand | 1 | 0 | 0 | In use |
--ss-color-ink-900 | ink | 54 | 0 | 5 | In use |
--ss-color-ink-800 | ink | 1 | 0 | 0 | In use |
--ss-color-ink-700 | ink | 18 | 0 | 1 | In use |
--ss-color-ink-600 | ink | 1 | 0 | 0 | In use |
--ss-color-ink-500 | ink | 32 | 0 | 18 | In use |
--ss-color-ink-400 | ink | 44 | 0 | 1 | In use |
--ss-color-ink-inverse | ink | 6 | 0 | 0 | In use |
--ss-color-canvas | surface | 1 | 0 | 0 | In use |
--ss-color-surface | surface | 33 | 0 | 1 | In use |
--ss-color-surface-subtle | surface | 15 | 0 | 1 | In use |
--ss-color-surface-strong | surface | 18 | 0 | 1 | In use |
--ss-color-border | surface | 37 | 0 | 8 | In use |
--ss-color-border-strong | surface | 17 | 0 | 1 | In use |
--ss-color-on-dark-line | ondark | 4 | 0 | 0 | In use |
--ss-color-on-dark-edge | ondark | 3 | 0 | 0 | In use |
--ss-color-on-dark-ink | ondark | 15 | 0 | 0 | In use |
--ss-color-on-dark-ink-2 | ondark | 7 | 0 | 0 | In use |
--ss-color-on-dark-ink-dim | ondark | 6 | 0 | 0 | In use |
--ss-color-on-dark-ink-mute | ondark | 3 | 0 | 0 | In use |
--ss-color-on-dark-hover | ondark | 4 | 0 | 0 | In use |
--ss-color-on-dark-active | ondark | 2 | 0 | 0 | In use |
--ss-color-status-success | status | 13 | 0 | 1 | In use |
--ss-color-status-success-subtle | status | 10 | 0 | 0 | In use |
--ss-color-status-success-subtle-hover | status | 1 | 0 | 0 | In use |
--ss-color-status-info | status | 2 | 0 | 0 | In use |
--ss-color-status-info-subtle | status | 1 | 0 | 0 | In use |
--ss-color-status-warning | status | 6 | 0 | 0 | In use |
--ss-color-status-warning-subtle | status | 5 | 0 | 0 | In use |
--ss-color-status-warning-text | status | 1 | 0 | 0 | In use |
--ss-color-status-warning-border | status | 1 | 0 | 0 | In use |
--ss-color-status-danger | status | 10 | 0 | 5 | In use |
--ss-color-status-danger-subtle | status | 5 | 0 | 0 | In use |
--ss-color-status-danger-text | status | 1 | 0 | 0 | In use |
--ss-color-status-danger-border | status | 2 | 0 | 0 | In use |
--ss-color-status-danger-pulse-start | status | 1 | 0 | 0 | In use |
--ss-color-status-danger-pulse-end | status | 2 | 0 | 0 | In use |
--ss-color-status-neutral | status | 3 | 0 | 0 | In use |
--ss-color-status-neutral-subtle | status | 2 | 0 | 0 | In use |
--ss-font-ui | font | 22 | 0 | 1 | In use |
--ss-font-mono | font | 20 | 0 | 5 | In use |
--ss-type-size-display | type-scale | 1 | 0 | 0 | In use |
--ss-type-line-height-display | type-scale | 1 | 0 | 0 | In use |
--ss-type-size-page | type-scale | 2 | 0 | 2 | In use |
--ss-type-line-height-page | type-scale | 2 | 0 | 2 | In use |
--ss-type-size-section | type-scale | 3 | 0 | 0 | In use |
--ss-type-line-height-section | type-scale | 1 | 0 | 0 | In use |
--ss-type-size-card | type-scale | 6 | 0 | 0 | In use |
--ss-type-line-height-card | type-scale | 0 | 0 | 0 | Unused |
--ss-type-size-body | type-scale | 2 | 0 | 1 | In use |
--ss-type-line-height-body | type-scale | 8 | 0 | 1 | In use |
--ss-type-size-sm | type-scale | 37 | 0 | 3 | In use |
--ss-type-line-height-sm | type-scale | 4 | 0 | 1 | In use |
--ss-type-size-meta | type-scale | 19 | 0 | 11 | In use |
--ss-type-line-height-meta | type-scale | 1 | 0 | 0 | In use |
--ss-type-size-micro | type-scale | 27 | 0 | 1 | In use |
--ss-type-line-height-micro | type-scale | 0 | 0 | 0 | Unused |
--ss-type-size-ui-lg | type-scale | 9 | 0 | 0 | In use |
--ss-type-weight-regular | weight | 5 | 0 | 1 | In use |
--ss-type-weight-medium | weight | 7 | 0 | 1 | In use |
--ss-type-weight-semi | weight | 29 | 0 | 4 | In use |
--ss-type-weight-bold | weight | 7 | 0 | 1 | In use |
--ss-type-weight-heavy | weight | 10 | 0 | 2 | In use |
--ss-type-tracking-label | tracking | 8 | 0 | 1 | In use |
--ss-type-tracking-tight | tracking | 3 | 0 | 0 | In use |
--ss-type-tracking-heavy | tracking | 3 | 0 | 2 | In use |
--ss-space-05 | spacing | 14 | 0 | 5 | In use |
--ss-space-1 | spacing | 11 | 0 | 8 | In use |
--ss-space-15 | spacing | 22 | 0 | 3 | In use |
--ss-space-2 | spacing | 55 | 0 | 17 | In use |
--ss-space-3 | spacing | 65 | 1 | 23 | In use |
--ss-space-4 | spacing | 49 | 0 | 36 | In use |
--ss-space-5 | spacing | 15 | 0 | 8 | In use |
--ss-space-6 | spacing | 23 | 0 | 7 | In use |
--ss-space-8 | spacing | 4 | 0 | 12 | In use |
--ss-space-10 | spacing | 1 | 0 | 6 | In use |
--ss-space-12 | spacing | 8 | 0 | 1 | In use |
--ss-space-16 | spacing | 2 | 0 | 3 | In use |
--ss-radius-xs | radius | 12 | 0 | 1 | In use |
--ss-radius-sm | radius | 30 | 0 | 3 | In use |
--ss-radius-md | radius | 18 | 0 | 1 | In use |
--ss-radius-lg | radius | 3 | 0 | 0 | In use |
--ss-radius-pill | radius | 4 | 0 | 2 | In use |
--ss-border-width | border | 57 | 0 | 6 | In use |
--ss-border-width-hairline | border | 6 | 0 | 0 | In use |
--ss-border-width-focus | border | 10 | 0 | 2 | In use |
--ss-size-header | size | 3 | 0 | 0 | In use |
--ss-size-control | size | 15 | 0 | 0 | In use |
--ss-size-control-small | size | 15 | 0 | 0 | In use |
--ss-size-tile | size | 12 | 0 | 0 | In use |
--ss-size-sidebar | size | 1 | 0 | 0 | In use |
--ss-size-touch-target | size | 5 | 0 | 0 | In use |
--ss-size-dialog-sm | size | 1 | 0 | 0 | In use |
--ss-size-dialog-md | size | 2 | 0 | 0 | In use |
--ss-size-dialog-lg | size | 1 | 0 | 0 | In use |
--ss-element-button-icon-padding | size | 1 | 0 | 0 | In use |
--ss-element-button-icon-gap | size | 1 | 0 | 0 | In use |
--ss-element-chip-height | size | 1 | 0 | 0 | In use |
--ss-element-status-indicator-size | size | 3 | 0 | 0 | In use |
--ss-element-dialog-icon-size | size | 2 | 0 | 0 | In use |
--ss-element-dialog-receipt-label | size | 0 | 0 | 0 | Unused |
--ss-element-dialog-close-offset-block | size | 1 | 0 | 0 | In use |
--ss-element-dialog-close-offset-inline | size | 1 | 0 | 0 | In use |
--ss-element-control-padding-inline | size | 2 | 0 | 0 | In use |
--ss-element-control-icon-offset | size | 1 | 0 | 0 | In use |
--ss-element-segment-inset | size | 5 | 0 | 0 | In use |
--ss-element-segment-option-padding | size | 1 | 0 | 0 | In use |
--ss-element-dropdown-menu-offset | size | 1 | 0 | 0 | In use |
--ss-element-textarea-min-height | size | 1 | 0 | 0 | In use |
--ss-element-composer-action-space | size | 1 | 0 | 0 | In use |
--ss-element-drawer-width | size | 1 | 0 | 0 | In use |
--ss-element-check-glyph-size | size | 2 | 0 | 0 | In use |
--ss-element-text-gap | size | 2 | 0 | 0 | In use |
--ss-element-halo-spread | size | 1 | 0 | 0 | In use |
--ss-size-layout-grid-sm | size | 0 | 0 | 0 | Unused |
--ss-size-layout-grid-md | size | 0 | 0 | 0 | Unused |
--ss-size-layout-grid-lg | size | 0 | 0 | 0 | Unused |
--ss-size-layout-content | size | 0 | 0 | 0 | Unused |
--ss-size-layout-wide | size | 0 | 0 | 0 | Unused |
--ss-size-layout-full | size | 0 | 0 | 0 | Unused |
--ss-size-layout-sidebar | size | 1 | 0 | 0 | In use |
--ss-size-layout-sidebar-threshold | size | 1 | 0 | 0 | In use |
--ss-size-layout-switcher-sm | size | 0 | 0 | 0 | Unused |
--ss-size-layout-switcher-md | size | 0 | 0 | 0 | Unused |
--ss-size-layout-switcher-lg | size | 0 | 0 | 0 | Unused |
--ss-shadow-sm | elevation | 4 | 0 | 0 | In use |
--ss-shadow-md | elevation | 5 | 0 | 0 | In use |
--ss-shadow-pop | elevation | 6 | 0 | 1 | In use |
--ss-shadow-input-inset | elevation | 1 | 0 | 0 | In use |
--ss-glass-bg | glass | 2 | 0 | 0 | In use |
--ss-glass-bg-solid | glass | 1 | 0 | 0 | In use |
--ss-glass-blur | glass | 6 | 0 | 0 | In use |
--ss-glass-saturate | glass | 6 | 0 | 0 | In use |
--ss-glass-border | glass | 3 | 0 | 0 | In use |
--ss-glass-hi | glass | 1 | 0 | 0 | In use |
--ss-glass-shadow | glass | 3 | 0 | 0 | In use |
--ss-glass-input-bg | glass | 1 | 0 | 0 | In use |
--ss-glass-input-bg-focus | glass | 1 | 0 | 0 | In use |
--ss-glass-input-line | glass | 1 | 0 | 0 | In use |
--ss-glass-inset-line | glass | 2 | 0 | 0 | In use |
--ss-glass-inset-bg | glass | 1 | 0 | 0 | In use |
--ss-color-shimmer-high | glass | 1 | 0 | 0 | In use |
--ss-color-shimmer-mid | glass | 1 | 0 | 0 | In use |
--ss-z-shell | z-index | 3 | 0 | 0 | In use |
--ss-z-pop | z-index | 4 | 0 | 0 | In use |
--ss-z-overlay | z-index | 1 | 0 | 0 | In use |
--ss-z-toast | z-index | 0 | 0 | 0 | Unused |
--ss-focus-ring | focus | 11 | 0 | 0 | In use |
--ss-focus-ring-width | focus | 5 | 0 | 0 | In use |
--ss-motion-ease-standard | ease | 59 | 0 | 2 | In use |
--ss-motion-ease-out | ease | 23 | 0 | 1 | In use |
--ss-motion-ease-in | ease | 1 | 0 | 0 | In use |
--ss-motion-ease-in-out | ease | 9 | 0 | 2 | In use |
--ss-motion-ease-settle | ease | 3 | 0 | 0 | In use |
--ss-motion-ease-glide | ease | 2 | 0 | 1 | In use |
--ss-motion-ease-smooth | ease | 9 | 0 | 4 | In use |
--ss-motion-duration-instant | duration | 1 | 0 | 0 | In use |
--ss-motion-duration-fast | duration | 72 | 0 | 1 | In use |
--ss-motion-duration-base | duration | 15 | 0 | 1 | In use |
--ss-motion-duration-slow | duration | 0 | 0 | 0 | Unused |
--ss-motion-duration-morph | duration | 7 | 0 | 3 | In use |
--ss-motion-duration-tag | duration | 4 | 0 | 2 | In use |
--ss-motion-duration-page | duration | 9 | 0 | 2 | In use |
--ss-motion-duration-curve | duration | 0 | 0 | 1 | Doc-only |
--ss-motion-duration-grow | duration | 0 | 0 | 0 | Unused |
--ss-motion-duration-roll | duration | 0 | 0 | 0 | Unused |
--ss-motion-duration-scroll-min | duration | 0 | 0 | 0 | Unused |
--ss-motion-duration-scroll-max | duration | 0 | 0 | 0 | Unused |
--ss-motion-duration-press-return | duration | 1 | 0 | 0 | In use |
--ss-motion-duration-meter-sheen | duration | 1 | 0 | 0 | In use |
--ss-motion-duration-skeleton-sheen | duration | 1 | 0 | 0 | In use |
--ss-motion-duration-reduced | duration | 6 | 0 | 0 | In use |
--ss-motion-stagger | duration | 1 | 0 | 1 | In use |
Classes
Every ss-* product class and ds-* shell class is registered; the manifest is reconciled against markup across the app.
| Selector | Title | Layer | Defined in | Uses | Status |
|---|---|---|---|---|---|
.ss | Product base | element | components/base.css | 35 | In use |
.ss-subtext | Subtext | element | components/base.css | 16 | In use |
.ss-header | App header | component | components/header.css | 0 | Unused |
.ss-tab | Top tab | component | components/header.css | 0 | Unused |
.ss-sidenav | Side nav | component | components/sidenav.css | 0 | Unused |
.ss-btn | Button | element | components/button.css | 17 | In use |
.ss-link | Link | element | components/button.css | 16 | In use |
.ss-card | Card / panel | component | components/card.css | 31 | In use |
.ss-loc | Location card | component | components/card.css | 1 | In use |
.ss-field | Detail field row | object | components/card.css | 0 | Unused |
.ss-chip | Status chip | element | components/chip.css | 6 | In use |
.ss-plat | Platform tile | element | components/chip.css | 3 | In use |
.ss-assignee | Assignee pill | object | components/chip.css | 0 | Unused |
.ss-label | Field label | element | components/form.css | 3 | In use |
.ss-form-field | FormField | element | components/form.css | 2 | In use |
.ss-input | Text input | element | components/form.css | 5 | In use |
TextField | TextField | element | components/TextField.svelte | 9 | In use |
.ss-textarea | Multi-line input | element | components/form.css | 3 | In use |
Textarea | Textarea | element | components/Textarea.svelte | 6 | In use |
.ss-select | Select | element | components/form.css | 2 | In use |
Select | Select primitive | element | components/Select.svelte | 18 | In use |
.ss-combobox | Combobox | element | components/combobox.css | 12 | In use |
.ss-checkbox | Checkbox | element | components/checkbox.css | 4 | In use |
.ss-radio-group | RadioGroup | element | components/radio.css | 2 | In use |
.ss-radio | Radio | element | components/radio.css | 5 | In use |
.ss-date-picker | DatePicker | element | components/date-picker.css | 12 | In use |
.ss-hint | Field hint | element | components/form.css | 3 | In use |
.ss-seg | Segmented control | element | components/form.css | 4 | In use |
.ss-composer | Voice composer | component | components/form.css | 0 | Unused |
.ss-bubble | Intake bubble | component | components/conversation.css | 0 | Unused |
.ss-confirm | Confirmation card | component | components/conversation.css | 0 | Unused |
.ss-check | Processing checklist | component | components/conversation.css | 0 | Unused |
.ss-feed | Activity feed | component | components/conversation.css | 0 | Unused |
.ss-empty | Empty state | component | components/feedback.css | 15 | In use |
.ss-banner | Banner | component | components/feedback.css | 2 | In use |
.ss-table | Dense table | component | components/table.css | 0 | Unused |
.ss-metric-hero | Hero workload metric | object | components/reviews.css | 0 | Unused |
.ss-facet | Filter facet | object | components/reviews.css | 17 | In use |
.ss-stars | Star rating | element | components/reviews.css | 1 | In use |
.ss-quote | Quote block | element | components/reviews.css | 2 | In use |
.ss-dotline | Dot-separated meta line | object | components/reviews.css | 0 | Unused |
.ss-review | Review card | component | components/reviews.css | 0 | Unused |
.ss-dropdown | Dropdown menu | overlay | components/dropdown.css | 12 | In use |
.ss-glass | Glass material | overlay | components/glass.css | 0 | Unused |
.ss-lift | Card lift | effect | components/motion-effects.css | 0 | Unused |
.ss-tilt | 3D tilt | effect | components/motion-effects.css | 0 | Unused |
.ss-glow | Cursor-follow glow | effect | components/motion-effects.css | 0 | Unused |
.ss-meter | Meter | effect | components/motion-effects.css | 4 | In use |
.ss-skeleton | Skeleton | effect | components/motion-effects.css | 4 | In use |
.ss-palette | Command palette | effect | components/motion-effects.css | 5 | In use |
.ss-drawer | Parallax drawer | effect | components/motion-effects.css | 15 | In use |
.ss-checkdraw | Status celebration | effect | components/motion-effects.css | 2 | In use |
.ss-ic-spin | Icon micro-motions | effect | components/motion-effects.css | 0 | Unused |
.ss-empty--ambient | Ambient empty state | effect | components/motion-effects.css | 10 | In use |
.ss-ai | AI generation motion | effect | components/motion-effects.css | 0 | Unused |
.ss-overlay | Overlay | overlay | components/dialog.css | 8 | In use |
.ss-dialog | Dialog | overlay | components/dialog.css | 10 | In use |
Icon | Icon | element | components/Icon.svelte | 9 | In use |
CountUp | Value counter | element | components/CountUp.svelte | 7 | In use |
.ds-doc | Doc frame | shell | shell.css | 2 | In use |
.ds-nav | Doc nav | shell | shell.css | 8 | In use |
.ds-sec | Doc section | shell | shell.css | 25 | In use |
.ds-prose | Doc prose | shell | shell.css | 117 | In use |
.ds-cover | Doc cover | shell | shell.css | 42 | In use |
.ds-exec | Executive callout | shell | shell.css | 2 | In use |
.ds-demo | Demo stage | shell | shell.css | 76 | In use |
.ds-principle | Principle card | shell | shell.css | 19 | In use |
.ds-sw | Token swatch | shell | shell.css | 15 | In use |
.ds-ramp | Type ramp row | shell | shell.css | 9 | In use |
.ds-scale | Spacing scale | shell | shell.css | 4 | In use |
.ds-radius-box | Radius box | shell | shell.css | 2 | In use |
.ds-split | Split layout | shell | shell.css | 6 | In use |
.ds-tbl | Doc table | shell | shell.css | 16 | In use |
.ds-tag | Doc tag | shell | shell.css | 10 | In use |
.ds-lab-sandbox | Labs sandbox wrapper | shell | shell.css | 1 | In use |
.ds-combo-grid | Combinations grid | shell | shell.css | 1 | In use |
.ds-combo-cell | Combinations cell | shell | shell.css | 5 | In use |
Icons
Catalogue-only icons are available capacity, not dead weight — the library was designed ahead of need.
| Icon | Label | Group | Uses | Status |
|---|---|---|---|---|
solo-shape | solo-shape | Platform | 1 | In use |
chevron-right | Caret right | Direction | 2 | In use |
chevron-left | Caret left | Direction | 1 | In use |
chevron-up | Caret up | Direction | 0 | Catalogue |
chevron-down | Caret down | Direction | 3 | In use |
arrow-right-circle | Arrow right circle | Arrows in circles | 0 | Catalogue |
arrow-left-circle | Arrow left circle | Arrows in circles | 0 | Catalogue |
arrow-up-circle | Arrow up circle | Arrows in circles | 0 | Catalogue |
arrow-down-circle | Arrow down circle | Arrows in circles | 0 | Catalogue |
arrow-right | Arrow right (bold mark, drawn) | Arrows | 0 | Catalogue |
arrow-left | Arrow left (bold mark, drawn) | Arrows | 0 | Catalogue |
arrow-up | Arrow up (bold mark, drawn) | Arrows | 0 | Catalogue |
arrow-down | Arrow down (bold mark, drawn) | Arrows | 0 | Catalogue |
external | External / open (arrow-up-right, bold mark) | Arrows | 1 | In use |
search | Search (bold mark, drawn) | Find | 1 | In use |
filter | Filter (funnel-fill) | Find | 0 | Catalogue |
sort | Sort (bold mark, drawn) | Find | 0 | Catalogue |
check-circle | Check circle fill | Status | 3 | In use |
x-circle | X circle fill | Status | 0 | Catalogue |
alert-triangle | Exclamation triangle fill | Status | 0 | Catalogue |
info-circle | Info circle fill | Status | 0 | Catalogue |
clock | Clock fill | Status | 0 | Catalogue |
check | Check (bold mark) | Marks | 7 | In use |
x | Close (bold mark) | Marks | 6 | In use |
plus | Add (bold mark) | Marks | 1 | In use |
minus | Remove (bold mark) | Marks | 1 | In use |
menu | Menu (bold mark) | Marks | 2 | In use |
edit | Edit (pencil-fill) | Actions | 0 | Catalogue |
trash | Delete (trash-fill) | Actions | 0 | Catalogue |
copy | Copy (two sheets, filled outline) | Actions | 0 | Catalogue |
settings | Settings (gear-fill) | Actions | 0 | Catalogue |
refresh | Refresh (filled outline) | Actions | 3 | In use |
mic | Microphone (mic-fill) | Actions | 0 | Catalogue |
pin | Location (geo-alt-fill) | Wayfinding | 0 | Catalogue |
calendar | Calendar (calendar-fill) | Wayfinding | 2 | In use |
bell | Notifications (bell-fill) | Wayfinding | 0 | Catalogue |
user | User (person-fill) | Wayfinding | 0 | Catalogue |
brain | Brain (cerebrum, drawn) | Wayfinding | 0 | Catalogue |
building | Business (building-fill) | Wayfinding | 0 | Catalogue |
link | Link (solid interlocked rings, drawn) | Wayfinding | 1 | In use |
more | More (three-dots) | Wayfinding | 1 | In use |
quote | Quotation mark (double, quote) | Content | 3 | In use |
star-fill | Star (filled — score) | Rating | 1 | In use |
star | Star (hollow — remainder) | Rating | 1 | In use |
Off-system colours
Raw hex anywhere outside the registry misses the token layer. The goal is zero.
Every colour in the app routes through the token registry.