Effects

A single soft shadow, used to lift cards slightly off the page. Shadows are deliberately sparse in this system; depth is carried by surface and border colour instead, which keeps contrast predictable.

CSS Tokens SASS Tokens Tailwind DTCG
in-sync·Source: css:blocks/base.css·Last synced 1d ago

Soft Effects

The only elevation in the system. Cards, badges and secondary buttons.

--soft0 1px 2px 0px rgba(0, 0, 0, 0.06)
:root {
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.06); /** The only elevation in the system. Cards, badges and secondary buttons. */
}