Exploring the nitty gritty of design systems.
Belysningsdesign.se is one of Sweden's most distinguished high-end lamp shops. I built a design system for belysningsdesign as a way to explore the topic hands on - all the way from foundations to UI-design.

I stumbled upon the topic of design systems when I was building a functional component library for belysningsdesign as a project at Yrgo. I was captivated. I decided to expand upon my component library and make it into a design system - drawing inspiration from other public design systems such as the MailChimp Style Guide, Google Material Design and Atlassian Design Guidelines.

The design system contains three levels; foundations, components and modules.
Design System
UI Design
Spare time project
Individual project
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.

The legos of UI design
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.
The highest abstraction layer
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.
Putting it all back together
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.