Style guide

Components

Colours

Surfaces

--pageCSS variable
--surfaceCSS variable
--surface-hoverCSS variable
--surface-elevatedCSS variable

Text

--inkCSS variable
--mutedCSS variable
--faintCSS variable
--dimCSS variable

Borders & focus

--lineCSS variable
--line-strongCSS variable
--focus-ringCSS variable
--accent-focusCSS variable

Accent & status

--accentCSS variable
--infoCSS variable
--warningCSS variable
--successCSS variable

Soft colours

--accent-softCSS variable
--info-softCSS variable
--warning-softCSS variable
--success-softCSS variable

Type

font-sans

Aa Bb Cc

CSS variable
font-mono

Aa Bb Cc / 0123456789

CSS variable
section-title

Section heading

Radius

--radius-smCSS variable
--radius-mdCSS variable
--radius-lgCSS variable

Elevation

Surface
--elev-smCSS variable
Surface
--elev-mdCSS variable

Motion

--ease-standardCSS variable
--ease-decelerateCSS variable
--ease-emphasizedCSS variable