Reelevant Design System





Date


December 2020 - Present

Role


Product designer

Tools


Figma


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.