Rootstrap UI

rootstrap-ui is the components & styles library to build user interfaces in Rootstrap's projects.

Includes:

• Internal, generic and extensible components
• Core styles
• Design guidelines

Goals:

• Unify shared components implementation
• Define style standard for Engineering & Design
• Create Design Systems for specific projects using rootstrap-ui as a start point
• Generate guidelines documentation

Motivation

Moving from nothing to have a DS for each project is unrealistic. After a discussion with Design + Engineering, we decided to implement internal and reusable components/mixins and define guidelines. All the components must be validated with the design team and be as generic as possible.

Guidelines or design rules will be discussed and documented. Then Design + Engineering teams should be aligned with these rules. For some design rules, we will create a Figma template, so it's easier to adopt them in all the projects.

For example: After defining a typography system, we create a Figma template page for typography with examples, rules, and modifiers. Then the designer can use this template to create custom typography for a specific project just changing a few things, and it will be aligned with the typography system.