Design for AI

Stil Skandinavisch: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für skandinavisch. Auch bekannt als Scandi-Design, nordischer Minimalismus, Hygge-Web, Nordic Clean, Danish Modern. Möbel-Erbe der 1950er; Web-Nutzung ab 2014 (Möbel, Mode, Fintech aus den nordischen Ländern).

Merkmale

  • helle, luftige Layouts mit warmen Weißtönen und blassen Holztönen
  • funktionale Einfachheit: klares Raster, ehrliche Materialien, Produktfotografie bei Tageslicht
  • gedämpfte natürliche Akzente: Salbei, staubiges Blau, Ocker, Ton, Anthrazit
  • geometrische oder humanistische Sans in mittlerem Gewicht, angenehme Größen
  • sanfter Radius (6-10px), Haarlinien-Ränder, fast kein Schatten
  • produktzentriert: große Fotos mit großzügigen Rändern, kurze Bildunterschriften
  • ruhige Motion, nichts Dekoratives

Palette

#faf8f5 Warmweiß, #2b2b2b Anthrazit, #a8b5a0 Salbei, #c9a27e Holz, #6f8fa6 staubiges Blau, #e8e4de Linie

Schrift

Manrope, DM Sans oder Karla; Überschriften 500 bei 32-56px mit -0.01em, Fließtext 400 bei 16-17px line-height 1.6; gelegentlich eine leichte Serif (Cormorant) für ein Wort

Do

  • fotografiere oder wähle Bilder in weichem Tageslicht mit natürlichen Materialien; die Bilder tragen den Stil
  • halte Farbe bei warmen Neutraltönen plus einem gedämpften Akzent, der auch in den Fotos vorkommt
  • nutze viel horizontalen Raum: zweispaltige Produktlayouts mit 48-64px Gutter

Don't

  • nutze keine kalten Blaugrautöne oder reines Weiß; Wärme ist der Unterschied zum generischen Minimalismus
  • füge keine dekorative Illustration hinzu; nur Fotos und Schrift
  • runde nicht zu stark; 6-10px, keine Pillen

Bekannt dafür: HAY, Muuto, Klarna (2019 teilweise), Normann Copenhagen, Aesop-nah

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

Baue die Seite im skandinavischen Stil. Hintergrund #faf8f5, Text #2b2b2b, gedämpft #7a7570, Haarlinien #e8e4de, Akzente Salbei #a8b5a0 und Holz #c9a27e, ein staubiges Blau #6f8fa6 für Links. Schrift Manrope: Überschriften 500 bei 52/34/24px mit -0.01em, Fließtext 400 bei 17px, line-height 1.6, Bildunterschriften 13px in gedämpft. Layout: 12-Spalten-Raster mit 56px Gutter auf Desktop, Produktblöcke als zweispaltige Paare (Bild links, Text rechts, dann abwechselnd), 128px zwischen Abschnitten. Bilder: Tageslichtfotografie natürlicher Materialien, border-radius 8px, kein Rand, kein Schatten, volle Spaltenbreite. Karten, wenn nötig, sind transparent mit 1px #e8e4de Rand und 8px Radius. Primärbutton: #2b2b2b Füllung, #faf8f5 Text, Radius 8px, 46px hoch; sekundär ist Text mit Pfeil. Die Nav ist dünn: Logo, vier Links, 64px hoch, 1px Haarlinie unten. Keine Icons außer einem 20px Pfeil und Warenkorb. Motion: 250ms ease bei Hover, Bild-Opacity-Fade beim Scrollen über 500ms.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im skandinavischen Stil. Hintergrund #faf8f5, Text #2b2b2b, gedämpft #7a7570, Haarlinien #e8e4de, Akzente Salbei #a8b5a0 und Holz #c9a27e, ein staubiges Blau #6f8fa6 für Links. Schrift Manrope: Überschriften 500 bei 52/34/24px mit -0.01em, Fließtext 400 bei 17px, line-height 1.6, Bildunterschriften 13px in gedämpft. Layout: 12-Spalten-Raster mit 56px Gutter auf Desktop, Produktblöcke als zweispaltige Paare (Bild links, Text rechts, dann abwechselnd), 128px zwischen Abschnitten. Bilder: Tageslichtfotografie natürlicher Materialien, border-radius 8px, kein Rand, kein Schatten, volle Spaltenbreite. Karten, wenn nötig, sind transparent mit 1px #e8e4de Rand und 8px Radius. Primärbutton: #2b2b2b Füllung, #faf8f5 Text, Radius 8px, 46px hoch; sekundär ist Text mit Pfeil. Die Nav ist dünn: Logo, vier Links, 64px hoch, 1px Haarlinie unten. Keine Icons außer einem 20px Pfeil und Warenkorb. Motion: 250ms ease bei Hover, Bild-Opacity-Fade beim Scrollen über 500ms.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.