Design style

Soft minimal

Calm and airy: lots of space, soft neutral colours, gentle rounded corners and one quiet accent.

calm
friendly
airy
contemporary
neutral

See it live

Hushfield is a fictional meditation app landing page, written for this library to show the Soft minimalstyle. Switch the width to see it at phone, tablet and desktop size.

Open the example on its own

Copy the idea

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

# Soft minimal — style recipe

## The idea
- Calm and airy: lots of space, soft neutral colours, gentle rounded corners and one quiet accent.

## Use it when
- Wellness, lifestyle and calm products
- Apps that want to feel simple
- Brands that want to feel gentle and modern

## Avoid it when
- The brand needs energy or loudness
- Pages must show a lot of information at once

## Principles
- Generous white space around everything
- Off-white and soft grey surfaces instead of pure white
- Gentle radius on cards and buttons
- One muted accent colour, used for actions only
- Medium-weight sans type, never heavy
- Few elements per screen; one message at a time

## Colour
- Mist (background): #f7f7f5
- White (surface): #ffffff
- Soft black (text): #2b2b2b
- Stone (muted): #5f5f5f
- Sage (accent): #4e7166
- Haze (border): #e4e4e0
- Text on background contrast: 13.20:1 — passes AA

## Type
- Headings: Manrope, weights 600 — Medium-bold, generous tracking at small sizes
- Body: Manrope, weights 400 — Light grey-black, roomy line height
- Scale: 14px, 16px, 18px, 24px, 36px, 52px
- One friendly geometric sans; small steps between sizes.

## Spacing and shape
- Base unit: 8px
- Spacing steps: 8px, 16px, 32px, 64px, 128px
- Big, consistent gaps; sections breathe.
- Corner radii: 12px, 20px
- Borders: 1 px haze borders or none
- Shadows: Very soft and wide, low opacity

## Imagery and motion
- Imagery: Soft photography or simple abstract shapes in muted tones.
- Motion: Slow, eased fades and gentle rises.

## Do
- Leave more space than feels necessary
- Use the accent only for the main action
- Keep each section to one idea

## Don't
- No heavy black type
- No sharp corners next to round ones
- No more than one accent

Design in the "Soft minimal" style.
The idea: Calm and airy: lots of space, soft neutral colours, gentle rounded corners and one quiet accent.
It suits: Wellness, lifestyle and calm products.
It suits: Apps that want to feel simple.
It suits: Brands that want to feel gentle and modern.
Do not choose it when: The brand needs energy or loudness.
Do not choose it when: Pages must show a lot of information at once.
Follow this rule: Generous white space around everything.
Follow this rule: Off-white and soft grey surfaces instead of pure white.
Follow this rule: Gentle radius on cards and buttons.
Follow this rule: One muted accent colour, used for actions only.
Follow this rule: Medium-weight sans type, never heavy.
Follow this rule: Few elements per screen; one message at a time.
Use #f7f7f5 (Mist) as the background colour.
Use #ffffff (White) as the surface colour.
Use #2b2b2b (Soft black) as the text colour.
Use #5f5f5f (Stone) as the muted colour.
Use #4e7166 (Sage) as the accent colour.
Use #e4e4e0 (Haze) as the border colour.
Keep text on the background at least 4.5:1 contrast (WCAG AA); this palette gives 13.20:1.
Use Manrope in weights 600 for headings: Medium-bold, generous tracking at small sizes.
Use Manrope in weights 400 for body text: Light grey-black, roomy line height.
Use only these type sizes: 14px, 16px, 18px, 24px, 36px, 52px.
Type: One friendly geometric sans; small steps between sizes.
Space things on a 8px base with the steps 8px, 16px, 32px, 64px, 128px.
Spacing: Big, consistent gaps; sections breathe.
Use corner radii of 12px, 20px.
Borders: 1 px haze borders or none.
Shadows: Very soft and wide, low opacity.
Imagery: Soft photography or simple abstract shapes in muted tones.
Motion: Slow, eased fades and gentle rises.
Do: Leave more space than feels necessary.
Do: Use the accent only for the main action.
Do: Keep each section to one idea.
Avoid: heavy black type.
Avoid: sharp corners next to round ones.
Avoid: more than one accent.
Apply the idea and the rules above; do not copy any existing website.

:root {
  --color-background: #f7f7f5;
  --color-surface: #ffffff;
  --color-text: #2b2b2b;
  --color-muted: #5f5f5f;
  --color-accent: #4e7166;
  --color-border: #e4e4e0;
  --font-heading: "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;
  --space-5: 128px;
  --radius-1: 12px;
  --radius-2: 20px;
}

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

The recipe

The idea

Calm and airy: lots of space, soft neutral colours, gentle rounded corners and one quiet accent.

Use it when

Wellness, lifestyle and calm products
Apps that want to feel simple
Brands that want to feel gentle and modern

Avoid it when

The brand needs energy or loudness
Pages must show a lot of information at once

Principles

Generous white space around everything
Off-white and soft grey surfaces instead of pure white
Gentle radius on cards and buttons
One muted accent colour, used for actions only
Medium-weight sans type, never heavy
Few elements per screen; one message at a time

Colour

Mist (background): #f7f7f5
White (surface): #ffffff
Soft black (text): #2b2b2b
Stone (muted): #5f5f5f
Sage (accent): #4e7166
Haze (border): #e4e4e0
Text on background contrast: 13.20:1 — passes AA

Type

Headings: Manrope, weights 600 — Medium-bold, generous tracking at small sizes
Body: Manrope, weights 400 — Light grey-black, roomy line height
Scale: 14px, 16px, 18px, 24px, 36px, 52px
One friendly geometric sans; small steps between sizes.

Spacing and shape

Base unit: 8px
Spacing steps: 8px, 16px, 32px, 64px, 128px
Big, consistent gaps; sections breathe.
Corner radii: 12px, 20px
Borders: 1 px haze borders or none
Shadows: Very soft and wide, low opacity

Imagery and motion

Imagery: Soft photography or simple abstract shapes in muted tones.
Motion: Slow, eased fades and gentle rises.

Do

Leave more space than feels necessary
Use the accent only for the main action
Keep each section to one idea

Don't

No heavy black type
No sharp corners next to round ones
No more than one accent

Palette

Mistbackground #f7f7f5
Whitesurface #ffffff
Soft blacktext #2b2b2b
Stonemuted #5f5f5f
Sageaccent #4e7166
Hazeborder #e4e4e0

Text on background: 13.20:1 — passes AA

Type

Headings · Manrope · 600

The quick brown fox jumps over the lazy dog

Medium-bold, generous tracking at small sizes

Body · Manrope · 400

The quick brown fox jumps over the lazy dog

Light grey-black, roomy line height

52pxThe quick brown fox jumps over the lazy dog
36pxThe quick brown fox jumps over the lazy dog
24pxThe quick brown fox jumps over the lazy dog
18pxThe quick brown fox jumps over the lazy dog
16pxThe quick brown fox jumps over the lazy dog
14pxThe quick brown fox jumps over the lazy dog

One friendly geometric sans; small steps between sizes.

Spacing and shape

Spacing on a 8px base

8px
16px
32px
64px
128px

Big, consistent gaps; sections breathe.

Corners, borders and shadows

12px
20px

Borders: 1 px haze borders or none
Shadows: Very soft and wide, low opacity

Do and don't

Do

Leave more space than feels necessary
Use the accent only for the main action
Keep each section to one idea

Don't

No heavy black type
No sharp corners next to round ones
No more than one accent

Soft minimal

See it live

A quiet place, ten minutes a day.

Three ways to sit

Morning sit

Three breaths

Wind down

From the wind-down session

What we left out

Free to begin

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

Palette

Type

Spacing and shape

Spacing on a 8px base

Corners, borders and shadows

Do and don't

Do

Don't