ANVIL · Figma MCP MappingPre-Import Status
Gate check before MCP import. All rows are currently compliant for the live ANVIL v1.0.0 documentation set.
| No literal values | Pass |
|---|---|
| No direct primitive references in components | Pass |
| State matrix complete | Pass |
| Accessibility minimum standards met | Pass |
| Single-mode (Light) compliance validated | Pass |
Overview
This page is the complete authority for ANVIL token-to-Figma variable mapping. Use the Quick Fill Grid below for import sessions. Component set mapping is maintained in the dedicated page.
Variable Naming Convention
Use these naming standards for 1:1 synchronization between ANVIL semantic tokens and Figma variables.
| Color | color/{group}/{role}/{state} |
|---|---|
| Space | space/{scale} |
| Radius | radius/{scale} |
| Type | type/{family|size|line-height|weight}/{name} |
Quick Fill Grid
Workshop table with all current semantic tokens for color, spacing, radius, font family, and font size. Use this when aligning design, engineering, and MCP export naming in one session.
| ANVIL token | Figma variable | Collection | Figma type | Mode |
|---|---|---|---|---|
| Color tokens | ||||
| --c-brand-primary | color/brand/primary/default | color | Color | Light |
| --c-brand-primary-hover | color/brand/primary/hover | color | Color | Light |
| --c-brand-primary-active | color/brand/primary/active | color | Color | Light |
| --c-brand-secondary | color/brand/secondary/default | color | Color | Light |
| --c-brand-secondary-hover | color/brand/secondary/hover | color | Color | Light |
| --c-brand-accent | color/brand/accent/default | color | Color | Light |
| --c-brand-accent-hover | color/brand/accent/hover | color | Color | Light |
| --c-brand-accent-active | color/brand/accent/active | color | Color | Light |
| --c-text-base | color/text/base/default | color | Color | Light |
| --c-text-subtle | color/text/subtle/default | color | Color | Light |
| --c-text-muted | color/text/muted/default | color | Color | Light |
| --c-text-inverse | color/text/inverse/default | color | Color | Light |
| --c-bg-canvas | color/background/canvas/default | color | Color | Light |
| --c-bg-surface | color/background/surface/default | color | Color | Light |
| --c-bg-surface-subtle | color/background/surface/subtle | color | Color | Light |
| --c-bg-surface-muted | color/background/surface/muted | color | Color | Light |
| --c-border-subtle | color/border/subtle/default | color | Color | Light |
| --c-border-strong | color/border/strong/default | color | Color | Light |
| --c-state-focus | color/state/focus/default | color | Color | Light |
| --c-state-error | color/state/error/default | color | Color | Light |
| --c-state-success | color/state/success/default | color | Color | Light |
| --c-state-warning | color/state/warning/default | color | Color | Light |
| --c-state-info | color/state/info/default | color | Color | Light |
| --c-state-error-bg | color/state/error/background | color | Color | Light |
| --c-state-success-bg | color/state/success/background | color | Color | Light |
| --c-state-warning-bg | color/state/warning/background | color | Color | Light |
| --c-state-info-bg | color/state/info/background | color | Color | Light |
| --c-layout-sidebar-bg | color/layout/sidebar/background | color | Color | Light |
| --c-layout-sidebar-text | color/layout/sidebar/text | color | Color | Light |
| --c-layout-sidebar-hover | color/layout/sidebar/hover | color | Color | Light |
| Space tokens | ||||
| --sp-0 | space/0 | space | Number | Light |
| --sp-1 | space/1 | space | Number | Light |
| --sp-2 | space/2 | space | Number | Light |
| --sp-3 | space/3 | space | Number | Light |
| --sp-4 | space/4 | space | Number | Light |
| --sp-5 | space/5 | space | Number | Light |
| --sp-6 | space/6 | space | Number | Light |
| --sp-8 | space/8 | space | Number | Light |
| --sp-touch | space/touch | space | Number | Light |
| --sp-12 | space/12 | space | Number | Light |
| --sp-16 | space/16 | space | Number | Light |
| Radius tokens | ||||
| --r-none | radius/none | radius | Number | Light |
| --r-sm | radius/sm | radius | Number | Light |
| --r-md | radius/md | radius | Number | Light |
| --r-lg | radius/lg | radius | Number | Light |
| --r-full | radius/full | radius | Number | Light |
| Type tokens | ||||
| --ff-display | type/family/display | type | String | Light |
| --ff-body | type/family/body | type | String | Light |
| --ff-mono | type/family/mono | type | String | Light |
| --fs-caption | type/size/caption | type | Number | Light |
| --fs-small | type/size/small | type | Number | Light |
| --fs-body | type/size/body | type | Number | Light |
| --fs-lead | type/size/lead | type | Number | Light |
| --fs-h4 | type/size/h4 | type | Number | Light |
| --fs-h3 | type/size/h3 | type | Number | Light |
| --fs-h2 | type/size/h2 | type | Number | Light |
| --fs-h1 | type/size/h1 | type | Number | Light |
| --lh-tight | type/line-height/tight | type | Number | Light |
| --lh-snug | type/line-height/snug | type | Number | Light |
| --lh-body | type/line-height/body | type | Number | Light |
| --lh-relaxed | type/line-height/relaxed | type | Number | Light |
| --fw-normal | type/weight/normal | type | Number | Light |
| --fw-medium | type/weight/medium | type | Number | Light |
| --fw-semibold | type/weight/semibold | type | Number | Light |
| --fw-bold | type/weight/bold | type | Number | Light |
Mode Rules
All tokens use a single semantic mode: Light. No additional modes are defined. Primitive token values remain implementation detail and are never mapped directly in component sets.
| Light | Semantic token mode only |
|---|
Legacy Alias Rules
Legacy aliases are retained for backward compatibility only. New work must use canonical semantic tokens.
| Deprecation policy | Alias retained for backward compatibility only |
|---|---|
| New component usage | Prohibited |
| Migration direction | Alias to semantic canonical token |
| Alias token | Canonical token | Status |
|---|---|---|
| --c-primary | --c-brand-primary | Legacy alias retained |
| --c-primary-hover | --c-brand-primary-hover | Legacy alias retained |
| --c-primary-active | --c-brand-primary-active | Legacy alias retained |
| --c-secondary | --c-brand-secondary | Legacy alias retained |
| --c-secondary-hover | --c-brand-secondary-hover | Legacy alias retained |
| --c-accent | --c-brand-accent | Legacy alias retained |
| --c-accent-hover | --c-brand-accent-hover | Legacy alias retained |
| --c-accent-active | --c-brand-accent-active | Legacy alias retained |
| --c-text | --c-text-base | Legacy alias retained |
| --c-bg | --c-bg-surface | Legacy alias retained |
| --c-bg-subtle | --c-bg-surface-subtle | Legacy alias retained |
| --c-bg-muted | --c-bg-surface-muted | Legacy alias retained |
| --c-border | --c-border-subtle | Legacy alias retained |
| --c-focus | --c-state-focus | Legacy alias retained |
| --c-error | --c-state-error | Legacy alias retained |
| --c-success | --c-state-success | Legacy alias retained |
| --c-warning | --c-state-warning | Legacy alias retained |
| --c-info | --c-state-info | Legacy alias retained |
| --c-error-bg | --c-state-error-bg | Legacy alias retained |
| --c-success-bg | --c-state-success-bg | Legacy alias retained |
| --c-warning-bg | --c-state-warning-bg | Legacy alias retained |
| --c-info-bg | --c-state-info-bg | Legacy alias retained |
| --c-sidebar-bg | --c-layout-sidebar-bg | Legacy alias retained |
| --c-sidebar-text | --c-layout-sidebar-text | Legacy alias retained |
| --c-sidebar-hover | --c-layout-sidebar-hover | Legacy alias retained |