---
# System prepended metadata

title: UI Style Guide

---

# UI Style Guide
### 1. Typography
- ### Heading 1
    > Text Color: #F3F6F9
    > Font: Poppins, Helvetica, "sans-serif"
    > Size: h1
    > Line Height: 1.2
    > Weight: 500

- #### Heading 2
    > Text Color: #181C32
    > Font: Poppins, Helvetica, "sans-serif"
    > Size: h3
    > Line Height: 1.2
    > Weight: 500

- ##### Heading 3
    > Text Color: #B5B5C3 
    > Font: Poppins, Helvetica, "sans-serif"
    > Size: 1rem
    > Line Height: 1.5
    > Weight: 500
----
### 2. Color
| primary | success | secondary | warning | danger |
|:--------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------:|
| <div style="background-color:#3699ff; width:80px; height:80px;color:#ffffff;border-radius: 50%;line-height:80px;text-align: center;" >#3699ff</div> | <div style="background-color:#C9F7F5; width:80px; height:80px;color:#1BC5BD;border-radius: 50%;line-height:80px;text-align: center;" >#C9F7F5</div> | <div style="background-color:#E4E6EF; width:80px; height:80px;color:#3F4254;border-radius: 50%;line-height:80px;text-align: center;" >#E4E6EF</div> | <div style="background-color:#FFA800; width:80px; height:80px;color:#ffffff;border-radius: 50%;line-height:80px;text-align: center;" >#FFA800</div> | <div style="background-color:#F64E60; width:80px; height:80px;color:#ffffff;border-radius: 50%;line-height:80px;text-align: center;" >#F64E60</div> |

----
### 3. Buttons
| Normal | Hover | Disabled|
|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|<div style="width:125px; height:35px; border-color:#3699ff; background-color:#3699ff;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; font-size: 1.75rem; text-align: center;font-weight: 500;padding-top:3px" >Button</div>|<div style=" width:125px; height:35px; border-color:#187de4; background-color:#187de4;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#3699ff; background-color:#3699ff;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent;  font-size: 1.75rem; text-align: center;font-weight: 500;opacity: 0.6;padding-top:3px;" >Button</div>
|<div style=" width:125px; height:35px; border-color:transparent; background-color:#C9F7F5;color: #1BC5BD;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; font-size: 1.75rem; text-align: center;font-weight: 500;padding-top:3px;" >Button</div>|<div style="width:125px; height:35px; border-color:transparent; background-color:#1BC5BD;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid transparent; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none|
|<div style=" width:125px; height:35px; border-color:#E4E6EF; background-color:transparent;color: #3F4254;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#E4E6EF; background-color:#E4E6EF;color: #3F4254;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none|
|<div style=" width:125px; height:35px; border-color:#FFA800; background-color:#FFA800;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#EE9D01; background-color:#EE9D01;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none|
|<div style=" width:125px; height:35px; border-color:#F64E60; background-color:#F64E60;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px; font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|<div style=" width:125px; height:35px; border-color:#EE2D41; background-color:#EE2D41;color: #ffffff;box-shadow: none;border-radius: 0.42rem;border: 1px solid #E4E6EF; padding-top:3px;font-size: 1.75rem; text-align: center;font-weight: 500;" >Button</div>|none|
- Use this template for buttons in general
- Check out existing page for how specific buttons are written
```
<b-button variant="/*theme*/" :to="{name: '/*page name*/'}">
    <b-icon-plus />     // icon that goes before button text
    {{ /*text for the button*/ }}
</b-button>
```
|Usage|Create resource page link|Create resource</br>|Back to last page|Important action|
|------|:------:|:------:|:------:|:------:|
|Text|*New* </br><resource name>|*Create* </br><resource name>|*Back*|custom|
|Style|blue with plus icon   |red with up arrow icon|large size, white|yellow|
|E.g|![](https://i.imgur.com/ITakiDf.png)|![](https://i.imgur.com/bfSwEVW.png)|![](https://i.imgur.com/JHTPn8q.png)|![](https://i.imgur.com/HONwEU7.png)|

----

### 4. Icons

|        | Edit | Delete | Users | Tooltip 1 | Tooltip 2 | Eye | Eye-slash |
|:------:|:------------------------------------:|:------------------------------------:|:-----:|:---------:|:---------:|:---:|:---------:|
| Normal | ![](https://i.imgur.com/yXys7GR.png) | ![](https://i.imgur.com/Q0M9KMc.png) | ![](https://i.imgur.com/pm7pQmX.png) | ![](https://i.imgur.com/SYe5p0j.png)| ![](https://i.imgur.com/mFoGmgx.png)| ![](https://i.imgur.com/GhMsKYP.png)| ![](https://i.imgur.com/rzKruTH.png)|

|        | Edit | Delete | Users | Tooltip 1 | Tooltip 2 | Eye | Eye-slash |
|:------:|:------------------------------------:|:------------------------------------:|:-----:|:---------:|:---------:|:---:|:---------:|
| Hover | ![](https://i.imgur.com/sGyrHDX.png)| ![](https://i.imgur.com/xLVB60Y.png)| none | none | none | ![](https://i.imgur.com/owtsDqS.png)| none |

----
### 5. Pagination
- Use ***`<Pagination>`*** component in page, e.g:
    ```
    import Pagination from '@/view/content/Pagination.vue';
    ```
- Example: ![](https://i.imgur.com/IwCWeCI.png)

----
### 6. Tooltip

- Use ***`v-b-tooltip.hover.topright.html.v-dark="$t('localization')"`*** in HTML element
- See more detail : ***[Tooltips](https://bootstrap-vue.org/docs/directives/tooltip/#tooltips)***
- Example:![](https://i.imgur.com/oC0Qu0k.png)

----
### 7. Alert

#### Toast Alert
- Import Mixins ***`MakeToast`*** in page, e.g:
    ```
    import MakeToast from '@/view/content/mixin/MakeToast.vue'
    ```
- Default variables setting:
    ```
    makeToast(message: string, variant: string = 'warning', toaster: string = 'b-toaster-top-right', solid: boolean = false)
    ```
- See more detail : ***[Toasts](https://bootstrap-vue.org/docs/components/toast#toasts)***
- Example:

    | Success | Warning | Danger |
    |:--------:|:--------:|:--------:|
    |![](https://i.imgur.com/hGgV8Jp.png)|![](https://i.imgur.com/Lv6M1tS.png)|![](https://i.imgur.com/5Qa5hdv.png)|



#### Sweet Alert
- Import ***`Sweetalert2`*** in page, e.g:
    ```
    import swal from 'sweetalert2'
    ```
- Setting variables, e.g:
    ```
    swal
        .fire({
            title: '  ',
            text: '  ',
            icon: 'warning',
            showCancelButton: true,
            reverseButtons: true,
            cancelButtonText: 'Cancel',
            confirmButtonText: 'Send'
        })
    ```

- See more detail : ***[Sweetalert2](https://sweetalert2.github.io/)***
-  Example: ![](https://i.imgur.com/dLmBvGk.png)
----
### 8. Loading
- Use ***spinner*** while loading
- Example:

    | Example | Usage |
    |:------------------------------------:|:--------------------------------------------------------------- |
    | ![](https://i.imgur.com/o0xfQmP.png) | Show ***spinner*** after ***page title*** when loading the page |
    | ![](https://i.imgur.com/3W7UuBO.png) | Show ***spinner*** at ***button*** when sending a request       |






