Reelevant Design System
December 2020 - Present
A few weeks after I joined Reelevant, I quickly bring the topic of a design system for our team to integrate branding guidelines, ensure consistency accross the three apps and above all leverage a smooth collaboration with developers.
Starting from scratch, I had to make sure the guidelines were clear enough to ensure brand consistency. The main goal is to create a documentation sharing guidelines and interface information that will speak to the whole product team. The development team asked me to defined design tokens for core-styles elements (ie. tiny UI pieces of an interface used accross all platforms such as colors, font-sizes, spaces, shadows, z-indexes, breakpoints, icons).
I read several articles about design tokens, found inspirations from impactful designers and I decided to split our design system into 6 sections. Each section was submitted to ping-pong reviews with the dev front team and we iterate until we reach a common language to be included in our storybook.
1 - Foundations
Spatial systems, grids, and layouts provide rules that give your designs a consistent rhythm, constrain decision making, and help teams stay aligned. Following a 4pt spatial system the rhythm becomes predictable and visually pleasing. For users, the experience is polished and predictable. This increases trust and affection for the brand.
2 - Colors
The first step is to create a color system. Then I defined the color palette that are the only color used for Reelevant’s UI and a semantic rule for design tokens.
3 - Typography
4 - Icons
Set of 546 icons. Each of them are declined into 6 variants following the properties:
- Type (outlined/filled);
- Status (active/inactive);
- Surface (on light/on dark).
5 - Elevation
Elevation is the relative distance between two surfaces along the z-axis.
6 - Components
Please feel free to contact me if you want to see the Component section as some elements are confidential.