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.

‍

Wireframing user journeys and web pages allowed me to identify what components and modules were most important to Belysningsdesign. I designed buttons, forms and labels and continuously explored and adapted the foundations until I had consistent components that stayed true to the foundational rules.
‍
My focus was more on design structure and the design of the design system than on the creation of a nice brand and webpage design. It was thus great to work with an existing webpage, as I didn’t have to think too much about the brand and the look and feel of the product. I could more or less steal the design from belysningsdesign, and focus on picking apart and systematizing what was already there.

Modules are the highest layer in the design system. I designed a pop-up from scratch and redesigned the mini-cart from Belysningsdesign. I also explored how I could communicate the underlying rules to a module through a blueprint showing the spacing.

The design system and the UI-design molded each other throughout the process. These are two of the pages that I used as a means to explore and test the design system. Here they are in their final form, following the rules and structure that they helped me define.