WAPER / UI
Colour
Semantic colour tokens, light and dark values, and contrast against the page background.
Light
Loading preview…
Dark
Loading preview…
WaperDesignSurfaces
--surface-sidebar…Sidebar
--surface-base…Chat, settings, side panel, default page
--surface-pane…Paper: docs, editor, reading
--surface-inset…Insets on a page: code blocks, notices, table heads, thumbnail placeholders
--surface-l2…Avatar placeholders, thumbnails, skeletons
--surface-elevated…Menus, dialogs, tooltips, toasts, cards
--surface-elevated-hover…Hover on elevated
--bubble-agent…Agent bubbles
--bubble-user…Your messages (solid ink in light, white 18% in dark)
--bubble-user-fg…Text in your messages
--overlay…Scrim behind dialogs (no blur)
Text
Aa
--fg-primary…Body text, solid buttons
Aa
--fg-secondary…Descriptions, ghost buttons, main agent's name
Aa
--fg-tertiary…Meta and counts (AA on every surface and agent bubbles)
Aa
--fg-quaternary…Placeholders and decoration only
Aa
--fg-disabled…Disabled text
Aa
--fg-accent-text…Links and accent text
Aa
--fg-danger…Errors, destructive text
Aa
--fg-success…Done text
Aa
--fg-warning…Warning text
Aa
--code-inline-fg…Inline code text
Icons
--icon-primary…Hovered or selected icons, floating buttons
--icon-secondary…Default icons
--icon-tertiary…Chevrons, search glass
--icon-quaternary…Dividers, decoration
Fills
--fill-hover…Ghost hover
--fill-active…Selected row
--fill-secondary…Secondary buttons, chips, current segment
--fill-secondary-hover…Secondary hover
--fill-tertiary…Quiet blocks
--fill-quaternary…Quietest blocks, disabled secondary
--code-inline…Inline code background
--scrollbar-thumb…Scrollbar (shows when hovering the scroll area)
--fg-accent…Switch on, checked boxes, progress
--fg-accent-hover…Accent hover
--focus…Keyboard focus ring
--success-solid…Success dots and icons
--warning-solid…Warning dots and icons
--danger-solid…Danger dots and icons
Borders
--border-primary…Focused inputs, checkbox edges
--border-secondary…Inputs at rest, menu and dialog edges
--border-tertiary…Floating controls and cards
--border-quaternary…Dividers
--border-edge…Floating controls and cards
--border-input…Inputs at rest
--border-input-focus…Focused inputs (one step darker, no ring)
--border-overlay…Menus, popovers, tooltips, dialogs
Buttons
--button-filled…Primary button
--button-filled-hover…Primary hover
--button-filled-active…Primary pressed (outside buttons)
--button-filled-fg…Primary button text
--button-filled-disabled…Disabled primary
--button-secondary-fill…Secondary button
--button-secondary-hover…Secondary hover
--button-secondary-active…Secondary pressed (outside buttons)
--button-ghost-hover…Ghost hover
--button-ghost-active…Ghost open
--button-accent…Solid accent button
--button-accent-hover…Solid accent hover
--accent-soft-hover…Soft accent hover
--accent-disabled…Disabled accent
--button-danger…Solid destructive
--button-danger-hover…Solid destructive hover
--danger-soft-hover…Soft destructive hover
--danger-disabled…Disabled destructive
--chrome-fill…Buttons on images (with blur)
--chrome-fill-hover…Chrome hover
Signal
--signal…Signal: needs you
--on-signal…Text on signal
--on-accent…Text on accent
--signal-soft…Signal badge background
--signal-foreground…Signal badge text
Status: soft background + text
Info · 12 sources updated
--accent-soft / --accent-on-softDone · 12 sources updated
--success-soft / --success-on-softHeads-up · 12 sources updated
--warning-soft / --warning-on-softFailed · 12 sources updated
--danger-soft / --danger-on-softNeeds you · 12 sources updated
--signal-soft / --signal-foregroundAgent body colours
Each colour comes with a text shade for names and a soft shade for hovering a name (hover them).
--agent-coral…
--agent-orange…
--agent-sun…
--agent-lime…
--agent-mint…
--agent-teal…
--agent-sky…
--agent-lavender…
--agent-pink…
--agent-cocoa…
--agent-stone…
--agent-ink…
Surfaces
--surface-sidebar…Sidebar
--surface-base…Chat, settings, side panel, default page
--surface-pane…Paper: docs, editor, reading
--surface-inset…Insets on a page: code blocks, notices, table heads, thumbnail placeholders
--surface-l2…Avatar placeholders, thumbnails, skeletons
--surface-elevated…Menus, dialogs, tooltips, toasts, cards
--surface-elevated-hover…Hover on elevated
--bubble-agent…Agent bubbles
--bubble-user…Your messages (solid ink in light, white 18% in dark)
--bubble-user-fg…Text in your messages
--overlay…Scrim behind dialogs (no blur)
Text
Aa
--fg-primary…Body text, solid buttons
Aa
--fg-secondary…Descriptions, ghost buttons, main agent's name
Aa
--fg-tertiary…Meta and counts (AA on every surface and agent bubbles)
Aa
--fg-quaternary…Placeholders and decoration only
Aa
--fg-disabled…Disabled text
Aa
--fg-accent-text…Links and accent text
Aa
--fg-danger…Errors, destructive text
Aa
--fg-success…Done text
Aa
--fg-warning…Warning text
Aa
--code-inline-fg…Inline code text
Icons
--icon-primary…Hovered or selected icons, floating buttons
--icon-secondary…Default icons
--icon-tertiary…Chevrons, search glass
--icon-quaternary…Dividers, decoration
Fills
--fill-hover…Ghost hover
--fill-active…Selected row
--fill-secondary…Secondary buttons, chips, current segment
--fill-secondary-hover…Secondary hover
--fill-tertiary…Quiet blocks
--fill-quaternary…Quietest blocks, disabled secondary
--code-inline…Inline code background
--scrollbar-thumb…Scrollbar (shows when hovering the scroll area)
--fg-accent…Switch on, checked boxes, progress
--fg-accent-hover…Accent hover
--focus…Keyboard focus ring
--success-solid…Success dots and icons
--warning-solid…Warning dots and icons
--danger-solid…Danger dots and icons
Borders
--border-primary…Focused inputs, checkbox edges
--border-secondary…Inputs at rest, menu and dialog edges
--border-tertiary…Floating controls and cards
--border-quaternary…Dividers
--border-edge…Floating controls and cards
--border-input…Inputs at rest
--border-input-focus…Focused inputs (one step darker, no ring)
--border-overlay…Menus, popovers, tooltips, dialogs
Buttons
--button-filled…Primary button
--button-filled-hover…Primary hover
--button-filled-active…Primary pressed (outside buttons)
--button-filled-fg…Primary button text
--button-filled-disabled…Disabled primary
--button-secondary-fill…Secondary button
--button-secondary-hover…Secondary hover
--button-secondary-active…Secondary pressed (outside buttons)
--button-ghost-hover…Ghost hover
--button-ghost-active…Ghost open
--button-accent…Solid accent button
--button-accent-hover…Solid accent hover
--accent-soft-hover…Soft accent hover
--accent-disabled…Disabled accent
--button-danger…Solid destructive
--button-danger-hover…Solid destructive hover
--danger-soft-hover…Soft destructive hover
--danger-disabled…Disabled destructive
--chrome-fill…Buttons on images (with blur)
--chrome-fill-hover…Chrome hover
Signal
--signal…Signal: needs you
--on-signal…Text on signal
--on-accent…Text on accent
--signal-soft…Signal badge background
--signal-foreground…Signal badge text
Status: soft background + text
Info · 12 sources updated
--accent-soft / --accent-on-softDone · 12 sources updated
--success-soft / --success-on-softHeads-up · 12 sources updated
--warning-soft / --warning-on-softFailed · 12 sources updated
--danger-soft / --danger-on-softNeeds you · 12 sources updated
--signal-soft / --signal-foregroundAgent body colours
Each colour comes with a text shade for names and a soft shade for hovering a name (hover them).
--agent-coral…
--agent-orange…
--agent-sun…
--agent-lime…
--agent-mint…
--agent-teal…
--agent-sky…
--agent-lavender…
--agent-pink…
--agent-cocoa…
--agent-stone…
--agent-ink…