IndexStyle

Ein Wörterbuch der Gestaltungsstile, geschrieben aus den Werken selbst.

Es ist blankes HTML. Es öffnet sich in jedem Browser und auf jedem Gerät, ohne App und ohne Konto, und Maschinen lesen dieselbe Seite.

Einträge598

Wörterbuch

Suche nach einem Stil oder beschreibe dein Vorhaben. Namensübereinstimmungen kommen zuerst; Zweck, Wirkung und Medium ergänzen Alternativen.

BeispieleBauhauseine hochwertige Karriereseiteeine vertrauenswürdige Finanz-App

48/48 angezeigt

Gedeutet alsTrustWeb / UIFinanzen

494

GOV.UK Design System — GDS Transport auf der Startseite von GOV.UK, 2025 — Wikimedia Commons / Public domain

GOV.UK Design System

GOV.UK デザインシステム / 2012– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Die Gestaltungssprache, die der Government Digital Service der britischen Regierung für öffentliche Dienste veröffentlicht und pflegt. Alles läuft in einer einzigen schmucklosen, links ausgerichteten Spalte in der GDS Transport, und die grüne Schaltfläche behält rechte Ecken und gewinnt ihre Dicke aus einem dunkleren grünen Band an der Unterkante, um beim Drücken genau um diese Dicke einzusinken. Was den Tastaturfokus trägt, wird gelb und bekommt eine schwarze Linie darunter.

Eine einzige schmucklose, links ausgerichtete Spalte, fast ohne Kästen und ohne Schatten / Eine grüne Schaltfläche mit rechten Ecken und einem dunkleren grünen Band an der Unterkante, die beim Drücken genau um diese Tiefe einsinkt / Was den Tastaturfokus trägt, wird gelb und bekommt eine schwarze Linie darunter gezogen / Die Schriftgrade springen grob über 48, 36, 24, 19 und 16px, dazwischen gibt es nichts

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

539

Skeleton Screen — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Skeleton Screen

スケルトン・スクリーン / 2013– / Technik / Interface-Stile

Warum passendTrustWeb / UIFinanzenTechnique

Ein Umgang mit dem Laden, der auf den Ladekreisel verzichtet, zuerst die leere Seite zeigt und die Information nach und nach hineinfließen lässt. Luke Wroblewski stellte das Verfahren 2013 unter diesem Namen vor, als Lehre aus seiner eigenen Anwendung Polar. Gezeigt wird nicht, dass man wartet, sondern dass es vorangeht.

Während des Ladens erscheinen weder Ladekreisel noch Fortschrittsbalken / Dort, wo Text und Bilder landen, stehen bereits leere Flächen in der Größe, die sie einnehmen werden / Die Anordnung steht fest, bevor die Daten kommen, und nichts verrutscht, wenn sie eintreffen / Die Information erscheint nicht auf einmal, sondern Bereich für Bereich

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

42

Bento Grid — Beispiele für Bento Grids (via bentogrids.com)

Bento Grid

ベントーグリッド / 2020s / Layout / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Teilt unterschiedliche Arten von Information in eigenständige Kästen und gibt so das Gesamtbild auf einen Blick.

Große und kleine Karten / Ausgerichtete Stege / Übersicht auf einem Screen / Module

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

1

Swiss — Josef Müller-Brockmann, Plakat Beethoven, 1955 — Wikimedia Commons / CC BY-SA 4.0Swiss — Josef Müller-Brockmann, Plakat Musica Viva — Wikimedia Commons / Public domainSwiss — Josef Müller-Brockmann, Plakat der Film — Wikimedia Commons / Public domain

Swiss

スイス・スタイル / 1950s– / Stil / Funktionalismus

Warum passendTrustWeb / UIFinanzenCalm

Stellt die Ordnung in den Vordergrund und macht die Information selbst zum Protagonisten.

Strenges Raster / Serifenlose Schrift / Asymmetrie / Sachliche Fotografie

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

118

Fluent 2 — Via Fluent 2 Design System (Microsoft)Fluent 2 — Microsoft, WinUI-Komponenten in Fluent 2, 2023 — Wikimedia Commons / CC0Fluent 2 — Microsoft, Windows-11-App Uhr in Fluent 2, 2023 — Wikimedia Commons / CC0

Fluent 2

フルーエント2 / 2022– / Stil / Microsoft UI

Warum passendTrustWeb / UIFinanzenTechnique

Fasst Farbe, Schrift, Abstand, Radius und Tiefe in Tokens und setzt die Materialien Solid, Acrylic, Mica und Smoke rollenbezogen in allen Microsoft-Produkten ein.

Mica und Acrylic / Neutrale Tonhierarchie / Weiche Eckradien / Tiefe als Token

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

538

Solarized — Xcode 4 mit angewandtem Solarized Light, 2011 — Wikimedia Commons / CC BY 2.0Solarized — gedit mit angewandtem Solarized Dark — Wikimedia Commons / CC0Solarized — Wikipedia-Artikelseite mit angewandtem Solarized Dark, 2021 — Wikimedia Commons / CC BY-SA 4.0

Solarized

ソラライズド / 2011– / Stil / Interface-Stile

Warum passendTrustWeb / UIFinanzenTechnique

Sechzehn Farben für Terminal und Editor, die Ethan Schoonover mit allen Werten offengelegt hat. Sie bestehen aus acht Grundtönen und acht Akzenten, und die Helligkeitsabstände der Grundtöne sind im CIELAB symmetrisch angelegt, sodass der Wechsel zwischen hellem und dunklem Grund den Leseeindruck nicht verändert. Der Helligkeitsunterschied wird gesenkt, und die Wörter trennt der Unterschied im Farbton.

Die Gründe sind weder reines Schwarz noch reines Weiß, einer neigt ins Blaugrüne, der andere ins Cremefarbene / Der Helligkeitsabstand zwischen Text und Grund bleibt klein und trifft das Auge sanfter als Schwarz auf Weiß / Die acht Akzente liegen in der Helligkeit fast gleichauf und sind allein am Farbton zu unterscheiden / Auch nach dem Wechsel von hellem zu dunklem Grund erscheint derselbe Akzent in derselben Rolle

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

554

Abbildungen auf der Quellseite

Carbon Design System

Carbon Design System / 2015– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.

IBM Plex and strong type hierarchy / White or deep-gray work surfaces / Dense tables, filters and side navigation / Blue reserved for action and focus

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

472

Material Design — Google, UI-Komponenten von Material Design — Wikimedia Commons / Public domainMaterial Design — Google, Komponenten von Material Design 3, 2021 — Wikimedia Commons / CC BY 4.0Material Design — Google, Bildschirm im hellen Material You Design, 2021 — Wikimedia Commons / CC BY 4.0

Material Design

マテリアルデザイン / 2014– / Stil / Google UI

Warum passendTrustWeb / UIFinanzenTechnique

Entwurfssystem, das die physische Metapher von Papier und Tinte auf Regeln für Schatten und Überlagerung herunterbricht. Elemente erhalten eine Höhe, der Schatten zeigt die Hierarchie, die Bewegung trägt physische Kausalität. Es wurde zum Muster dafür, dass Interfacegestaltung als System verteilt wird.

Hierarchie und Schatten über die Höhe ausgedrückt / Flächen, die sich wie Papierbögen überlagern / Bewegung, die Ursache und Wirkung zeigt / Normierte Einheit für Abstände

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

326

Banknote Guilloche — US-Note zu 2 Dollar der Educational Series, 1896 — Wikimedia Commons / Public domainBanknote Guilloche — Note zu 1 Dollar der Educational Series, 1896 — Wikimedia Commons / Public domainBanknote Guilloche — Guilloche des alten Fünf-Mark-Scheins (Ausschnitt, Entwurf von 1963) — Wikimedia Commons / CC BY-SA 3.0

Banknote Guilloche

紙幣のギヨシェ / 18th century– / Technik / Öffentliches Design

Warum passendTrustWeb / UIFinanzenTechnique

Der Banknotenstil, in dem maschinengeschnittene Guillochenkurven und gestochene Porträts die Fälschung abwehren und zugleich Kredit sichtbar machen. Die amerikanische Educational Series von 1896 erhob die Banknote zum allegorischen Meisterwerk.

Durchlaufende Guillochenkurven / Gestochene Tiefdruckporträts / Feine Guillochierarbeit im Grund / Hierarchien der Wertstufen

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

229

Schematic Transit Diagram — Aktuelles Beispiel eines schematischen Liniennetzplans (CC BY-SA 3.0)Schematic Transit Diagram — Liniennetzplan der Berliner U-Bahn — Wikimedia Commons / CC BY-SA 4.0

Schematic Transit Diagram

スキーマティック路線図 / 1933– / Layout / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Verzichtet auf geografische Genauigkeit zugunsten von Waagerechten, Senkrechten und 45-Grad-Linien mit gleichmäßig verteilten Stationen. Becks Plan der Londoner Underground von 1933 machte ihn zur gemeinsamen Sprache der Liniennetzpläne weltweit.

Auf 45 Grad beschränkte Linienführung / Gleichmäßige Stationsabstände / Farbcodierte Linien / Unabhängigkeit von der Geografie

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

534

Breeze — Breeze unter KDE Plasma 6 (Debian Trixie) — Wikimedia Commons / CC0Breeze — Breeze unter KDE Plasma 5, helles Farbschema (Kubuntu 20.10), 2020 — Wikimedia Commons / CC BY 4.0Breeze — Breeze unter KDE Plasma 5, Startmenü im dunklen Farbschema (Kubuntu 21.04), 2021 — Wikimedia Commons / CC BY-SA 4.0

Breeze

ブリーズ / 2014– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Der voreingestellte visuelle Stil, den KDE zusammen mit Plasma 5 einführte. Die Ankündigung beschreibt ihn selbst als flaches Thema mit hohem Kontrast, und die Sinnbilder werden einfacher und nahezu einfarbig geordnet. Statt Schmuck trägt der Satz die Unterscheidung der Elemente, und eine helle und eine dunkle Fassung liegen von Anfang an als Paar vor.

Flache Flächen ohne Schattierung, bei denen allein Farbunterschied und Kontrast die Grenzen ziehen / Sinnbilder und Symbole sind aufs Einfarbige hin geordnet, die Zahl der Farben bleibt klein / Der Kontrast zwischen Überschrift und Text übernimmt die Aufgabe des Schmucks, und der Satz trägt das Bild / Dieselben Symbole gibt es als aufeinander abgestimmtes Paar in Hell und Dunkel

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

7

Minimalism — Dan Flavin, Untitled (to Don Judd, Colorist) 1–5, 1987, Tate Modern — Wikimedia Commons / CC BY 2.0

Minimalism

ミニマリズム / 1960s– / Stil / Funktionalismus

Warum passendTrustWeb / UIFinanzenCalm

Nimmt Elemente weg, um Bedeutung und Spannung des Verbleibenden zu maximieren.

Weite Leerräume / Wenige Elemente / Stille Farbigkeit / Präzise Abstände

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

543

Abbildungen auf der Quellseite

GitHub Primer

GitHub Primer / 2017– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior.

Neutral surfaces with blue links and restrained status colors / Octicons paired with short action labels / Thin borders separating lists, tabs and sidebars / Consistent steps of type and spacing even at high density

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

489

Adwaita — Nathan Hadley, GNOME-Einstellungen 48, 2025 — Wikimedia Commons / CC BY-SA 4.0Adwaita — Nathan Hadley, GNOME-Texteditor 47, 2025 — Wikimedia Commons / CC BY-SA 4.0Adwaita — Frap, Bildschirm von GNOME Files, 2025 — Wikimedia Commons / CC0

Adwaita

アドワイタ / 2011– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Adwaita nennt GNOME das eigene Standardaussehen, und die Richtlinien verlangen, dass ein und derselbe Satz von Bauteilen die helle, die dunkle und die kontrastreiche Fassung tragen muss. Eine Kopfleiste quert die obere Fensterkante, und die Schaltflächen darauf werden ohne Hintergrund und ohne Rahmen gezeichnet. Symbole sind einheitlich einfarbige Piktogramme von 16x16px.

Eine einzige Kopfleiste quer über die obere Fensterkante, auf drei Ausrichtungspunkte verteilt, mit dem Fenstertitel in der Mitte / Die Schaltflächen der Kopfleiste tragen weder Hintergrund noch Rahmen, auf der Fläche stehen nur Zeichen und Beschriftung / Einfarbige symbolische Piktogramme, gezeichnet in 16x16px, mit Hauptstrichen von 2px und frontalen Formen ohne Perspektive / Eine veröffentlichte Palette mit fünf Stufen je Farbton, darunter Blue 3 in #3584e4

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

568

GitLab Pajamas — KI-generierte Interpretation
KI-Interpretation, keine Referenz

GitLab Pajamas

GitLab Pajamas / 2018– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

GitLab's screen language connects code, issues, review, CI/CD and security inside one DevSecOps product through GitLab Sans and Mono, persistent navigation, dense lists and a purple-inflected neutral palette.

GitLab Sans paired with GitLab Mono for code / Layered structure built from left navigation and application chrome / Dense issue, merge-request and pipeline lists / White or charcoal surfaces with purple as brand focus

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

571

Canonical Vanilla — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Canonical Vanilla

Canonical Vanilla / 2013– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Canonical's CSS-based screen language unifies Ubuntu, MAAS, Juju and related sites and applications through Ubuntu type, split grids, ruled sections and generous space, optimized for scanning long technical content.

Thin large headings paired with bold smaller headings in Ubuntu type / Asymmetric 25/75 and 50/50 splits / Fine rules above sections and generous vertical space / White surfaces, dark text and orange or aubergine focus

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

566

PatternFly — KI-generierte Interpretation
KI-Interpretation, keine Referenz

PatternFly

PatternFly / 2012– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Red Hat's open-source screen language for enterprise products keeps complex infrastructure manageable through dense navigation, data views and tightly controlled status color.

Dark masthead and left navigation / Dense tables and forms on white or pale-gray work surfaces / Blue for primary action and red, orange or green for status / List, detail and action shown in coordinated panes

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

556

Abbildungen auf der Quellseite

SAP Fiori

SAP Fiori / 2013– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.

Role-based launchpad tiles / Shell bar and object pages / Compact tables and semantic status / Calm blue on pale work surfaces

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

544

Abbildungen auf der Quellseite

Adobe Spectrum

Adobe Spectrum / 2013– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Adobe's cross-application design system. Under the principles Rational, Human and Focused, it changes density between desktop and mobile while keeping tool-heavy interfaces from pulling attention away from the work itself.

Neutral surfaces with vivid color reserved for selection / Icons, type and borders scaling together / Toolbars and property panels joined by fine divisions / The creative work stays stronger than the interface

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

59

Isotype — Otto Neurath und Gerd Arntz, Gesellschaft und Wirtschaft, 1930 — via gerdarntz.orgIsotype — Tafel aus Basic by Isotype — Wikimedia Commons / Public domainIsotype — Neuraths Isotype (CC BY 2.0)

Isotype

アイソタイプ / 1920s–1940s / Layout / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Übersetzt Mengen in wiederholte, gleich große Symbole und macht den Vergleich noch vor der Sprache lesbar.

Einheitliche Piktogramme / Wiederholung der Zeichen / Vergleichsachsen / Reduzierte Farbigkeit

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

230

Pictogram System — AIGA/DOT-Symbol „Restaurant“ — Wikimedia Commons / Public domainPictogram System — AIGA/DOT-Symbol „Toiletten“ — Wikimedia Commons / Public domainPictogram System — AIGA/DOT-Symbol „Café“ — Wikimedia Commons / Public domain

Pictogram System

案内用ピクトグラム / 1964– / Stil / Informationsdesign

Warum passendTrustWeb / UIFinanzenTechnique

Einheitliche Zeichensysteme, die Einrichtungen und Handlungen ohne Sprache benennen. Tokio 1964 systematisierte Sport- und Leitsymbole; der Verkehrszeichensatz von AIGA/DOT wurde als gemeinfreies System zum Weltstandard.

Geometrisierte Menschenfiguren / Einheitliche Strichstärke / Konsistenz als System / Unabhängigkeit von der Sprache

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

484

Motif — Standardbildschirm des Motif Window Manager (mwm), 2014 — Wikimedia Commons / CC0Motif — xpdf mit geöffnetem Menü — Wikimedia Commons / CC BY-SA 3.0Motif — Mit Motif aufgebauter CDE-Desktop, 2012 — Wikimedia Commons / CC BY-SA 3.0

Motif

モチーフ / 1989– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Motif ist die Oberflächensprache der UNIX-Workstations, gepflegt von The Open Group, als IEEE 1295 genormt und auf mehr als zweihundert Rechnertypen ausgeliefert. Die eigene Dokumentation nennt das Aussehen eine dreidimensionale, abgeschrägte Erscheinung, das heißt jedes Bauteil sitzt auf einer grauen Fläche, deren Kanten eine helle und eine dunkle Farbe tragen, sodass alles erhaben wirkt.

Eine graue Fläche, an der oberen und linken Kante hell, an der unteren und rechten dunkel, sodass jedes Bauteil erhaben wirkt / Solange gedrückt wird, tauschen die beiden Kantenfarben die Plätze und das Bauteil wirkt versenkt / Ein dünner rechteckiger Ring umschließt das Bauteil, das gerade die Tastatureingabe empfängt / Bildlaufleisten sind rechtwinklige Rechtecke mit einer dreieckigen Pfeiltaste an jedem Ende

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

532

Xerox Star Interface — Desktop und Symbole des Xerox 8010 Star (ViewPoint) — Wikimedia Commons / CC BY 2.0Xerox Star Interface — Mehrsprachiges Dokumentfenster des Xerox 8010 Star (ViewPoint) — Wikimedia Commons / CC0Xerox Star Interface — Bildschirm mit zusammengesetztem Dokument des Xerox 8010 Star (ViewPoint) — Wikimedia Commons / CC0

Xerox Star Interface

ゼロックス・スター・インターフェース / 1981–1990s / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Die Bildschirmsprache, die der Xerox 8010 von 1981 festlegte. Ordner, Ein- und Ausgangskörbe, Aktenschubladen und anderes Büromaterial erscheinen als beschriftete Sinnbilder, und der Prospekt jener Jahre nannte das eine elektronische Schreibtischplatte. Die Dinge auf dem Bildschirm lassen sich mit der Maus frei bewegen, kopieren und wegwerfen.

Jedes Sinnbild trägt eine Beschriftung, damit die Bedeutung nie allein am Bild hängt / Die Sinnbilder zeigen Dinge vom Schreibtisch, Ordner, Ein- und Ausgangskörbe, Aktenschubladen / Objekte werden mit der Maus gegriffen, und Verschieben, Kopieren und Löschen bilden eine Familie von Handgriffen / Die Tabellenkalkulation erscheint als Raster aus Zeilen und Spalten, und die Befehle dafür stehen gesammelt im Menü

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

6

Modernism — Mies van der Rohe, Barcelona-Sessel und der Barcelona-Pavillon — Wikimedia Commons / CC BY-SA 4.0Modernism — Mies van der Rohe, Seagram Building, 1958 — Wikimedia Commons / CC BY-SA 4.0

Modernism

モダニズム / 1920s–1970s / Stil / Funktionalismus

Warum passendTrustWeb / UIFinanzenCalm

Ersetzt das Ornament durch begründete Form und zielt auf Allgemeingültigkeit.

Vereinfachung / Klare Hierarchie / Funktion zuerst / Universelle Formen

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

490

Metal (Java Look and Feel) — DavidL, Metal Look and Feel von Swing, 2020 — Wikimedia Commons / CC BY-SA 4.0Metal (Java Look and Feel) — Apache Software Foundation, Bildschirm von Apache JMeter 2.3.3, 2009 — Wikimedia Commons / CC BY-SA 3.0Metal (Java Look and Feel) — Kateregga1, Einstellungsbildschirm von JOSM, 2018 — Wikimedia Commons / CC BY-SA 4.0

Metal (Java Look and Feel)

メタル（Java ルック＆フィール） / 1998– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Das Standardaussehen, das Sun für Swing gebaut hat, damit ein Programm auf jedem Betriebssystem gleich aussieht. Metal war bei Sun der interne Projektname und blieb als öffentlicher Name hängen. Kennzeichnend sind blauviolette Flächen, dünne gerade Rahmen und die vollständige Weigerung, die Plattform darunter nachzuahmen.

Titelleisten interner Fenster liegen als dunkles blauviolettes Band auf einer blassen blauvioletten Fläche / Eine feine Textur aus Punkten und schrägen Strichen, in Titelleisten und Trennlinien eingeprägt / Rechteckige Schaltflächen ohne Eckenrundung, umzogen von einer ein Pixel starken dunklen blauvioletten Linie / Den äußeren Fensterrahmen zeichnet das Wirtssystem, während alles darin einer anderen Bildsprache folgt

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

485

OPEN LOOK — Fenster und Fenstermenü im OPEN-LOOK-Stil (olvwm), 2016 — Wikimedia Commons / CC BY-SA 4.0OPEN LOOK — Sun Microsystems, Komponentenmuster aus The NeWS Toolkit — Wikimedia Commons / CC BY-SA 3.0OPEN LOOK — Root-Menü und virtuelle Desktopverwaltung von olvwm, 2013 — Wikimedia Commons / CC BY-SA 3.0

OPEN LOOK

オープンルック / 1988–1990s / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Die Bildschirmsprache für UNIX-Workstations, die Sun Microsystems als Spezifikation veröffentlicht hat. Sie legt zugleich eine Fassung für Schwarzweißanzeigen und eine dreidimensionale Fassung fest, setzt alle gemeinsamen Elemente in einer einzigen Groteske und bestimmt, dass Farbe zurückhaltend zu verwenden ist. An der linken Schulter eines Aufklappfensters sitzt eine Reißzwecke, und wer sie einsteckt, behält das Fenster auf der Arbeitsfläche.

Eine Reißzwecke am linken Ende der Kopfzeile eines Aufklappfensters, die das Fenster an die Arbeitsfläche heftet, statt es zu schließen / Drei Punkte hinter einer Beschriftung kündigen ein Fenster an, ein nur umrissenes Dreieck kündigt ein Menü an / Die Bildlaufleiste zerfällt in einen Aufzug, ein Kabel und je einen Kabelanker oben und unten, wobei der dunkle Teil des Kabels den sichtbaren Anteil angibt / Die Arbeitsfläche entsteht aus einem Raster von 50 Prozent, der Schatten der Menüs aus einem Raster von 75 Prozent

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

491

One UI — Armen777444, Gerätewartungsbildschirm von One UI 7, 2025 — Wikimedia Commons / CC BY 4.0One UI — Startbildschirm von One UI 5, 2023 — Wikimedia Commons / Public domainOne UI — Paowee, Bildschirm von Samsung Internet 27, 2024 — Wikimedia Commons / CC BY-SA 4.0

One UI

ワンUI / 2018– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenCalm

Die Gestaltungssprache, die Samsung für die Galaxy Geräte festgelegt hat. Sie teilt den Bildschirm auf der Höhe, die der Daumen am leichtesten erreicht, und nennt den oberen Teil Sichtbereich und den unteren Bedienbereich, sodass Titel oben sitzen, während sich Schaltflächen, Reiter und Dialoge unten sammeln. Inhalte werden in Behälter mit stark gerundeten Ecken gefasst, der Grund ist entweder Weiß oder reines Schwarz, und ein einziges Blau trägt alle Akzente.

Der obere Teil des Bildschirms enthält nichts als einen Titel und freien Raum, kein einziges bedienbares Element / Text und Bilder werden in kartenförmige Behälter mit stark gerundeten Ecken gefasst / Die Titelleiste kennt nur zwei Zustände, ausgeklappt und eingeklappt, und hält nie auf einer Höhe dazwischen / Im dunklen Thema geht der Grund auf reines Schwarz und darauf liegt allein der blaue Akzent

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

546

Abbildungen auf der Quellseite

Ant Design

Ant Design / 2015– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density.

Dense tables set in small type and fine rules / Blue primary actions with explicit semantic colors / Consistent forms, pagination, trees and tables / Readability achieved through alignment and repetition, not generous space

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

561

Abbildungen auf der Quellseite

Elastic UI

Elastic UI / 2017– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Elastic's interface system is made for searching, filtering and diagnosing large data sets without losing operational density.

Fixed header and left navigation / Persistent query, filter and time controls / Tables and time-series charts in shared panels / Bright series colors limited to data

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

545

Abbildungen auf der Quellseite

Atlassian Design System

Atlassian Design System / 2012– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

A system that translates the complexity of Jira and Confluence into shared tokens, content rules, spacing, grids and components. Consistency builds trust while keeping large sets of issues, documents and states navigable.

White and pale gray layers with blue primary actions / Rounded cards and lozenge-shaped status labels / Clear divisions among sidebar, table and detail pane / Color, spacing, radius and elevation controlled by tokens

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

557

U.S. Web Design System — Startseite von USA.gov, 2023 — Wikimedia Commons / Public domainU.S. Web Design System — Vote.gov auf Bengalisch, 2026 — Wikimedia Commons / CC0U.S. Web Design System — Mobiler Bildschirm von Login.gov, 2024 — Wikimedia Commons / Public domain

U.S. Web Design System

米国Webデザインシステム / 2015– / Stil / Öffentliches Design

Warum passendTrustWeb / UIFinanzenCalm

A shared system for accessible, mobile-friendly and trustworthy U.S. federal web services, built from tested public-service patterns.

White, navy and restrained federal red / Large plain headings and readable body text / Official-site banner / Clear forms, alerts and step indicators

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

555

Abbildungen auf der Quellseite

Salesforce Lightning Design System

Salesforce Lightning / 2015– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Salesforce's interface language for record-centered business work, organizing objects, actions and status into repeatable workspace patterns.

Object headers with compact metadata / Tabs, cards and activity timelines / Cloud blue with semantic status colors / Dense forms and record tables

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

559

Abbildungen auf der Quellseite

BBC Global Experience Language

BBC GEL / 2010– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

BBC's global experience language unifies news, video, audio and children's products through readable hierarchy, accessible media controls and reusable editorial components.

Black header over white content / Short bold headlines / News cards with consistent image ratios / Highly visible focus, captions and playback controls

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

547

Abbildungen auf der Quellseite

Shopify Polaris

Shopify Polaris / 2017– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Shopify's UI framework for giving products, orders, payments and customers one commerce language. Cards and sections separate decisions, while short status and action language helps a merchant keep the store moving.

White cards stacked on a pale ground / Green used as success or forward motion / Title, status and primary action gathered at the top / Compact badges for product, order and payment states

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

558

Abbildungen auf der Quellseite

NHS Design System

NHSデザインシステム / 2016– / Stil / Öffentliches Design

Warum passendTrustWeb / UIFinanzenCalm

The NHS system makes urgent health information and services calm, direct and consistent through plain language, strong focus states and tested clinical patterns.

NHS blue and generous white space / Large headings and short paragraphs / Callouts for warning and care advice / Visible focus and simple forms

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

580

CDE Interface — KI-generierte Interpretation
KI-Interpretation, keine Referenz

CDE Interface

CDEインターフェース / 1993–2000s / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

The Common Desktop Environment unified UNIX workstations through Motif-derived bevels, a persistent Front Panel, workspace switching and low-color icons, making different hardware feel like one workplace.

Box-like Front Panel along the lower edge / Raised buttons and recessed fields made from paired light and dark borders / Low-color pixel icons with dark outlines / Persistent buttons for switching among workspaces

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

582

GNOME Clearlooks — KI-generierte Interpretation
KI-Interpretation, keine Referenz

GNOME Clearlooks

GNOME Clearlooks / 2005–2011 / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenCalm

GNOME 2.12's standard theme made GTK applications friendly and simple through pale-gray windows, blue selection, restrained gloss and firm boundaries.

Pale-gray surfaces with blue selection bars / A quiet highlight only along button tops / Tabs and fields with restrained rounding / Small GNOME icons and a concise two-level hierarchy

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

560

Abbildungen auf der Quellseite

Mozilla Protocol

Mozilla Protocol / 2017– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.

Bold black headings and broad white space / Large fields of vivid color / Flexible billboards and cards / Short copy and explicit calls to action

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

570

Ubuntu Yaru — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Ubuntu Yaru

Ubuntu Yaru / 2018– / Stil / Bildschirmsprachen

Warum passendTrustWeb / UIFinanzenTechnique

Ubuntu's community-built default theme overlays Adwaita-based GTK and GNOME Shell with Ubuntu orange, dark header bars and Suru-derived icons, distributing windows, shell, icons, cursors and sound as one suite.

Light window body contrasted with a dark header bar / Ubuntu orange for selection and focus / Suru-derived icons based on circles, squares and vertical or horizontal oblongs / One-pixel icon edge, restrained gradient and lower shadow

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

8

Web Brutalism — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Web Brutalism

ウェブ・ブルータリズム / 2014– / Stil / Interface-Stile

Warum passendTrustWeb / UIFinanzenTextübereinstimmung

Zeigt die Seite so, wie der Browser sie standardmäßig darstellt, und verweigert die fertige Anmutung der Vorlagen.

Standardüberschriften und Links / Blaue unterstrichene Links / Extreme Schriftgrößensprünge / Linien und Weißraum ohne Zierrat

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

58

WPA Poster — Harry Herzog / Federal Art Project, See America, 1936–40 — Library of Congress / No known restrictions on publicationWPA Poster — WPA, See America, c.1937 — Wikimedia Commons / Public domainWPA Poster — Ausstellungsplakat des WPA Federal Art Project — Wikimedia Commons / Public domain

WPA Poster

WPAポスター / 1935–1943 / Stil / Öffentliches Design

Warum passendTrustWeb / UIFinanzenTextübereinstimmung

Trägt ein öffentliches Anliegen mit einfachen Bildern und wenigen Druckfarben breit und eindringlich weiter.

Vereinfachte Landschaften / Kräftige Grotesk / Siebdruckfarben / Ein klarer Handlungsaufruf

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

31

Neubrutalism — KI-generierte Interpretation
KI-Interpretation, keine Referenz

Neubrutalism

ニューブルータリズム / 2010s– / Stil / Interface-Stile

Warum passendTrustWeb / UIFinanzenTextübereinstimmung

Lehnt sich mit dicken Rahmen und unverblümter Farbe warmherzig gegen das überpolierte Web auf.

Dicke schwarze Rahmen / Harte Schatten / Leuchtende Farben / Flache Komponenten

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

32

Flat Design / Vector Minimalism — Google, UI-Komponenten des Material Design, 2015 — Wikimedia Commons / Public domainFlat Design / Vector Minimalism — Preply, Chemistry Class in School, 2021 — Wikimedia Commons / CC BY 2.0Flat Design / Vector Minimalism — CEDEC, 7 Gründe für freie Software in der Schule, Infografik, 2018 — Wikimedia Commons / CC BY-SA 4.0

Flat Design / Vector Minimalism

フラットデザイン / ベクターミニマリズム / 2010s– / Stil / Interface-Stile

Warum passendTrustWeb / UIFinanzen

Reduziert Information auf schlichte Flächen und Farbe, die sich über Bildschirme und Medien hinweg übertragen lassen.

Einheitliche Flächen / Einfache Formen / Kaum Schatten / Klare Farbigkeit

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

24

Skeuomorphism — Flachatmer, Oberfläche im Stil eines Gitarrenverstärkers, Guitarix 0.35.0, 2016 — Wikimedia Commons / CC BY-SA 4.0Skeuomorphism — TTerlizz, UI eines ledergebundenen Notizbuchs, 2013 — Wikimedia Commons / CC BY-SA 3.0Skeuomorphism — NairobiPapel, Cool Retro Term, Terminal im Stil eines Röhrenmonitors, 2021 — Wikimedia Commons / CC BY-SA 4.0

Skeuomorphism

スキューモーフィズム / 2000s–2010s / Stil / Interface-Stile

Warum passendTrustWeb / UIFinanzenTextübereinstimmung

Entleiht echten Materialien und Werkzeugen ihre Zeichen, um unbekannte Interaktionen verständlich zu machen. Der Begriff benennt ein Prinzip, weshalb Aqua ebenso wie gebürstetes Metall die Gestalt ist, die dieses Prinzip in einem bestimmten Produkt angenommen hat.

Leder, Metall, Papier / Plastische Schatten / Metaphern der realen Welt / Feine Texturen

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

2

Bauhaus — Joost Schmidt, Plakat Bauhaus-Ausstellung 1923 — Wikimedia Commons / Public domainBauhaus — Bauhausbücher 7 von Joost Schmidt, 1926 — Wikimedia Commons / Public domainBauhaus — Junkers-Werbung von Joost Schmidt — Wikimedia Commons / Public domain

Bauhaus

バウハウス / 1919–1933 / Stil / Funktionalismus

Warum passendTrustWeb / UIFinanzenTextübereinstimmung

Lässt Funktion und Spiel über Kreis, Dreieck und Quadrat zusammenfinden.

Elementare Formen / Primärfarben / Funktionale Schönheit / Sichtbare Konstruktion

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

347

Group f/64 — Adams, The Tetons and the Snake River 1942 — Wikimedia Commons / Public domainGroup f/64 — Ansel Adams, Monolith, the Face of Half Dome — Wikimedia Commons / Public domain

Group f/64

グループf/64 / 1932–1935 / Stil / Fotografische Bewegungen

Warum passendTrustWeb / UIFinanzenTechnique

Ein Manifest der Straight Photography von Weston, Adams und ihrem Kreis, die die randscharfe Zeichnung der auf Blende 64 abgeblendeten Optik zur Fahne machten. Gegen den Dunst des Piktorialismus erklärten sie die Präzision des Großformats und den vollen Tonwertreichtum selbst zur Schönheit der Fotografie.

Durchgehende Tiefenschärfe / Präzision des Großformats / Eine reiche Grauskala / Direktheit ohne Manipulation

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

425

Neo-Impressionism — Georges Seurat, Ein Sonntagnachmittag auf der Insel La Grande Jatte, 1884–86 — Wikimedia Commons / Public domainNeo-Impressionism — Paul Signac, Bildnis Félix Fénéon, 1890 — Wikimedia Commons / Public domainNeo-Impressionism — Paul Signac, Die Segnung der Thunfischflotte von Groix — Minneapolis Institute of Art / Public domain

Neo-Impressionism

新印象主義 / 1886–1900 / Stil / Geometrische Abstraktion

Warum passendTrustWeb / UIFinanzenTechnique

Eine Methode, die die impressionistische Intuition durch optische Theorie ersetzte und Punkte ungemischter reiner Farbe setzte, die sich erst auf der Netzhaut verbinden. Die Disziplin von Divisionismus und Pointillismus bearbeitete vorweg dieselben Probleme wie später Rasterdruck, Mosaik und der Bildaufbau aus Pixeln.

In gleichmäßigen Abständen gesetzte Punkte / Vibration durch nebeneinandergesetzte Komplementärfarben / Niemals gemischte reine Farben / Rahmenwirkung durch einen gepunkteten Rand

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

448

Hard-Edge Painting — Ellsworth Kelly, Rot Gelb Blau Weiß und Schwarz — Wikimedia Commons / Public domain

Hard-Edge Painting

ハードエッジ・ペインティング / 1959–1970s / Stil / Geometrische Abstraktion

Warum passendTrustWeb / UIFinanzenTechnique

Malerei, die ihre Grenzen vollkommen scharf hält und das Bild allein aus flachen Farbflächen aufbaut. Duktus und Abstufung entfallen, der Rand der Farbfläche wird zum einzigen Ereignis. Die mit Abklebeband erzeugte präzise Kante ist der unmittelbare Vorfahr des späteren Flat Design und der Vektorgrafik.

Vollkommen scharfe Ränder der Farbflächen / Flacher Auftrag ohne Abstufung / Wenige, große Farbfelder / Die Form selbst bestimmt den Bildträger

design.md ／ Bild-Prompt

ChatGPT ／ Claude ／ Google AI

Redaktionelle Grundsätze

IndexStyle sammelt nicht jeden Begriff aus dem Designumfeld. Ein eigener Eintrag muss eine erkennbare, reproduzierbare und von Nachbarn unterscheidbare Bildsprache beschreiben. Aufnahmekriterien

Nach oben