ColorSystem

token

Breakdex::DesignTokens::ColorSystem

Adaptive color palette with four theme modes and semantic state/action colors

Maps every surface, text, and interactive element to a named color token so the UI never references raw hex values directly. Mode switching is instant because every widget reads from the same token map — only the underlying values rotate.

Relationships

Configured By 3

theme_setting_provideraccent_color_providerlearning_state_colors_provider

Breaks If 3

token_key_renamed_without_migrationmode_missing_required_surface_keyaccent_value_fails_contrast_check

Answers

Values

accent #1F5EFF
actionAgain #C23B2A
actionEasy #0D9F9A
actionGood #1F7A4F
actionHard #B7791F
stateLearning #2F6BFF
stateMastery #1F8A70
stateNew #E45D7A

Modes

dark

bg #090B10
card #11141B
fill #1A1F29
secondary #A7B1C2
separator #283041
text #F7FAFF

light

bg #F8FAFC
card #FFFFFF
fill #F1F5F9
secondary #5A6272
separator #D9E0EA
text #0B0D12

mono Dark

bg #090909
card #111111
fill #181818
secondary #B3B3B3
separator #F4F4F4
text #F4F4F4

mono Light

bg #F7F7F7
card #FFFFFF
fill #F0F0F0
secondary #5F5F5F
separator #111111
text #111111