> For the complete documentation index, see [llms.txt](https://docs.appsections.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appsections.com/settings/colors/styles/primary-color-schema.md).

# Primary Color Schema

### Understanding Primary Color Roles in AppSections Brand Style

In the AppSections Brand Style, colors play a crucial role in defining the visual identity and consistency of your Shopify store. Each color setting serves a specific purpose, ensuring that the components look cohesive and visually appealing. Here is a detailed explanation of the different color settings and their roles:

### **Primary Color**

The Primary Color setting is one of several color categories used to maintain a harmonious design. It coexists with Secondary, Tertiary, and Neutral colors, each serving different aspects of the design.

### **Color Roles**

1. **Background:**
   * **Purpose:** The background color is applied to the component's background.
   * **Usage:** It sets the primary surface color of a component, providing the foundational visual context.
2. **Background Gradient:**
   * **Purpose:** The background gradient color is applied to the component's background when a gradient effect is selected.
   * **Usage:** It adds a gradient overlay to the background, giving depth and a modern look to the component.
3. **Foreground:**
   * **Purpose:** The foreground color is applied to the text above the background.
   * **Usage:** It ensures that the text is legible and stands out against the background color.
4. **Foreground Variant:**
   * **Purpose:** The foreground color variant is applied to the text above the background when a variant effect is selected.
   * **Usage:** It offers an alternative text color for specific states or conditions, such as hover or focus states, ensuring visual distinction and interaction feedback.
5. **Border:**
   * **Purpose:** The border color is applied to the borders of the component.
   * **Usage:** It defines the edges of the component, providing separation and emphasis.
6. **Shadow:**
   * **Purpose:** The shadow color is applied to the shadows behind the component.
   * **Usage:** It creates a sense of depth and elevates the component from the background, adding a subtle yet impactful visual hierarchy.

### Coexisting Colors

1. **Secondary Color:**
   * Works alongside the primary color to highlight secondary elements and provide additional visual interest without overpowering the primary color.
2. **Tertiary Color:**
   * Used for tertiary elements, offering another layer of visual differentiation. It helps in accentuating less prominent features or providing contrast.
3. **Neutral Color:**
   * Typically used for backgrounds, borders, or text where a neutral tone is needed. It ensures that the primary, secondary, and tertiary colors stand out without clashing.

### Summary

By understanding and correctly applying these color roles, you can create a visually cohesive and aesthetically pleasing design for your Shopify store. Each color setting is integral to maintaining a balanced and professional look, ensuring that all components work harmoniously together.

If you have any questions or need further assistance, please contact our customer support team.