Depth

token

Breakdex::DesignTokens::Depth

Layered depth system with z-index, parametric depth levels, and shadow presets

Every elevated surface picks a depth level (sunken through overlay) which bundles scale, blur, shadow, and parallax into a single semantic choice. Shadow presets offer shorthand for common elevation patterns. Z-index values prevent layer fights by giving each tier a fixed lane.

Relationships

⚙ Configured By 2

depth_providerreduced_motion_provider

⚠ Breaks If 3

z_index_values_overlapdepth_level_missing_required_keyshadow_color_format_invalid

Answers

States

State	Behavior
reduced Motion Enabled	blur: 0 parallax: 0 shadowOpacity: unchanged

Values

elevated

{
  "blur": 0,
  "parallax": 0.5,
  "scale": 1,
  "shadowBlur": 16,
  "shadowOffsetY": 4,
  "shadowOpacity": 0.12
}

flat

{
  "blur": 0,
  "parallax": 0,
  "scale": 1,
  "shadowBlur": 8,
  "shadowOffsetY": 2,
  "shadowOpacity": 0.06
}

floating

{
  "blur": 0,
  "parallax": 1,
  "scale": 1.005,
  "shadowBlur": 28,
  "shadowOffsetY": 8,
  "shadowOpacity": 0.18
}

overlayLevel

{
  "blur": 20,
  "parallax": 1.5,
  "scale": 1.01,
  "shadowBlur": 40,
  "shadowOffsetY": 16,
  "shadowOpacity": 0.24
}

shadowFocus

{
  "blur": 34,
  "darkColor": "#66000000",
  "lightColor": "#260F0B08",
  "offsetY": 16
}

shadowLayered

{
  "ambient": {
    "blur": 20,
    "darkColor": "#42000000",
    "lightColor": "#140F0B08"
  },
  "key": {
    "blur": 16,
    "darkColor": "#52000000",
    "lightColor": "#1A0F0B08"
  }
}

shadowRaised

{
  "blur": 22,
  "darkColor": "#52000000",
  "lightColor": "#1A0F0B08",
  "offsetY": 10
}

shadowSoft

{
  "blur": 12,
  "darkColor": "#42000000",
  "lightColor": "#140F0B08",
  "offsetY": 4
}

sunken

{
  "blur": 0,
  "parallax": 0,
  "scale": 0.98,
  "shadowOpacity": 0
}

Scale

background -1

content 0

overlay 2

raised 1

top 3