# Notes - Design Systems Frontend Masters
Why a design system?
- Accessability
- Consistency
- Trickle-down updates (propagate updates)
- Onboarding
- Flexibility
- Speed
Drawbacks:
- Time to build
- Never complete
Components:
- Design language
- personality of a brand and its corresponding design assets
- Foundation
- color
- typography
- grid
- spacing
- iconography
- illustrations
- motion
- UI Kit
- buttons
- text fields
- modals
- dropdowns
- navigation
- footer
- Component Library
- build with many frameworks / libraries
- vue, react, angular, ember, ...
- css preprocess, css in js, animation libraries, testing libraries
- Style Guide
- documentation for the design language, ui kit, component library
- technologies
- storybook, invision, gatsby, react styleguidist
Building:
- design principles: grounding values
- ui audit (screenshot all components, etc...)
- -> prioritizing components
Common mistakes:
- starting for scale
- educating before building
- not discussing workflow
- not documenting decisions