Design tokens are named entities that store visual design attributes. Stardust manages it's design tokens with a build system called Style Dictionary that allows styles to be defined once, in a way for any platform (e.g., web, iOS, Android) or language to consume.

🏃‍♀️ Getting Started

npm install
npm run build

🎫 Properties

Design tokens, are defined in the properties folder. Style properties are organized into a hierarchical tree structure with 'category' defining the primitive nature of the property. For example, we have the color category and every property underneath is always a color.

{
  "color": {
    "avatar": {
      "brand": {
        "background": {
          "type": "color",
          "value": "{color.hullOrange.1.value}"
        }
      }
    }
  }
}

Read more about the Category/Type/Item (CTI) structure here.

🍱 Builds

When built, design tokens are organised into three platforms - each with their own branded theme. It's this theme that overrides brand specific design decisions, like avatar color.

build
├── android
  ├── home
  └── playground
├── iOS
  ├── home
  └── playground
└── web
  ├── home
  └── playground

• 🤖 Android
• 🍏 iOS
• 🕸 Web

Take a look at all the built-in transforms and formats that are used to build the tokens.