Chapter 3.0

Colour

Flat colour on pure white. One lead. Five plant groups. Four hardscape groups.

  1. 3.1Core colours
  2. 3.2Plant-group colours
  3. 3.3Hardscape colours
  4. 3.4How colour is used
  5. 3.5Contrast
  6. 3.6Which group a plant joins

3.1 · Core colours

Ink, Paper, Muted and Delta Teal.

Paper is pure white. It is never cream or grey. Ink is the colour of all text and data. Muted is for captions and labels.

Delta Teal is the lead colour. It is used for the home hero, actions and links.

Token names
ColourToken
Ink--wils-ink
Paper--wils-paper
Muted--wils-muted
Delta Teal--wils-lead
Teal 10 %--wils-lead-tint
Aa
Ink#121417RGB 18 20 23Text and data
Aa
Paper#FFFFFFRGB 255 255 255Ground. Pure white, never cream
Aa
Muted#575B63RGB 87 91 99Captions and labels only
Aa
Delta Teal#00666FRGB 0 102 111Lead: hero, links, hover
Aa
Teal 10 %#E6F0F1RGB 230 240 241Callouts and clear-space zones
Aa
Muted on Ink#A9ACB3RGB 169 172 179Captions on Ink

The four core colours, with the teal tint and the Muted that is used on Ink.

3.2 · Plant-group colours

Five groups, five colours.

Every plant belongs to one group. Each group has one colour, and a 10 % tint of it. There are no other shades.

Trees, Shrubs, Groundcovers and Climbers carry Paper text. Palms is the light field and carries Ink text. A tint carries Ink only.

Trees
Trees#16803CRGB 22 128 60Paper text on the field
10 % tint
#E8F2ECRGB 232 242 236Ink text only
Palms
Palms#F2A20CRGB 242 162 12Ink text on the field
10 % tint
#FEF6E7RGB 254 246 231Ink text only
Shrubs
Shrubs#C93A17RGB 201 58 23Paper text on the field
10 % tint
#FAEBE8RGB 250 235 232Ink text only
Groundcovers
Groundcovers#86C8F0RGB 134 200 240Ink text on the field
10 % tint
#F3FAFERGB 243 250 254Ink text only
Climbers
Climbers#B2176ERGB 178 23 110Paper text on the field
10 % tint
#F7E8F0RGB 247 232 240Ink text only

Five group fields, each with its 10 % tint.

Group dotTreesPalmsShrubsGroundcoversClimbers

The group dot is 10 px and round. It is the only round shape in the brand, and it always sits next to the group name.

3.3 · Hardscape colours

Four groups, four mineral colours.

Hardscape has four groups. Each group has one colour and a 10 % tint of it. Plants are living colours. Hardscape is mineral: sand, stone, deep water blue and weathered steel.

Surfaces carries Ink text. Edges & walls, Water & soil and Furniture & light carry Paper text. A tint carries Ink only.

Hardscape groups
GroupAreasColour
SurfacesPaving, play surfacesSandstone
Edges & wallsEdges and kerbs, walls and stepsGranite
Water & soilDrainage, tree pits and gratesCobalt
Furniture & lightStreet furniture, lightingCorten
Rule

The group colour always marks what the item is. A kerb is Granite. A drain is Cobalt. It never decorates anything else.

Sandstone
SandstoneSurfaces#D6B07ARGB 214 176 122Ink text on the field
10 % tint
#FBF7F2RGB 251 247 242Ink text only
Granite
GraniteEdges & walls#5B6470RGB 91 100 112Paper text on the field
10 % tint
#EFF0F1RGB 239 240 241Ink text only
Cobalt
CobaltWater & soil#1D4E9ERGB 29 78 158Paper text on the field
10 % tint
#E8EDF5RGB 232 237 245Ink text only
Corten
CortenFurniture & light#8C4A1FRGB 140 74 31Paper text on the field
10 % tint
#F4EDE9RGB 244 237 233Ink text only

Four hardscape fields, each with its 10 % tint.

Group dotSurfacesEdges & wallsWater & soilFurniture & light

The hardscape group dot is the same 10 px round dot. It always sits next to the group name.

3.4 · How colour is used

One lead. One group colour.

Each page has one lead colour, which is Delta Teal. It marks links, hover states, the lead field and countries with data. Buttons, including the search button, are Ink. A plant page also shows its own group colour, and only that one. A hardscape page does the same with its own group: Sandstone, Granite, Cobalt or Corten.

Colour is a flat field. There are no gradients, no shadows and no blends. Colour is never used as text.

Rule

The group colour is the item’s group, plant or hardscape. It never decorates anything else.

Albizia lebbeck
Height8–25 m
Spread6–18 m
Do

A group colour marks the plant’s group. A Trees plant uses Trees.

Phoenix dactylifera
Height8–25 m
Spread6–18 m
Do

Ink text on Palms. Always.

SearchTree
Do

Buttons are Ink. The dot sits next to the group name.

Shrubs
Don’t

Never set text in a group colour.

PlantsCountries
Don’t

Two leads on one page. Pick one.

Palms
Don’t

Paper text on Palms.

Three correct uses, then three mistakes.

3.5 · Contrast

Every text pair passes 4.5 to 1.

Every text and ground pair in the tokens meets WCAG AA. The lowest allowed pair is Paper on Trees, at 5.02 to 1. Ink on any 10 % tint, plant or hardscape, passes AAA at 15.70 to 1 or more.

The pairs below are the only ones to use. The second set breaks the rules. Never use it.

Rule

A group dot never stands alone. Palms, Groundcovers and Sandstone are pale on white, so the dot always has the group name beside it.

Use these

Aa
Ink on Paper18.45:1 · AAA
Aa
Muted on Paper6.81:1 · AA
Aa
Delta Teal on Paper6.71:1 · AA
Aa
Paper on Delta Teal6.71:1 · AA
Aa
Ink on Teal 10 %15.90:1 · AAA
Aa
Paper on Trees5.02:1 · AA
Aa
Ink on Palms8.74:1 · AAA
Aa
Paper on Shrubs5.12:1 · AA
Aa
Paper on Groundcovers1.82:1 · Owner choice
Aa
Paper on Climbers6.48:1 · AA

Hardscape, use these

Aa
Ink on Sandstone9.09:1 · AAA
Aa
Paper on Granite6.00:1 · AA
Aa
Paper on Cobalt7.97:1 · AAA
Aa
Paper on Corten6.74:1 · AA

Ten pairs that pass, then four hardscape pairs. AAA is 7 to 1 or more. AA is 4.5 to 1 or more. Granite, Cobalt and Corten stand clear of white at 6.00 to 1 or more. Sandstone is 2.03 to 1 on white, so its dot always has the name beside it.

Never use these

Aa
Paper on Palms2.11:1 · Fails
Aa
Ink on Climbers2.85:1 · Fails
Aa
Ink on Shrubs3.60:1 · Fails
Aa
Delta Teal on Ink2.75:1 · Fails
Aa
Muted on Trees1.36:1 · Fails

Hardscape, never use these

Aa
Paper on Sandstone2.03:1 · Fails
Aa
Ink on Granite3.08:1 · Fails
Aa
Ink on Cobalt2.32:1 · Fails
Aa
Ink on Corten2.74:1 · Fails

Six pairs that fail, then four hardscape pairs. They are too faint to read.

3.6 · Which group a plant joins

Sixteen plant types, five groups.

The data sheet records one of sixteen plant types for every plant. The brand shows five groups. This table is the only mapping, so a succulent is always a Shrub and a cycad is always a Palm, on every page and in every file.

Rule

The group comes from the plant type, never from how a plant looks in one photograph.

Plant type to group
GroupPlant types in the data
Treestree
Palmspalm, cycad
Shrubsshrub, subshrub, succulent, cactus, grass and bamboo
Groundcoversgroundcover, turf, herbaceous perennial, annual and biennial, bulb, fern, aquatic
Climbersclimber

On the website the Groundcovers filter reads “Ground covers”, two words. In the brand it is one word.