| name | s2-design-tokens |
| description | Canonical Spectrum 2 design tokens (colors, typography, spacing) for React Spectrum Charts. Use whenever generating or styling a chart so colors/fonts/spacing match real Spectrum 2 values instead of invented ones. |
Spectrum 2 Design Tokens
Auto-generated by scripts/createDesignTokenSkill.js from packages/mcp/src/designTokens.ts — do not hand-edit. Regenerate with yarn skills:update-s2-design-tokens after changing the source catalog.
Generated on: 2026-08-04T19:46:40.545Z
This is the same data served by the list_design_tokens/read_design_tokens tools in @spectrum-charts/mcp. When generating a chart spec (for RSC, Vega, Chart.js, or D3), only use color/font/spacing values that appear below — never invent a hex value, font size, or spacing number that isn't listed here.
Spectrum 2 Colors
Full Spectrum 2 color-scale token catalog (token name -> CSS color), split by light/dark color scheme, plus the named categorical color scales. Resolved at runtime via getS2ColorValue(token, colorScheme) from @spectrum-charts/themes.
Default font color token: gray-800
Color Scale (token name → hex, by color scheme)
| Token | Light | Dark |
|---|
gray-25 | white | #111111 |
gray-50 | #F8F8F8 | #1B1B1B |
gray-75 | #F3F3F3 | #222222 |
gray-100 | #E9E9E9 | #2C2C2C |
gray-200 | #E1E1E1 | #323232 |
gray-300 | #DADADA | #393939 |
gray-400 | #C6C6C6 | #444444 |
gray-500 | #8F8F8F | #6D6D6D |
gray-600 | #717171 | #8A8A8A |
gray-700 | #505050 | #AFAFAF |
gray-800 | #292929 | #DBDBDB |
gray-900 | #131313 | #F2F2F2 |
gray-1000 | black | white |
silver-100 | #F7F7F7 | #1A1A1A |
silver-200 | #EFEFEF | #212121 |
silver-300 | #DFDFDF | #2C2C2C |
silver-400 | #CCCCCC | #3B3B3B |
silver-500 | #B7B7B7 | #4C4C4C |
silver-600 | #A0A0A0 | #5C5C5C |
silver-700 | #8F8F8F | #6C6C6C |
silver-800 | #808080 | #767676 |
silver-900 | #727272 | #898989 |
silver-1000 | #606060 | #989898 |
|
Categorical Palettes
s2Categorical6: #5424DB, #D92361, #E86A00, #5D89FF, #9A47E2, #F24CB8s2Categorical12: #5424DB, #D92361, #E86A00, #5D89FF, #9A47E2, #F24CB8, #0BA286, #9C28AF, #036E45, #52A119, #FF513D, #046691s2Categorical16: #5424DB, #D92361, #E86A00, #5D89FF, #9A47E2, #F24CB8, #0BA286, #9C28AF, #036E45, #52A119, #FF513D, #046691, #424242, #056B74, #C67E58, #865500s2Categorical20: #5424DB, #D92361, #E86A00, #5D89FF, #9A47E2, #F24CB8, #0BA286, #9C28AF, #036E45, #52A119, #FF513D, #046691, #424242, #056B74, #C67E58, #865500, #274DEA, #056C5C, #FF94DB, #811B0E
Spectrum 2 Typography
Font family, size, and weight tokens used across S2 chart marks, axes, legends, and labels.
- fontFamily:
"adobe-clean, 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif"
- baseFontSize:
14
- defaultLabelFontWeight:
"normal"
- defaultTitleFontWeight:
"bold"
- chartTitle:
- fontSize:
22
- fontWeight:
"normal"
- axisLabel:
- fontSize:
14
- fontWeight:
"normal"
- axisTitle:
- fontSize:
14
- fontWeight:
"normal"
- legendLabel:
- fontSize:
14
- fontWeight:
"normal"
- legendTitle:
- fontSize:
14
- fontWeight:
"normal"
- annotation:
- fontSize:
12
- fontWeight:
"bold"
- directLabel:
- fontSizeS:
14
- fontSizeM:
16
- fontSizeL:
18
- fontWeight:
700
Spectrum 2 Spacing & Layout
Padding, offset, stroke-width, and layout tokens used across S2 chart axes, legends, and marks.
- cornerRadius:
6
- axis:
- labelPadding:
8
- titlePadding:
16
- tickSize:
8
- legend:
- padding:
8
- rowPadding:
8
- titlePadding:
8
- columnPadding:
20
- labelLimit:
184
- symbolSize:
250
- symbolWidth:
16
- horizontalLayout:
- verticalLayout:
- line:
- symbol:
- referenceLine:
Spectrum 2 SVG Paths
Reusable SVG path shapes for chart decorations. Reuse these instead of inventing a new path.
- referenceLineCaretPath:
"M5.1 -0.51962C5.5 -0.28868 5.5 0.28867 5.1 0.51961L0.899999 2.94449C0.5 3.17543 -3.01029e-07 2.88675 -2.8084e-07 2.42487L-6.8851e-08 -2.42487C-4.86616e-08 -2.88675 0.5 -3.17543 0.9 -2.94449L5.1 -0.51962Z"
- roundedSquarePath:
"M -0.55 -1 h 1.1 a 0.45 0.45 0 0 1 0.45 0.45 v 1.1 a 0.45 0.45 0 0 1 -0.45 0.45 h -1.1 a 0.45 0.45 0 0 1 -0.45 -0.45 v -1.1 a 0.45 0.45 0 0 1 0.45 -0.45 z"
