Design System Reference
A living reference of all design tokens and UI components used across UX Components.
Core Colors
Used in: All pages — theme-aware via CSS custom properties
| Name | Variable | Value | Where used | Count |
|---|
Semantic Colors
Used in: Components Icons Release Notes — badges, section tags, status indicators
| Name | Variable | Value | Where used | Count |
|---|
Typography
Used in: All pages — Helvetica Neue for UI, SF Mono for code/tokens
Font Families
font-family: 'Helvetica Neue'
Primary — headings, body, UI
font-family: 'SF Mono'
Monospace — code, tokens, URLs
Type Styles
| Name | Class | Value | Where used | Count |
|---|
Type Scale 9
Used in: All pages — 9 sizes from 11px tags to 36px display
| Name | Value | Tag | Where used | Count |
|---|
Spacing Scale
Used in: All pages — padding, margin, and gap values throughout
| Name | Value | Type | Where used | Count |
|---|
Border Radius
Used in: Cards Buttons Inputs Badges Tags
Shadows
Used in: Landing page Chat panel Dropdowns Typeahead
Cards, panels, landing page
Dialogs, modals, overlays
Buttons
Used in: Component previews Design Systems Icon Libraries All page headers
.prev-btn | .prev-btn-outline | .prev-btn-destructive 46 uses
View Toggle Buttons
.ds-view-toggle | .ds-view-btn | .ds-view-btn.active 9 uses
Theme Buttons
.theme-opt | .theme-opt.active 41 uses
Badges
Used in: Component detail Component previews MCP docs Release Notes
Default
Success
Warning
Danger
Info
.badge .badge-{variant} 95 uses
Outline Badges
Default
Success
Warning
Danger
Info
.badge .badge-outline-{variant} 95 uses
Size Variants
Small
Default
Large
.badge-sm | .badge-lg 95 uses
Inputs
Used in: Component previews Search bar Settings panel All page headers
Search Input
.search-wrap input 11 uses
Filter Input
.dsr-filter 2 uses
Text Input
.prev-input 4 uses
Select
.prev-select 4 uses
Checkbox
.check-row .check-box 14 uses
Cards
Used in: Design Systems Landing page Component detail
Card Title
SubtitleA card container with title, subtitle, and description content.
Landing Card
With icon, title, and description.
.ds-card | .landing-card 61 uses
Tags
Used in: Design Systems Icon Libraries Component detail Icon detail
Default Tag
Storybook
Visit site
Overview
When to use
When not to use
.ds-tag | .section-tag .tag-{variant} 50 uses
Avatars
Used in: Component previews
AB
CD
EF
.avatar | .avatar-sm | .avatar-lg 6 uses
Tabs
Used in: Component detail Component previews
Active Tab
Tab 2
Disabled
.prev-tabs | .prev-tab | .prev-tab-active 54 uses
Tooltips
Used in: Component previews
Hover me
Tooltip content
.prev-tooltip | .prev-tooltip-anchor | .prev-tooltip-bubble 10 uses