Brivio Documentation
Design system

Surfaces

The material: 9 roles × 4 modes × 7 properties, enforced by `check-surface-recipes`.

Generated from build artefacts (pnpm docs:design-system). Do not edit by hand — run the generator.

Roles

  • surface-panel
  • surface-overlay
  • surface-subtle
  • surface-sidebar
  • surface-card
  • surface-chrome
  • surface-input
  • surface-read
  • surface-media

Modes

  • [data-surface="glass"]
  • [data-surface="blur"]
  • [data-surface="frosted"]
  • [data-surface="opaque"]

Properties per role

  • --surface-<role>-bg
  • --surface-<role>-border
  • --surface-<role>-blur
  • --surface-<role>-shadow
  • --surface-<role>-edge
  • --surface-<role>-sheen
  • --surface-<role>-lum
  • --surface-<role>-scrim

Every role defines every property in every mode; the gate refuses a missing cell or a raw value outside surface-tokens.css.

Colour tokens

The 7 accents × 2 modes produced by the DTCG → Style Dictionary pipeline (ADR-0169).

Motion

The duration ladder and easing curves — platform constants, not brand choices.

On this page

RolesModesProperties per role