Colors

Citera routes every color choice through color schemes — see Understanding color schemes for the concept. This page is the settings reference.

Where colors live

All color settings are under Theme settings → Colors in the theme editor (gear icon, bottom-left).

Each color scheme has these settings, in order:

Setting	What it controls	Tips
Background	Section background color	Keep light backgrounds bright — pure white looks sterile, `#fafafa` looks warm
Background gradient	Optional overlay gradient	Use sparingly, best for hero-style sections
Text	Body text color	Rarely pure black — try `#222` for a softer read
Heading	Headline color	Set to match text or slightly darker
Link	Text-link color	Should be visibly different from body text
Solid button background	Primary button fill	Your main brand accent lives here
Solid button text	Text on the solid button	Contrast is critical — aim for 4.5:1
Outline button	Border color for outline buttons	Usually matches text color

To use your brand color as the primary button across the store:

Enter your brand’s hex code, e.g. #96bf48 (this is a green example).

Choose black or white — whichever has better contrast with your accent.

Every button using this scheme now shows your brand color.

Aim for at least 4.5:1 contrast between text and background. Use the WebAIM Contrast Checker to verify hex pairs.

Common failure modes:

Because each section picks a scheme, alternating schemes down a page creates visual rhythm. The classic pattern: