# Styles

### Use style variables to change colors

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FLuN6IJNP8MZbrgPusKwd%2Fcolors.png?alt=media&#x26;token=ca054550-7639-408a-bc90-1af7396d8da1" alt=""><figcaption></figcaption></figure>

### Change static information

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FeyIfEBE4zYfwsaYNtF68%2Fop-sets.png?alt=media&#x26;token=2b19667e-7e8b-4177-b9a6-f9038c75767e" alt=""><figcaption></figcaption></figure>

### Change alert messages

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2FwN3vT8pYDqbPa5SrDpct%2Flanguages.png?alt=media&#x26;token=bd2c3a99-3841-41b8-8d26-bdebbe66e46b" alt=""><figcaption></figcaption></figure>

### Custom States and design of specific elements&#x20;

{% hint style="info" %} <mark style="color:blue;">Within the template, you can find reusable elements or components identified by an icon ⚙️ at the beginning, signaling the presence of</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Custom States.**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">Similarly, elements that affect the</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Design**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">of certain page components are distinguished by an icon 🎨 at the beginning of their names.</mark>
{% endhint %}

<figure><img src="https://518164421-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT1Q1qC2wVXGuHGdhKlFm%2Fuploads%2F367JBFgf8r5VPQKtWN3W%2Fcustom-states-design-icons.png?alt=media&#x26;token=e080f8ee-722c-44da-a2c8-21ec3a7e8085" alt="" width="364"><figcaption></figcaption></figure>