[&#8592; Asgardeo Style Guide](https://github.com/wso2-enterprise/asgardeo-app-extensions/blob/master/docs/style-guide.md)
# UI Design Guide

## Table of Content

- [Color Palette](#Color-Palette)
- [Typography](#Typography)
- [Spacing](#Spacing)
- Buttons
- Dropdowns
- Text Fields
- Alerts
- Tooltips
- Breadcrumbs
- [Confirmation](#Confirmation)


### Color Palette

| Type        | Color                                                                          | HEX Code   |
| ----------- | ------------------------------------------------------------------------------ | ---------- |
| Primary     | ![#FF7300](https://via.placeholder.com/14/FF7300/000000?text=+) Orange         | `#FF7300`  |
| Secondary   | ![#FFC808](https://via.placeholder.com/14/FFC808/000000?text=+) Yellow         | `#FFC808`  |
|             | ![#465867](https://via.placeholder.com/14/465867/000000?text=+) Cool Grey      | `#465867`  |
|             | ![#FFFFFF](https://via.placeholder.com/14/FFFFFF/000000?text=+) White          | `#FFFFFF`  |
|             | ![#000000](https://via.placeholder.com/14/000000/000000?text=+) Black          | `#000000`  |
| Background  | ![#D7E2DE](https://via.placeholder.com/14/D7E2DE/000000?text=+) Winter Grey    | `#D7E2DE`  |
|             | ![#212A32](https://via.placeholder.com/14/212A32/000000?text=+) Dark Grey      | `#212A32`  |
| Status      | ![#DB2828](https://via.placeholder.com/14/DB2828/000000?text=+) Red-Error      | `#DB2828`  |
|             | ![#1EBC30](https://via.placeholder.com/14/1EBC30/000000?text=+) Green-Success  | `#1EBC30`  |
|             | ![#B58105](https://via.placeholder.com/14/B58105/000000?text=+) Yellow-Warning | `#B58105`  |
|             | ![#2185D0](https://via.placeholder.com/14/2185D0/000000?text=+) Blue-Info      | `#2185D0`  |


### Typography

| Type                  | Font Size (Minor-Third Scale)         | Font Weight  | Line Height (Font size x 1.4)  |
| --------------------- |:------------------------------------- | :----------- | :----------------------------- |
| H1                    | 2.488rem/39.81px                      | 500          | 55.734                         |
| H2                    | 2.074rem/33.18px                      | 500          | 46.452                         |
| H3                    | 1.728rem/27.65px                      | 500          | 38.71                          |
| H4                    | 1.44rem/23.04px                       | 500          | 32.256                         |
| h5                    | 1.2rem/19.20px                        | 500          | 26.88                          |
| H6                    | 1rem/16.00px                          | 500          | 22.4                           |
| Paragraph(Primary)    | 1rem/16.00px                          | 400          | 22.4                           |
| Paragraph(Secondary)  | 0.875rem/14.00px                      | 400          | 19.6                           |
| Label, Message        | 0.833rem/13.33px                      | 400          | 18.662                         |


### Spacing

| Spacing     | Top         | Right       | Bottom      | Left        |
| ----------- | ----------- | ----------- | ----------- | ----------- |
| Micro•4px   | `pt-micro`  | `pr-micro`  | `pb-micro`  | `pl-micro`  |
| Tiny•8px    | `pt-tiny`   | `pr-tiny`   | `pb-tiny`   | `pl-tiny`   |
| Small•16px  | `pt-small`  | `pr-small`  | `pb-small`  | `pl-small`  |
| Base•24px   | `pt-base`   | `pr-base`   | `pb-base`   | `pl-base`   |
| Large•48px  | `pt-large`  | `pr-large`  | `pb-large`  | `pl-large`  |
| x-large•64px| `pt-x-large`| `pr-x-large`| `pb-x-large`| `pl-x-large`|


### Confirmation

- If the deletion action is critical, use the Confirmation Modal with text input variation.

<img src="https://user-images.githubusercontent.com/36252940/126470784-44fd2443-e99b-4c0f-b32b-8b47b4329026.png" width=60% height=60%>



- If the deletion action is frequent and non-critical, use the Confirmation Modal with checkbox variation.

<img src="https://user-images.githubusercontent.com/36252940/126471916-5b7d6fa1-b8a6-43aa-82d0-f3ecaf67baaa.png" width=60% height=60%>

