> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/set-up-your-store/colors.md).
# Colors
Colors in Vélare are managed with Shopify's color scheme system rather than one colour picker per section. A color scheme is a saved set of values (background, text, headings, borders and buttons) that you build once and then apply to any section of your store. Creating several schemes gives you a light scheme, a dark scheme and any accent variations you need, and switching a section from one scheme to another restyles it in a single click. This keeps your storefront consistent and makes a brand refresh a matter of editing a few schemes instead of every page.
You can read more about color schemes [here](https://shopify.dev/docs/themes/best-practices/design/color-system#color-schemes).
### Where to find these settings
Go to **Online Store > Themes > Customize > Theme settings > Colors**.
{% hint style="info" %}
Note: **Color Scheme 1** is a global style preset that applies to both theme sections and content pages, ensuring consistent design across the entire site.
{% endhint %}
### Color scheme settings
Each scheme is made up of the four groups below. Set them once per scheme, then apply the scheme wherever you need it.
#### Background
| Setting | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Background** | The main background color of a section or element using this scheme. |
| **Background 2** | A second background color used by certain elements inside that section, so you can separate them from the main background. |
| **Background gradient** | A gradient background for the section or element. When it is set, it overrides **Background**. |
#### General
| Setting | Description |
| ----------- | ----------------------------------------------------------------------------- |
| **Text** | The color of normal body text across sections and content areas. |
| **Heading** | The color of heading text, such as page titles and section headings. |
| **Border** | The color of borders on elements such as buttons, cards and section dividers. |
#### Fill button
| Setting | Description |
| -------------------- | ------------------------------------------------------------------------------------------------------------- |
| **Background** | The background color of primary buttons in the section, including key actions such as Add to cart and Submit. |
| **Text** | The color of the button label. |
| **Background hover** | The background color shown while a customer hovers over the button. |
| **Text hover** | The label color shown while a customer hovers over a primary button. |
#### Outline button
| Setting | Description |
| ---------- | -------------------------------------------------- |
| **Text** | The default label color for outline style buttons. |
| **Border** | The border color for outline style buttons. |
### What customers see
A customer never sees the scheme itself, only its result: the background behind a section, the contrast between headings and body text, and how clearly the Add to cart button stands out from everything around it. Because **Color Scheme 1** is the global preset, editing it restyles theme sections and content pages at the same time, so it is the fastest way to change the overall feel of the store and also the easiest one to break contrast with. Hover colors matter on desktop, where they confirm that a button is clickable before the customer commits.
### Related pages
* [Typography](/velare/set-up-your-store/typography.md): the fonts and sizes these text colors are applied to
* [Layout](/velare/set-up-your-store/layout.md): page width and corner radius of the elements you are coloring here
* [Badges](/velare/customize-your-pages/badges.md): badge colors, which are set per badge instead of by scheme
* [Product cards](/velare/customize-your-pages/product-cards.md): where these scheme colors show up on collection pages
* [Vélare Intro](/velare/readme.md): overview of the theme and where to start
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://uxsmart.gitbook.io/velare/set-up-your-store/colors.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.