> For the complete documentation index, see [llms.txt](https://docs.rebo.vn/foundation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rebo.vn/foundation/contents/design-system.md).

# Design system

## Basic

A design system is a series of reusable elements and guidelines that allow teams to design and develop a product following predetermined standards.

### **Style guides**

**Style guides** contain specific implementation guidelines, visual references, and [design principles](https://www.nngroup.com/videos/design-principles-101/) for creating interfaces or other design deliverables. The most-common style guides tend to focus on branding (colors, typography, trademarks, logos, and print media), but style guides also offer guidance on content (such as [tone of voice](https://www.nngroup.com/articles/tone-of-voice-dimensions/) and language recommendations) and visual- and interaction-design standards (also known as [front-end style guides](https://www.nngroup.com/articles/front-end-style-guides/)). These guidelines are sometimes incorporated into the component library as well, to provide relevant guidance in context.

### **Component Library**

**Component libraries** (also known as **design** **libraries**) are what many people associate with design systems: these thorough libraries house predetermined, reusable UI elements and serve as a one-stop shop for designers and developers alike to learn about and implement specific UI elements. Creating these libraries takes significant time and resources. In addition to visual examples of components, they include:

* **Component name:** a specific and unique UI component name, to avoid miscommunication between designers and developers
* **Description:** a clear explanation for what this element is and how it is typically used, occasionally accompanied by do’s and don’ts for context and clarification
* **Attributes:** variables or adjustments that can be made to customize or adapt the component for specific needs (i.e., color, size, shape, copy)
* **State:** recommended defaults and the subsequent changes in appearance
* **Code snippets:** the actual code excerpt for the element (some design systems go as far as sharing multiple examples and offering a “sandbox” environment to try out different component customizations)
* **Front-end & backend frameworks** to implement the library (if applicable), to avoid painful and unnecessary debugging

### **Pattern Library**

Sometimes, the terms ‘component library’ and ‘pattern library’ are used synonymously; however, there is a distinction between these two types of libraries.  **Component libraries** specify individual UI elements, while **pattern libraries** feature collections of UI-element groupings or layouts. Pattern libraries are often thought of as less robust compared to component libraries, but they can be as thorough or as high-level as needed. They typically feature content structures, layouts, and/or templates. Much like the components, the patterns are meant to be reused and adapted.

## Article

* <https://www.nngroup.com/articles/design-systems-101/>
* [Xây dựng hệ thống thiết kế theo Atomic Design](https://rebo.vn/ux-design/xay-dung-he-thong-thiet-ke-theo-atomic-design.html)
* [Atomic Design: Why you should have a Design System?](https://atomicdesign.bradfrost.com/chapter-1/)
* [Design System Checklist](https://www.designsystemchecklist.com/?ref=mirrdesign)

## Resources

* [Human Interface Guidelines](https://developer.apple.com/design/) by **Apple**
* [Material Design ](https://material.io)by **Google**
* [Carbon Design System](https://carbondesignsystem.com/) by **IBM**
* [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/) by the **U.S. Digital Service**
* [Atlassian Design System](https://atlassian.design/) by **Atlassian**
* [The Goldman Sachs Design System](https://design.gs.com/home) by **The Goldman Sachs**&#x20;
* [Fluent Design](https://fluent2.microsoft.design/) by **Microsoft**
* [Lightning Design System](https://www.lightningdesignsystem.com/) by **Salesforce**

## **Tools**

* <https://standards.site/>
* [https://www.designsystemchecklist.com/](https://www.designsystemchecklist.com/category/foundations)

## **Miscellaneous**

* <https://www.designsystems.com/open-design-systems/>
* <https://designsystemsrepo.com/design-systems/>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rebo.vn/foundation/contents/design-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.