Skip to content

Elevation and effects draft v0.2.0

Opacity, blur, drop shadow and shadow colors from the Figma library, and why no component uses them yet.

The Figma library brings opacity steps, blur radii, a drop-shadow number and five shadow colors (effect.shadow.1 to 5, a neutral step at 1 to 5 % opacity, in Colors / Mapped), all recreated as they are. No component uses an effect yet: translucency comes from color tokens, and surfaces stand apart by their color and border, not by elevation. This foundation owns the shadow colors, presents the primitives and states the rules any future effect follows.

Specimens

The tokens this foundation is built from, drawn from packages/tokens/src/: raw primitives and the semantic decisions on top of them. A token added to one of these groups appears here with no site change; values that differ per mode or per platform are shown next to each other.

Opacity

A square in the default text color at each opacity step, on the stage.

opacity.* · 20 tokens · A text-colored square at that opacity.

  • opacity.0 0 % in the Figma library
    0
  • opacity.1 1 % in the Figma library
    0.01
  • opacity.2 2 % in the Figma library
    0.02
  • opacity.3 3 % in the Figma library
    0.03
  • opacity.4 4 % in the Figma library
    0.04
  • opacity.5 5 % in the Figma library
    0.05
  • opacity.6 6 % in the Figma library
    0.06
  • opacity.7 7 % in the Figma library
    0.07
  • opacity.8 8 % in the Figma library
    0.08
  • opacity.9 9 % in the Figma library
    0.09
  • opacity.10 10 % in the Figma library
    0.1
  • opacity.15 15 % in the Figma library
    0.15
  • opacity.20 20 % in the Figma library
    0.2
  • opacity.30 30 % in the Figma library
    0.3
  • opacity.40 40 % in the Figma library
    0.4
  • opacity.50 50 % in the Figma library
    0.5
  • opacity.60 60 % in the Figma library
    0.6
  • opacity.70 70 % in the Figma library
    0.7
  • opacity.80 80 % in the Figma library
    0.8
  • opacity.90 90 % in the Figma library
    0.9

Blur

The same sample blurred by each radius.

blur.* · 5 tokens · A sample blurred by that radius.

  • blur.none
    0px
  • blur.xs
    2px
  • blur.sm
    4px
  • blur.md
    8px
  • blur.lg
    16px

Drop shadow

The drop-shadow number the Figma library exports.

drop-shadow.* · 1 token · Name and value, for anything else.

TokenTypeValue
drop-shadow.number number 0

Shadow colors

The five shadow colors of the Figma library, in every mode.

effect.shadow.* · 5 tokens · Swatch, value and alias of each token in every mode, side by side.

Tokenlightdark
effect.shadow.1
light-switch.base.900 at opacity.1: the Figma library composes them, DTCG cannot, so the resulting color is written as is
#201E1F03
#1414144d
effect.shadow.2
light-switch.base.900 at opacity.2: the Figma library composes them, DTCG cannot, so the resulting color is written as is
#201E1F05
#14141466
effect.shadow.3
light-switch.base.900 at opacity.3: the Figma library composes them, DTCG cannot, so the resulting color is written as is
#201E1F08
#14141480
effect.shadow.4
light-switch.base.900 at opacity.4: the Figma library composes them, DTCG cannot, so the resulting color is written as is
#201E1F0a
#141414b2
effect.shadow.5
light-switch.base.900 at opacity.5: the Figma library composes them, DTCG cannot, so the resulting color is written as is
#201E1F0d
#141414cc