Token Coverage
Last sync: Jan 25, 2026, 5:48 AMTotal Matches
114
Tokens in both Figma and code
Total Gaps
72
Figma-only + code-only tokens
Mismatches
1
Same name, different values
Coverage by Category
Colors
85%71 of 84 tokens mapped
Spacing
37%14 of 38 tokens mapped
Typography
45%29 of 65 tokens mapped
Token Gaps
Palette Mapping
How Figma color palettes map to code token namespaces
| Figma Palette | Status | Code Token |
|---|---|---|
| Blue | mapped | primary |
| Grey | mapped | grey |
| Success | mapped | green |
| Error | mapped | red |
| Warning | mapped | yellow |
| Pink | mapped | pink |
| Gradient-levels | mapped | gradientLevel |
Typography Mapping
How Figma text styles map to code typography tokens
| Figma Text Style | Status | Confidence | Code Token |
|---|---|---|---|
M/Monospace 14 | mapped | high | textStyle.code.sm |
Paragraph-4.1 14 SemiBold | mapped | medium | textStyle.body.sm |
M/Subtitle-3 12 | mapped | high | textStyle.label.md |
M/Subtitle-4 10 | mapped | high | textStyle.label.sm |
M/Paragraph-3 14 | mapped | high | textStyle.body.md |
Heading-2-lg 40 | mapped | high | textStyle.heading.lg |
M/Heading-3 24 | mapped | high | textStyle.heading.md |
M/Heading-1 40 | mapped | high | textStyle.heading.xl |
M/Heading-6 12 | mapped | high | textStyle.heading.xs |
M/Heading-2 32 | mapped | high | textStyle.heading.lg |
Heading-4.1-lg 16 | mapped | high | textStyle.heading.sm |
Heading-3-lg 24 | mapped | high | textStyle.heading.md |
Heading-1-lg 56 | mapped | high | textStyle.heading.xl |
Paragraph-3-lg 16 | mapped | high | textStyle.body.md |
Heading-4-lg 20 | mapped | high | textStyle.heading.sm |
Paragraph-2-lg 20 | mapped | high | textStyle.body.lg |
Paragraph-3.1-lg 16 SemiBold | mapped | medium | textStyle.body.md |
Heading-5-lg 14 | mapped | high | textStyle.heading.xs |
Subtitle -1-lg 16 | partial | medium | fontSize.base |
Paragraph-1-lg 24 | partial | medium | fontSize.xl |
Typography Accessibility
WCAG accessibility warnings and coverage by category from gap analysis
Coverage by Typography Category
display
0%
0/3
heading
80%
4/5
body
75%
3/4
ui
67%
2/3
label
100%
2/2
code
50%
1/2
Total accessibility issues: 121Overall coverage: 92%
Semantic Token Mapping
Figma semantic tokens resolved to primitive values
| Semantic Token | Primitive | Resolved Value |
|---|---|---|
background background.grey.subtle | grey.100 | #f9fafb |
background background.grey.white | grey.00 | #ffffff |
background background.grey.disabled | grey.400 | #d1dbe2 |
background background.grey.default | grey.700 | #546b7d |
background background.grey.dark | grey.800 | #405768 |
background background.grey.lighter | grey.500 | #8494a0 |
background background.grey.subtle 2 | grey.200 | #e5e8eb |
background background.primary.default | primary.500 | #335de9 |
background background.primary.lighter | primary.400 | #ced6fc |
background background.primary.subtle | primary.200 | #eaedfa |
background background.primary.darker | primary.700 | #293c79 |
background background.primary.dark | primary.600 | #123cc6 |
background background.primary.subtle 2 | primary.100 | #f8f9ff |
background background.pink.subtle | pink.200 | #f8e8f4 |
background background.pink.lighter | pink.400 | #efc7e5 |
background background.pink.darker | pink.800 | #72135b |
background background.pink.default | pink.600 | #be2198 |
background background.pink.dark | pink.700 | #981a79 |
border border.grey.default | grey.400 | #d1dbe2 |
border border.grey.subtle | grey.100 | #f9fafb |