Stone and Chalk

Almost no colour at all: chalky whites, stone greys and charcoal, so the content and photos carry every bit of hue.

calm
serious

The colours

Each colour has one job. The mock layout uses only pairs that pass AA, and the list shows every pair that is readable, measured rather than guessed.

Chalkbackground #f4f3f1
Plastersurface #fbfbfa
Charcoaltext #1d1d1b
River Stonemuted #5c5a56
Graphiteaccent #3a3936
Limestoneborder #d5d3ce

Sample page

A page in Stone and Chalk

Every word here is drawn in this palette's own colours, using only pairs that pass AA.

Main action

A card on the surface

Secondary details sit a step quieter than the main text.

A small mock layout drawn in the Stone and Chalk colours.

Accessible pairs

AA pairs (4.5:1 or more) suit body text; AA large pairs (3:1 or more) are for text 24px and larger.

Charcoal on Plaster16.3:1 (AA)
Plaster on Charcoal16.3:1 (AA)
Chalk on Charcoal15.2:1 (AA)
Charcoal on Chalk15.2:1 (AA)
Charcoal on Limestone11.3:1 (AA)
Limestone on Charcoal11.3:1 (AA)
Graphite on Plaster11.2:1 (AA)
Plaster on Graphite11.2:1 (AA)
Chalk on Graphite10.4:1 (AA)
Graphite on Chalk10.4:1 (AA)
Graphite on Limestone7.7:1 (AA)
Limestone on Graphite7.7:1 (AA)
Plaster on River Stone6.6:1 (AA)
River Stone on Plaster6.6:1 (AA)
Chalk on River Stone6.2:1 (AA)
River Stone on Chalk6.2:1 (AA)
Limestone on River Stone4.6:1 (AA)
River Stone on Limestone4.6:1 (AA)

Copy the idea

The Stone and Chalk recipe — its idea, colours, accessible pairs and rules — ready to paste into a design tool or an AI assistant, or as design tokens.

# Stone and Chalk — palette recipe

## The idea
- Almost no colour at all: chalky whites, stone greys and charcoal, so the content and photos carry every bit of hue.

## Use it for
- Photography and portfolios
- Architecture and interiors
- Product catalogues with colourful items

## Avoid it when
- Users need colour to tell states apart quickly
- The brand should feel playful or loud

## Colours
- Chalk (background): #f4f3f1
- Plaster (surface): #fbfbfa
- Charcoal (text): #1d1d1b
- River Stone (muted): #5c5a56
- Graphite (accent): #3a3936
- Limestone (border): #d5d3ce

## Accessible pairs
- Charcoal on Plaster — 16.3:1 (AA)
- Plaster on Charcoal — 16.3:1 (AA)
- Chalk on Charcoal — 15.2:1 (AA)
- Charcoal on Chalk — 15.2:1 (AA)
- Charcoal on Limestone — 11.3:1 (AA)
- Limestone on Charcoal — 11.3:1 (AA)
- Graphite on Plaster — 11.2:1 (AA)
- Plaster on Graphite — 11.2:1 (AA)
- Chalk on Graphite — 10.4:1 (AA)
- Graphite on Chalk — 10.4:1 (AA)
- Graphite on Limestone — 7.7:1 (AA)
- Limestone on Graphite — 7.7:1 (AA)
- Plaster on River Stone — 6.6:1 (AA)
- River Stone on Plaster — 6.6:1 (AA)
- Chalk on River Stone — 6.2:1 (AA)
- River Stone on Chalk — 6.2:1 (AA)
- Limestone on River Stone — 4.6:1 (AA)
- River Stone on Limestone — 4.6:1 (AA)

## Principles
- Let images and content supply the colour; the interface stays grey.
- Mark actions with weight, underline and graphite fills rather than hue.
- Use no more than three greys on one screen besides the text.
- Separate areas with space and the limestone line, not with shadows.

Design with the "Stone and Chalk" palette.
The idea: Almost no colour at all: chalky whites, stone greys and charcoal, so the content and photos carry every bit of hue.
It suits: Photography and portfolios.
It suits: Architecture and interiors.
It suits: Product catalogues with colourful items.
Do not choose it when: Users need colour to tell states apart quickly.
Do not choose it when: The brand should feel playful or loud.
Use #f4f3f1 (Chalk) as the background colour.
Use #fbfbfa (Plaster) as the surface colour.
Use #1d1d1b (Charcoal) as the text colour.
Use #5c5a56 (River Stone) as the muted colour.
Use #3a3936 (Graphite) as the accent colour.
Use #d5d3ce (Limestone) as the border colour.
Set body text only in pairs marked AA (at least 4.5:1); pairs marked AA large (at least 3:1) are for text 24px and larger.
Pair: Charcoal on Plaster — 16.3:1 (AA).
Pair: Plaster on Charcoal — 16.3:1 (AA).
Pair: Chalk on Charcoal — 15.2:1 (AA).
Pair: Charcoal on Chalk — 15.2:1 (AA).
Pair: Charcoal on Limestone — 11.3:1 (AA).
Pair: Limestone on Charcoal — 11.3:1 (AA).
Pair: Graphite on Plaster — 11.2:1 (AA).
Pair: Plaster on Graphite — 11.2:1 (AA).
Pair: Chalk on Graphite — 10.4:1 (AA).
Pair: Graphite on Chalk — 10.4:1 (AA).
Pair: Graphite on Limestone — 7.7:1 (AA).
Pair: Limestone on Graphite — 7.7:1 (AA).
Pair: Plaster on River Stone — 6.6:1 (AA).
Pair: River Stone on Plaster — 6.6:1 (AA).
Pair: Chalk on River Stone — 6.2:1 (AA).
Pair: River Stone on Chalk — 6.2:1 (AA).
Pair: Limestone on River Stone — 4.6:1 (AA).
Pair: River Stone on Limestone — 4.6:1 (AA).
Follow this rule: Let images and content supply the colour; the interface stays grey.
Follow this rule: Mark actions with weight, underline and graphite fills rather than hue.
Follow this rule: Use no more than three greys on one screen besides the text.
Follow this rule: Separate areas with space and the limestone line, not with shadows.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f4f3f1;
  --color-surface: #fbfbfa;
  --color-text: #1d1d1b;
  --color-muted: #5c5a56;
  --color-accent: #3a3936;
  --color-border: #d5d3ce;
}

Download brief (.md)

Where it fits

Use it for

Photography and portfolios
Architecture and interiors
Product catalogues with colourful items

Avoid it when

Users need colour to tell states apart quickly
The brand should feel playful or loud

Principles

Let images and content supply the colour; the interface stays grey.
Mark actions with weight, underline and graphite fills rather than hue.
Use no more than three greys on one screen besides the text.
Separate areas with space and the limestone line, not with shadows.

Back to all palettes