open-index/open-npm huggingface dataset:
npm package: @sparknz/set-tokens
Description: Design tokens are the lowest abstraction of the design system, a token cannot be broken down futher hense the icon is a [Quark](https://en.wikipedia.org/wiki/Quark). A Quark is a subatomic particle with no sub structure, thus not composed of other particl
Author: Mike Tamis
Latest version: 0.0.34

![Quark](Quark.png) 


[Detailed documentation](https://sparknz.github.io/SET-Docs/);

# Spark Experience Toolkit - Tokens

Design tokens are the lowest abstraction of the design system, a token cannot be broken down futher hense the icon is a [Quark](https://en.wikipedia.org/wiki/Quark). A Quark is a subatomic particle with no sub structure, thus not composed of other particles. The same applies to a Design token, they cannot be broken down futher or made up from other things. Design tokens are hard-coded values (such as hex values for color or secound values for animation) in order to maintain a scalable and consisent visual system for UI Development.


# Implementation
We use [Styled Dictionary](https://amzn.github.io/style-dictionary/) and follow the recommend CTI (Category/Type/Item) structure.
![CTI](cti.png) 

[Image Source](https://amzn.github.io/style-dictionary/#/properties?id=category-type-item-(cti))

# Categories
## Color
  - Base color
  - Text color
  - Border color
  - Background color
  - Shadow color
## Layout
  - Breakpoint
  - Z-index
## Sizing
  - Font size
  - Line height
  - Spacing size
  - Border radius
## Misc
  - Opacity
  - Duration