Design System#
A reference for building websites with the Volto Light Theme (VLT) design system:
the design tokens, the content-area composition rules, and a catalog of every
block. It is generated from, and kept in sync with, the Storybook stories in
packages/volto-light-theme/src/stories.
It doubles as machine-readable context for design tools (for example, feeding a design assistant enough to build VLT-based pages using the real block markup, classes and tokens).
Visual block catalog#
A machine-extracted catalog — every block and variant with its exact rendered HTML and a screenshot, captured straight from Storybook — is published alongside these pages:
Open the visual block catalog →
Regenerate it (and the screenshots) after changing blocks, from frontend/:
make storybook-start # in one terminal
make design-catalog # in another
The generator is frontend/scripts/generate-design-catalog.mjs; output is written
to docs/_static/design-catalog/ and committed (Read the Docs cannot run
Storybook/Playwright).
How to use this reference#
Treat Design Tokens as the palette and scale — do not use colors, widths or spacing outside the token set.
Wrap blocks in the content-area skeleton from Content-Area Composition so backgrounds band correctly and blocks center at their intended width.
Reproduce the structure and class names from Block Catalog (and the visual catalog) verbatim; VLT's stylesheet keys off these classes.