IMPACT design system

Here is a sneak peek (LinkedIn post link) of the work-in-progress white-label design system "Impact" for SMAL GmbH, which is currently being tested on various projects.

The visual direction of the documentation and components page template is based on the International/Swiss style (as well as SMAL’s branding), which is a perfect style-neutral approach for documentation design.

For me, it was also an attempt to marry two worlds — graphic design foundations (aesthetics, grid, typography) and product/digital design foundations (components, tokens). So, when the user deals with the tokens and components guidelines, it is like browsing a nice poster. It is easy to digest and observe, while at the same time, the design system consists of and utilizes all of the latest Figma features and possibilities (variables and breakpoints-based responsive components instead of variants, responsive/fluid typography, light and dark themes, and demo themes).

Apart from the components, detailed documentation, guidelines, and tutorials are essential. One goal was to make it super easy for interns and junior-level designers to learn how to use design systems. It's a Lego-like design constructor with a fun, emotional, and playful approach. 

Description

What is it for?

■ Lego-like design constructor that even very junior-level designers can efficiently work with, as everything is already pre-set in components, variables, styles, and auto-layouts;

■ Kick-start new projects much faster with essential components;

■ Interactive components with already pre-set hover/click states;

■ A Design System entirely based on Figma Variables (their native Design Tokens);

■ Responsive components with auto-layout and auto-breakpoints (thanks to Variables again) instead of Variants for different resolutions;

■ Fluid/responsive typography;

■ New theme in a few clicks - duplicate, customize tokens (variables, tokens, colors, typo), and go.

 Responsibilities:

• Design System lead
• Art direction