Primary palette
Two colors do the work. Green leads; teal supports. Everything else on this page exists to make those two look good.
| Swatch | Name | Hex | Where it goes |
|---|---|---|---|
| Primary green | #61A244 |
The brand stripe, headline accents, large numerals, icons, and fills under dark text. Not for small text on white. | |
| Accent teal | #378494 |
Hover states, link underlines, chart lines, secondary emphasis. Never the dominant fill on a page. |
Supporting greens
When something needs a green background, it gets one of these, not a lightened primary. Dark text on either passes comfortably.
| Swatch | Name | Hex | Where it goes |
|---|---|---|---|
| Soft green | #9AC286 |
Module fills, highlighted rows, secondary cards. | |
| Pale green | #C0DCB4 |
Tags, icon chips, callout backgrounds, table header rows. |
Neutrals
Grey is structure, not voice. Rules, borders, footers, disabled states, and nothing you have to read.
| Swatch | Name | Hex | Where it goes |
|---|---|---|---|
| Ink | #231F20 |
Body text and headings. The site's text color, not pure black. | |
| Light grey | #E4E4E3 |
Borders, rules, footer backgrounds. | |
| Mid grey | #949494 |
Disabled states, dashed outlines, icons. Not text. | |
| White | #FFFFFF |
The ground. Pages are white first. |
How to use it
Draft rules. Marketing to confirm before this guide is cited in a review.
- Green leads. One primary-green moment per screen: the stripe, the headline accent, the number that matters. If everything is green, nothing is.
- Teal supports. Hover, link underlines, secondary emphasis, chart lines. It never becomes the dominant fill.
- Fills stick to the greens. Module and card backgrounds use soft or pale green with dark text. Not grey, not teal.
- Grey is structure. Light grey for rules, borders, and footers; mid grey for disabled states and dashed outlines. Neither is a text color.
- Dark on light. Body text is ink on white or on a green tint. Green and teal are never body-text colors on white. The next section is why.
Contrast, already checked
WCAG AA wants 4.5:1 for small text and 3:1 for large text (24px, or 19px bold) and for UI pieces like icons and borders. These are the brand pairs, computed, so nobody has to guess in a deck at 4:55 on a Friday.
| Pairing | Ratio | Small text | Large text and UI |
|---|---|---|---|
| Ink on white | 16.3:1 | Yes | Yes |
| Ink on light grey | 12.8:1 | Yes | Yes |
| Ink on pale green | 11.0:1 | Yes | Yes |
| Ink on soft green | 8.1:1 | Yes | Yes |
| Primary green on ink (dark backgrounds) | 5.3:1 | Yes | Yes |
| Accent teal on white, or white on teal | 4.3:1 | No, just under 4.5 | Yes |
| Primary green on white, or white on green | 3.1:1 | No | Yes |
| Mid grey on white | 3.0:1 | No | Borders and icons only |
| Soft green on white | 2.0:1 | No | No. A fill, not a mark |
The short version: on white, green and teal are for headlines, numerals, buttons, and icons, not sentences. On a dark ground, primary green reads fine as text, which is why the dark internal dashboards get away with it.
Don't
- Don't set paragraphs or captions in green or teal on white. The table above is the whole argument.
- Don't tint the primary green with opacity or gradients. Reach for soft or pale green instead.
- Don't introduce a green that's "close enough." Four Inc. has three greens and a teal. That is the set.
- Don't use green-versus-red to mean good-versus-bad in a chart. Use teal and grey, and label the series.
Downloads
Palette files for design tools and the PowerPoint theme will be linked here once they exist. [Link the .ase file] · [Link the .pptx theme]
Downloads
Every file linked in this guide, in one place.