@velo-design-system/tokens

Design tokens are the atomic elements of our design system. They are named entities that store visual design attributes and export them in convenient formats that are ready for integration into your apps and websites.

Usage no npm install needed!

<script type="module">
  import veloDesignSystemTokens from 'https://cdn.skypack.dev/@velo-design-system/tokens';
</script>

README

Design Token image

Design Tokens

Design tokens are the atomic elements of our design system. They are named entities that store visual design attributes and export them in convenient formats that are ready for integration into your apps and websites.

We recommend using design tokens in place of hard-coded values (such as hex values for color) in order to maintain a scalable and consistent UI.

Design tokens are currently exported in the following formats: xml, css, .h , .m, json, js, and scss.

API stability

Install

:warning: IMPORTANT: This README provides instructions on using the package @velo-design-system/tokens. The contents of this package are programmatically generated from our design libraries. To understand how this process works in more detail, please refer to the CONTRIBUTING.md

Recommended Install


$ yarn add @velo-design-system/tokens -D

$ yarn

Preview upcoming releases


$ yarn add @velo-design-system/tokens@next --dev

$ yarn install

Usage

The design tokens package is comprised of the following primitive types:

  • colors

  • typography

  • layout

  • component-tokens

General guidelines on using these tokens can be found on the design system website.

List of available color tokens

List of available typography tokens