---
title: "Color | GoodBarber's Design System"
description: "How does the user apply the color and on which components?\r\nThey can simply choose a color theme and customize it, but they can also fully customize their app in a very detailed way."
canonical_url: "https://www.goodbarber.com/uxdesign/color/"
lang: pt
---

# Color | GoodBarber's Design System

[Design System](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[https://pt.goodbarber.com/uxdesign/](https://pt.goodbarber.com/uxdesign/)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg)

![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg)

[Overview](https://pt.goodbarber.com/uxdesign/)

- [Foundations](/uxdesign/foundations/)
* Layout
+ [Grid](/uxdesign/grid/)
+ [Spacing](/uxdesign/spacing/)
+ [Breakpoints](/uxdesign/breakpoints/)
+ [Layers](/uxdesign/layers/)
* Graphic elements
+ [Color](/uxdesign/color/)
+ [Typography](/uxdesign/typography/)
+ [Images Aspect Ratios](/uxdesign/images-aspect-ratios/)
+ [Icons](/uxdesign/icons/)
- [Atomic Components](/uxdesign/atomic-components/)
* [Color atom](/uxdesign/atom-color/)
* [Font atom](/uxdesign/atom-font/)
* [Image atom](/uxdesign/atom-image/)
* [Gradient atom](/uxdesign/atom-gradient/)
* [Shape atom](/uxdesign/atom-shape/)
* [Shadow atom](/uxdesign/atom-shadow/)
* [Size atom](/uxdesign/atom-size/)
* [Border atom](/uxdesign/atom-border/)
* [Blur atom](/uxdesign/atom-blur/)
* [Overlay atom](/uxdesign/atom-overlay/)
* [Immersive feedback atom](/uxdesign/atom-immersive-feedback/)
- [UI Components](/uxdesign/ui-components/)
* [Background](/uxdesign/background/)
* [Text Field](/uxdesign/textfield/)
* [Dropdown](/uxdesign/dropdown/)
* [Date & Time Picker](/uxdesign/date-time-picker/)
* [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/)
* [Button](/uxdesign/button/)
* [Thumbnail](/uxdesign/thumbnail/)
* [Form](/uxdesign/form/)

# Color

Foundations

Colors highly impact the user experience by guiding users through the app navigation. They also impact brand perception and increase engagement, encouraging users to take specific actions.

[https://portal.ww-cdn.com/portal_static/images/designsystem/videos/color.4108b99c5d17.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/color.4108b99c5d17.mp4)

## Introduction

In our design system, users can apply color to various components of an app in different ways. Our approach is to provide a set of predefined color themes for users to choose from. These themes include a range of colors that have been carefully chosen to work well together and create a cohesive and visually pleasing design. Users can then select a theme that best matches their preferences or the branding of their app.

Users can also have the option to fully customize their app's color scheme by choosing individual colors for different components. This can include colors for the background, text, buttons, and other elements of the interface. This allows users to create a more unique and personalized design, and can be especially useful for apps that need to match a specific brand or color scheme.

### Basic color set

#### 4-color set

A set of 4 colors is associated with each theme. Each color in the set is associated with items of the app:
![3 different themes with their associated 4-color set](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Color-4-Color-Set-1.77fb53414d9a.png)

*3 different themes with their associated 4-color set*

Users can change the **color set** of their theme , the new colors are automatically assigned to the items.

![Color sets related to a theme](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Color-4-Color-Set-2.102237104f63.png)

*Color sets related to a theme*

#### Customize colors individually

In order to customize the app, users can modify each color of a set individually. The new color is automatically assigned to the items.

![Custom Color sets](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-Colour-Customize.a8a85c3d6c04.gif)

*Custom Color sets*

### Advanced customisation of elements

Advanced users have access to the complete list of items and their associated color. They can change the color of each item one by one.