display large
--md-sys-typescale-display-large
Colour. Material. Fire.
Typography catalogue
M3 role names with project adaptations: small body and label roles use a 14 px reading floor; headings and prominent titles use semibold. These are brand choices, not Google's unmodified defaults.
display medium
--md-sys-typescale-display-medium
Colour. Material. Fire.
display small
--md-sys-typescale-display-small
Colour. Material. Fire.
headline large
--md-sys-typescale-headline-large
Colour. Material. Fire.
headline medium
--md-sys-typescale-headline-medium
Colour. Material. Fire.
headline small
--md-sys-typescale-headline-small
Colour. Material. Fire.
title large
--md-sys-typescale-title-large
Colour. Material. Fire.
title medium
--md-sys-typescale-title-medium
Colour. Material. Fire.
title small
--md-sys-typescale-title-small
Colour. Material. Fire.
body large
--md-sys-typescale-body-large
Colour. Material. Fire.
body medium
--md-sys-typescale-body-medium
Colour. Material. Fire.
body small
--md-sys-typescale-body-small
Colour. Material. Fire.
label large
--md-sys-typescale-label-large
Colour. Material. Fire.
label medium
--md-sys-typescale-label-medium
Colour. Material. Fire.
label small
--md-sys-typescale-label-small
Colour. Material. Fire.
Material 3 colour roles
Components use Material 3 semantic colour roles in light and dark modes. The website theme is defined in m3-site.css.
--md-sys-color-background
--md-sys-color-surface
--md-sys-color-surface-container
--md-sys-color-primary
--md-sys-color-primary-container
--md-sys-color-secondary-container
--md-sys-color-error-container
Interactive atoms
Expandable information
Native disclosure supports keyboard activation and exposes its expanded state.
Tab through the controls to inspect focus states. Minimum primary control target: 48 CSS px. No component requires hover to expose its action.
Technical text
| Material | Parts | Weight |
|---|---|---|
| Example material | 25.0 | 25.0 g |
This is a typography specimen, not a glaze formula.
Responsive contract
Design baseline: 375 × 667 CSS px. Reflow checks also cover 320 px. Layout enhancements begin at 600, 840 and 1200 px. Cards wrap their content; controls do not shrink text to force a fit.