> For the complete documentation index, see [llms.txt](https://justin-se.gitbook.io/justin-se-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://justin-se.gitbook.io/justin-se-docs/front-end-development/user-interface-design/design-system.md).

# Design System

## Popular Design Systems

[**Material Design (material)** ](https://m3.material.io/)**/ Google**\
**-** Most used design system

[**Ant Design (AntD)**](https://ant.design/) **/ Ant Group**\
**-** Advance concept & UX

[**Microsoft Fluent**](https://fluent2.microsoft.design/#/)\
\- like dude with hair gel and red tie everyday, very standard

[**Polaris**](https://polaris.shopify.com/) **/ Shopify**\
**-**

## Concepts of AntD are awesome

Some advance & high-level concepts of [AntD Design System](https://ant.design/docs/spec/overview).

* [Direct Access](https://ant.design/docs/spec/direct)
* [Data Visualise](https://ant.design/docs/spec/visualization-page)
* [Navigation](https://ant.design/docs/spec/research-navigation#types)

## Personal Preference

<details>

<summary><strong>Confirmation Button Label</strong></summary>

while we need user to double confirm an action,\
most of the description message are redundant,\
for example, clicking "Delete" button with popup dialog confirmation "confirm delete item xxx ?".

other than **"Confirm / Cancel"**, we should use actual action's verbs,\
so user can make decision with button label without reading the all the redundant message.

* Create / Draft
* Update / Discard
* Delete / Cancel

**Bad Example :**

Confirm delete item xxx ?\
Cancel / Confirm

Void invoice xxx ?\
Cancel / Confirm

**Good Example :**

Confirm delete item xxx ?:\
Cancel / Delete

Void invoice xxx ?:\
Cancel / Void

</details>