Colors

On Frame, we care a lot about design; that's why our palette is rich. Don’t feel overwhelmed, it is easy to use! Colors are divided into four groups: 

• Primary colors
• Product page colors
• Modal colors
• Error color

Primary colors: Contains the base colors used across the site.

• Primary background: This is the main background color found on the home page and all sub-pages, except the product page. The product page is the only page where the background color is different; you will find information on this below in the Product page colors group.
• Accent background 1: This is the background color for the testimonials section; it is also applied to some text colors on the store pick-up availability modal.
• Accent background 2: This is the background color for some sections like Icon Column With Text, Logo Banner, and Search.

Product page colors: Contains the colors used on the product page.

• Secondary background: This is the background color for the product page; it is also applied to buttons on pages using the primary background color.
• Secondary text: This is the main text color on the product page. It is also the background color for sub-sections like Predictive Search and Order History.
• Secondary label text:  This color is applied to the main navigation menu text, labels for fields, and light buttons.
• Call to action button: This is the background color for call-to-action buttons like 'Shop Now'. It is also applied to buttons on modals.

Modal colors: Contains the colors for modals and sections such as the Cart, Articles, Contact page, Login, Store Password page, Large Image with Text, Collapsible Content and Product Cards.

• Modal background: This is the background color of all modals; it is also applied to text on pages using the primary background color.
• Primary price text: This is applied to prices on Product Cards and also important labels.
• Secondary price text:  This is applied to the previous price of a discounted product.
• Secondary button: This is the background color of the variant picker on the product page; it also applies to some buttons.
• Secondary label text: This is the text color applied to secondary labels.

Error color: This is the color applied when an error occurs and is applied to messages, fields, or icons. It may be applied to the error text, field color, or error background color, depending on the style and placement of the error. We suggest a color in the red family. 

On Honey, colors are highly flexible and grouped in color schemes. A color scheme is a set of colors. This structure allows you to apply any color scheme to almost any section throughout your online store. Colors are divided into six groups: 

• Color scheme group 1
• Color scheme group 2
• Color scheme group 3
• Color scheme group 4
• Color scheme group 5
• Badges

Color scheme group: A color scheme group allows you to assign colors to elements in a discrete color scheme. Then, this scheme can be individually applied to different sections across your theme. This provides you with ultimate flexibility in maintaining your brand standards online.

• Background: This is the primary background color.
• Primary text: This is the primary color text. Select a color that significantly contrasts with the background to meet ADA accessibility rules. If you are not sure, use this tool.
• Secondary foreground: This is a secondary color text. Select a color that significantly contrasts with the background to meet ADA accessibility rules. If you are not sure, use this tool.
• Button background: This is the button color background of any buttons to which this group is assigned. Do not select the same color as the background.
  • Note: On secondary buttons (aka 'ghost buttons'), this color is applied to the button border and button text.
• Button text: This is the text color on primary, solid buttons. Select a color that significantly contrasts with the button background to meet ADA accessibility rules. If you are not sure, use this tool.
• Error text: This is the color applied to any error messages that may appear. It may be applied to the error text, field color, or error background color, depending on the style and placement of the error. We suggest a color in the red family. 

Note: For sections without a background, such as Collage, there is a Text color dropdown field inside the section settings. This will change the text and button color of the section.

Badges: This group includes colors for sale prices, promo tags, and stock badges.

• Sale price text: This is the color for sale prices across the theme.
• Promo tag: When enabled, promo tags are visible on the product page and the Featured product section. To learn how to add promo tags to your products, please visit badges and promotional tags. You have two options for customizing the color:
  • Promo tag background
  • Promo tag text

• In stock: This badge is visible when a product has stock available to sell and the 'Show stock status' option is enabled. You have two options for customizing the color:
  • In stock badge background
  • In stock badge text