---
# System prepended metadata

title: Untitled

---

## Design Guidelines 

* I set up root variables for colors and font sizes and font weight, we should always use them when we need them.
* I have customized bootstrap default colors with new ones
    which are exactly the same as **root colors** so we can use them
    like the following pattern

    ```html
    btn-{color}, text-{color}, border-{color} 
    ```
    Examples of classes to use in bootstrap

    ```html
    btn-primary, btn-danger, text-success,
    text-blue, btn-bg-dark, border-border-focus
    ```
* Of course we still can use root colors in css as usual.
* Please use rem instead of px, we can do that be dividing px value by 16.
* I have set up the font size for heading, so please don't change font of headings.
* If we want to use a specifc heading like h2 but we want it's font to be bigger or smaller, we should try adding classes of headings like .h1, .h2, .h3, .. etc
* I suggest we create one design for inputs and tables and use it in the whole project, maybe it should be a new task. I don't know, let's let Ahmed safi decide that. 
