Guidelines and Decisions
Overview
This document serves as a guide and a record for conventions that we have agreed to implement as a team (including Product, Design and Frontend). This means that we have a shared point of reference for the expectations and implementation of the Design System, and can ensure consistency as we progress through the project.
Relative CSS Units
We will use 8px as the base unit in Storybook. Any measurements above 8px must be defined in the designs using a multiplier that is a whole number or 0.5 (e.g 16px = 2 x 8px, 44px = 5.5 x 8px). If a measurement is less than 8px we will allow multiples of 0.25, 0.5 and 0.75 but only when the measurement is less than 8px (e.g 6px = 0.75 x 8px). This will allow more flexibility from a design point of view for the finer details in designs, whilst maintaining the consistency that comes with using a base unit. It will also prevent a huge code change from a dev perspective, and a revision of lots of hard work to this point.