the art of living simply
nordic minimalism is not about having less — it is about making room for what matters. warmth through restraint. beauty through honesty. calm through intention.
components
every component carries the weight of nordic quiet — unhurried, considered, purposeful.
button variants
all transitions run at 700ms — the speed of morning fog settling over a fjord.
color palette
drawn from the land itself — the hues of birch bark, pine shadow, fjord water, and wool.
charcoal
#3d3d3d
burnt pine wood
birch
#f5f0eb
birch tree bark
pine
#5a7a6b
pine forest
fjord
#7ba0b8
fjord water
wood
#c9a88c
driftwood
wool
#d4cdc5
wool blanket
the nordic gradient — from darkness into morning light
materials
scandinavian interiors speak through material — each surface carrying memory of forest, shore, and hearth.
wood grain
oak, ash, birch
the grain of time
linen
cotton, flax, hemp
woven breath
stone
granite, slate, quartzite
ancient patience
wool
merino, lambswool
warmth remembered
typography
scandinavian type favors lightness. words should rest on the page, not press into it.
type scale
display
font-extralight / 48px / tracking-wide
heading
font-light / 30px / tracking-wide
subheading
font-light / 20px / color: wood
body text flows at a measured pace, allowing the reader to settle into meaning.
font-normal / 16px / leading-relaxed
label or caption
font-light / 12px / tracking-[0.4em]
a nordic verse
the fire does not hurry.
the kettle does not rush.
the morning asks only
to be received.
lowercase. unhurried. present.
weight contrast
extralight
200 — stillness
light
300 — calm
normal
400 — presence
bold and heavy weights are reserved for emphasis only — used sparingly, like salt.
philosophy
hygge is not a style. it is a way of being. these six principles guide every design decision.
design breathes. whitespace is not empty — it is the pause between notes that gives music meaning. resist the urge to fill every corner.
color reaches toward amber and earth. every palette choice should feel like a lit hearth at dusk — welcoming, never demanding attention.
spaces are made for gathering. layouts should feel inclusive, never isolating. design for the shared moment, the common table.
each element must justify its presence. ornament for its own sake is removed. what remains is truer, stronger, and more beautiful.
transitions are slow because the moment deserves attention. 700ms is a breath. do not rush the user past the experience.
to use a well-made thing with care is a form of gratitude. design that honors materials and craft inspires this feeling in return.
in depth
expand each question with unhurried intention.
guidance
the line between calm and cold, between warm and heavy, is found in small decisions.
do
embrace generous whitespace
let elements breathe. padding of py-10 or py-16 is the minimum. space is not waste — it is the material of calm.
use the full 700ms
transitions should be felt, not merely noted. the duration is intentional. let morning fog take its time.
keep text lowercase
for brand labels, navigation, and headings — lowercase carries a quiet authority. it does not shout.
prefer font-light and font-extralight
weight communicates urgency. lightness communicates ease. default to 200–300 and reserve heavier weights for hierarchy.
honor the warm neutrals
birch, wool, wood, fjord — the palette is complete. resist adding bright accents from outside the nordic spectrum.
do not
compress whitespace to save space
dense packing creates visual noise. if there is not enough room for breathing space, there is too much content.
use bounce or spring animations
springs are playful. scandinavian is considered. stick to cubic-bezier(0.16,1,0.3,1) — a smooth, unhurried arrival.
introduce high-saturation colors
a bright orange call-to-action is a shout in a quiet room. if emphasis is needed, reach for charcoal — not a neon.
use scale or translate on hover
movement draws the eye away from content. brightness or border changes are enough. the card should not leap toward the user.
add heavy shadows
deep drop shadows suggest drama. scandinavian surfaces sit quietly on each other. use border opacity instead.
design tokens
the values beneath the calm. every decision made explicit.
spacing
section padding
py-28 → py-40
card padding
p-8 → p-10
element gap
gap-4 → gap-8
text margin
mb-12 → mb-14
divider width
w-10 → w-16
motion
primary duration
700ms
easing
ease-in-out
reveal curve
cubic-bezier(0.16,1,0.3,1)
reveal distance
translateY(32px)
reveal threshold
0.15 (15%)
borders
resting state
/30 opacity
hover state
/80 opacity
accent strip
w-1
divider line
h-px
nav bottom
/40 opacity
color tokens
background
birch
foreground
charcoal
muted
muted wood
border
wool
accent primary
pine
accent secondary
fjord
warm highlight
wood
surface
cloud