Nordic Calm
Scandinavian winter light: cool greys, frost blue, soft corners and a lot of air.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A quiet interface that feels like a white room on a February morning in the north. Cool fog greys, a single frost-blue accent, light-weight rounded sans type and photographs of pale timber and snow-light. Unhurried, clean and deeply restful.
Nordic Calm channels contemporary Scandinavian design — pale timber, wool, plaster and the cool blue light of northern winters. It is minimal without being cold: generous 20px corners, soft wide shadows and a light-weight geometric sans keep everything gentle. The palette is a narrow band of fog greys with a single frost-blue accent and a deep fjord blue for actions. Space is the main material; sections float apart like furniture in a large white room.
Principles
- Air first: if in doubt, add 24px more space.
- Soft everything — 20px card corners, pill buttons, wide low-opacity shadows.
- One cool accent; never warm colours.
- Light display weights; let size, not boldness, create hierarchy.
- Calm copy: short sentences, no urgency, no exclamation marks.
Motion
Elements drift up 20px over one second on an expo-out curve, like breath condensing and clearing. Cards lift 3px on hover with a cool, wide, 6%-opacity shadow.
Do & don't
Do
- ✓ Use 20px radius on cards and images.
- ✓ Keep shadows wide and below 8% opacity.
- ✓ Centre hero content and keep it under 12 words.
Don't
- ✕ Don't use hard shadows or thick borders.
- ✕ Don't use display weights above 400 for headlines.
- ✕ Don't add warm accent colours.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 364 lines of DESIGN.md in total.
More like this
All Swiss & Minimal →
Pure Mono
No. 032Black on white, nothing else: a grotesk, thick rules and a bento of pure contrast.
Swiss Poster
No. 033An International Style concert poster: strict grid, flush-left grotesk, red and black.
Bauhaus Primary
No. 051Bauhaus workshop primaries: circle, square, triangle in red, yellow and blue on bone.
Cobalt Ink
No. 052One ink only: every line, word and shape printed in cobalt blue on bright paper.
Functionalist Sixties
No. 0531960s functionalist hardware: warm white housings, one orange switch, a grid of controls.
Museum Label
No. 054The wall label beside the object: tiny precise type, vast whitespace, catalogue numbers.