Building a clutter-free and flexible design system.

Project overview

A personal design system focusing on web applications. To decide on essential components, I researched other design systems such as Untitled UI and IBM Carbon. The design style is purposefully neutral, easily customizable and extendable.

Flexibility in every detail

One of the main focal points of this design system was to allow as much customization as possible. To do this I used a slot system, allowing components to be placed within predetermined spaces of another component.

But even a highly customizable system in its unaltered form must be consistently designed. Spacing, size and color systems help achieve this while the use of transparency helps maintain contrast regardless of background.

Production-ready examples

To test the robustness and component coverage of the design system, I designed various screens showcasing potential use cases.

Complex applications require some elements that are too specific to include in a general purpose design system. However, the majority of required components such as metrics, command menus and various navigation elements are present.