Eleventy Design System Demo

Welcome to a demonstration of "Eleventy as a design system". This website and repository sits alongside a blog post, explaining how you can use this static site generator to create a bespoke and flexible design system.

This bare-bones example uses components written in Nunjucks with the encapsulated macro pattern, but Eleventy provides an excellent array of alternative templating languages to suit your needs.

To see a fully-fledged instantiation of an Eleventy design system, check out brand.malvernpanalytical.com, including brand & tone of voice guidelines, versioning, links to Figma, prototyped page designs, and a full suite of components with thorough documentation.

Send me a message on twitter if you have any questions.