Adobe Spectrum: density token view

Generated from the normalized JSON extract. Edit the JSON source and rerun the parent render-markdown.ps1 renderer; do not edit this page by hand.

Snapshot

FieldValue
designDataCommit89cab5dce48cc9bb68bed9767f6e8bef9cd57986
webComponentsCommit371f29256fa1d2eed3cc51155437b0e34b6cfb91
retrieved2026-08-11

How density is activated

MechanismPublic implementation
runtime<sp-theme scale=“medium
designDataModesdesktop, mobile
runtimeScaleNamesmedium, large
localTableDensitycompact, regular, spacious

Density-relevant tokens and values

Token or mappingTypePublic values and metadataSource
—spectrum-component-height-75dimensiondesignDataName: component-height-75; valuesPx: medium: 24; large: 30sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-height-100dimensiondesignDataName: component-height-100; valuesPx: medium: 32; large: 40sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-height-200dimensiondesignDataName: component-height-200; valuesPx: medium: 40; large: 50sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-height-300dimensiondesignDataName: component-height-300; valuesPx: medium: 48; large: 60sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-edge-to-text-75dimensiondesignDataName: component-edge-to-text-75; valuesPx: medium: 10; large: 13sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-edge-to-text-100dimensiondesignDataName: component-edge-to-text-100; valuesPx: medium: 12; large: 15sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-edge-to-text-200dimensiondesignDataName: component-edge-to-text-200; valuesPx: medium: 15; large: 18sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-edge-to-text-300dimensiondesignDataName: component-edge-to-text-300; valuesPx: medium: 17; large: 22sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-pill-edge-to-text-75dimensiondesignDataName: component-pill-edge-to-text-75; valuesPx: medium: 13; large: 17sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-pill-edge-to-text-100dimensiondesignDataName: component-pill-edge-to-text-100; valuesPx: medium: 16; large: 20sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-pill-edge-to-text-200dimensiondesignDataName: component-pill-edge-to-text-200; valuesPx: medium: 20; large: 24sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-component-pill-edge-to-text-300dimensiondesignDataName: component-pill-edge-to-text-300; valuesPx: medium: 23; large: 30sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-font-size-75dimensiondesignDataName: font-size-75; valuesPx: medium: 12; large: 15sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-font-size-100dimensiondesignDataName: font-size-100; valuesPx: medium: 14; large: 17sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-font-size-200dimensiondesignDataName: font-size-200; valuesPx: medium: 16; large: 19sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-font-size-300dimensiondesignDataName: font-size-300; valuesPx: medium: 18; large: 22sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
line-height-font-size-75dimensionvaluesPx: desktop: 16; mobile: 20sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json
line-height-font-size-100dimensionvaluesPx: desktop: 18; mobile: 22sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json
line-height-font-size-200dimensionvaluesPx: desktop: 20; mobile: 24sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json
line-height-font-size-300dimensionvaluesPx: desktop: 22; mobile: 26sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json
—spectrum-workflow-icon-size-75dimensiondesignDataName: workflow-icon-size-75; valuesPx: medium: 16; large: 18sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-workflow-icon-size-100dimensiondesignDataName: workflow-icon-size-100; valuesPx: medium: 20; large: 24sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-workflow-icon-size-200dimensiondesignDataName: workflow-icon-size-200; valuesPx: medium: 22; large: 28sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css
—spectrum-workflow-icon-size-300dimensiondesignDataName: workflow-icon-size-300; valuesPx: medium: 26; large: 30sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css

How tokens reach components

Component or boundaryMapping
sizeSlotss: 75; m: 100; l: 200; xl: 300
tableRowHeightPxmedium: compact: 32; regular: 40; spacious: 48; large: compact: 40; regular: 50; spacious: 60
tableTypographyfont-size-100; local Table density does not change it

Public evidence gaps

  • No additional gaps are recorded in this normalized extract.

Embedded authoritative JSON

Show raw JSON
{
  "system": "Adobe Spectrum",
  "scope": "density-relevant public tokens",
  "model": "global platform scale plus component-local density",
  "snapshot": {
    "designDataCommit": "89cab5dce48cc9bb68bed9767f6e8bef9cd57986",
    "webComponentsCommit": "371f29256fa1d2eed3cc51155437b0e34b6cfb91",
    "retrieved": "2026-08-11"
  },
  "activation": {
    "runtime": "<sp-theme scale=\"medium|large\">",
    "designDataModes": ["desktop", "mobile"],
    "runtimeScaleNames": ["medium", "large"],
    "localTableDensity": ["compact", "regular", "spacious"]
  },
  "tokens": [
    {"name": "--spectrum-component-height-75", "designDataName": "component-height-75", "type": "dimension", "valuesPx": {"medium": 24, "large": 30}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-height-100", "designDataName": "component-height-100", "type": "dimension", "valuesPx": {"medium": 32, "large": 40}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-height-200", "designDataName": "component-height-200", "type": "dimension", "valuesPx": {"medium": 40, "large": 50}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-height-300", "designDataName": "component-height-300", "type": "dimension", "valuesPx": {"medium": 48, "large": 60}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-edge-to-text-75", "designDataName": "component-edge-to-text-75", "type": "dimension", "valuesPx": {"medium": 10, "large": 13}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-edge-to-text-100", "designDataName": "component-edge-to-text-100", "type": "dimension", "valuesPx": {"medium": 12, "large": 15}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-edge-to-text-200", "designDataName": "component-edge-to-text-200", "type": "dimension", "valuesPx": {"medium": 15, "large": 18}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-edge-to-text-300", "designDataName": "component-edge-to-text-300", "type": "dimension", "valuesPx": {"medium": 17, "large": 22}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-pill-edge-to-text-75", "designDataName": "component-pill-edge-to-text-75", "type": "dimension", "valuesPx": {"medium": 13, "large": 17}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-pill-edge-to-text-100", "designDataName": "component-pill-edge-to-text-100", "type": "dimension", "valuesPx": {"medium": 16, "large": 20}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-pill-edge-to-text-200", "designDataName": "component-pill-edge-to-text-200", "type": "dimension", "valuesPx": {"medium": 20, "large": 24}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-component-pill-edge-to-text-300", "designDataName": "component-pill-edge-to-text-300", "type": "dimension", "valuesPx": {"medium": 23, "large": 30}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-font-size-75", "designDataName": "font-size-75", "type": "dimension", "valuesPx": {"medium": 12, "large": 15}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-font-size-100", "designDataName": "font-size-100", "type": "dimension", "valuesPx": {"medium": 14, "large": 17}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-font-size-200", "designDataName": "font-size-200", "type": "dimension", "valuesPx": {"medium": 16, "large": 19}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-font-size-300", "designDataName": "font-size-300", "type": "dimension", "valuesPx": {"medium": 18, "large": 22}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "line-height-font-size-75", "type": "dimension", "valuesPx": {"desktop": 16, "mobile": 20}, "source": "sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json"},
    {"name": "line-height-font-size-100", "type": "dimension", "valuesPx": {"desktop": 18, "mobile": 22}, "source": "sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json"},
    {"name": "line-height-font-size-200", "type": "dimension", "valuesPx": {"desktop": 20, "mobile": 24}, "source": "sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json"},
    {"name": "line-height-font-size-300", "type": "dimension", "valuesPx": {"desktop": 22, "mobile": 26}, "source": "sources/adobe-spectrum/upstream/spectrum-design-data/packages/design-data/tokens/typography.tokens.json"},
    {"name": "--spectrum-workflow-icon-size-75", "designDataName": "workflow-icon-size-75", "type": "dimension", "valuesPx": {"medium": 16, "large": 18}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-workflow-icon-size-100", "designDataName": "workflow-icon-size-100", "type": "dimension", "valuesPx": {"medium": 20, "large": 24}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-workflow-icon-size-200", "designDataName": "workflow-icon-size-200", "type": "dimension", "valuesPx": {"medium": 22, "large": 28}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"},
    {"name": "--spectrum-workflow-icon-size-300", "designDataName": "workflow-icon-size-300", "type": "dimension", "valuesPx": {"medium": 26, "large": 30}, "source": "sources/adobe-spectrum/upstream/spectrum-web-components/1st-gen/tools/styles/tokens-v2/{medium,large}-vars.css"}
  ],
  "componentMappings": {
    "sizeSlots": {"s": 75, "m": 100, "l": 200, "xl": 300},
    "tableRowHeightPx": {
      "medium": {"compact": 32, "regular": 40, "spacious": 48},
      "large": {"compact": 40, "regular": 50, "spacious": 60}
    },
    "tableTypography": "font-size-100; local Table density does not change it"
  },
  "unavailable": []
}