Dark mode · Figma variables
Everything below is named exactly as it appears in your Figma variables (dark/… for semantic tokens, Family/Name for primitives). Two groups: (1) tokens pointing at a colour outside the approved 34, and (2) duplicate variables to fold in, plus the roles that need a brand-new token.
14 dark tokens alias to 9 primitives that aren't in the approved 34. For each: add that primitive to the approved palette, or re-alias the token to an approved one.
| Dark token (Figma) | Aliases to | Value | What to change |
|---|---|---|---|
dark/bg/page | Neutral/975 | #030F1A | Add Neutral/975 to the palette, or re-alias to Slate/Slate-900 |
dark/bg/success | Green/Green-900 | #236C18 | Add Green-900, or re-alias to Green/Green-800 |
dark/bg/error | Red/Red-900 | #470E00 | Add Red-900, or re-alias to Red/Red-800 |
dark/bg/warning | Yellow/Yellow-900 | #332D00 | Add Yellow-900, or re-alias to Yellow/Yellow-800 |
dark/text/secondary, dark/icon/secondary | Neutral/300 | #C9D1D9 | Re-alias to Slate/Slate-300 |
dark/text/inverse, dark/icon/inverse | Neutral/900 | #0D1117 | Re-alias to Slate/Slate-900 |
dark/text/brand, dark/icon/brand, dark/feedback/info | Blue/Blue-400 | #8CA1EE | Re-alias to Blue/Blue-300 |
dark/text/warning, dark/feedback/warning | Yellow/Yellow-300 | #FFEF75 | Re-alias to Yellow/Yellow-400 |
dark/feedback/pending | Yellow/Yellow-200 | #FFF5AB | Re-alias to Yellow/Yellow-400 |
The 4 deep surface tints (Add) have no close approved match, so they likely need adding to the palette. The other 5 (Re-alias) each have a near-identical approved stop.
Your live Semantic Dark collection holds more than the 36 canonical tokens. Two parts: fold the duplicates into a canonical token, and add a token for the roles the 36 don't cover.
Each of these resolves to the same value as a canonical token, so point it at (or retire it for) the canonical one.
| Extra Figma variable | Fold into |
|---|---|
| Surfaces | |
dark/bg/raised-disabled, dark/bg/disabled, dark/bg/inset, dark/bg/inset-disabled | dark/bg/page-subtle |
dark/bg/glass | dark/bg/raised |
dark/bg/inverse-muted | dark/bg/inverse |
dark/bg/info | dark/feedback/info |
| Text | |
dark/text/on-fill | dark/text/inverse |
dark/text/info | dark/feedback/info |
| Icons | |
dark/icon/tertiary, dark/icon/disabled | dark/icon/secondary |
dark/icon/on-fill | dark/icon/primary |
dark/icon/success | dark/feedback/success |
dark/icon/error | dark/feedback/error |
dark/icon/warning | dark/feedback/warning |
dark/icon/info | dark/feedback/info |
| Borders | |
dark/border/disabled | dark/border/subtle |
dark/border/warning | dark/feedback/warning |
dark/border/info | dark/feedback/info |
| Actions | |
dark/action/secondary-border | dark/action/primary |
dark/action/disabled-text | dark/text/disabled |
These can't fold into anything because the 36 have no equivalent. Each is one new variable decision.
| Missing role | Today in Figma | Decision |
|---|---|---|
| Transparent | dark/overlay/transparent only | Add a proper dark/transparent token (or accept the literal). |
| Overlay / scrim | dark/overlay/light, /medium, /heavy (all currently the opaque page colour) | Define a real translucent scrim value, or confirm modals use the opaque page. |
| Glass | No semantic token; uses the Glass/* primitives | Add a translucent dark/bg/glass value (today it just equals raised), or keep glass as primitives. |
| Chart palette | No tokens; charts use raw Blue/*, Neutral/* primitives | Add chart-series tokens so charts stop reaching into primitives. |
dark/product/number/*, /entity/*, /deal/*, /badge/*, /premium/*. Keep them as a separate product layer, or drop them. They're domain colours, so they sit outside the core set either way.