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)

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"