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.
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.
The above too easy or have questions? Read this guide.
Now that you've installed vf-demo-design-system
, learn how it works and how to adapt it to your needs.
High level guidance on your brand.
Colours, illustrations, images, type: lower-level guidance on styling.
These components are available to your design system.
More than components, this is how you should do things.