# Designing in Savvy

{% hint style="info" %}
Some specific things like tags and a few component options are set on the Options Tab, but all of the styling itself gets done in the Design Tab. Here you'll find a detailed explanation of the Design Tab and its different areas.&#x20;
{% endhint %}

### Component and Element Selection

* Select the component you want to add styles to
* Go to the Design Tab on the Right Sidebar
* "Choose an element" will allow you to affect different parts of the component

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FL9at1B7SNzJdl9miKSXv%2Fselect%20the%20component.png?alt=media\&token=6295bcc6-9a8a-4580-8895-67c52b50429c)

### Tagging Components

* Go to the Options Tab on the Right Sidebar
* Below the parent container dropdown, you'll see the component tags
* No tags? Just write a new tag for it

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FqVkHCMI6AXQVK69n65aD%2Ftag.png?alt=media\&token=ea85e2a6-b1a8-4af2-bb98-45f3cf229947)

{% hint style="info" %}

#### This is helpful and good practice if you are going to apply the same styles to similar components in the flow

{% endhint %}

### Applying Styles

* Go to the Design Tab
* Choose whether to apply the styles to:
  * This particular component
  * All components with the same key
  * All components with the same tag
  * Etc.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FtdldPkpdmeoDxy89qW7a%2Fapply%20to.png?alt=media\&token=0281dc20-b569-44e5-bb50-cd1343a30409)

### Setting Styles

* Keep scrolling on that Design Tab until you get to the Styles List.
* Make your components beautiful.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FtgoJOfFCWSNqdUBdx4Vb%2Fimage.png?alt=media\&token=1659cdac-7db0-479b-b934-620076eb88b8)

{% hint style="info" %}
Here you can add custom styles that are not included in the common styles list.
{% endhint %}

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2F92NA0quUPOaYBWmvsIEp%2Fcustom%20styles.png?alt=media\&token=0c3584df-18fa-4d18-913b-6175fb395a8e)

### Using States

* At the bottom of the "Choose an Element" area, there's a "Use states" Toggle.&#x20;
* Toggle it!
* This will let you style different states of the component such as hover, selected, etc.

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MaGcfSakhqdHaWyb0T_%2Fuploads%2FIGUa7vxEE4kEbbj9M4om%2Fuse%20states.png?alt=media\&token=2fe0e7a7-a467-45ca-9067-2a44bb14befa)

{% hint style="info" %}
Not all types of components have states, this feature is only available for components that do.
{% endhint %}

## Useful Links

{% content-ref url="../how-tos/design-how-tos/how-to-center-components" %}
[how-to-center-components](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-center-components)
{% endcontent-ref %}

{% content-ref url="../how-tos/design-how-tos/how-to-style-buttons" %}
[how-to-style-buttons](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-style-buttons)
{% endcontent-ref %}

{% content-ref url="../how-tos/design-how-tos/how-to-add-a-video-gif-placeholder-to-a-video-component" %}
[how-to-add-a-video-gif-placeholder-to-a-video-component](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-add-a-video-gif-placeholder-to-a-video-component)
{% endcontent-ref %}

{% content-ref url="../how-tos/design-how-tos/how-to-use-custom-selectors" %}
[how-to-use-custom-selectors](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/how-to-use-custom-selectors)
{% endcontent-ref %}

{% content-ref url="../how-tos/design-how-tos/making-a-full-page-flow" %}
[making-a-full-page-flow](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/making-a-full-page-flow)
{% endcontent-ref %}

{% content-ref url="../how-tos/design-how-tos/setting-up-popup-flows" %}
[setting-up-popup-flows](https://trysavvy.gitbook.io/savvy/how-tos/design-how-tos/setting-up-popup-flows)
{% endcontent-ref %}

{% content-ref url="../reference/design/common-button-states-and-styles" %}
[common-button-states-and-styles](https://trysavvy.gitbook.io/savvy/reference/design/common-button-states-and-styles)
{% endcontent-ref %}
