DS by Berit

Foundations

Documentation / foundations / tokens

Shape & elevation

Corner radii and shadows, shown as examples, with the values underneath.

Corner radius examples

The radius is how round a corner is. A bigger number gives a rounder corner.

  • radius.sm 8px

    Small controls and code samples.

  • radius.md 16px

    Cards and panels.

  • radius.pill 999px

    Tags and badges. 999px is bigger than any height used, so the ends are fully round.

Elevation examples

Elevation is how far a surface seems to float above the page. A bigger, softer shadow means it floats higher. Use the small shadow for chips, the medium one for cards and menus, and the large one for dialogs and toasts.

  • shadow.panel

    Elevated documentation panels.

  • shadow.s

    Small drop shadow for chips and small controls.

  • shadow.m

    Medium drop shadow for cards and menus.

  • shadow.l

    Large drop shadow for dialogs, toasts and floating panels.

  • shadow.inset

    Inner shadow: a lit top edge and a soft shade at the bottom, for raised dark controls.

Shape & elevation tokens

14 values
radius.sm8pxSmall controls and code samples.
radius.md16pxCards and panels.
radius.pill999pxTags and badges. 999px is bigger than any height used, so the ends are fully round.
shadow.panel

0 18px 45px rgba(31, 35, 33, .08)

Elevated documentation panels.

  • Layer 1: shifted 18px down, blurred by 45px, in dark charcoal at 8% strength.
shadow.s

0 1px 2px rgba(31, 35, 33, .10), 0 2px 6px rgba(31, 35, 33, .08)

Small drop shadow for chips and small controls.

  • Layers are stacked on top of each other, so the shadow looks soft.
  • Layer 1: shifted 1px down, blurred by 2px, in dark charcoal at 10% strength.
  • Layer 2: shifted 2px down, blurred by 6px, in dark charcoal at 8% strength.
shadow.m

0 4px 8px rgba(31, 35, 33, .08), 0 8px 20px rgba(31, 35, 33, .10)

Medium drop shadow for cards and menus.

  • Layers are stacked on top of each other, so the shadow looks soft.
  • Layer 1: shifted 4px down, blurred by 8px, in dark charcoal at 8% strength.
  • Layer 2: shifted 8px down, blurred by 20px, in dark charcoal at 10% strength.
shadow.l

0 12px 24px rgba(31, 35, 33, .10), 0 24px 56px rgba(31, 35, 33, .14)

Large drop shadow for dialogs, toasts and floating panels.

  • Layers are stacked on top of each other, so the shadow looks soft.
  • Layer 1: shifted 12px down, blurred by 24px, in dark charcoal at 10% strength.
  • Layer 2: shifted 24px down, blurred by 56px, in dark charcoal at 14% strength.
shadow.inset

inset 0 1px 0 rgba(199, 209, 200, .28), inset 0 -2px 4px rgba(31, 35, 33, .55)

Inner shadow: a lit top edge and a soft shade at the bottom, for raised dark controls.

  • Layers are stacked on top of each other, so the shadow looks soft.
  • Layer 1 (inside the shape): shifted 1px down, blurred by 0px, in light sage at 28% strength.
  • Layer 2 (inside the shape): shifted -2px up, blurred by 4px, in dark charcoal at 55% strength.
radius.component.controlradius.mdShared shape of buttons, whose corners are 16px. Tags stay pill-shaped.
elevation.panelshadow.panelLift for a panel that floats above the page.
elevation.sshadow.sSmall lift.
elevation.mshadow.mMedium lift for cards and menus.
elevation.lshadow.lLarge lift for dialogs and toasts.
elevation.insetshadow.insetInner shadow that makes a raised dark control stand out from a dark canvas.