RoadieRoadie
  • Home
  • Foundations
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeFoundationsComponents
Appearance

Tokens

  • Reference

    • All tokens

  • Color

    • Color scales
    • Intents
    • Data visualisation
    • Emphasis and states

  • Type, shape and depth

    • Typography
    • Shape and layout
    • Elevation and layering

  • Motion and utilities

    • Motion
    • Component utilities

Elevation and layering

GuidanceElevation

Shadows take their tint from --intent-hue, so a danger surface casts a warm shadow. Stack overlays with the named z-* tiers, never a raw number.

Open in all tokens

35 tokens

Shadows

16

Tinted by the surrounding intent. Inset shadows recess a surface.

  • Light
    0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.07)
    Dark
    0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.3), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.3)
  • Light
    0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.06), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.06)
    Dark
    0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.35), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.26), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.26)
  • Light
    0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.05)
    Dark
    0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.35), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.22), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.22), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.22)
  • Light
    0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.05), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045), 0 8px 8px 0 oklch(0.3 0.05 var(--intent-hue) / 0.045)
    Dark
    0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.35), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), 0 8px 8px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2)
  • Light
    0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.06), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 8px 8px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04), 0 16px 16px 0 oklch(0.3 0.05 var(--intent-hue) / 0.04)
    Dark
    0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.4), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 8px 8px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18), 0 16px 16px 0 oklch(0.05 0.02 var(--intent-hue) / 0.18)
  • Light
    0 0 0 1px oklch(0.3 0.05 var(--intent-hue) / 0.06), 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 2px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 4px 4px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 8px 8px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 16px 16px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035), 0 32px 32px 0 oklch(0.3 0.05 var(--intent-hue) / 0.035)
    Dark
    0 0 0 1px oklch(0.05 0.02 var(--intent-hue) / 0.4), 0 1px 1px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 2px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 4px 4px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 8px 8px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 16px 16px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16), 0 32px 32px 0 oklch(0.05 0.02 var(--intent-hue) / 0.16)
  • Light
    inset 0 1px 1px 0 oklch(0.3 0.05 var(--intent-hue) / 0.06)
    Dark
    inset 0 1px 2px 0 oklch(0.05 0.02 var(--intent-hue) / 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.04)
  • Light
    inset 0 1px 2px 0 oklch(0.3 0.05 var(--intent-hue) / 0.07), inset 0 2px 4px -2px oklch(0.3 0.05 var(--intent-hue) / 0.05)
    Dark
    inset 0 1px 3px 0 oklch(0.05 0.02 var(--intent-hue) / 0.25), inset 0 2px 6px -2px oklch(0.05 0.02 var(--intent-hue) / 0.2), inset 0 -1px 0 0 rgba(255, 255, 255, 0.05)

Rim light

7

A top-edge highlight that lifts a raised or strong surface.

  • Light
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08)
    Dark
    inset 0 1px 0 0 rgba(255, 255, 255, 0.02)
  • Light
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15)
    Dark
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04)
  • Light
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06)
    Dark
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06)
  • Light
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1)
    Dark
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.03)
  • Light
    var(--rim-light-normal) → inset 0 1px 0 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06)
    Dark
    var(--rim-light-normal) → inset 0 1px 0 0 rgba(255, 255, 255, 0.06)
  • Light
    rgba(255, 255, 255, 0.6)
    Dark
    rgba(255, 255, 255, 0.1)

Sheen

2

The shade and highlight a loading placeholder sweeps between.

  • Light
    color-mix(in oklch, var(--intent-9) 32%, transparent)
    Dark
    transparent
  • Light
    transparent
    Dark
    color-mix(in oklch, var(--intent-9) 34%, transparent)

Layering

10

Named stacking tiers; use z-popover, never a raw number.

  • -1

    pulled out of the stacking flow

  • 0

    default in-flow content

  • 10

    in-flow elevated accents pinned to a surface

  • 20

    position: sticky headers / toolbars

  • 30

    dialog / drawer backdrop scrim

  • 40

    dialog / drawer surface

  • 50

    popover, select, combobox, autocomplete, dropdown panels

  • 60

    transient notifications

  • 70

    tooltips — always on top

  • 80

    blocking alert dialogs — above an open modal / drawer

Previous page← Shape and layoutNext pageMotion →