Overloop Design System

Our big box of Lego™ pieces

Think about a design system as a big box of Lego™ pieces that you can combine in infinite ways, except that here, Lego™ pieces are UI elements, like buttons and forms, used to build web applications.

Having our own design system allows us to build consistent user interfaces and to gain lots of time when doing some templating.

prospectio-design repository

It comprehends all the CSS and assets (images and fonts) of our design system, organized by the IT convention. In this repository, you will find all the settings of the design system (colors, spacing rules, fonts definition, etc.), some objects (grid, page layout, etc.), components and some utilities.

Each component is styled by following BEM conventions.

Because sometimes you need your own Lego™

From time to time, you will want to create a new UI component that is too specific to be put into the design system. In this case, go ahead and write your CSS directly into the repo you are working on. Don't forget to follow IT and BEM conventions for your custom app CSS as well.

Same rules apply if you want to override some style, such as the colors settings by choosing a new primary or brand color for a new app.

Last updated