Directory Structure

Below is the design system’s basic structure. The system’s pieces are split into Tokens, Elements, Patterns and Templates as explained in the Terminology section.

There’s also Styles directory which includes generic functions, mixins and variables that you might need. Currently, there’s for example a set of functions that can create tints and shades out of colors defined in Tokens.

Static directory is meant for any static files like for example icons, fonts and similar.

Router maps Templates to the routes and lets vue-router know when and where to render them.

Finally, docs includes any custom content that is shown in the system documentation.

├─ src
│   ├─ tokens
│   ├─ elements
│   │   └─ icons
│   ├─ patterns
│   ├─ templates
│   │   ├─ Styleguide.vue
│   │   └─ Template 1,2,3…
│   ├─ styles
│   ├─ router
│   └─ App.vue
├─ docs
├─ config
├─ build
└─ static