Style Library

Scandinavian Minimalism

Styleminimal

Warm minimalist design rooted in Scandinavian tradition, emphasizing natural materials, generous whitespace, wood tones, and Hygge living aesthetics for a serene, cozy visual experience.

#3d3d3d
#f5f0eb
#5a7a6b
#7ba0b8
#c9a88c
#607683

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs
Tasks done1,284+12% this week
Sign in
Emailyou@example.com
Remember meContinue
Today
Review roadmapDone
Ship onboardingIn progress
Team sync3 pm
Prompt
Paste into any AI assistant before describing what to build — or attach it to a project below.
# Visual style: Scandinavian Minimalism

Warm minimalist design rooted in Scandinavian tradition, emphasizing natural materials, generous whitespace, wood tones, and Hygge living aesthetics for a serene, cozy visual experience.

## Philosophy
Scandinavian Minimalism originates from the design traditions of Nordic countries such as Denmark, Sweden, Norway, and Finland.

Core principles:
- Less is more: every element has a reason to exist
- Connection to nature: using tones of natural materials like wood and linen
- Hygge spirit: creating a warm, comfortable, and happy atmosphere
- Beauty in function: a perfect balance of utility and aesthetics
- Worship of light: generous whitespace simulates Nordic natural light

## Do
- Use warm gray-white backgrounds bg-[#f5f0eb]
- Choose natural wood tone colors text-[#a89279]
- Create breathing room with generous whitespace py-28 px-6
- Use delicate font weights font-extralight font-light
- Minimal borders and dividers border-[#d4cdc5]/40
- Smooth, slow transition animations transition-colors duration-500
- Interactions should focus on brightness and color temperature adjustments, simulating the warm touch of wool and wood
- Hover hints should use subtle border or background changes, avoiding strong shadows and obvious displacement
- Secondary text should slowly brighten on hover, enhancing typographic breathing rhythm

## Don't
- Do not use highly saturated vivid colors
- Do not use heavy borders and shadows
- Do not densely arrange elements -- maintain ample whitespace
- Do not use decorative fonts or oversized type
- Do not use bounce, spring, or fast scale animations
- Do not use strong press feedback (active state allows only subtle brightness changes)

## Rules for the AI
You are designing in Scandinavian Minimalism style.
- Use warm neutral tones: birch white #f5f0eb, charcoal #3d3d3d, wool gray #d4cdc5
- Accent with natural colors: pine green #5a7a6b, fjord blue #7ba0b8
- Font weights: extralight and light only
- Generous whitespace and breathing room
- Subtle borders and transitions
- No bright colors, no heavy shadows
- Lowercase text for a calm, approachable feel

Animation & Interaction Rules:
- Warm Texture: Animations should convey natural material touch, prioritizing brightness/color temperature adjustments over bouncing and scaling.
- Morning Fog: Transitions should use duration-700 + ease-in-out, revealing slowly like morning mist dissipating.
- Silent Elevation: Hover hints should prioritize subtle border and background changes, keeping shadows extremely light or omitted.
- No Impact: Active state should only provide slight brightness feedback, with no noticeable deformation.
Example prompts
Ready-made page requests in this style.
SaaS Landing Page
Create a SaaS landing page using Scandinavian Minimalism style with hero section, feature grid, testimonials, pricing table, and footer.
Portfolio Showcase
Create a portfolio showcase page using Scandinavian Minimalism style with project grid, about section, contact form, and consistent visual language.
Use it in an app
Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

From StyleKit (MIT, commit 0156849).View source