Every StarSpec wireframe theme defines CSS variables in two scope blocks — one for light mode and one for dark mode:
/* Light (default) */
:root[data-wf-theme="id"],
:root.wa-light[data-wf-theme="id"] { … }
/* Dark */
:root.wa-dark[data-wf-theme="id"] { … }
Variables marked required must be defined in both blocks. Variables marked optional extend the base and are only needed when a theme diverges from the Sketch defaults.
Brand Colors (required)
Variable
Description
Typical Light
Typical Dark
--wf-color-primary
Main accent — buttons, active states, focus rings
#5E6AD2
lighter tint of light value
--wf-color-primary-text
Text on primary background (must contrast primary)
#FFFFFF
#000000 or #FFFFFF
--wf-color-bg
Page/wireframe background
#FFFFFF
#111111–#1E1E1E
--wf-color-bg-light
Card and input field background
#F7FAFC
slightly lighter than bg
--wf-color-bg-elevated
Active segment, hover, raised surface
#FFFFFF
slightly lighter than bg-light
--wf-color-text
Primary text color
#1A202C
rgba(255,255,255,0.87)
--wf-color-text-muted
Secondary text, hints, placeholders
#718096
rgba(255,255,255,0.60)
--wf-color-border
Default container border
#E2E8F0
rgba(255,255,255,0.12)
--wf-color-border-dark
Interactive element border (inputs, focus)
#CBD5E0
rgba(255,255,255,0.23)
Semantic Colors (required)
Variable
Description
Typical Value
--wf-color-success
Success states, progress bars
#38A169
--wf-color-warning
Warning states, progress bars
#DD6B20
--wf-color-danger
Error states, destructive actions
#E53E3E
Extended Semantic (optional)
Variable
Description
Usage
--wf-color-danger-bg
Subtle danger background fill
Danger callout rows
--wf-color-danger-border
Danger border for callout containers
Borders on danger cards
Geometry & Spacing (required)
Variable
Description
Typical Value
--wf-radius-card
Corner radius for cards and modals
12px
--wf-radius-button
Corner radius for buttons and inputs
8px
--wf-border-width
Thickness of borders
1px
--wf-spacing-gap
Base gap for stacks and rows
1rem
Extended Radii (optional)
Use when a theme needs component-level radius control beyond the two base values.
Variable
Description
Typical Value
--wf-radius-sm
Small radius (badges, tags)
4px
--wf-radius-md
Medium radius (inputs, buttons)
8px
--wf-radius-lg
Large radius (cards, modals)
12px
--wf-radius-pill
Full pill (toggle buttons, chips)
100px
--wf-radius-input
Input field radius
6px
--wf-radius-modal
Modal/dialog radius
12px
--wf-radius-badge
Badge/chip radius
4px
--wf-radius-tabs
Tab container radius
8px
Font (optional)
Override fonts when the design system uses a custom typeface. Load the font family via @import above the variable blocks.