Figma ↔ CSS Map
The design system carries a machine-checked map from every Figma component canvas to its CSS class and compiled color — in light and dark. It lets anyone answer "is this component the right color?" from a CSS class alone, without opening Figma.
What it covers
- 39 component canvases (all BASE + APPLICATION components)
- 774 hex comparisons (light + dark, CSS side)
- 0 CSS mismatches — the map never lies about the compiled CSS
- 6 divergences — real, documented Figma-vs-CSS gaps flagged for human review
Foundations (Colors, Typography, Icons, Grid, Effects, Logos), ready screens (MDM/POS), and kit helpers are intentionally out of scope — they aren't components.
How verification works
A CI script (npm run verify:figma-map) checks the map on two axes:
| Axis | Compares | Meaning | On failure |
|---|---|---|---|
| CSS token | map's expectedHex vs the compiled antumo.css | The map matches reality | Fails the build |
| Figma fill | Figma's fill vs the CSS hex | Figma and CSS agree | Informational only |
So the build breaks if the map drifts from the CSS, while genuine Figma-vs-CSS design gaps are surfaced as a review list — never silently mixed with errors.
The dark values come from the compiled CSS (the source of truth for dark mode), not guessed from Figma — most Figma canvases are single-theme (light).
Example: Button
Every Button variant matches Figma exactly (figmaFill == expectedHex.light), in both themes:
| Variant | Figma | CSS light | CSS dark |
|---|---|---|---|
.btn-primary bg | #3a3a66 | #3a3a66 | #757dd0 |
.btn-primary:hover | #32355a | #32355a | #6068b8 |
.btn-primary.btn-destructive | #b53f3f | #b53f3f | #de6363 |
.btn-secondary bg | #ffffff | #ffffff | #0c0e12 |
.btn-secondary border | #d5d7da | #d5d7da | #373a41 |
.btn-tertiary text | #3a3a66 | #3a3a66 | #757dd0 |
Divergences
Six documented Figma-vs-CSS gaps remain open for human decision. These are not bugs — they're intentional design-intent differences, recorded so nobody guesses the source of truth.
| Component | Property | Figma | CSS | Status |
|---|---|---|---|---|
| Input | hover/focus border | #3a3a66 | #5b6ef2 | Resolved — CSS is truth (unified focus ring) |
| Navigation | .nav-item-badge bg | #f6f7fa navy pill | #b53f3f red | Open — badge semantics |
| Navigation | .badge-yellow bg | #f1c846 | #f4cf53 | Open — minor hex drift |
| MiscIcons | .dot base | #2fa46f green sample | #181d27 neutral | Open — sample vs neutral base |
| MobileApp | label / value text | #181d27 gray-900 | #0a0d12 gray-950 | Open — one-step drift |
| MobileApp | supporting text | #414651 gray-700 | #717680 gray-500 | Open — two-step drift |
Why it matters
- Instant answers — "is X the right color?" resolves from the map, no Figma round-trip.
- CI guard — change a token and the map stops matching → the build fails, before it ships.
- Design accountability — real Figma-vs-CSS gaps are an explicit, reviewable list, not lost in the noise.
The map lives at figma-css-map.json in the repository, validated by figma-css-map.schema.json.