s2-design-tokens

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, #F24CB8
• s2Categorical12: #5424DB, #D92361, #E86A00, #5D89FF, #9A47E2, #F24CB8, #0BA286, #9C28AF, #036E45, #52A119, #FF513D, #046691
• s2Categorical16: #5424DB, #D92361, #E86A00, #5D89FF, #9A47E2, #F24CB8, #0BA286, #9C28AF, #036E45, #52A119, #FF513D, #046691, #424242, #056B74, #C67E58, #865500
• s2Categorical20: #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:
    • offset: 24
    • margin: 48
  • verticalLayout:
    • offset: 24
    • margin: 24
• line:
  • strokeWidth: 2.5
• symbol:
  • strokeWidth: 2
• referenceLine:
  • capRuleGap: 1

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"