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.

assets 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.

docs directory includes any custom content that is shown in the living system documentation.

config directory includes configuration for the living system documentation, development environment, and build processes.

Finally, test directory includes unit tests for Vue Design System.

├─ src
│   ├─ tokens
│   ├─ elements
│   ├─ patterns
│   ├─ templates
│   ├─ styles
│   ├─ router
│   ├─ utils
│   ├─ assets
│   │   └─ icons
│   ├─ App.vue
│   ├─ ExampleComponent.vue
│   ├─ main.js
│   └─ system.js
├─ docs
│   ├─ utils
│   └─ components
│       ├─ tokens
│       └─ status
├─ config
├─ test
│   └─ unit
├─ build
└─ dist