Design System
Playground Zur Vorlage

EinführungÜbersicht

Corporate Design Manual 2027 · August 2026

Nordwynd
Design System

Reduziertes Atomic Design: Elemente, Komponenten, Sektionen, Layouts. Vorlage für die Nordwynd-Website.

Einführung

Übersicht

Grundsatz · Bestand

Foundations

Übersicht

Typografie · Farben · Spacing · Radien · Bewegung · Raster · Linien · Ebenen · Komposition · Hover · Reveal · Container · Sektions-Intro · Farb-Rollen · Ebenen ohne Schatten

Elemente · Zeichen

Übersicht

Logo · Logo-Schutzraum · Icon · Icon-Feld · Datei-Icon · Stats-Marke · ASCII · ASCII Nord

Elemente · Text

Label

Proof · Tag · Tag mit Icon · Slot-Pille · Haarlinie · Hinweis · Sterne

Elemente · Aktion

Button

Button destruktiv

Elemente · Formular

Feld

Wahl · Fortschritt

Elemente · Medien

Bild

Video · Avatar

Komponenten · Karten

Übersicht

Feature-Card · Service-Card · Service-Card quer · Blog-Card · Team-Card · Pricing-Card · Bento-Tile · Bento-Tile wide · Testimonial-Card · Stat-Card · Logo-Card · Logo-Lockup · Case-Study-Card

Komponenten · Navigation

Nav-Link

Breadcrumb · Pagination · Tabs · Seitennav · Wechsel · Skip-Link · Inhaltsverzeichnis

Komponenten · Inhalt

Section-Label

Meta · Proof-Paar · ASCII-Feld · Media-Text · Checkliste · Step-Item · Timeline-Item · Akkordeon · Tabelle · Zitat-Block · Callout · Vorher-Nachher · Code-Block · Autor-Box

Komponenten · Formular

Suchfeld

Filter-Leiste · Upload-Zone · Embed-Rahmen · Zustand

Komponenten · Rückmeldung

Dialog

Toast · Meldung · Popover · Lightbox · Leerzustand · Lade-Zustand · Zähler

Komponenten · Aktion

CTA

CTA-Gruppe · Inline-CTA

Sektionen · Rahmen

Übersicht

Header · Footer · Header v2 · Footer v2 · Announcement-Bar v2 · Ankündigung · Cookie-Consent · Cookie-Layer · Menü-Panel · Mobil-Menü · Sticky-CTA · Introbar · Shell · Cover · Hero

Sektionen · Haltung

Feature-Zick-Zack

Feature-Grid · Feature-Bento · Feature-Tabs · Feature-Sticky-Scroll · Service-Liste · Integrationen-Grid · Prose

Sektionen · Vertrauen

Problem-Section

Value-Prop · Vergleich · Prozess-Section · Timeline · Timeline-Tabs · Warum-wir · Über-uns-Teaser · Team-Grid · Testimonial-Grid · Testimonial-Slider · Testimonial-Featured · Logo-Wall · Stats-Band · Review-Badges · Case-Highlight · Case-Grid · Trust-Leiste

Sektionen · Preise

Pricing-Tiers

Pricing-Vergleich · Pakete

Sektionen · Content

Blog-Teaser

Blog-Übersicht · Filter-Zeile · Blättern · Artikel-Body · Ressourcen-Grid · FAQ · Video-Section · Galerie · Galerie-Sektion · Karussell · 404-Content

Sektionen · Conversion

CTA

Final-CTA · CTA-Formular · CTA-Kalender · Newsletter · Lead-Magnet · Kontakt · Kontakt-Section · Schritt-Formular · Thank-you

Layouts

Übersicht

Deckblatt · Docs-Rahmen · Startseite · Artikel · Referenz · Case Study · Infoseite · Manifest · Rechtliches · Landingpage · Kontakt · Blog-Übersicht · Artikel · Über uns · Pricing · Case-Übersicht · Case Study · Leistungsübersicht · Leistung-Detail · Startseite · Basis Standard · Basis Landing · Basis Content · Basis Archiv · Basis Detail · Basis Funnel · Basis System · Vorlage · Lagebild (MIMIR) · Vorlage · KI-Schwarm (SVARTALFHEIM)

Geschäftsausstattung

Übersicht

Visitenkarte · Flyer Wickelfalz · Präsentationsfolien · Briefpapier

Social Media

Übersicht

LinkedIn · Instagram · Facebook · X · YouTube · TikTok

SOP-Claude

Übersicht

Märkte · Zielgruppen · Wettbewerber · Produkte & Leistungen · Corporate Voice · Business Plan

Content

Übersicht

Global · Seiten · Wissen · Standorte, Kontakt · Rechtliches, System

Playground

Übersicht

Foundations · Elemente · Komponenten · Sektionen · Layouts · Geschäftsausstattung