Frame Design System

Foundations

Color tokens

#

CSS variables with light + dark themes baked in. Toggle the moon/sun to compare. Each token shows its var name, the resolved value at the current theme, the canonical Tailwind class, and the primitives that consume it (click the eye toggle to expand).

Surface

bg-page

--color-bg-page

—

bg-bg-page

9 primitives
  • PageLayout
  • SearchBox
  • StepIndicator
  • StatusTag
  • DarkToggle
  • SidebarSectionToggle
  • ConnectorCard
  • AttachmentChip
  • ChatPanel

bg-message

--color-bg-message

—

bg-bg-message

7 primitives
  • DarkToggle
  • AgentRequiredHint
  • ChatMessage
  • VoiceWaveform
  • AttachmentChip
  • ChatInput
  • ChatWelcomeState

bg-hover

--color-bg-hover

—

bg-bg-hover

21 primitives
  • SearchBox
  • SectionCount
  • ProgressBar
  • HeaderIconButton
  • MenuRow
  • IconBadge
  • StatusStrip
  • DarkToggle
  • AvatarMenu
  • AddRowButton
  • TextField
  • AutocompleteField
  • Chip
  • SolutionRow
  • ChoiceCard
  • InsightCard
  • TaskProgressCard
  • EmptyState
  • AttachmentChip
  • ChatInput
  • ChatWelcomeState

sidebar

--color-sidebar-bg

—

bg-bg-sidebar

no primitive uses

card-panel

--color-card-panel-bg

—

bg-bg-card

3 primitives
  • ArtifactCard
  • AgentRequiredHint
  • MessageCard

Text

text-primary

--color-text-primary

—

text-text-primary

53 primitives
  • HeaderBar
  • SearchBox
  • SidePanelHeader
  • SideCard
  • ToolbarPill
  • ToolbarIconButton
  • ToolbarSegmented
  • Switch
  • Checkbox
  • SectionCount
  • SectionTitle
  • ProgressBar
  • CategoryBreakdown
  • StepIndicator
  • TertiaryButton
  • GhostPillButton
  • HeaderIconButton
  • IconButton
  • MessageActions
  • MenuRow
  • IconBadge
  • TextButton
  • UserAvatar
  • DarkToggle
  • AvatarMenu
  • TextField
  • AutocompleteField
  • RangeSlider
  • DualRangeSlider
  • NavItem
  • SidebarSectionToggle
  • ConnectorCard
  • FilterChip
  • Chip
  • UtilityChip
  • SolutionRow
  • SummaryFooter
  • MetricCard
  • InsightCard
  • AreaChart
  • TaskProgressCard
  • HealthDimensionRow
  • ReviewItemCard
  • ArtifactCard
  • EmptyState
  • VersionRow
  • AgentRequiredHint
  • ChatMessage
  • AttachmentChip
  • ChatInput
  • ChatPanel
  • ChatWelcomeState
  • MessageCard

text-secondary

--color-text-secondary

—

text-text-secondary

23 primitives
  • Switch
  • Checkbox
  • CategoryBreakdown
  • HeaderIconButton
  • SegmentedToggle
  • MenuRow
  • StatusStrip
  • TextButton
  • ResourceLinkCard
  • AvatarMenu
  • AddRowButton
  • TextField
  • AutocompleteField
  • RangeSlider
  • DualRangeSlider
  • ConnectorCard
  • ChoiceCard
  • EmptyState
  • VersionRow
  • ChatMessage
  • AttachmentChip
  • ChatInput
  • MessageCard

text-tertiary

--color-text-tertiary

—

text-text-tertiary

4 primitives
  • MenuRow
  • ConnectorCard
  • VersionRow
  • ChatInput

Stroke

stroke-outline

--color-stroke-outline

—

border-stroke-outline

18 primitives
  • ToolbarPill
  • ToolbarSegmented
  • Switch
  • Checkbox
  • StepIndicator
  • StatusTag
  • TertiaryButton
  • GhostPillButton
  • SegmentedToggle
  • AvatarMenu
  • RangeSlider
  • DualRangeSlider
  • ConnectorCard
  • FilterChip
  • Chip
  • UtilityChip
  • ChoiceCard
  • AttachmentChip

Selected

selected-bg

--color-selected-bg

—

bg-selected-bg

9 primitives
  • ToolbarSegmented
  • Switch
  • Checkbox
  • IconButton
  • SegmentedToggle
  • FilterChip
  • Chip
  • ChoiceCard
  • ChatMessage

selected-text

--color-selected-text

—

text-selected-text

9 primitives
  • ToolbarSegmented
  • Switch
  • Checkbox
  • IconButton
  • SegmentedToggle
  • FilterChip
  • Chip
  • ChoiceCard
  • ChatMessage

Accent

accent-blue

--color-accent-blue

—

text-accent-blue

4 primitives
  • SampleWorkspaceLabel
  • ResourceLinkCard
  • ChatInput
  • ChatWelcomeState

accent-green

--color-accent-green

—

text-accent-green

1 primitive
  • ChatWelcomeState

accent-red

--color-accent-red

—

text-accent-red

no primitive uses

accent-amber

--color-accent-amber

—

text-accent-amber

no primitive uses

accent-orange

--color-accent-orange

—

text-accent-orange

no primitive uses

accent-violet

--color-accent-violet

—

text-accent-violet

no primitive uses

accent-neutral

--color-accent-neutral

—

text-accent-neutral

no primitive uses

Status

warning

--color-warning

—

text-warning

1 primitive
  • ChatWelcomeState

error

--color-error

—

text-error

3 primitives
  • DangerButton
  • TextField
  • ChatInput

Overlay glass surface

#

One treatment for every surface that floats OVER content — dialog, dropdown, menu, popover, overlay navigation, overlay Inspector. In dark mode it is pure black at 50% AND a 10px backdrop blur, applied together by the .overlay-surface class; the colour is not exposed as a Tailwind class on its own, so a consumer cannot take the fill and miss the blur. Light mode keeps the opaque fill overlays already shipped with. It is a background fill, so the fill-or-border rule applies: no border by default. Not for inline panes, page canvases, passive cards, on-media controls or tooltips.

.overlay-surface

Foreground stays fully opaque — backdrop-filter only touches what is behind.

Computed background

—

Computed backdrop-filter

—

Light mode is unchanged: .overlay-surface keeps the opaque sidebar fill and declares no backdrop-filter at all. Flip the moon to compare.

Brand gradient

#

Three-stop signature gradient — every CTA, app shell, nav highlight and chip-hover border resolves through these stops. Equal-status with color tokens, not a color sub-group.

Stops

start

--brand-grad-start

—

mid

--brand-grad-mid

—

end

--brand-grad-end

—

Utility classes

Gradient text

.gradient-text
.gradient-btn
.chip-gradient-hover
Active nav
.gradient-ring
.app-bg — outer shell background

Typography

#

Use the .type-* helper classes — never hardcode font-size / line-height / letter-spacing. Token change in one place propagates everywhere.

The quick brown fox.type-display-xlDisplay XL — oversized stat
The quick brown fox.type-displayDisplay — page title
The quick brown fox.type-h1--emphasizedH1 emphasized — section banner
The quick brown fox.type-h1H1 — section banner (regular)
The quick brown fox.type-h2-emphasizedH2 emphasized — card title
The quick brown fox.type-h2H2 — header label
The quick brown fox.type-h3H3 — sub-heading
The quick brown fox.type-body-emphasizedBody emphasized — markdown bold
The quick brown fox.type-bodyBody — chat bubble copy
The quick brown fox.type-detail-emphasizedDetail emphasized — list label
The quick brown fox.type-detailDetail — meta description
The quick brown fox.type-captionCaption — meta line / counter
The quick brown fox.type-footnoteFootnote — tooltip / hint

Shadow

#

Sparse on purpose — only two semantic depths plus the gradient-btn lift. Light mode shadows turn into 1px gradient rings on dark canvas (shadows read as muddy glows on dark).

thumb

--shadow-thumb

Slider thumb / draggable knob

Hover me

card-hover

--shadow-card-hover

.card-hover-shadow

Card hover lift (light only — dark uses gradient ring instead)

gradient-btn

.gradient-btn

Brand gradient CTA — internal box-shadow lift on hover/active

Light mode active — toggle the sun/moon to see how dark mode swaps shadows for gradient rings.

Radius

#

Five-step radius scale. The shell radius (40px) is the outer app rounding; pill (9999px) is for tags and gradient CTAs.

sm

--radius-sm

8px

Pills, small cards, inputs

md

--radius-md

12px

Section cards, modal panels

lg

--radius-lg

16px

Composer, chat-input panel

pill

--radius-pill

9999px

Tags, status pills, gradient buttons

shell

--radius-shell

40px

Outer app shell rounded corner

Spacing

#

Use Tailwind spacing scale. Common rhythms: 1.5 (6px), 2 (8px), 3 (12px), 4 (16px), 6 (24px), 8 (32px).

gap-1.56px
gap-28px
gap-312px
gap-416px
gap-624px
gap-832px