Skip to the content
Perron
GitHub

Elevation

The surface and shadow tokens. The map is the ground; everything else floats over it, and depth shows first in the surface colour, then in a shadow.

Surfaces

  • Floating panels are glass: color.surface.overlay with a backdrop blur of effect.glass-blur and a saturation of effect.glass-saturate. On phones, panels full of text use color.surface.default instead, so text never sits on moving map.
  • Inside a panel, cards and inputs sit on color.surface.raised, and tracks, counts and inset boxes on color.surface.inset.
  • Hover is color.surface.hover, laid over whatever is beneath. A selected row is color.surface.selected, which is also the pressed layer of a quiet or outline control.
  • color.surface.inverse is the primary button, pressed toggles and the chart's value tip, with color.text.inverse on it.
TokenLightDark
color.surface.defaultOpaque panel background; text on inverse surfaces
#FAFBF9palette.neutral.50
#12181Bpalette.neutral.900
color.surface.raisedBackground of fields, checkboxes, radios and keys, and of the selected segment
#FFFFFFpalette.neutral.0
#1D2428palette.neutral.800
color.surface.insetSegmented control track, counts, inset boxes
#EBEEEBpalette.neutral.100
#283237palette.neutral.700
color.surface.overlayTranslucent floating panels over the map (used with backdrop blur)
rgba(250, 251, 249, 0.9)
rgba(18, 24, 27, 0.88)
color.surface.hoverTranslucent layer over a control under the pointer
rgba(18, 24, 27, 0.05)
rgba(235, 238, 235, 0.06)
color.surface.selectedSelected row; the pressed layer of a quiet or outline control, in place of color.surface.hover and denser
rgba(18, 24, 27, 0.09)
rgba(235, 238, 235, 0.09)
color.surface.inversePrimary buttons, pressed icon buttons, chart tooltip
#12181Bcolor.text.primary
#EBEEEBcolor.text.primary
effect.glass-blurBackdrop blur behind glass panels
16 px
16 px
effect.glass-saturateBackdrop saturation behind glass panels
1.3
1.3

Inset stands apart from raised in both themes, so a track reads without a border: a step darker in light, a step lighter in dark. The build keeps the two at least 1.15:1 apart.

The ratio each pair reaches, against the minimum of 1.15:1.
LightDark
Colouron surface.raisedon surface.raised
color.surface.inset
1.17:1
1.20:1

Shadows

Floating panels carry shadow.panel. Nothing else casts a shadow, except the selected segment of a segmented control, with shadow.thumb. Both are set per theme: a dark surface needs a darker, wider shadow to show at all.

TokenLightDark
shadow.panelLifts floating panels, dialogs, menus, popovers and toasts off what lies under them
0px 1px 2px 0px rgba(18, 24, 27, 0.06), 0px 10px 30px 0px rgba(18, 24, 27, 0.1)
0px 1px 2px 0px rgba(0, 0, 0, 0.35), 0px 14px 36px 0px rgba(0, 0, 0, 0.38)
shadow.thumbSelected segment in a segmented control
0px 1px 2px 0px rgba(0, 0, 0, 0.14)
0px 1px 2px 0px rgba(0, 0, 0, 0.4)

Stacking order is on Layout.