Design System

The complete set of design standards, documentation, UI patterns, and components. Design systems allow you to manage design at scale

Typography
Layouts and grids
Colors
Icons
Components
Coding Conventions
Documentation
Reusable components

Atomic Design System

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

https://bradfrost.com/blog/post/atomic-web-design

https://atomicdesign.bradfrost.com/table-of-contents

Tools

Frontify
Zeplin
Lona

A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, and other artifacts.

https://github.com/airbnb/Lona

StoryBook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

https://www.freecodecamp.org/news/what-is-storybook-and-how-can-i-use-it-to-create-a-component-libary-in-react

https://storybook.js.org

https://github.com/storybookjs/storybook

https://patternlab.io

Pattern Lab is a frontend workshop environment that helps you build, view, test, and showcase your design system's UI components.

https://penpot.app

Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG). For all and empowered by the community.