There are many ways to set up a design system that serves design and engineering equally. In this project we implement a general design system starter project with color tokens, typography tokens, and general spacing content to show an example of how to do this process across design (See Figma Mockup) and engineering (this project's code).
This Project features:
- Both light and dark theme color tokens named the same accross Figma and the app:
| light Theme | dark Theme |
|---|---|
 |
 |
-
A general Button component that consumes theme context and has an API that matches the Button component in Figma. The Properties + Variants in Figma directly correspond to the component's API structure and interraction styles.
-
A button that toggles the theme in the header of the page.
Button JSON Structure:
This project:
- Was bootstrapped with Create React App.
- Uses Vanilla Extract and Recipes for style utilities.
- Has manually added Design tokens from Figma, but are based on Design Token's export format.
In order to run this on your local:
- clone this repo
- in the project folder, run:
yarn install
yarn dev