Style
Soft minimal
Calm and airy: lots of space, soft neutral colours, gentle rounded corners and one quiet accent.
See it live
Example: meditation app landing page for Hushfield, a fictional brand made up for this explorer. Switch the width to see the style on a phone, a tablet and a desktop screen.
Meditation for full days
A few quiet minutes, whenever you find them.
Hushfield gives you one short, guided session at a time. No streaks to keep, no levels to unlock — just a calm voice and a little room to breathe.
Now playing
Evening wind-down
One practice for each part of the day
Pick the one that fits. Each is short enough that you will actually do it.
Arrive
Before the phone, before the news. Sit up, notice three sounds and set one small intention.
Pause
A short reset you can do at a desk or on a bench. Eyes open is fine.
Let go
A slow body scan from the feet up, so the day can end somewhere other than your shoulders.
Breathe in for four. Out for six.
That is the whole technique behind most of our sessions. A longer out-breath tells your body it is safe to slow down. Try it once, right now, before you read on.
Free for two weeks, then £4 a month.
Every session, every voice, on your phone and tablet. Cancel in two taps, and keep your favourites.
Start your free fortnightCopy the idea
Take the style with you as a brief for a person, as instructions for an AI assistant, or as design tokens. It describes the idea and the rules — never the example's code.
The recipe
Soft minimal — style recipe: the same text the brief copies.
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
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
The quick brown fox jumps over the lazy dog
Medium-bold, generous tracking at small sizes
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
Spacing and shape
- 8px
- 16px
- 32px
- 64px
- 128px
Big, consistent gaps; sections breathe.
- 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