Skip to main content
Get started
Design SystemDesign Tokens
Design System

Design Tokens

Every :root design token from tokens.css — colors, spacing, radii, typography, shadows, z-index and semantic aliases — with resolved values.

All 165 design tokens defined on :root in styles/tokens.css, grouped by category in source order. Tokens marked alias reference another token; their Resolved column shows the final literal value after following the var() chain.

SourceBuilderStudio-mainCommit6fd4036fcDate2026-05-29Branchmain

14 categories · 38 aliases · 127 literal values.

Base (2)

PreviewTokenValueResolved / note
--color-background#ffffff
--color-foreground#111827

Typography (16)

PreviewTokenValueResolved / note
--font-sans-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
--font-monoui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
--ui-text-xs0.6875rem11px
--ui-text-sm0.75rem12px
--ui-text-md0.8125rem13px
--ui-text-lg0.875rem14px
--text-captionaliasvar(--ui-text-xs)0.6875rem
--text-micro0.625rem10px
--text-node-label0.5625rem9px — canvas node labels, status text
--text-labelaliasvar(--ui-text-md)0.8125rem
--status-dot-size0.3125rem5px
--node-header-icon-size1.25rem20px
--node-drag-header-height0.5rem8px — thin strip for minimal node chrome
--node-label-letter-spacing0.04em
--node-select-content-max-height14rem
--node-select-trigger-height1.625rem

Radii (8)

PreviewTokenValueResolved / note
--ui-radius-2xs0.125rem2px — media-track / micro chrome
--ui-radius-xxs0.25rem4px
--ui-radius-xs0.375rem6px
--ui-radius-sm0.5rem8px
--ui-radius-md0.75rem12px
--ui-radius-lg1rem16px
--ui-radius-xl1.25rem20px
--ui-radius-full9999pxpill / stadium / full circle

Spacing (12)

PreviewTokenValueResolved / note
--ui-space-10.25rem4px
--ui-space-20.5rem8px
--ui-space-30.75rem12px
--ui-space-41rem16px
--ui-space-51.25rem20px
--ui-space-61.5rem24px
--ui-space-71.75rem28px
--ui-space-82rem32px
--ui-space-102.5rem40px
--ui-space-123rem48px
--ui-space-143.5rem56px
--ui-space-164rem64px

Surfaces (21)

PreviewTokenValueResolved / note
--ui-surface-0rgba(255, 255, 255, 1)
--ui-surface-1rgba(249, 250, 251, 1)
--ui-surface-2rgba(243, 244, 246, 1)
--ui-surface-nodergba(255, 255, 255, 1)
--canvas-grid-opacity-scale0.7
--canvas-grid-dot-size0.9px
--ui-surface-subtlergba(249, 250, 251, 1)
--ui-surface-subtle-hoverrgba(243, 244, 246, 1)
--ui-surface-tab-activergba(255, 255, 255, 1)
--ui-blur-panel24px
--ui-blur-popover20px
--ui-blur-toast12px
--ui-blur-canvas-preserve0.5px
--ui-shadow-panel0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)
--ui-shadow-popover0 6px 14px rgba(15, 23, 42, 0.06)
--ui-shadow-tooltip0 4px 6px -1px rgba(0, 0, 0, 0.05)
--auth-accent#5150F7
--auth-textaliasvar(--color-foreground)#111827
--auth-text-mutedaliasvar(--public-text-muted)rgba(82, 82, 82, 0.9)
--auth-control-height52px
--task-control-height3rem

Canvas layout (2)

PreviewTokenValueResolved / note
--canvas-sidebar-primary-width260px
--canvas-sidebar-secondary-width260px

Canvas chrome (15)

PreviewTokenValueResolved / note
--canvas-chrome-surfacealiasvar(--color-background)#ffffff
--canvas-chrome-surface-subtle#f3f3f3
--canvas-chrome-surface-raisedaliasvar(--canvas-chrome-surface)#ffffff
--canvas-chrome-border#eeeeee
--canvas-chrome-border-strong#dddddd
--canvas-chrome-row-active#f3f3f3
--canvas-chrome-row-hover#f3f3f3
--canvas-chrome-text-strong#1f1f1f
--canvas-chrome-text-primary#2f2f2f
--canvas-chrome-text-secondary#525252
--canvas-chrome-text-heading#737373
--canvas-chrome-text-muted#808080
--canvas-chrome-icon-muted#bbbbbb
--canvas-chrome-accent#0099ff
--canvas-chrome-focus-ringaliasvar(--ui-focus-ring)rgba(0, 0, 0, 0.2)

Borders (4)

PreviewTokenValueResolved / note
--ui-border-softrgba(229, 231, 235, 1)
--ui-border-strongrgba(209, 213, 219, 1)
--ui-border-subtlergba(243, 244, 246, 1)
--ui-border-subtle-hoverrgba(229, 231, 235, 1)

Elevation / z-index (6)

PreviewTokenValueResolved / note
--ui-z-overlay1000
--ui-z-tooltipaliasvar(--ui-z-overlay)1000
--ui-z-toast1100
--ui-shadow-toast0 10px 15px -3px rgba(0, 0, 0, 0.05)
--ui-shadow-soft0 1px 2px 0 rgba(0, 0, 0, 0.05)
--ui-overlay-backdroprgb(15 23 42 / 0.45)

Status (18)

PreviewTokenValueResolved / note
--ui-status-successrgba(22, 163, 74, 0.9)
--ui-status-success-bgrgba(22, 163, 74, 0.1)
--ui-status-success-borderrgba(22, 163, 74, 0.2)
--ui-status-errorrgb(220, 38, 38)
--ui-status-error-bgrgba(220, 38, 38, 0.08)
--ui-status-error-borderrgba(220, 38, 38, 0.2)
--ui-status-warningrgba(217, 119, 6, 0.9)
--ui-status-warning-bgrgba(245, 158, 11, 0.08)
--ui-status-warning-borderrgba(245, 158, 11, 0.25)
--ui-status-mutedrgba(0, 0, 0, 0.5)
--ui-status-error-shell-bgaliasvar(--ui-status-error-bg)rgba(220, 38, 38, 0.08)
--ui-status-error-shell-borderaliasvar(--ui-status-error-border)rgba(220, 38, 38, 0.2)
--ui-status-error-shell-textrgba(185, 28, 28, 1)
--ui-focus-ringrgba(0, 0, 0, 0.2)
--ui-focus-ring-lightrgba(0, 0, 0, 0.35)
--ui-selection-bgrgba(0, 0, 0, 0.18)
--ui-text-mutedaliascolor-mix(in srgb, var(--color-foreground) 45%, transparent)color-mix(in srgb, #111827 45%, transparent)
--ui-text-muted-strongaliascolor-mix(in srgb, var(--color-foreground) 55%, transparent)color-mix(in srgb, #111827 55%, transparent)

Canvas overlay (39)

PreviewTokenValueResolved / note
--canvas-overlay-blur8px
--canvas-overlay-bgaliasvar(--canvas-chrome-surface)#ffffff
--canvas-overlay-field-bgaliasvar(--canvas-chrome-surface-subtle)#f3f3f3
--canvas-overlay-hover-bgaliasvar(--canvas-chrome-row-hover)#f3f3f3
--canvas-overlay-active-bgaliasvar(--canvas-chrome-row-active)#f3f3f3
--canvas-overlay-borderaliasvar(--canvas-chrome-border)#eeeeee
--canvas-overlay-border-strongaliasvar(--canvas-chrome-border-strong)#dddddd
--canvas-overlay-textaliasvar(--canvas-chrome-text-strong)#1f1f1f
--canvas-overlay-text-secondaryaliasvar(--canvas-chrome-text-secondary)#525252
--canvas-overlay-text-mutedaliasvar(--canvas-chrome-text-muted)#808080
--canvas-overlay-text-placeholderaliasvar(--canvas-chrome-text-muted)#808080
--canvas-overlay-section-label-textaliasvar(--canvas-chrome-text-heading)#737373
--canvas-overlay-focus-ringaliasvar(--canvas-chrome-focus-ring)rgba(0, 0, 0, 0.2)
--canvas-overlay-shadow0 8px 18px rgba(17, 24, 39, 0.08)
--canvas-overlay-trigger-bgaliasvar(--canvas-chrome-surface)#ffffff
--canvas-overlay-trigger-active-bgaliasvar(--canvas-overlay-field-bg)#f3f3f3
--canvas-overlay-trigger-shadow0 2px 6px rgba(17, 24, 39, 0.06)
--canvas-overlay-successaliasvar(--ui-status-success)rgba(22, 163, 74, 0.9)
--canvas-overlay-success-strongrgb(5, 150, 105)
--canvas-overlay-dangerrgba(185, 28, 28, 0.9)
--canvas-overlay-danger-mutedrgba(185, 28, 28, 0.8)
--canvas-overlay-danger-bgrgba(220, 38, 38, 0.06)
--canvas-overlay-danger-bg-hoverrgba(220, 38, 38, 0.12)
--canvas-overlay-toggle-trackrgba(0, 0, 0, 0.12)
--canvas-overlay-toggle-track-onrgba(22, 163, 74, 0.35)
--canvas-overlay-action-bgaliasvar(--canvas-chrome-surface-subtle)#f3f3f3
--canvas-overlay-action-bg-hoveraliasvar(--canvas-chrome-row-hover)#f3f3f3
--canvas-overlay-action-padding0.4375rem 0.625rem
--canvas-overlay-radiusaliasvar(--ui-radius-sm)0.5rem
--canvas-floating-toolbar-height3.125rem50px
--canvas-floating-toolbar-control-size1.875rem30px
--canvas-floating-toolbar-viewport-gapaliasvar(--ui-space-3)0.75rem
--canvas-floating-toolbar-popover-gapaliasvar(--canvas-floating-toolbar-viewport-gap)0.75rem
--canvas-floating-toolbar-popover-bottomaliascalc( var(--canvas-floating-toolbar-viewport-gap) + var(--canvas-floating-toolbar-height) + var(--canvas-floating-toolbar-popover-gap) )calc( 0.75rem + 3.125rem + 0.75rem )
--icon-shimmer-highlightrgba(23, 23, 23, 0.9)
--node-exec-runningrgba(234, 179, 8, 0.8)
--node-exec-streamingrgba(168, 85, 247, 0.8)
--node-exec-completedrgba(34, 197, 94, 0.8)
--node-exec-errorrgba(239, 68, 68, 0.8)

Public shell (13)

PreviewTokenValueResolved / note
--public-surfacealiasvar(--color-background)#ffffff
--public-surface-muted#f7f7f7
--public-surface-hoverrgba(0, 0, 0, 0.04)
--public-border#e5e7eb
--public-border-hover#d1d5db
--public-textaliasvar(--color-foreground)#111827
--public-text-mutedrgba(82, 82, 82, 0.9)
--public-light-bg#FCFBF8
--public-light-textrgb(15, 53, 71)
--public-light-text-mutedrgb(71, 74, 84)
--public-light-borderrgb(231, 231, 231)
--public-light-accent-subtlergba(107, 95, 237, 0.08)
--public-navbar-height68px

Canvas node (6)

PreviewTokenValueResolved / note
--canvas-node-labelrgba(38, 38, 38, 0.95)
--node-header-icon-coloraliasvar(--node-header-label-color)rgba(64, 64, 64, 1)
--node-header-label-colorrgba(64, 64, 64, 1)
--asset-badge-fgrgba(64, 64, 64, 0.95)
--asset-pill-fgrgba(64, 64, 64, 0.9)
--asset-pill-active-fgrgba(23, 23, 23, 0.96)

Dashboard (3)

PreviewTokenValueResolved / note
--dashboard-sidebar-width13rem
--dashboard-shell-bgaliasvar(--color-background)#ffffff
--dashboard-main-bgaliasvar(--color-background)#ffffff

Was this page helpful?