# Design System

## 1. What is Design System?

* A system composed of design principles, reusable UI patterns and components, and code
* Rather than simply being a UI kit, it's a comprehensive concept that includes design principles, style guides, components, patterns, and guidelines for design and development processes

<br>

## 2. If a Design System is Built, Developers Can

* **Consistently apply** styles like colors, fonts, and spacing through design tokens (JSON, YAML, etc.) included in the design system
* Use CSS preprocessors or CSS-in-JS libraries (Styled-components, Emotion, etc.) to **create components and apply them to the design system's component library**
* Implement desktop UI using the component library provided by the design system, and apply **responsive layouts** using CSS media queries
* Write **platform-specific code** considering platform characteristics by referring to the design system's cross-platform principles
* Collaborate closely with designers to implement applications that provide **consistent user experiences** according to the guidelines defined in the design system

<br>

## 3. Benefits of Design System

* Promotes smooth collaboration between teams
* Provides consistent user experiences
* Efficient design and development processes
* Strengthens brand recognition
