Swatch 4.0 color-system rebuild: direct palette colors, broad roles, simpler themes, and stronger dark mode.
This is for testing only.
Color system 4.0
The color source is still color_vars.css, but default and theme decisions now point directly to readable palette names. Scale colors remain available for contrast adjustments instead of becoming the root of the system.
| Layer | File | Job |
|---|---|---|
| Palette | color_vars.css |
Color scales, basic names, alpha tokens, direct utility classes, status recipes. |
| Default roles | defaults.css |
Strong light and dark defaults using broad roles like --canvas-bg, --surface-bg, --text, --heading, --accent, and --border. |
| Themes | theme-engine.css |
Compact .thm-* recipes. A theme sets background, text, heading, accent, border, and button roles. Children inherit. |
These are not extra color names. They are layout roles that point directly to the readable palette names.
| Role | Light value | Dark value |
|---|---|---|
--canvas-bg | --off-white | --super-950 |
--surface-bg | --white | --super |
--surface-alt-bg | --warm | --super-800 |
--text | --dark-grey | --off-white |
--text-strong | --black | --white |
--heading | --uvu | --meadow |
--accent | --uvu | --meadow |
--border | --grey | --super-500 |
--focus | --wolverine | --valley |
Use these first for real decisions. The scale colors below are adjustment tools.
| Swatch | Name | Token | Classes |
|---|---|---|---|
| UVU green | --uvu | --uvu-700 |
.bg-uvu / .text-uvu / .border-uvu |
|
| Wolverine green | --wolverine | --wolverine-600 |
.bg-wolverine / .text-wolverine / .border-wolverine |
|
| Valley green | --valley | --valley-400 |
.bg-valley / .text-valley / .border-valley |
|
| Meadow green | --meadow | --meadow-200 |
.bg-meadow / .text-meadow / .border-meadow |
|
| Seahaze green | --seahaze | --seahaze-200 |
.bg-seahaze / .text-seahaze / .border-seahaze |
|
| Dark green | --dark-green | --dark-green-800 |
.bg-dark-green / .text-dark-green / .border-dark-green |
|
| Super green | --super | --super-900 |
.bg-super / .text-super / .border-super |
|
| White | --white | --neutral-0 |
.bg-white / .text-white / .border-white |
|
| Off white | --off-white | --neutral-75 |
.bg-off-white / .text-off-white / .border-off-white |
|
| Black | --black | --neutral-950 |
.bg-black / .text-black / .border-black |
|
| Dark grey | --dark-grey | --neutral-900 |
.bg-dark-grey / .text-dark-grey / .border-dark-grey |
|
| Grey | --grey | --neutral-500 |
.bg-grey / .text-grey / .border-grey |
|
| Light grey | --light-grey | --neutral-150 |
.bg-light-grey / .text-light-grey / .border-light-grey |
|
| Warm | --warm | --warm-100 |
.bg-warm / .text-warm / .border-warm |
|
| Sage | --sage | --sage-50 |
.bg-sage / .text-sage / .border-sage |
|
| Gold | --gold | --gold-100 |
.bg-gold / .text-gold / .border-gold |
|
| Red | --red | --red-100 |
.bg-red / .text-red / .border-red |
|
| Info | --info | --info-100 |
.bg-info / .text-info / .border-info |
These are not the default design language. They are for contrast tuning, tinting, and special cases.
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--uvu-50
--uvu-100
--uvu-200
--uvu-300
--uvu-400
--uvu-500
--uvu-600
--uvu-700
♣ --uvu
--uvu-800
--uvu-900
--uvu-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--wolverine-50
--wolverine-100
--wolverine-200
--wolverine-300
--wolverine-400
--wolverine-500
--wolverine-600
♣ --wolverine
--wolverine-700
--wolverine-800
--wolverine-900
--wolverine-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--valley-50
--valley-100
--valley-200
--valley-300
--valley-400
♣ --valley
--valley-500
--valley-600
--valley-700
--valley-800
--valley-900
--valley-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--meadow-50
--meadow-100
--meadow-200
♣ --meadow
--meadow-300
--meadow-400
--meadow-500
--meadow-600
--meadow-700
--meadow-800
--meadow-900
--meadow-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--seahaze-50
--seahaze-100
--seahaze-200
♣ --seahaze
--seahaze-300
--seahaze-400
--seahaze-500
--seahaze-600
--seahaze-700
--seahaze-800
--seahaze-900
--seahaze-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--dark-green-50
--dark-green-100
--dark-green-200
--dark-green-300
--dark-green-400
--dark-green-500
--dark-green-600
--dark-green-700
--dark-green-800
♣ --dark-green
--dark-green-900
--dark-green-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--super-50
--super-100
--super-200
--super-300
--super-400
--super-500
--super-600
--super-700
--super-800
--super-900
♣ --super
--super-950
Use the named neutral aliases first: --white, --off-white, --black, --dark-grey, --grey, --light-grey. Use this full scale only for contrast refinement.
--neutral-0
♣ --white
--neutral-50
--neutral-75
♣ --off-white
--neutral-100
--neutral-150
--neutral-200
--neutral-300
--neutral-400
--neutral-500
♣ --grey
--neutral-600
--neutral-700
--neutral-800
--neutral-900
--neutral-950
♣ --black
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--warm-50
--warm-100
♣ --warm
--warm-200
--warm-300
--warm-400
--warm-500
--warm-600
--warm-700
--warm-800
--warm-900
--warm-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--sage-50
♣ --sage
--sage-100
--sage-200
--sage-300
--sage-400
--sage-500
--sage-600
--sage-700
--sage-800
--sage-900
--sage-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--gold-50
--gold-100
♣ --gold
--gold-200
--gold-300
--gold-400
--gold-500
--gold-600
--gold-700
--gold-800
--gold-900
--gold-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--red-50
--red-100
--red-200
--red-300
--red-400
--red-500
--red-600
--red-700
--red-800
--red-900
--red-950
Use the base token first. Use scale steps when a specific contrast adjustment is needed.
--info-50
--info-100
--info-200
--info-300
--info-400
--info-500
--info-600
--info-700
--info-800
--info-900
--info-950
Alpha tokens are background/tint tools. Keep text and borders solid unless there is a clear reason.
--bg-uvu-alpha-08--bg-uvu-alpha-16--bg-uvu-alpha-32--bg-uvu-alpha-64--bg-wolverine-alpha-08--bg-wolverine-alpha-16--bg-wolverine-alpha-32--bg-wolverine-alpha-64--bg-valley-alpha-08--bg-valley-alpha-16--bg-valley-alpha-32--bg-valley-alpha-64--bg-meadow-alpha-08--bg-meadow-alpha-16--bg-meadow-alpha-32--bg-meadow-alpha-64--bg-seahaze-alpha-08--bg-seahaze-alpha-16--bg-seahaze-alpha-32--bg-seahaze-alpha-64--bg-dark-green-alpha-08--bg-dark-green-alpha-16--bg-dark-green-alpha-32--bg-dark-green-alpha-64--bg-super-alpha-08--bg-super-alpha-16--bg-super-alpha-32--bg-super-alpha-64--bg-black-alpha-08--bg-black-alpha-16--bg-black-alpha-32--bg-black-alpha-64--bg-white-alpha-08--bg-white-alpha-16--bg-white-alpha-32--bg-white-alpha-64--bg-off-white-alpha-08--bg-off-white-alpha-16--bg-off-white-alpha-32--bg-off-white-alpha-64Themes use a compact WCAG-focused recipe: --theme-bg, --theme-surface, --theme-text, --theme-heading, --theme-accent, --theme-border, and button roles. Table headers use the existing heading/text/border system. Secondary buttons carry explicit borders in every recipe.
no theme class
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-uvu
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-wolverine
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-valley
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-meadow
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-seahaze
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-dark-green
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-super
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-white
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-off-white
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-light-grey
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-grey
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-black
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-dark-grey
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-warm
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-sage
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-gold
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-red
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-info
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
This shows the dark-mode version of each theme. Dark mode keeps the surfaces truly dark for accessibility, then brings the theme color back as heading, accent, border, link, and button pop.
no theme class
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-uvu
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-wolverine
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-valley
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-meadow
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-seahaze
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-dark-green
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-super
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-white
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-off-white
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-light-grey
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-grey
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-black
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-dark-grey
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-warm
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-sage
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-gold
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-red
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
.thm-info
Theme text inherits from the recipe. Links, bordered secondary buttons, forms, tables, and nested surfaces use the same compact theme roles.
The nested surface uses --theme-surface, not a new element-specific color stack.
Status colors stay semantic because they communicate purpose: success, info, warning, error, tip, important, feature, hint, and cookie/banner.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.
Status colors are the one semantic exception because they describe purpose, not layout.