Web Components Design System

Welcome

Welcome to our Design System.

This design system was built with nothing but HTML, CSS, and JavaScript. There is no Node/NPM/Yarn/etc involved. There are no bundlers like Webpack or Vite. It doesn't rely on a framework or design system kit such as StoryBook.

Whilst there's nothing wrong with using any of the above, native web APIs are now so powerful there's a huge amount we can build without their use.

Why not use a tooling system? Simply, without one, there is so much less to maintain, and nothing to keep updated.

General Approach

The general approach to this is:

• Create design tokens using CSS variables (custom properties)
• Create Web Components for anything that is re-usable - header, footer, containers, grids, etc.
• Retire to the sun!