Design system boilerplate alpha

This demonstrates how a design system can be built using the the Visual Framework component system.

Use this component-based boilerplate to deliver and document your design system. Still need to install it? Follow this guide.

Quickstart


  yarn create @visual-framework/vf-eleventy your-new-site-name vf-demo-design-system   

This will install a new vf-demo-design-system to a folder named your-new-site-name.

Then follow the onscreen prompts and links below to develop and configure.

Longer install?

The above too easy or have questions? Read this guide.

Design system sections

Customising your design system

Now that you've installed vf-demo-design-system, learn how it works and how to adapt it to your needs.

Brand guidelines

High level guidance on your brand.

Styles

Colours, illustrations, images, type: lower-level guidance on styling.

Component overview

These components are available to your design system.

Patterns and boilerplates

More than components, this is how you should do things.