Please note: the design system is currently being updated while Studio 24 is working on the W3C redesign project. These instructions are currently intended for W3C to test the design system. We plan to release a tagged version of the design system once this work is done (in November).
In a standalone project
Installing via Composer
You can install the Design System via Composer via:
composer require w3c/website-templates-bundle:dev-main
This requires PHP 7.4+
Please note, this currently works best within a Symfony project. We are working on improved methods to install the Design System for non-Symfony sites.
Installing via ZIP file
You can also download a ZIP archive file of the frontend assets and use these within your project.
Todo: Review with W3C whether we can get users to point directly to the WSC assets on beta.w3.org / w3.org
This will install the built front-end assets for the Design System into
You can then copy these into your project codebase.
If you wish to use the SASS files, you can find these in
If you wish to copy our build process for frontend assets see
You can create HTML templates based on the examples in the Design System. For example the Default template contains all the global styles required for pages.
If you wish to use Twig templates, you can use the Twig templates in
as a starting point.
For Symfony projects please see below on how to integrate the design system using the bundle system.
In a Symfony project
Please note these contain complex Twig templates designed to be integrated into the W3C frontend website project.
Todo: review with W3C if we can bridge the gap between the Symfony template bundle & the design system and move usage docs here
Todo: review with W3C how portable these Twig bundle templates really are between different Symfony projects