Design for AI

Scandinavian: UI design prompt

Palette, type rules and a pasteable prompt for scandinavian. Also called Scandi design, Nordic minimalism, hygge web, Nordic clean, Danish modern. 1950s furniture heritage; web usage 2014 onward (furniture, fashion, fintech from the Nordics).

Traits

  • light, airy layouts with warm whites and pale wood tones
  • functional simplicity: clear grid, honest materials, product photography in daylight
  • muted natural accents: sage, dusty blue, ochre, clay, charcoal
  • geometric or humanist sans in medium weight, comfortable sizes
  • gentle radius (6-10px), hairline borders, almost no shadow
  • product-first: big photos with generous margins, short captions
  • calm motion, nothing decorative

Palette

#faf8f5 warm white, #2b2b2b charcoal, #a8b5a0 sage, #c9a27e wood, #6f8fa6 dusty blue, #e8e4de line

Type

Manrope, DM Sans or Karla; headings 500 at 32-56px with -0.01em, body 400 at 16-17px line-height 1.6; occasionally a light serif (Cormorant) for one word

Do

  • shoot or select photography in soft daylight with natural materials; the images carry the style
  • keep colour to warm neutrals plus one muted accent that appears in the photos too
  • use lots of horizontal space: 2-column product layouts with 48-64px gutters

Don't

  • do not use cold blue-greys or pure white; warmth is the difference from generic minimalism
  • do not add decorative illustration; photos and type only
  • do not over-round; 6-10px, not pills

Known for it: HAY, Muuto, Klarna (2019 partial), Normann Copenhagen, Aesop-adjacent

CSS seed
:root {
  --bg: #faf8f5;
   --fg: #2b2b2b;
   --muted: #7a7570;
   --accent: #a8b5a0;
   --accent2: #c9a27e;
   --line: #e8e4de;
   --radius: 8px;
   --font: 'Manrope',sans-serif
}
Prompt

Build the site in Scandinavian style. Background #faf8f5, text #2b2b2b, muted #7a7570, hairlines #e8e4de, accents sage #a8b5a0 and wood #c9a27e, one dusty blue #6f8fa6 for links. Font Manrope: headings 500 at 52/34/24px with -0.01em, body 400 at 17px, line-height 1.6, captions 13px in muted. Layout: 12-column grid with 56px gutters on desktop, product blocks as two-column pairs (image left, text right, then alternated), 128px between sections. Images: daylight photography of natural materials, border-radius 8px, no border, no shadow, full column width. Cards, when needed, are transparent with a 1px #e8e4de border and 8px radius. Primary button: #2b2b2b fill, #faf8f5 text, radius 8px, 46px tall; secondary is text with an arrow. Nav is thin: logo, four links, 64px tall, 1px bottom hairline. No icons except a 20px arrow and cart. Motion: 250ms ease on hover, image opacity fade on scroll over 500ms.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site in Scandinavian style. Background #faf8f5, text #2b2b2b, muted #7a7570, hairlines #e8e4de, accents sage #a8b5a0 and wood #c9a27e, one dusty blue #6f8fa6 for links. Font Manrope: headings 500 at 52/34/24px with -0.01em, body 400 at 17px, line-height 1.6, captions 13px in muted. Layout: 12-column grid with 56px gutters on desktop, product blocks as two-column pairs (image left, text right, then alternated), 128px between sections. Images: daylight photography of natural materials, border-radius 8px, no border, no shadow, full column width. Cards, when needed, are transparent with a 1px #e8e4de border and 8px radius. Primary button: #2b2b2b fill, #faf8f5 text, radius 8px, 46px tall; secondary is text with an arrow. Nav is thin: logo, four links, 64px tall, 1px bottom hairline. No icons except a 20px arrow and cart. Motion: 250ms ease on hover, image opacity fade on scroll over 500ms.

## Tokens
:root { --bg:#faf8f5; --fg:#2b2b2b; --muted:#7a7570; --accent:#a8b5a0; --accent2:#c9a27e; --line:#e8e4de; --radius:8px; --font:'Manrope',sans-serif }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.