Design style

Organic natural

Grown, not built: warm earthy colours, soft irregular shapes, a gentle serif and a feeling of paper and plants.

warm
calm
friendly
airy
timeless
warm

See it live

Fernhollow Farm is a fictional organic farm shop page, written for this library to show the Organic naturalstyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

The Organic natural recipe — its principles, palette, type, spacing and rules — ready to paste into a design tool or an AI assistant.

# Organic natural — style recipe

## The idea
- Grown, not built: warm earthy colours, soft irregular shapes, a gentle serif and a feeling of paper and plants.

## Use it when
- Food, farming and gardening brands
- Sustainable and handmade products
- Places and experiences outdoors

## Avoid it when
- The product is high-tech or futuristic
- The brand must look strictly corporate

## Principles
- Earth colours: clay, moss, oat and bark
- Soft, irregular blob shapes instead of rectangles
- A friendly serif for headings, an open sans for text
- Generous space and a slow reading pace
- Hand-drawn leaf or line accents, used sparingly
- Nothing perfectly symmetrical

## Colour
- Oat (background): #f4efe6
- Linen sack (surface): #e8dfcf
- Forest (text): #2f3a2b
- Moss grey (muted): #56604f
- Terracotta (accent): #9a5528
- Olive (accent-2): #7a8c4f
- Twine (border): #d6cbb6
- Text on background contrast: 10.41:1 — passes AA

## Type
- Headings: Lora, weights 500 and 600 — Soft, calligraphic serif; sentence case
- Body: Work Sans, weights 400 and 500 — Open and friendly; relaxed line height
- Scale: 14px, 17px, 20px, 28px, 40px, 60px
- A warm serif with a plain sans; never all caps.

## Spacing and shape
- Base unit: 8px
- Spacing steps: 8px, 16px, 32px, 56px, 96px
- Airy sections; shapes overlap section edges.
- Corner radii: 24px, 48px
- Borders: Rarely; soft colour fields separate
- Shadows: None or very soft and warm

## Imagery and motion
- Imagery: Natural textures, plants and simple hand-drawn line illustrations.
- Motion: Slow drifts and gentle fades.

## Do
- Use irregular rounded shapes
- Keep colours muted and earthy
- Let one leaf or line accent lead the eye

## Don't
- No neon or saturated colours
- No hard grids of identical boxes
- No glossy effects

Design in the "Organic natural" style.
The idea: Grown, not built: warm earthy colours, soft irregular shapes, a gentle serif and a feeling of paper and plants.
It suits: Food, farming and gardening brands.
It suits: Sustainable and handmade products.
It suits: Places and experiences outdoors.
Do not choose it when: The product is high-tech or futuristic.
Do not choose it when: The brand must look strictly corporate.
Follow this rule: Earth colours: clay, moss, oat and bark.
Follow this rule: Soft, irregular blob shapes instead of rectangles.
Follow this rule: A friendly serif for headings, an open sans for text.
Follow this rule: Generous space and a slow reading pace.
Follow this rule: Hand-drawn leaf or line accents, used sparingly.
Follow this rule: Nothing perfectly symmetrical.
Use #f4efe6 (Oat) as the background colour.
Use #e8dfcf (Linen sack) as the surface colour.
Use #2f3a2b (Forest) as the text colour.
Use #56604f (Moss grey) as the muted colour.
Use #9a5528 (Terracotta) as the accent colour.
Use #7a8c4f (Olive) as the accent-2 colour.
Use #d6cbb6 (Twine) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 10.41:1.
Use Lora in weights 500 and 600 for headings: Soft, calligraphic serif; sentence case.
Use Work Sans in weights 400 and 500 for body text: Open and friendly; relaxed line height.
Use only these type sizes: 14px, 17px, 20px, 28px, 40px, 60px.
Type: A warm serif with a plain sans; never all caps.
Space things on a 8px base with the steps 8px, 16px, 32px, 56px, 96px.
Spacing: Airy sections; shapes overlap section edges.
Use corner radii of 24px, 48px.
Borders: Rarely; soft colour fields separate.
Shadows: None or very soft and warm.
Imagery: Natural textures, plants and simple hand-drawn line illustrations.
Motion: Slow drifts and gentle fades.
Do: Use irregular rounded shapes.
Do: Keep colours muted and earthy.
Do: Let one leaf or line accent lead the eye.
Avoid: neon or saturated colours.
Avoid: hard grids of identical boxes.
Avoid: glossy effects.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f4efe6;
  --color-surface: #e8dfcf;
  --color-text: #2f3a2b;
  --color-muted: #56604f;
  --color-accent: #9a5528;
  --color-accent-2: #7a8c4f;
  --color-border: #d6cbb6;
  --font-heading: "Lora", serif;
  --font-body: "Work Sans", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 56px;
  --space-5: 96px;
  --radius-1: 24px;
  --radius-2: 48px;
}

Download brief (.md)Download tokens (.css)

The recipe

The idea

Grown, not built: warm earthy colours, soft irregular shapes, a gentle serif and a feeling of paper and plants.

Use it when

Food, farming and gardening brands
Sustainable and handmade products
Places and experiences outdoors

Avoid it when

The product is high-tech or futuristic
The brand must look strictly corporate

Principles

Earth colours: clay, moss, oat and bark
Soft, irregular blob shapes instead of rectangles
A friendly serif for headings, an open sans for text
Generous space and a slow reading pace
Hand-drawn leaf or line accents, used sparingly
Nothing perfectly symmetrical

Colour

Oat (background): #f4efe6
Linen sack (surface): #e8dfcf
Forest (text): #2f3a2b
Moss grey (muted): #56604f
Terracotta (accent): #9a5528
Olive (accent-2): #7a8c4f
Twine (border): #d6cbb6
Text on background contrast: 10.41:1 — passes AA

Type

Headings: Lora, weights 500 and 600 — Soft, calligraphic serif; sentence case
Body: Work Sans, weights 400 and 500 — Open and friendly; relaxed line height
Scale: 14px, 17px, 20px, 28px, 40px, 60px
A warm serif with a plain sans; never all caps.

Spacing and shape

Base unit: 8px
Spacing steps: 8px, 16px, 32px, 56px, 96px
Airy sections; shapes overlap section edges.
Corner radii: 24px, 48px
Borders: Rarely; soft colour fields separate
Shadows: None or very soft and warm

Imagery and motion

Imagery: Natural textures, plants and simple hand-drawn line illustrations.
Motion: Slow drifts and gentle fades.

Do

Use irregular rounded shapes
Keep colours muted and earthy
Let one leaf or line accent lead the eye

Don't

No neon or saturated colours
No hard grids of identical boxes
No glossy effects

Similar styles

Styles that share the most of Organic natural's mood, density, era and warmth.

Palette

Oatbackground #f4efe6
Linen sacksurface #e8dfcf
Foresttext #2f3a2b
Moss greymuted #56604f
Terracottaaccent #9a5528
Oliveaccent-2 #7a8c4f
Twineborder #d6cbb6

Text on background: 10.41:1 — passes AA

Type

Headings · Lora · 500, 600

The quick brown fox jumps over the lazy dog

Soft, calligraphic serif; sentence case

Body · Work Sans · 400, 500

The quick brown fox jumps over the lazy dog

Open and friendly; relaxed line height

60pxThe quick brown fox jumps over the lazy dog
40pxThe quick brown fox jumps over the lazy dog
28pxThe quick brown fox jumps over the lazy dog
20pxThe quick brown fox jumps over the lazy dog
17pxThe quick brown fox jumps over the lazy dog
14pxThe quick brown fox jumps over the lazy dog

A warm serif with a plain sans; never all caps.

Spacing and shape

Spacing on a 8px base

8px
16px
32px
56px
96px

Airy sections; shapes overlap section edges.

Corners, borders and shadows

24px
48px

Borders: Rarely; soft colour fields separate
Shadows: None or very soft and warm

Do and don't

Do

Use irregular rounded shapes
Keep colours muted and earthy
Let one leaf or line accent lead the eye

Don't

No neon or saturated colours
No hard grids of identical boxes
No glossy effects

Compare with…

See Organic natural side by side with another style, and what differs.

Organic natural

See it live

Picked this morning, on your table tonight.

In the shop this week

Purple sprouting broccoli

Crown prince squash

Rainbow chard

Duck eggs

Russet apples

How the farm works

We grow slowly

The soil comes first

Short trips only

Come and visit

A weekly vegetable box

Copy the idea

The recipe

The idea

Use it when

Avoid it when

Principles

Colour

Type

Spacing and shape

Imagery and motion

Do

Don't

Similar styles

Palette

Type

Spacing and shape

Spacing on a 8px base

Corners, borders and shadows

Do and don't

Do

Don't

Compare with…