Design System FYI
Articles, Examples, Learn, Videos, Tools, Books, Open Design System, Checklist, Glossary.
| Name | Company | URL | Category | Mobile | Web | Animation | Branding |
|---|
A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.
Design System 101 by NNGroup
The Open Design System is a collaborative effort between designers from different backgrounds and skill levels to create a comprehensive and inclusive design system. By bringing together a diverse group of designers, we aim to create a system that reflects the needs and perspectives of all users. Our open approach means that anyone can contribute to the project, and we welcome feedback and suggestions from the community. Our goal is to create a design system that is accessible, usable, and customizable for designers and developers alike, enabling them to create consistent and cohesive user experiences across all digital platforms.
Primary and secondary colors, as well as color combinations and gradients.
Fonts, font sizes, line-heights, and other typographic styles.
Text fields, checkboxes, radio buttons, dropdowns, and other UI form elements.
Different button styles, including primary, secondary, tertiary, and disabled.
A set of standardized icons used throughout the design system.
Reusable cards with standardized layouts, including headers, footers, and body content.
Pop-up windows that display content or forms.
Menu styles, including primary and secondary navigation, and mobile navigation.
Standardized layouts, including grids and breakpoints.
Transitions and animations that can be applied to different components.
A system of standardized spacing values to maintain consistency across components.