Design System

Decidim design system (0.28+)

Based on Populate's redesign for version 0.28, this Figma file will be maintained by the community and aims to serve as an ever-evolving library for the upcoming versions.

Figma file

Why do we need it?

The design system is a central library of pre-built UI components (buttons, forms, etc.) and design guidelines. This saves development time and ensures designers aren't recreating the wheel.

A design system allows for faster and easier expansion of the platform by providing a foundation for future features. Furthermore, it is an essential element in building a designer-developer collaboration to work together as a team.

Design system constraints

• Reflect all components as they exist on Decidim 0.28 running on try.decidim.org.

• Do not change existing elements.

Challenge

• Speed up the design of new pages.

• Design a user-friendly design system.

• Create a starting point for future versions of the design system.

• Initiate a transition process to make the platform’s design more consistent.

What has been done?

1. All pages were analyzed to determine commonly used elements and patterns.

2. Common colors and text styles were defined.

3. Commonly used elements were analyzed to define common patterns and master components were created for them.

4. Multipurpose master components were created for most of the elements to initiate a transition to add consistency across similar elements in Decidim. 

Recommendations

• Reuse components as much as you can unless you can’t keep a good user experience with the existing elements. Avoid adding new components, they will make harmonization harder. 

• Create a clear spacing system.

• Use left and right margins across all the pages more consistently. 

• Standardize vertical margins to create some vertical rhythm. 

• Decrease minor differences in cards across all pages to make them look more consistent.