Install all dependencies
npm install
Run component documentation
npm run docs
Build the component documentation
npm run docs:build
The architecture of a design system differs a bit from a standard software project. This is because a design system serves a dual purpose. On one side it provides a single source for shared components and styling for ByteBlocks on code level and on the other side it serves as way to document and safe guard the design decisions.
The most basic values are Design Tokens. In this DS they are first defined as core tokens (color pallette, used fonts and base sizes). These core tokens serve as a basis to define the semantic tokens.
The DS only exports the UI elements as UI components. The patterns are merely recipes on how to best compose elements together to build common UI/UX patterns. By only defining the elements as components the DS remains flexible and the Designer and Developer are not forced to use a specific UX pattern for an application design.
This project uses the React framework to construct its UI elements and UX patterns. the Design Tokens are defined in a JSON format and used by PandaCSS as a styling framework. Separating the design tokens into JSON format allows them to be used outside of CSS too (like in SVG).