Colour¶
Three colours come straight from the logo. A few more are derived from them so text stays readable. The rest is neutral.
Palette¶
From the logo¶
chili
#ff3030rgb(255 48 48)--cc-chiliThe brand red. Lit face of the chili. Buttons, highlights, the selected item.chili-shade
#e42020rgb(228 32 32)--cc-chili-shadeShaded face of the chili. Pressed and hover states, the second facet of a shape.leaf
#2eac00rgb(46 172 0)--cc-leafThe stem. Second brand colour. Success, 'go', small accents.Derived from the logo¶
chili-deep
#4c0710rgb(76 7 16)--cc-chili-deepVery dark chili. Hard shadows under red elements.chili-ink
#c81616rgb(200 22 22)--cc-chili-inkChili for text on light backgrounds.leaf-bright
#6fe33argb(111 227 58)--cc-leaf-brightLeaf for text, links and focus rings on dark backgrounds.leaf-ink
#1e7300rgb(30 115 0)--cc-leaf-inkLeaf for text and links on light backgrounds.Support¶
amber
#ffb347rgb(255 179 71)--cc-amberWarnings. Not a brand colour.amber-ink
#8a5200rgb(138 82 0)--cc-amber-inkWarning text on light backgrounds.Neutrals¶
black
#000000rgb(0 0 0)--cc-blackConsole screen background. Pixels that are off.ink-0
#07080crgb(7 8 12)--cc-ink-0Page background, dark theme.ink-1
#0c0f14rgb(12 15 20)--cc-ink-1Sunken areas, dark theme.ink-2
#10131argb(16 19 26)--cc-ink-2Cards and panels, dark theme. Body text, light theme.ink-3
#171b24rgb(23 27 36)--cc-ink-3Raised or hovered surfaces, dark theme.ink-4
#262c38rgb(38 44 56)--cc-ink-4Borders and dividers, dark theme.slate
#565e6ergb(86 94 110)--cc-slateSecondary text, light theme.mist
#9aa3b5rgb(154 163 181)--cc-mistSecondary text, dark theme.sand
#d8d3c7rgb(216 211 199)--cc-sandBorders and dividers, light theme.bone
#f4f1eargb(244 241 234)--cc-boneBody text, dark theme. Page background, light theme.paper
#ffffffrgb(255 255 255)--cc-paperCards and panels, light theme.on-chili
#140407rgb(20 4 7)--cc-on-chiliText and icons on a chili fill.How much of each¶
Use colour in about the same amounts as the logo does on a dark page.
| Share | Colour | Use |
|---|---|---|
| Most of the page | Neutrals | Backgrounds, text, borders. |
| A little | Chili | One main action per screen, the selected item, highlights. |
| Even less | Chili shade | The darker side of a red element. Never on its own. |
| A pinch | Leaf | Links, success, focus. Small things only. |
Red is for one thing at a time
If everything is red, nothing stands out. A screen should have one red button, not five.
Roles¶
Do not use the palette names in components. Use roles. A role says what a colour is for, and it changes with the theme.
| Role | Variable | Dark | Light |
|---|---|---|---|
| bg | --cc-bg |
ink-0 |
bone |
| surface | --cc-surface |
ink-2 |
paper |
| surface-raised | --cc-surface-raised |
ink-3 |
paper |
| surface-sunken | --cc-surface-sunken |
ink-1 |
sand |
| line | --cc-line |
ink-4 |
sand |
| text | --cc-text |
bone |
ink-2 |
| muted | --cc-muted |
mist |
slate |
| accent | --cc-accent |
chili |
chili |
| accent-shade | --cc-accent-shade |
chili-shade |
chili-shade |
| accent-deep | --cc-accent-deep |
chili-deep |
chili-deep |
| accent-text | --cc-accent-text |
chili |
chili-ink |
| on-accent | --cc-on-accent |
on-chili |
on-chili |
| link | --cc-link |
leaf-bright |
leaf-ink |
| focus | --cc-focus |
leaf-bright |
leaf-ink |
| success | --cc-success |
leaf-bright |
leaf-ink |
| warning | --cc-warning |
amber |
amber-ink |
| danger | --cc-danger |
chili |
chili-ink |
The dark theme is the default: Chili Platform, Chili Creator and the console are dark. The light theme is for long reading (the website, docs) and print.
Dark theme
Light theme
<html data-theme="light"> <!-- leave the attribute out for dark -->
Contrast¶
Every text role is checked against the page background and the card surface. The numbers are WCAG contrast ratios. Normal text needs 4.5:1. The build fails if a role drops below that.
| Theme | Text role | On bg |
On surface |
AA text (4.5:1) |
|---|---|---|---|---|
| dark | text | 17.75:1 | 16.47:1 | Pass |
| dark | muted | 7.89:1 | 7.33:1 | Pass |
| dark | accent-text | 5.45:1 | 5.06:1 | Pass |
| dark | link | 12.13:1 | 11.26:1 | Pass |
| dark | success | 12.13:1 | 11.26:1 | Pass |
| dark | warning | 11.24:1 | 10.43:1 | Pass |
| dark | danger | 5.45:1 | 5.06:1 | Pass |
| dark | on-accent on accent | 5.44:1 | Pass | |
| light | text | 16.47:1 | 18.58:1 | Pass |
| light | muted | 5.78:1 | 6.52:1 | Pass |
| light | accent-text | 5.2:1 | 5.86:1 | Pass |
| light | link | 5.31:1 | 5.99:1 | Pass |
| light | success | 5.31:1 | 5.99:1 | Pass |
| light | warning | 5.66:1 | 6.39:1 | Pass |
| light | danger | 5.2:1 | 5.86:1 | Pass |
| light | on-accent on accent | 5.44:1 | Pass | |
| console | text | 18.62:1 | 16.47:1 | Pass |
| console | muted | 8.28:1 | 7.33:1 | Pass |
| console | success | 7.02:1 | 6.21:1 | Pass |
| console | warning | 11.79:1 | 10.43:1 | Pass |
| console | danger | 5.72:1 | 5.06:1 | Pass |
| console | on-accent on accent | 5.44:1 | Pass |
Things to remember:
| Rule | Why |
|---|---|
Text on a chili fill is on-accent (near black), not white. |
White on chili is only 3.67:1. |
On a light page, red and green text use the -ink colours. |
chili on bone is 3.26:1 and leaf is 2.65:1. Too faint. |
Do not put chili-shade text on a dark page. |
4.31:1. It is a fill colour. |
| Never show state with colour alone. | Add an icon, a label or a marker. About 1 in 12 men cannot tell red from green well. |
On the console¶
The console has its own short list of roles. See Small screens.