Sage and clay

Dusty sage leaves and unglazed clay, softened almost to grey, for a calm, grown-up feel that never shouts.

calm
warm
serious

The colours

7 colours, each with a role, then the palette at work on a small page.

Dry sagebackground#eceee6
Linensurface#f7f8f3
Olive barktext#2a3027
Lichenmuted#575f52
Deep sageaccent#52623f
Raw clayaccent-2#e3cdb3
Dried grassborder#cfd3c4

Text on background: 11.57:1 — passes AA

Spring open days

A garden worth the walk

Paths, ponds and a glasshouse full of ferns, open every weekend from April to June.

Plan a visit

New

The late tulip border

Two hundred bulbs, planted by volunteers last autumn.

A made-up page in this palette. Every text colour reaches at least 4.5:1 on its background; the heading, at 28px, may use a 3:1 pair.

Copy the idea

Take the palette with you as a brief for a person, as instructions for an AI assistant, or as design tokens: the colours, their roles and the pairs that are safe for text.

# Sage and clay — palette recipe

## The idea

- Dusty sage leaves and unglazed clay, softened almost to grey, for a calm, grown-up feel that never shouts.
- Mood: calm, warm, serious

## Use it for

- Wellbeing and slow-living brands
- Interior and homeware shops
- Landscape and garden studios

## Avoid it when

- The product needs urgency or excitement
- Calls to action must stand out strongly

## Colours

- Dry sage (background): #eceee6
- Linen (surface): #f7f8f3
- Olive bark (text): #2a3027
- Lichen (muted): #575f52
- Deep sage (accent): #52623f
- Raw clay (accent-2): #e3cdb3
- Dried grass (border): #cfd3c4

## Accessible pairs

- Linen on Olive bark — 12.7:1 (AA)
- Olive bark on Linen — 12.7:1 (AA)
- Dry sage on Olive bark — 11.6:1 (AA)
- Olive bark on Dry sage — 11.6:1 (AA)
- Dried grass on Olive bark — 8.9:1 (AA)
- Olive bark on Dried grass — 8.9:1 (AA)
- Olive bark on Raw clay — 8.8:1 (AA)
- Raw clay on Olive bark — 8.8:1 (AA)
- Lichen on Linen — 6.2:1 (AA)
- Linen on Lichen — 6.2:1 (AA)
- Deep sage on Linen — 6.2:1 (AA)
- Linen on Deep sage — 6.2:1 (AA)
- Dry sage on Lichen — 5.7:1 (AA)
- Lichen on Dry sage — 5.7:1 (AA)
- Deep sage on Dry sage — 5.6:1 (AA)
- Dry sage on Deep sage — 5.6:1 (AA)
- Dried grass on Lichen — 4.4:1 (AA large)
- Lichen on Dried grass — 4.4:1 (AA large)
- Deep sage on Dried grass — 4.3:1 (AA large)
- Dried grass on Deep sage — 4.3:1 (AA large)
- Lichen on Raw clay — 4.3:1 (AA large)
- Raw clay on Lichen — 4.3:1 (AA large)
- Deep sage on Raw clay — 4.3:1 (AA large)
- Raw clay on Deep sage — 4.3:1 (AA large)

## Principles

- Dry sage covers about 65% of the page and linen about 25%, for cards and content panels
- Deep sage is the accent for buttons and links, around 5%; keep every colour low in saturation
- Raw clay marks tags and small highlights, with olive bark text on it
- Lichen for captions, labels and secondary details
- Let soft dried grass lines and generous space do the work instead of strong contrast in colour

Design with the "Sage and clay" palette.

The idea: Dusty sage leaves and unglazed clay, softened almost to grey, for a calm, grown-up feel that never shouts.
The mood: calm, warm, serious.

It suits:
- Wellbeing and slow-living brands
- Interior and homeware shops
- Landscape and garden studios
It is a poor fit when:
- The product needs urgency or excitement
- Calls to action must stand out strongly

Use these colours, each in its role:
- Dry sage (background): #eceee6
- Linen (surface): #f7f8f3
- Olive bark (text): #2a3027
- Lichen (muted): #575f52
- Deep sage (accent): #52623f
- Raw clay (accent-2): #e3cdb3
- Dried grass (border): #cfd3c4

Set text only in these colour pairs (text on background); use the ones marked (AA large) only for text at least 24px, or 18.66px bold:
- Linen on Olive bark — 12.7:1 (AA)
- Olive bark on Linen — 12.7:1 (AA)
- Dry sage on Olive bark — 11.6:1 (AA)
- Olive bark on Dry sage — 11.6:1 (AA)
- Dried grass on Olive bark — 8.9:1 (AA)
- Olive bark on Dried grass — 8.9:1 (AA)
- Olive bark on Raw clay — 8.8:1 (AA)
- Raw clay on Olive bark — 8.8:1 (AA)
- Lichen on Linen — 6.2:1 (AA)
- Linen on Lichen — 6.2:1 (AA)
- Deep sage on Linen — 6.2:1 (AA)
- Linen on Deep sage — 6.2:1 (AA)
- Dry sage on Lichen — 5.7:1 (AA)
- Lichen on Dry sage — 5.7:1 (AA)
- Deep sage on Dry sage — 5.6:1 (AA)
- Dry sage on Deep sage — 5.6:1 (AA)
- Dried grass on Lichen — 4.4:1 (AA large)
- Lichen on Dried grass — 4.4:1 (AA large)
- Deep sage on Dried grass — 4.3:1 (AA large)
- Dried grass on Deep sage — 4.3:1 (AA large)
- Lichen on Raw clay — 4.3:1 (AA large)
- Raw clay on Lichen — 4.3:1 (AA large)
- Deep sage on Raw clay — 4.3:1 (AA large)
- Raw clay on Deep sage — 4.3:1 (AA large)

Follow these principles:
- Dry sage covers about 65% of the page and linen about 25%, for cards and content panels
- Deep sage is the accent for buttons and links, around 5%; keep every colour low in saturation
- Raw clay marks tags and small highlights, with olive bark text on it
- Lichen for captions, labels and secondary details
- Let soft dried grass lines and generous space do the work instead of strong contrast in colour

Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #eceee6;
  --color-surface: #f7f8f3;
  --color-text: #2a3027;
  --color-muted: #575f52;
  --color-accent: #52623f;
  --color-accent-2: #e3cdb3;
  --color-border: #cfd3c4;
}

Download brief (.md)

Accessible pairs

Every pair of colours that is readable as text, strongest first. AA pairs (4.5:1 or more) work at any size; AA large pairs (3:1 or more) only for text of 24px, or 18.66px bold.

Text on background	Contrast	Level
Linen on Olive bark	12.7:1	AA
Olive bark on Linen	12.7:1	AA
Dry sage on Olive bark	11.6:1	AA
Olive bark on Dry sage	11.6:1	AA
Dried grass on Olive bark	8.9:1	AA
Olive bark on Dried grass	8.9:1	AA
Olive bark on Raw clay	8.8:1	AA
Raw clay on Olive bark	8.8:1	AA
Lichen on Linen	6.2:1	AA
Linen on Lichen	6.2:1	AA
Deep sage on Linen	6.2:1	AA
Linen on Deep sage	6.2:1	AA
Dry sage on Lichen	5.7:1	AA
Lichen on Dry sage	5.7:1	AA
Deep sage on Dry sage	5.6:1	AA
Dry sage on Deep sage	5.6:1	AA
Dried grass on Lichen	4.4:1	AA large
Lichen on Dried grass	4.4:1	AA large
Deep sage on Dried grass	4.3:1	AA large
Dried grass on Deep sage	4.3:1	AA large
Lichen on Raw clay	4.3:1	AA large
Raw clay on Lichen	4.3:1	AA large
Deep sage on Raw clay	4.3:1	AA large
Raw clay on Deep sage	4.3:1	AA large

Where it fits

Use it for

Wellbeing and slow-living brands
Interior and homeware shops
Landscape and garden studios

Avoid it when

The product needs urgency or excitement
Calls to action must stand out strongly

Principles

How much of each colour to use, and where.

Dry sage covers about 65% of the page and linen about 25%, for cards and content panels
Deep sage is the accent for buttons and links, around 5%; keep every colour low in saturation
Raw clay marks tags and small highlights, with olive bark text on it
Lichen for captions, labels and secondary details
Let soft dried grass lines and generous space do the work instead of strong contrast in colour