Colors
Design tokens used across the application. Click to copy class names.
Background Colors
bg-bg-surface
bg-bg-canvas
bg-bg-canvas-mobile
bg-bg-surface-mobile
bg-bg-tooltips
bg-bg-table-cell
bg-bg-table-header
bg-bg-input
bg-bg-highlight
bg-bg-accent
bg-bg-sidebar-active
bg-bg-sidebar-surface
bg-bg-action-primary
bg-bg-action-secondary
bg-bg-semantic-info
bg-bg-semantic-success
bg-bg-semantic-danger
bg-bg-semantic-warning
Text Colors
text-text-neutral
The quick brown fox
text-text-primary
The quick brown fox
text-text-onActionPrimary
The quick brown fox
text-text-onTooltips
The quick brown fox
text-text-subtle
The quick brown fox
text-text-semantic-info
The quick brown fox
text-text-semantic-danger
The quick brown fox
text-text-semantic-warning
The quick brown fox
text-text-semantic-success
The quick brown fox
text-text-onSidebar-neutral
text-text-onSidebar-accent
Border Colors
border-border-subtle
border-border-strong
border-border-primary
border-border-sidebar-divider
border-border-semantic-info-subtle
border-border-semantic-danger-subtle
border-border-semantic-success-subtle
border-border-semantic-warning-subtle
border-border-semantic-info-strong
border-border-semantic-danger-strong
border-border-semantic-success-strong
border-border-semantic-warning-strong
Icon Colors
icon-icon-subtle
icon-icon-onPrimaryAction
icon-icon-semantic-info
icon-icon-semantic-danger
icon-icon-semantic-success
icon-icon-semantic-warning