Salesforce Lightning Design System: 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.

  • Scope: density-relevant public tokens
  • Architecture model: compact semantic alias remapping plus record-form layout choices
  • Evidence: repository plus published package artifact
  • Exact token coverage: medium; production resolver private
  • System report
  • Source record
  • Authoritative JSON

Snapshot

FieldValue
commit9bc6a4046d10d95b4f3fb9cee7c7dc036bf43ad2
retrieved2026-08-11

How density is activated

MechanismPublic implementation
documentedProductPreferenceLightning Experience display density
publicTokenArtifactdesign-tokens/var-spacing.yml compact overrides
runtimeResolvernot public

Density-relevant tokens and values

Token or mappingTypePublic values and metadataSource
SPACING_XXX_SMALLdimensionvalue: 0.125rem; derivedPx: 2sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_XX_SMALLdimensionvalue: 0.25rem; derivedPx: 4sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_X_SMALLdimensionvalue: 0.5rem; derivedPx: 8sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_SMALLdimensionvalue: 0.75rem; derivedPx: 12sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_MEDIUMdimensionvalue: 1rem; derivedPx: 16sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_LARGEdimensionvalue: 1.5rem; derivedPx: 24sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_X_LARGEdimensionvalue: 2rem; derivedPx: 32sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
SPACING_XX_LARGEdimensionvalue: 3rem; derivedPx: 48sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml
VAR_SPACING_* compact aliasesalias-mapvalues: XXX_SMALL: SPACING_XXX_SMALL; XX_SMALL: SPACING_XXX_SMALL; X_SMALL: SPACING_XXX_SMALL; SMALL: SPACING_XX_SMALL; MEDIUM: SPACING_X_SMALL; LARGE: SPACING_SMALL; X_LARGE: SPACING_MEDIUM; XX_LARGE: SPACING_LARGEsources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml
VAR_SPACING_HORIZONTAL_* compact aliasesalias-mapvalues: XXX_SMALL: SPACING_XXX_SMALL; XX_SMALL: SPACING_XXX_SMALL; X_SMALL: SPACING_XX_SMALL; SMALL: SPACING_X_SMALL; MEDIUM: SPACING_SMALL; LARGE: SPACING_SMALL; X_LARGE: SPACING_MEDIUM; XX_LARGE: SPACING_LARGEsources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml
VAR_SPACING_VERTICAL_* compact aliasesalias-mapvalues: XXX_SMALL: SPACING_XXX_SMALL; XX_SMALL: SPACING_XXX_SMALL; X_SMALL: SPACING_XX_SMALL; SMALL: SPACING_X_SMALL; MEDIUM: SPACING_X_SMALL; LARGE: SPACING_SMALL; X_LARGE: SPACING_MEDIUM; XX_LARGE: SPACING_LARGEsources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml
FONT_SIZE_1..11dimension-rampvaluesRem: 1: 0.625; 2: 0.75; 3: 0.8125; 4: 0.875; 5: 1; 6: 1.125; 7: 1.25; 8: 1.5; 9: 1.75; 10: 2; 11: 2.625; derivedPx: 1: 10; 2: 12; 3: 13; 4: 14; 5: 16; 6: 18; 7: 20; 8: 24; 9: 28; 10: 32; 11: 42; publishedPackage: @salesforce-ux/design-system@2.26.2sources/salesforce-lightning/upstream/design-system/design-tokens/aliases/font-size.yml
VAR_FONT_SIZE_* compact aliasesalias-mapvalues: 1: FONT_SIZE_1; 2: FONT_SIZE_2; 3: FONT_SIZE_3; 4: FONT_SIZE_4; 5: FONT_SIZE_4; 6: FONT_SIZE_5; 7: FONT_SIZE_7; 8: FONT_SIZE_7; 9: FONT_SIZE_9; 10: FONT_SIZE_10; 11: FONT_SIZE_11sources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml
SQUARE_TAPPABLEdimensionvalue: 2.75rem; derivedPx: 44sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml
SQUARE_TAPPABLE_SMALLdimensionvalue: 2rem; derivedPx: 32sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml
SQUARE_TAPPABLE_X_SMALLdimensionvalue: 1.5rem; derivedPx: 24sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml
SQUARE_TAPPABLE_XX_SMALLdimensionvalue: 1.25rem; derivedPx: 20sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml
HEIGHT_TAPPABLEdimensionvalue: 2.75rem; derivedPx: 44sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml
TABLE_CELL_SPACINGaliasvalue: SPACING_X_SMALL; resolvedPx: 8sources/salesforce-lightning/upstream/design-system/ui/components/data-tables/tokens/spacing.yml

How tokens reach components

Component or boundaryMapping
documentationSiteCompactcompact VAR_* aliases point to smaller primitive spacing and selected font-size steps
recordFormsdensity also changes label layout through stacked/horizontal form variants, not only geometry tokens
touchbutton and input touch styles consume separate tappable primitives

Public evidence gaps

  • The production Lightning preference-to-runtime-token resolver is not public.
  • Public Figma density implementation was not available in the inspected sources.

Embedded authoritative JSON

Show raw JSON
{
  "system": "Salesforce Lightning Design System",
  "scope": "density-relevant public tokens",
  "model": "compact semantic alias remapping plus record-form layout choices",
  "snapshot": {"commit": "9bc6a4046d10d95b4f3fb9cee7c7dc036bf43ad2", "retrieved": "2026-08-11"},
  "activation": {
    "documentedProductPreference": "Lightning Experience display density",
    "publicTokenArtifact": "design-tokens/var-spacing.yml compact overrides",
    "runtimeResolver": "not public"
  },
  "tokens": [
    {"name": "SPACING_XXX_SMALL", "type": "dimension", "value": "0.125rem", "derivedPx": 2, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_XX_SMALL", "type": "dimension", "value": "0.25rem", "derivedPx": 4, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_X_SMALL", "type": "dimension", "value": "0.5rem", "derivedPx": 8, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_SMALL", "type": "dimension", "value": "0.75rem", "derivedPx": 12, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_MEDIUM", "type": "dimension", "value": "1rem", "derivedPx": 16, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_LARGE", "type": "dimension", "value": "1.5rem", "derivedPx": 24, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_X_LARGE", "type": "dimension", "value": "2rem", "derivedPx": 32, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "SPACING_XX_LARGE", "type": "dimension", "value": "3rem", "derivedPx": 48, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/spacing.yml"},
    {"name": "VAR_SPACING_* compact aliases", "type": "alias-map", "values": {"XXX_SMALL": "SPACING_XXX_SMALL", "XX_SMALL": "SPACING_XXX_SMALL", "X_SMALL": "SPACING_XXX_SMALL", "SMALL": "SPACING_XX_SMALL", "MEDIUM": "SPACING_X_SMALL", "LARGE": "SPACING_SMALL", "X_LARGE": "SPACING_MEDIUM", "XX_LARGE": "SPACING_LARGE"}, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml"},
    {"name": "VAR_SPACING_HORIZONTAL_* compact aliases", "type": "alias-map", "values": {"XXX_SMALL": "SPACING_XXX_SMALL", "XX_SMALL": "SPACING_XXX_SMALL", "X_SMALL": "SPACING_XX_SMALL", "SMALL": "SPACING_X_SMALL", "MEDIUM": "SPACING_SMALL", "LARGE": "SPACING_SMALL", "X_LARGE": "SPACING_MEDIUM", "XX_LARGE": "SPACING_LARGE"}, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml"},
    {"name": "VAR_SPACING_VERTICAL_* compact aliases", "type": "alias-map", "values": {"XXX_SMALL": "SPACING_XXX_SMALL", "XX_SMALL": "SPACING_XXX_SMALL", "X_SMALL": "SPACING_XX_SMALL", "SMALL": "SPACING_X_SMALL", "MEDIUM": "SPACING_X_SMALL", "LARGE": "SPACING_SMALL", "X_LARGE": "SPACING_MEDIUM", "XX_LARGE": "SPACING_LARGE"}, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml"},
    {"name": "FONT_SIZE_1..11", "type": "dimension-ramp", "valuesRem": {"1": 0.625, "2": 0.75, "3": 0.8125, "4": 0.875, "5": 1, "6": 1.125, "7": 1.25, "8": 1.5, "9": 1.75, "10": 2, "11": 2.625}, "derivedPx": {"1": 10, "2": 12, "3": 13, "4": 14, "5": 16, "6": 18, "7": 20, "8": 24, "9": 28, "10": 32, "11": 42}, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/aliases/font-size.yml", "publishedPackage": "@salesforce-ux/design-system@2.26.2"},
    {"name": "VAR_FONT_SIZE_* compact aliases", "type": "alias-map", "values": {"1": "FONT_SIZE_1", "2": "FONT_SIZE_2", "3": "FONT_SIZE_3", "4": "FONT_SIZE_4", "5": "FONT_SIZE_4", "6": "FONT_SIZE_5", "7": "FONT_SIZE_7", "8": "FONT_SIZE_7", "9": "FONT_SIZE_9", "10": "FONT_SIZE_10", "11": "FONT_SIZE_11"}, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/var-spacing.yml"},
    {"name": "SQUARE_TAPPABLE", "type": "dimension", "value": "2.75rem", "derivedPx": 44, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml"},
    {"name": "SQUARE_TAPPABLE_SMALL", "type": "dimension", "value": "2rem", "derivedPx": 32, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml"},
    {"name": "SQUARE_TAPPABLE_X_SMALL", "type": "dimension", "value": "1.5rem", "derivedPx": 24, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml"},
    {"name": "SQUARE_TAPPABLE_XX_SMALL", "type": "dimension", "value": "1.25rem", "derivedPx": 20, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml"},
    {"name": "HEIGHT_TAPPABLE", "type": "dimension", "value": "2.75rem", "derivedPx": 44, "source": "sources/salesforce-lightning/upstream/design-system/design-tokens/primitive/touch.yml"},
    {"name": "TABLE_CELL_SPACING", "type": "alias", "value": "SPACING_X_SMALL", "resolvedPx": 8, "source": "sources/salesforce-lightning/upstream/design-system/ui/components/data-tables/tokens/spacing.yml"}
  ],
  "componentMappings": {
    "documentationSiteCompact": "compact VAR_* aliases point to smaller primitive spacing and selected font-size steps",
    "recordForms": "density also changes label layout through stacked/horizontal form variants, not only geometry tokens",
    "touch": "button and input touch styles consume separate tappable primitives"
  },
  "unavailable": [
    "The production Lightning preference-to-runtime-token resolver is not public.",
    "Public Figma density implementation was not available in the inspected sources."
  ]
}