Promote common styles, assets and components to lego successor
The UX Team has been working on a new design language based on Bootstrap 5.3, code named Marble. It is intended to succeed the existing design guidelines documented at styleguide.torproject.org, which is based on a substantially older version of Bootstrap.
In order to promote consistency and reduce the duplication of effort, each Marble website will share the following core elements:
- Bootstrap's responsive grid system
- Integration with lektor (where applicable)
- A global site header and footer
- Common components, as detailed on this page in Figma.
- Color styles and tokens.
- Typography, as detailed in this wiki page.
- Iconography, as seen in this Figma file.
- Other repetitive assets, such as app icons and illustrations.
At least three websites/sections are due to be updated to Marble in 2024-25:
Instead of re-implementing these styles, assets and components in each individual project, it would be substantially more efficient in both the short and long term if they are centralized in a single project instead. I imagine this is similar to the original intention of the lego project, and would work like so, for example:
graph TD;
A[web/marble] --> B[web/donate-neo];
A --> C[web/tpo];
A --> D[web/support];
A --> E[web/future-project];