[UI/UX] Design System

[reboottime]

Design System

Why

• Brings consistency and boosts delivering speed

• Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions

What is design system

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications with a consistent result.

• Design System vs Pattern library

Most Design Systems are just pattern libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be.
In order to quickly iterate with confidence, design teams need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines. ( I guess so does frontend developers, haha)

Build a Design System

Steps

1. Conduct visual audit of current design
2. Create a visual design language
   1. Color: Common colors in a design system include 1–3 primaries that represent your brand. You may want to include a range of tints—a color mixed with white—and shades—a color mixed with black—to give your designers a few more options.
   2. Typography: Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep it simple to avoid overloading and confusing your user. Keep the number of fonts low; it’s not only a best practice of typographic design, and it also prevents performance issues caused by excessive use of web fonts.
   3. Sizing and spacing: The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
3. Create a UI/pattern library
4. Document what each component is and when to use it: This step is important. Documentation and standards are what separate a pattern library from a true design system.

[reboottime]

Examples Of Design System

1. Atlassian design system
2. Carbon UI design system

[reboottime]

References

References

1. A comprehensive guide to design systems
2. The fullstack design system
3. Atomic design, bring logic and structure to individual screens
4. From Zero to One: the lifecycle to build a design system
5. The 4-based scale spacing in design ( by chatGPT)

In design, 4-based scale spacing is a system of spacing and alignment that is based on multiples of 4. It means that the space between elements or the size of elements is defined in increments of 4 (such as 4px, 8px, 12px, 16px, etc.), which creates a consistent and harmonious layout. This system is often used in interface and graphic design to create visually appealing and balanced compositions.