Defining the basics
The foundations contain the fundamental building blocks upon which all other components and modules are built. Among them there is a unit system, grid system, typography and colors. I defined the foundations through explorations, where I built components, modules, web pages and user journeys in Figma with the intent to identify and specify rules for the foundations.
The unit system specifies what sizes are to be used, and also how these sizes should be applied in various situations. The grid system specifies the responsive columns, grids and margins for desktop and mobile viewports. The typography section specifies the various text components to be used. And the color system specifies what color the brand uses and how.