uber-density-demo

Uber design-system density demo: 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: exact variables visible in the public Figma demo
• Architecture model: component-specific Figma variable collection inherited from a frame
• Evidence: public video
• Exact token coverage: limited to visible List Item collection
• System report
• Source record
• Authoritative JSON

Snapshot

Field	Value
source	https://www.youtube.com/watch?v=-z9JX8Lz5lI
published	2025-05-16
retrieved	2026-08-13
evidenceType	timestamped visual inspection; no downloadable Figma file

How density is activated

Mechanism	Public implementation
collection	listitem density
frameControl	Listitem density: Auto (Default)
modes	Default, Compact, Spacious
themeAxis	separate frame variable control

Density-relevant tokens and values

Token or mapping	Type	Public values and metadata	Source
parent-vertical-padding	Figma number	values: Default: 8; Compact: 4; Spacious: 16; renderedUnitWhenBound: px	sources/uber-density-demo/README.md
child-vertical-padding	Figma number	values: Default: 4; Compact: 4; Spacious: 4; renderedUnitWhenBound: px	sources/uber-density-demo/README.md
parent-minHeight	Figma number	values: Default: 64; Compact: 48; Spacious: 64; renderedUnitWhenBound: px	sources/uber-density-demo/README.md

How tokens reach components

Component or boundary	Mapping
listItem	frame mode override -> component-specific numeric variables -> auto-layout padding/min-height bindings -> all bound instances update
coexistence	density can be scoped by frame and is independent from the visible Theme control

Public evidence gaps

• No downloadable Uber token package or Figma library was linked.
• The demo does not expose density values for other components, typography, icons, hit targets, aliases, or code activation.
• The evidence does not prove that Uber uses one system-wide density collection; the visible collection is specifically named listitem density.

Embedded authoritative JSON

Show raw JSON

{
  "system": "Uber design-system density demo",
  "scope": "exact variables visible in the public Figma demo",
  "model": "component-specific Figma variable collection inherited from a frame",
  "snapshot": {
    "source": "https://www.youtube.com/watch?v=-z9JX8Lz5lI",
    "published": "2025-05-16",
    "retrieved": "2026-08-13",
    "evidenceType": "timestamped visual inspection; no downloadable Figma file"
  },
  "activation": {
    "collection": "listitem density",
    "frameControl": "Listitem density: Auto (Default) | Default | Compact | Spacious",
    "modes": ["Default", "Compact", "Spacious"],
    "themeAxis": "separate frame variable control"
  },
  "tokens": [
    {"name": "parent-vertical-padding", "type": "Figma number", "values": {"Default": 8, "Compact": 4, "Spacious": 16}, "renderedUnitWhenBound": "px", "source": "sources/uber-density-demo/README.md"},
    {"name": "child-vertical-padding", "type": "Figma number", "values": {"Default": 4, "Compact": 4, "Spacious": 4}, "renderedUnitWhenBound": "px", "source": "sources/uber-density-demo/README.md"},
    {"name": "parent-minHeight", "type": "Figma number", "values": {"Default": 64, "Compact": 48, "Spacious": 64}, "renderedUnitWhenBound": "px", "source": "sources/uber-density-demo/README.md"}
  ],
  "componentMappings": {
    "listItem": "frame mode override -> component-specific numeric variables -> auto-layout padding/min-height bindings -> all bound instances update",
    "coexistence": "density can be scoped by frame and is independent from the visible Theme control"
  },
  "unavailable": [
    "No downloadable Uber token package or Figma library was linked.",
    "The demo does not expose density values for other components, typography, icons, hit targets, aliases, or code activation.",
    "The evidence does not prove that Uber uses one system-wide density collection; the visible collection is specifically named listitem density."
  ]
}