Design-TokenDesign Token
Ein Design Token benennt eine Design-Entscheidung. Beispiele sind eine Farbe, ein Abstand, eine Schriftart oder eine Bewegungs-Geschwindigkeit.
Leitfaden öffnenUI-Designstile erklärt mit Beispielen
Sieh, wie jeder Stil aussieht, wann er hilfreich ist und wann er stört.
VarianteVariant
Eine Variante ist eine genehmigte Version einer Komponente für eine andere Größe, Stärke oder Einstellung.
Leitfaden öffnenVisuelle HierarchieVisual Hierarchy
Visuelle Hierarchie zeigt, was Menschen zuerst, als Nächstes und zuletzt bemerken, durch Größe, Kontrast, Platzierung und Raum.
Leitfaden öffnenFarbkontrastColor Contrast
Farbkontrast ist der gemessene Helligkeitsunterschied zwischen Inhalt und dem direkten Hintergrund. Es zeigt, ob Texte und Kanten leicht zu erkennen sind.
Leitfaden öffnenTypografieTypography
Typografie ist, wie Textstile ausgewählt und angeordnet werden, um Wörter lesbar, geordnet und markenkonform zu machen.
Leitfaden öffnenSkala eingebenType Scale
Eine Type-Scale ist eine kleine, geplante Sammlung von Textgrößen und Zeilenhöhen.
Leitfaden öffnenFarbpaletteColor Palette
Eine Color Palette ist eine geplante Farbgruppe. Jede Farbe hat eine klare Rolle, einen Status oder eine Oberfläche.
Leitfaden öffnenAbstandsmaßstabSpacing Scale
Eine Spacing-Scale ist eine kleine Sammlung von Abstandsgrößen. Sie zeigt Gruppen und bewahrt einen stetigen visuellen Rhythmus.
Leitfaden öffnenIkonographieIconography
Ikonographie ist ein gemeinsames Symbolset mit einheitlichem Aussehen und klaren Bedeutungen für Aktionen und Ideen.
Leitfaden öffnenDark ModeDark Mode
Dark Mode passt Flächen, Text, Rahmen, Medien und Zustände für eine dunkle Umgebung an.
Leitfaden öffnenResponsives DesignResponsive Design
Responsives Design lässt Layout, Inhalt und Steuerungen sich ändern, um zum verfügbaren Platz und Gerät zu passen.
Leitfaden öffnenNetScrim
Ein Scrim ist eine dunkle, leicht durchsichtige Schicht hinter einem Overlay. Es trennt das Overlay und zeigt, dass die Seite darunter blockiert ist.
Leitfaden öffnenAbständeSpacing
Abstand ist leerer Raum, der absichtlich platziert wird. Er gruppiert verwandte Elemente, trennt Ideen und gibt einer Seite Rhythmus.
Leitfaden öffnenRandMargin
Rand ist der Raum außerhalb des Rahmens eines Elements. Er hält dieses Element von nahegelegenen Layout-Elementen fern.
Leitfaden öffnenAuffüllungPadding
Padding ist der Raum innerhalb des Rahmens eines Elements, zwischen seinem Inhalt und seinem Rand.
Leitfaden öffnenAbstandGap
Abstand ist der Raum, den ein Container zwischen seinen Flexbox- oder Grid-Kindern platziert. Dieselbe Regel gilt für jedes Paar.
Leitfaden öffnenZentrierte SpalteCentered Column
Eine zentrierte Spalte hat eine lesbare Maximalbreite und auf beiden Seiten gleich viel Abstand.
Leitfaden öffnenBento GridBento Grid
Ein Bento-Grid packt Kacheln unterschiedlicher Größe in ein Layout. Größere Bereiche zeigen, welcher Inhalt am wichtigsten ist.
Leitfaden öffnenTextkürzungText Truncation
Textkürzung schneidet Text ab, um Platz zu sparen. Ein Auslassungszeichen zeigt, dass eine oder mehrere Zeilen fehlen.
Leitfaden öffnenSeitenverhältnisAspect Ratio
Das Seitenverhältnis sagt, wie breit ein Element im Vergleich zu seiner Höhe ist.
Leitfaden öffnenBackdrop BlurBackdrop Blur
Backdrop Blur weicht ab, was hinter einer klaren Fläche liegt. Es verwischt nicht den eigenen Inhalt der Fläche.
Leitfaden öffnenGlassmorphismusGlassmorphism
Glassmorphismus ist ein visueller Stil mit klaren, geschichteten Oberflächen. Es verwendet Unschärfe, helle Rahmen und ein kleines Maß an Tiefe.
Leitfaden öffnenFlüssigglasLiquid Glass
Flüssigglas ist ein beweglicher, transparenter Materialstil. Er nutzt linseartige Biegungen, Glanzlichter und Formen, die scheinbar zusammengefügt oder flexibel erscheinen.
Leitfaden öffnenSkeuomorphismusSkeuomorphism
Skeuomorphismus kopiert vertraute reale Objekte, um eine digitale Steuerung zu erklären. Es kann auch deren Materialien kopieren.
Leitfaden öffnenNeumorphismusNeumorphism
Neumorphismus ist ein sanfter, kontrastarmer Stil. Licht- und Dunkelschatten lassen Bedienelemente so erscheinen, als wären sie aus einer einfarbigen Oberfläche erhaben oder hineingedrückt.
Leitfaden öffnenNeobrutalismusNeobrutalism
Neobrutalismus ist ein mutiger, kontrastreicher digitaler Stil. Er verwendet einfache Formen, dicke Rahmen, direkte Farben und ein klares mechanisches Layout.
Leitfaden öffnenMinimalismusMinimalism
Minimalismus entfernt, was ein Design nicht benötigt. Er hält das Produkt dennoch klar, nützlich und unterscheidbar.
Leitfaden öffnenFlaches DesignFlat Design
Flaches Design verwendet einfache Formen, einfarbige Farben und klare flache Bereiche mit wenig künstlicher Tiefe.
Leitfaden öffnenClaymorphismClaymorphism
Claymorphism ist ein verspielter Stil mit pummeligen Formen und runden Ecken. Weiche Schatten und pastellfarbene Flächen lassen es wie Ton aussehen.
Leitfaden öffnenY2K Digitale ÄsthetikY2K Digital Aesthetic
Diese digitale Ästhetik ist ein Retro-Future-Stil aus der späten 1990er- und frühen 2000er-Jahre-Digitalkultur. Sie verwendet oft Chrom, Pixel, helle Verläufe und verspielte Computer-Details.
Leitfaden öffnenFrutiger AeroFrutiger Aero
Frutiger Aero ist ein hoffnungsvoller Stil der Mitte der 2000er Jahre. Er mischt glänzende Oberflächen mit blauem Himmel, Wasser, grünen Pflanzen, Blasen und freundlich aussehender Technologie.
Leitfaden öffnenWeb BrutalismusWeb Brutalism
Web-Brutalismus ist ein roher Webstil. Er zeigt Struktur, Browser-Standards, schlichte Typografie und geplante Rauheit statt gewöhnlicher Politur.
Leitfaden öffnenVolkssprache WebVernacular Web
Das Volkssprach-Web kopiert die alltäglichen Seiten, die Gemeinschaften erstellen. Es unterscheidet sich von polierten Systemen, die von großen Gruppen gemacht werden.
Leitfaden öffnenAquaAqua
Aqua ist ein glänzender Design-Stil aus dem frühen macOS. Es nutzt leuchtende Bedienelemente, tiefe Glaseffekte, dünne Streifen und grelles Blau.
Leitfaden öffnenWindows AeroWindows Aero
Windows Aero ist ein Desktop-Stil aus den späten 2000er Jahren. Er verwendet durchsichtige Fensterrahmen, unscharfes Glas, weiches Leuchten und geschichtete Ränder.
Leitfaden öffnenSchweizer StilSwiss Style
Der Schweizer Stil verwendet klare Raster und ungleichmäßige, aber ausgewogene Layouts. Er verwendet auch serifenlose Schriftarten, Fotos und eine strikte visuelle Ordnung.
Leitfaden öffnenEditorial DesignEditorial Design
Editorial Design ordnet eine Geschichte durch Lesetempo, Schrift, Bilder, Bildunterschriften und wiederkehrende Seitenmuster an.
Leitfaden öffnenMaterial DesignMaterial Design
Material Design ist ein System für Komponenten und Interaktionen. Es verwendet geschichtete Oberflächen, Bewegung mit Zweck, flexible Layouts und gemeinsame Designtoken.
Leitfaden öffnenFarbverlaufGradient
Ein Gradient ist ein sanfter Wechsel zwischen Farben oder Transparenz. Er kann einer Linie, einem Kreis, einem Winkel oder einem Netz folgen.
Leitfaden öffnenSchatten & HöheShadow & Elevation
Ein Schatten ist ein visueller Effekt. Elevation ist das Tiefenverhältnis zwischen Oberflächen, das der Scharten erklären kann.
Leitfaden öffnenBorder Radius & Squircle — LernpaketBorder Radius & Squircle — Learning Bundle
Dieser Leitfaden trennt drei Ideen. Sie sind Standard-CSS-border-radius, Entwurf von Eckformen: Squircle, und andere squircle-ähnliche Formen oder Plattformmasken. Das Paket ist kein standardisierter Designbegriff.
Leitfaden öffnenOpazitätOpacity
Die Deckkraft gibt an, wie solide ein Element und seine Kinder erscheinen. Sie kann von durchsichtig bis solide reichen.
Leitfaden öffnenApple Human Interface GuidelinesApple Human Interface Guidelines
Die Apple Human Interface Guidelines erklären das Design für Apple-Plattformen. Sie behandeln Aktionen, Optik, Steuerelemente, Eingaben, Barrierefreiheit und Plattform-Unterschiede.
Leitfaden öffnenNotion-artiger ArbeitsbereichNotion-style Workspace
Ein Notion-style Workspace nutzt das ruhige Aussehen von Dokumenten. Es bevorzugt lesbaren Text, Inhalts-Blöcke, ruhige Bedienelemente und offenen Raum.
Leitfaden öffnenSaaS-MarketingseiteSaaS Marketing Site
Eine SaaS Marketing Site erklärt einer Zielgruppe ein Problem und einen Software-Dienst. Sie hilft Besuchern, die Passung zu beurteilen und den nächsten Schritt zu wählen.
Leitfaden öffnenB2B-FirmenseiteB2B Corporate Site
Eine B2B-Corporate-Site hilft Geschäftspartnern, die Fähigkeiten, Regeln, Vertrauenswürdigkeit und Passgenauigkeit eines Unternehmens zu prüfen. Sie unterstützt auch beim Kauf oder bei Partnerschaften.
Leitfaden öffnenDirect-to-Consumer E-CommerceDTC E-commerce
DTC-E-Commerce lässt eine Marke direkt an Kunden verkaufen. Es deckt Entdeckung, Produktwahl, Zahlung, Lieferung und Hilfe nach dem Kauf ab.
Leitfaden öffnenVerspielte IllustrationPlayful Illustration
Verspielte Illustration verwendet lebhafte Charaktere, Formen, Farben und visuelle Witze. Sie kann Wärme, Bedeutung oder Markencharakter hinzufügen.
Leitfaden öffnenOrganisches DesignOrganic Design
Organisches Design folgt Formen, die in der Natur vorkommen. Es verwendet ungleichmäßige Kurven, taktile Texturen, natürliche Farben und weniger mechanische Layouts.
Leitfaden öffnenMemphis-StilMemphis Style
Memphis-Stil ist ein mutiger postmoderner Look. Er verwendet starke Formen, aufeinanderprallende Farben, Muster, ungleichmäßige Balance und verspielte Energie.
Leitfaden öffnenTerminal-ÄsthetikTerminal Aesthetic
Terminal-Ästhetik leiht sich von Kommandozeilenbildschirmen. Sie verwendet monospaced Text, eine enge Hierarchie, Prompt-Zeichen, wenige Farben und einen klaren Status.
Leitfaden öffnenWabi-sabiWabi-sabi
Wabi-sabi ist eine japanische Sicht auf Schönheit. Es schätzt Begrenzungen, Veränderung, ungleiche Formen, Alter und ehrliche Materialien mehr als perfekte Politur.
Leitfaden öffnenCSS logische EigenschaftenCSS Logical Properties
CSS-Logikeigenschaften beschreiben Seiten anhand des Schreibflusses, wie Block und Inline. Sie ersetzen feste Richtungen wie oben, rechts, unten und links. Dies hilft Layouts, der Schreibrichtung der Sprache zu folgen.
Leitfaden öffnenSubgridSubgrid
Ein Subgrid ist ein Raster innerhalb eines anderen Rasters, das die Zeilen- oder Spaltengrößen des übergeordneten Elements teilt. Es kann eine Richtung oder beide teilen.
Leitfaden öffnenintrinsische GrößenbestimmungIntrinsic Sizing
Die intrinsische Größenbestimmung lässt den Inhalt eines Elements dabei helfen, seine Größe zu bestimmen, anstatt nur eine feste Größe von außen zu verwenden.
Leitfaden öffnenmin-Inhaltmin-content
`min-content` ist die kleinste Größe, die der Inhalt nach dem Umbrechen an allen erlaubten Umbruchstellen haben kann.
Leitfaden öffnenmax-Inhaltmax-content
`max-content` ist die Größe, die der Inhalt haben möchte, wenn er an normalen Umbruchstellen nicht umbrechen würde.
Leitfaden öffnenminmax()minmax()
`minmax()` ist eine CSS-Grid-Funktion, die einer Zeile oder Spalte sowohl eine minimale als auch eine maximale Größe gibt.
Leitfaden öffnenclamp()clamp()
`clamp()` wählt einen bevorzugten CSS-Wert, hält ihn aber zwischen einem Minimum und einem Maximum.
Leitfaden öffnenobject-fitobject-fit
`object-fit` steuert, wie ein Bild, Video oder ähnliches Element innerhalb seines Containers passt.
Leitfaden öffnenViewport-EinheitenViewport Units
Viewport-Einheiten sind CSS-Längen, die auf dem sichtbaren Bereich des Browsers basieren. Kleine, große und dynamische Versionen berücksichtigen Browserleisten, die eingeblendet oder ausgeblendet werden.
Leitfaden öffnenPseudo-KlassePseudo-class
Eine Pseudo-Klasse ist Teil eines CSS-Selectors. Sie findet ein Element anhand einer Bedingung, wie Zustand, Ort, Sprache oder Benutzeraktion.
Leitfaden öffnenPseudo-ElementPseudo-element
Ein Pseudo-Element ermöglicht es CSS, einen Teil oder Block zu gestalten, der im Quell-HTML kein normales Element hat. Beispiele sind der erste Buchstabe und generierte Dekoration.
Leitfaden öffnenCSS-RahmenradiusCSS Border Radius
CSS border-radius macht Box-Ecken aus Viertel-Ellipsen unter Verwendung horizontaler und vertikaler Radien. Es ändert das Zeichnen und Clipping, aber nicht die Layoutgröße der Box und erzeugt keine mathematische Squircle.
Leitfaden öffnenCSS Squircle-EckeCSS Squircle Corner
Im CSS Borders Level 4 Entwurf ist squircle ein Eckformwert für eine konvexe Superellipse zwischen rund und quadratisch. Es entspricht superellipse(2), benötigt einen von Null verschiedenen Border-Radius und erfordert immer noch eine Browser-Unterstützungsprüfung.
Leitfaden öffnenErzwingungsmodus für FarbenForced Colors Mode
Der Farbmodus erzwingen verwendet eine vom Benutzer gewählte Systempalette anstelle vieler Seitenfarben. Dies kann Steuerelemente und Text leichter unterscheidbar machen.
Leitfaden öffnenVisual Effect MaterialVisual Effect Material
Visual Effect Material ist ein macOS-Oberflächenstil, der das, was sich dahinter befindet, mischt und verschwimmen lässt. Es ändert sich abhängig vom Fensterstatus und vom hellen oder dunklen Aussehen.
Leitfaden öffnen