Meaning
| Color | Means | Use for |
|---|---|---|
| Primary green (400–700) | Renovaré, and “you can act here” | Buttons, links, eyebrows, the brand’s dark bands |
| Brick #A43939 | Something went wrong | Form errors and error messages only — never decoration |
| Other accents | Nothing | Variety: panels, icon tiles, Navy and Plum bands |
| Neutrals | Nothing | Pages, borders, text |
Because accents carry no meaning, never use one to signal a program, a status, or a type of content. If something needs a label, use a badge.
Accent rotation
When a layout needs several accent colors (feature grid boxes, icon tiles, a run of bands), use them in this order and start again at the top. Ochre, Rust, Brick and Periwinkle stay out of the rotation.
1Navy#334657
2Plum#592E46
3Teal#558E99
4Amber#CC7829
Text and background pairs
Body text needs AA (4.5:1). “Large text only” pairs (3:1) are fine for text 24px and up, bold text 18.66px and up, icons and borders.
| Sample | Text on background | Use | Ratio | WCAG |
|---|---|---|---|---|
| Aa | Neutral 800 on Neutral 200 | Body text on the page | 13:1 | AA |
| Aa | Neutral 900 on Neutral 200 | Headings on the page | 17.8:1 | AA |
| Aa | Neutral 700 on Neutral 200 | Secondary text on the page | 8.1:1 | AA |
| Aa | Neutral 600 on Neutral 200 | Muted text: 24px+ only | 3.9:1 | Large text only |
| Aa | Primary 500 on Neutral 200 | Links and eyebrows on the page | 5.5:1 | AA |
| Aa | Primary 500 on White | Links on white | 6.3:1 | AA |
| Aa | Brick on White | Error messages | 6.5:1 | AA |
| Aa | White on Primary 500 | Primary button | 6.3:1 | AA |
| Aa | White on Primary 600 | Primary button, hover | 8.6:1 | AA |
| Aa | White on Primary 700 | Text on Green bands | 11.4:1 | AA |
| Aa | Primary 300 on Primary 700 | Eyebrows on Green bands | 6.4:1 | AA |
| Aa | Primary 400 on Primary 700 | Accents on Green bands: large text and icons only | 3.9:1 | Large text only |
| Aa | White on Navy | Text on Navy bands | 9.7:1 | AA |
| Aa | Primary 300 on Navy | Eyebrows on Navy bands | 5.5:1 | AA |
| Aa | White on Plum | Text on Plum bands | 11:1 | AA |
| Aa | Primary 300 on Plum | Eyebrows on Plum bands | 6.2:1 | AA |
| Aa | White on Teal | Icon tiles on Teal | 3.7:1 | Large text only |
| Aa | White on Amber | Icon tiles on Amber | 3.3:1 | Large text only |
| Aa | Neutral 900 on Ochre | Text on Ochre | 9.1:1 | AA |
| Aa | Primary 400 on Neutral 200 | Bright green as text on the page | 2.5:1 | Fails |
Rules
- Primary 400 (bright green) is for dark backgrounds, icons and underlines — never for text on light backgrounds.
- Neutral 600 is for large or decorative text only; use Neutral 700 for small secondary text.
- On Green, Navy and Plum bands, eyebrows use Primary 300.
- Never put white text on Ochre, Amber, Teal or Periwinkle at body size.