Back
01

Design System
& Guidelines

Building a Scalable Design System for Enterprise apps



Task

- Create a flexible design system that uses tokens and works in both light & dark modes.

- Make sure all UI elements are easy to see and use for everyone.

- Keep the look and feel of the interface the same across all products.

- Ensure accessibility standards are followed in all UI parts.

Basic Design Elements

Typography

Headlines

Name Typeface Weight Size Line height
Heading1 Graphic Regular 42 48

Grid

Column System

Column System helps to distribute content correctly even on different screen sizes. In the system we use 12 columns grid for the basic screen size of 1440px width. Each column is 96px width with 24px padding between columns.

Square Grid

Square helps to achieve pixel perfect designs. The system is based on a 6px square line grid as a basic principle. It means that all sizes in the design could be divided i