Design
Colors and color schemes
How color schemes work in Vellora, what each scheme color controls, and how to keep text readable when you change them.
Vellora colors everything through color schemes. A scheme is a set of seven colors: a background, an optional gradient, text, an accent and three button colors. Each section picks a scheme, so you can change the look of one section without touching the rest of the store.
Edit your color schemes
- In the theme editor, open Theme settings → Colors.
- Select a scheme to edit its colors, or add a new one.
- To use a scheme, select a section and pick it in that section's Color scheme setting.
Changing a scheme updates every section that uses it, right away. That is the main reason to edit schemes rather than add new ones for every section: a store with four or five well-chosen schemes is easier to keep consistent.
What each color controls
| Color | Where it shows |
|---|---|
| Background | The background of sections, drawers, pop-ups and cards that use the scheme. |
| Background gradient | Replaces the solid background when you set one. Leave it empty for a flat color. |
| Text | Headings, body text and icons. |
| Accent | Small details: eyebrow labels above headings, links inside rich text, star ratings, numbered list numbers, icons in trust badges and multicolumn, the free shipping progress bar and form messages. |
| Solid button background | The fill of solid buttons, such as Add to cart. |
| Solid button label | The text on solid buttons. |
| Outline button label and border | The text and border of outline buttons. On hover, the button fills with this color. |
The theme also mixes your text and background colors to make borders, muted text such as captions, and light surfaces such as image placeholders. You don't set these yourself, so they always match the scheme.
How schemes are applied
- Scheme 1 is the base of every page. It colors the page wherever a section doesn't set its own scheme, and it's used for quick view and product pop-ups such as a size guide.
- The header scheme also colors the dropdown and mega menus, the mobile menu drawer and the search panel.
- The cart drawer has its own scheme. Select Cart drawer in the theme editor to change it.
- Some sections use more than one scheme. For example, Hero collage has separate schemes for the heading, the text panel and the section; Testimonials has one for the section and one for the cards; Promotion cards and promotion tiles in the product grid set a scheme per card.
- Badges don't use schemes. Set the sale and sold out badge colors under Theme settings → Badges.
- Quick add buttons on product images are always white with dark text, so they stay readable on any photo.
The preset schemes
Each preset ships with five schemes. Use them as a starting point and adjust them to your brand.
Vellora
| Scheme | Background | Text | Accent | Solid button |
|---|---|---|---|---|
| Scheme 1 | #FFFFFF white |
#17201F |
#0F5C58 |
#0F5C58 |
| Scheme 2 | #F3F1EC bone |
#17201F |
#0F5C58 |
#17201F |
| Scheme 3 | #10302E deep moss |
#F6F4EF |
#9FE0D5 |
#F6F4EF |
| Scheme 4 | #E4EFEC pale sage |
#10302E |
#0B4743 |
#0F5C58 |
| Scheme 5 | #C9A57A oak |
#1F1A14 |
#1F1A14 |
#1F1A14 |
Sorrel
| Scheme | Background | Text | Accent | Solid button |
|---|---|---|---|---|
| Scheme 1 | #FBF7F2 cream |
#2B211C |
#9A4A2F |
#2B211C |
| Scheme 2 | #F2E6DA sand |
#2B211C |
#9A4A2F |
#9A4A2F |
| Scheme 3 | #5A2E21 clay |
#FBF1E8 |
#F2C7A9 |
#FBF1E8 |
| Scheme 4 | #E6E3D3 sage |
#2B2A1F |
#5B6236 |
#5B6236 |
| Scheme 5 | #FFFFFF white |
#2B211C |
#9A4A2F |
#2B211C |
Graphite
| Scheme | Background | Text | Accent | Solid button |
|---|---|---|---|---|
| Scheme 1 | #FFFFFF white |
#0A0A0A |
#0A0A0A |
#0A0A0A |
| Scheme 2 | #EDEDEA concrete |
#0A0A0A |
#0A0A0A |
#0A0A0A |
| Scheme 3 | #0A0A0A black |
#FFFFFF |
#D4FF3A |
#D4FF3A |
| Scheme 4 | #D4FF3A acid lime |
#0A0A0A |
#0A0A0A |
#0A0A0A |
| Scheme 5 | #1C1C1C charcoal |
#FFFFFF |
#D4FF3A |
#FFFFFF |
In all three presets, the text, accent and button colors of every scheme meet the WCAG AA contrast ratio of 4.5:1 against their background.
Keep text readable
When you change a color, check that text still stands out from what's behind it. WCAG AA, the level most accessibility guidelines ask for, needs:
- 4.5:1 for normal text, including eyebrow labels, captions, links and button labels.
- 3:1 for large text (about 24 px and up, or 19 px bold) and for borders of controls such as outline buttons and inputs.
Check these pairs in every scheme you edit:
- Text on background
- Accent on background (eyebrows are small, so they need 4.5:1)
- Solid button label on solid button background
- Outline button label on background
Any free contrast checker works: paste the two hex values and read the ratio.
Text over images
Image banner and Slideshow put text on top of a photo. Their Color scheme sets the text color and the color of the overlay, and Overlay opacity sets how strong the overlay is. If text is hard to read, raise the overlay opacity or choose a photo with a calmer area behind the text.
Hero collage lets you pick a Heading color scheme for the text on the main image. Choose one that contrasts with the image. Split hero places its heading on a solid band, so it stays readable over any photo.