Horizontale Reihe mit Umbruch (Buttons, Badges, Meta-Zeilen) — wrappt fluid ohne Media Query

Zwei benannte Spalten mit Verhältnis (1:1, 2:1, 1:2) — stapeln mobil untereinander

Hülle mit dekorativem Hintergrund oder Rand für beliebige Inhalte: laufender Rand-Glanz, Punkt-/Linien-Raster oder Verlaufs-Schein — alle Effekte aus Tokens und mit prefers-reduced-motion-Rückfall

Responsives Raster — feste Spaltenzahl (bricht mobil auf eine Spalte) oder auto-fit nach Mindestbreite

Vertikaler Stapel mit Token-Abstand — das Grundlayout für untereinander stehende Inhalte

Pill-Banner über einer Überschrift (Beispiel: Neu · Version 2 ist da): Markierung links, Text, optionaler Pfeil — als Link oder statisch

Bild oder Initialen einer Person mit optionalem Status

Status- oder Kategorie-Kennzeichen. BREAKING 2.0.0: Prop tone heißt jetzt variant (Migration 1-to-2 vorhanden)

Auslöser für Aktionen — emittiert das semantische Event activate

Segmentierte Button-Gruppe (Untitled-UI-Muster): verbundene Secondary-Buttons mit geteilten Rändern, aktives Segment hervorgehoben

Checkbox mit Label, Zuständen (disabled, invalid) und Formular-Tokens

Filter-/Auswahl-Chip — im Element Builder generiert (Archetyp box)

Horizontale Trennlinie, optional mit zentriertem Beschriftungstext

Icon auf getönter runder/eckiger Fläche (Untitled-UI-Muster Featured Icon) — Töne aus Status-/Primary-Tokens per color-mix abgeleitet

Überschrift der Ebenen 1–4

Kuratiertes Inline-SVG-Icon-Set (Whitelist) — Größen über icon-Tokens, Farbe über currentColor/Ton

Reiner Icon-Button (Utility-Button): Varianten secondary/ghost/gefahr, Pflicht-aria-label, emittet activate

Bild mit URL-Whitelist, Seitenverhältnis und Platzhalter-Fallback bei unsicherer Quelle

16:9, cover

Quadratisch, große Rundung

Hochgestellter Quellen-Verweis im Fließtext — verlinkt auf den passenden Eintrag in component.sources, mit Titel als Tooltip

Einzeiliges Formularfeld mit Label, Zuständen (disabled, invalid) und Formular-Tokens

Universelle Listen-Zeile: Icon/Avatar-Fläche, Titel + Untertitel, Meta rechts, optionaler Chevron — Grundbaustein für Listen, Suchergebnisse, Auswahllisten

Textlink mit URL-Whitelist — echte href-Navigation bleibt immer die Rückfallebene

Shop-Preiszeile: Betrag (bei Streichpreis automatisch in Sale-Farbe), Streichpreis, Rabatt-Badge — Sale-Ton über den themebaren color.sale-Token

Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige

Mengenwahl mit −/+ und Zahleneingabe — progressive (Input funktioniert ohne JS), Controller klemmt auf min/max und emittet change

Radiobutton-Gruppe mit Optionen-Array — Gruppen-Logik im Element gelöst (ein name, eine Auswahl)

Rating-Anzeige 0–5 mit Teilsternen (Breiten-Maske, kein JS) und optionaler Anzahl — Farben über status.warning-/Sale-Tokens

Formatierter Text aus dem Editor — wird serverseitig gegen die Whitelist sanitisiert

Auswahlfeld (native select) mit Optionen-Array, Zuständen und Formular-Tokens

Lade-Platzhalter (schimmernde Fläche) für Text, Blöcke und Kreise

Nativer Range-Slider mit Token-Styling und Live-Wertanzeige — funktioniert ohne JS, Controller aktualisiert Anzeige und emittet change

Rotierender Ladeindikator mit Größen und Screenreader-Label

Zustands-Punkt mit Beschriftung (online, beeinträchtigt, offline, wartend) — Punkt pulsiert optional; Farben aus Status-Tokens

Farb-/Bild-Kachel für Produktvarianten. Die Produktfarbe ist ein CONTENT-Datum (Prop), kein Design-Token — Auswahl-Ring und Maße kommen aus Tokens

An/Aus-Schalter (Toggle) — checkbox-Semantik mit Switch-Optik über Tokens

Fließtext-Absatz mit Ton und Größe

Mehrzeiliges Formularfeld mit Label, Zuständen und Formular-Tokens

Auf-/zuklappbare Einträge (items-Array) — Grundlage für FAQ; toggle als semantisches Event

Aktivitäten-Feed mit Zeitleiste: Initialen-Kreis, Akteur + Aktion + Ziel, Zeitstempel — Verbindungslinie aus Tokens

Jahres-Raster nach GitHub-Muster: eine Kachel je Tag, Intensität in fünf Stufen aus einem Ton-Token, Wochentag- und Monats-Beschriftung, Legende und Gesamtzahl

Steckbrief eines Agenten: Name, Rolle, Zustand, Modell, Werkzeug-Badges und Kennzahlen — für Agenten-Übersichten und Team-Ansichten

Hinweis-Box in vier Tönen mit Icon, optional schließbar

Liste, deren Einträge nacheinander einlaufen (Benachrichtigungs-Demos, Feature-Aufzählungen): Icon-Fläche, Titel, Text, Zeit — mit prefers-reduced-motion-Rückfall

Pfadnavigation (items-Array, letzter Eintrag = aktuelle Seite ohne Link)

Inhaltskarte mit Media-, Inhalts- und Footer-Slot

Zeitleiste der Denk-Schritte eines Agenten: Schritt-Punkte mit Titel, Detailtext und optionaler Quellen-/Werkzeug-Angabe — als Ganzes einklappbar

Diagramm auf ApexCharts (lokal ausgeliefert, kein CDN): Linie, Balken, Fläche, Kreis, Ring, Radar. Farben und Schrift werden zur Laufzeit aus den Design-Tokens gelesen, ein Theme-Wechsel färbt mit. Ohne JavaScript bleibt eine lesbare Wertetabelle stehen

Marke im Verlauf, zu der zurückgesprungen werden kann: Linie mit Label, Zeitangabe und Zurücksetzen-Knopf

Radio- oder Mehrfachauswahl als Karten mit Titel, Beschreibung, optionalem Icon und Badge — Tastatur-fähig, emittiert selection

Quelltext-Anzeige mit Kopfzeile (Dateiname/Sprache), optionalen Zeilennummern und Kopieren-Knopf — Syntax-Töne über Tokens, kein Highlighter zur Laufzeit

{
    "definition": "component.combobox",
    "props": {
        "label": "Team",
        "options": [{"label": "Vertrieb", "active": true}]
    }
}

Einzelauswahl mit Suchfilter und Options-Panel: Tastatur-Navigation (Pfeile/Enter), Escape/Außenklick schließen, optionale Beschreibungen pro Option

Command-Menu: Strg/Cmd+K oder Öffner-Button, Suchfilter, Pfeiltasten + Enter, Gruppen und Kürzel — emittet befehl, Escape/Backdrop schließen

Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche

Rückfrage vor einer folgenreichen Agenten-Aktion: Beschreibung, Details-Liste, Zustimmen/Ablehnen — nach der Wahl bleibt die Entscheidung sichtbar

Auslastung des Kontextfensters: Balken mit belegten/freien Token, Warn-Ton ab Schwellwert, optional Kosten und Modell-Angabe

Rechtsklick-Menü für eine Zielfläche: Einträge mit Icons/Trennern/Gefahr-Ton, öffnet an der Mausposition, schließt bei Außenklick/Escape — Einträge emittieren aktion

Scrollender Chat-Verlauf: hält den Blick am unteren Rand, zeigt beim Hochscrollen einen Zurück-nach-unten-Knopf — nimmt Nachrichten und AI-Bausteine im Slot auf

Grosser Call-to-Action — komponiert im Component Builder auf ui.button

Datums-Eingabe mit Popover-Kalender (Monatsraster, Vor/Zurück, Heute markiert, Mo-So) — progressive: Textfeld TT.MM.JJJJ funktioniert ohne JS, emittet change

Mehrstufiger Dialog (Wizard): gestapelte Ebenen mit Zurück/Weiter, hintere Ebenen bleiben versetzt sichtbar — Escape schließt, emittiert step und finish

Von rechts einfahrendes Slideout-Panel mit Backdrop (Untitled-UI-Muster): Öffner-Button, Kopf mit Titel + Schließen, Inhalt, Fußleiste — Escape/Backdrop schließen

Auslöser-Button mit Aktionsmenü — Outside-Click und Escape schließen, select als semantisches Event

Rich-Text-EINGABE mit Werkzeugleiste (fett, kursiv, unterstrichen, Überschrift, Listen, Zitat, Code, Link) — erzeugt genau das HTML, das der Sanitizer erlaubt; Gegenstück zur Anzeige ui.richtext

Zentrierter Leerzustand (Untitled-UI-Muster): Icon-Fläche, Titel, Text, Primär- und Sekundär-Aktion — für leere Listen, Suchergebnisse, Erststarts

Upload-Zone (Untitled-UI-Muster): Klick oder Drag-and-Drop, Dateiliste mit Größe und Entfernen — Prototyp ohne Server-Upload, emittet dateien

Filter-Bar über Tabellen/Listen: Suchfeld + Filter-Buttons mit Options-Panels + Zurücksetzen — Controller pflegt aktive Filter, emittet filter

Projekt-Zeitplan als Balkendiagramm: Zeilen mit Aufgaben, Zeitachse in Tagen/Wochen, farbige Balken (Ton aus Tokens), Fortschritts-Füllung, Heute-Linie und Meilenstein-Rauten

Vorschau-Karte beim Überfahren/Fokussieren eines Auslösers (Link-Vorschau, Personen-Karte): Titel, Text, Meta-Zeile — mit Verzögerung, schließt bei Verlassen/Escape

Klassische Desktop-Menüleiste (Datei, Bearbeiten, Ansicht …): Menüs mit Einträgen, Kürzeln, Trennern und Gefahr-Ton; Tastatur-fähig, öffnet bei Hover wenn ein Menü offen ist

Chat-Nachricht: Nutzer als Blase rechts, Assistent als Fließtext links mit Avatar; optionale Anhänge, Aktions-Leiste (Kopieren, Bewerten, Neu erzeugen) und Zeitstempel

Dashboard-Kennzahl (Untitled-UI-Muster): Label, großer Wert, Delta-Badge mit Richtung (steigend grün / fallend rot), Vergleichstext

Kompakter Tagesstreifen für Kopfleisten: waagerechte Tage mit Wochentag, Markierungs-Punkten für Termine, Blättern vor/zurück — Auswahl meldet das Datum

Dialog mit Backdrop (surface.backdrop + layer.modal) — Schließen über X, Backdrop-Klick und Escape; inline-Modus für Demo/Builder

Kompakte Modell-Auswahl für die Chat-Leiste: aktuelles Modell als Knopf, Panel mit Anbieter-Gruppen, Beschreibung und Merkmal-Badges

Multi-Select mit Chips im Feld, Suchfilter und Options-Panel (Untitled-UI-Muster) — Controller pflegt Auswahl, Escape/Außenklick schließen, emittet auswahl

Hauptnavigation in zwei Menü-Formen: klassische Leiste ODER Burger-Flyout (Logo + Primary-CTA + Burger, Links im Vollflächen-Overlay rechtsbündig) — navigate als semantisches Event

App-Seitenkopf (Untitled-UI-Muster): Titel + Beschreibung links, Aktions-Buttons rechts (Varianten wie Nav-Aktionen), optionale Trennlinie

Blättern durch Seiten (Fenster mit Auslassungen) — navigate mit Seitenzahl als Payload

Vorhaben eines Agenten vor der Ausführung: nummerierte Schritte mit Werkzeug-Angabe und Zustand, optional Freigabe-Leiste am Fuß

Der Grundstein aller Shop-Grids: Bild (oder Platzhalter), Sale-Badge, Wunsch-Herz, Titel, ui.price + ui.rating — komponiert aus den Shop-Elementen

Thumbnail-Spalte + Hauptbild — Controller wechselt das Hauptbild beim Thumbnail-Klick; ohne Bilder rendern Platzhalter-Flächen

Wizard-Fortschritt (Untitled-UI-Muster): erledigte Schritte mit Häkchen, aktiver hervorgehoben, kommende gedämpft — Verbindungslinien aus Tokens

Chat-Eingabe: mitwachsendes Textfeld, Enter sendet (Umschalt+Enter = Zeilenumbruch), Werkzeugleiste (Anhang, Modell) und Senden/Stop-Knopf

Anstehende Aufträge eines Agenten: Position, Titel, Zustand (wartet/läuft) und Entfernen-Knopf — für Batch-Läufe und Hintergrund-Aufgaben

Einklappbarer Denk-Block des Modells: Kopfzeile mit Dauer und Zustand (denkt / fertig), Inhalt als gedämpfter Text — natives details/summary, kein JS nötig

App-Seitenleiste (Untitled-UI-Muster): Marke, gruppierte Nav-Einträge mit Icons + Badges, Fußbereich mit Nutzer — einklappbar (Controller), aktiver Eintrag hervorgehoben

Einzeiliger Befehl mit Prompt-Zeichen und Kopieren-Knopf, optional mit Reitern (npm/pnpm/yarn) — Docs- und Onboarding-Baustein

Liste mit Gruppen, deren Einträge per Ziehen oder Tastatur (Pfeile mit Strg) umsortiert und zwischen Gruppen verschoben werden — meldet jede Umsortierung

Einklappbare Quellenliste unter einer Antwort: nummerierte Einträge mit Titel, Domain und optionalem Auszug — passend zu ui.inline-citation im Text

Kleine Verlaufsgrafik ohne Achsen für Kennzahl-Karten und Tabellenzellen — reines Inline-SVG, KEINE Diagramm-Bibliothek nötig; Farbe aus Tokens, Wertetabelle als Rückfall entfällt (Werte stehen im aria-label)

Am unteren Rand fixierte Kaufleiste: Titel + ui.price + Warenkorb-CTA — erscheint erst nach dem ersten Scroll-Viewport (Controller)

Anschluss-Fragen als Pillen unter der Antwort oder über der Eingabe — Klick meldet den Text zur Übernahme in die Prompt-Eingabe

Segmentierte Pill-Tab-Leiste (Atlassian-Collections-Muster): Leiste auf sunken-Fläche, aktiver Tab als Secondary-Pill — progressive Links, optional zentriert

Datentabelle aus columns/rows-Props — gestreift, dicht, mobil horizontal scrollbar

Reiter mit Panels (bis 4) — lokaler Zustand im Controller, semantisches Event change

Freie Schlagwort-Eingabe: Enter/Komma legt einen Chip an, Backspace im leeren Feld entfernt den letzten, optionale Vorschlagsliste — emittiert tags

Was der Agent gerade abarbeitet: Aufgaben mit Zustand (offen/läuft/fertig/Fehler), optionalen Unterpunkten und Fortschritts-Zeile

Terminal-Fenster mit Fenster-Punkten und Zeilen-Typen (Befehl, Ausgabe, Erfolg, Fehler, Hinweis); Zeilen erscheinen nacheinander (abschaltbar, respektiert prefers-reduced-motion)

$ npm run buildtokens: 179 Referenz-, 76 semantische Tokens, 10 Themesregistry: 128 Definitionenassets: 98 CSS-, 34 JS-ArtefakteBuild erfolgreichHinweis: 2 Definitionen ohne llm.md

$ npm test235 bestanden, 1 fehlgeschlagen

Segmentierter Umschalter Hell/Dunkel/System — setzt data-theme am Dokument, merkt sich die Wahl (localStorage) und folgt der Systemeinstellung

Aufruf eines Agenten-Werkzeugs: Name, Zustand (wartet/läuft/fertig/Fehler), einklappbare Eingabe- und Ergebnis-Blöcke — natives details, kein JS

{
  "filter": "overdue",
  "limit": 10
}

2 Treffer:
#4712 Beispiel AG (3 Tage überfällig)
#4718 Muster GmbH (1 Tag überfällig)

{"query": "Rückgabefrist"}

Verbindung abgelehnt (Port 587)

Hinweis-Blase bei Hover/Fokus — rein CSS (kein JS), Ebene über layer.dropdown

Hierarchische Baum-Ansicht (Ordner/Strukturen, max. 6 Ebenen): Zweige klappen per Controller, Blätter emittieren select — Chevron dreht, aktiver Knoten hervorgehoben

tricoma-Marken-Button — Komposition über ui.button

Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante

Video mit eigener Bedienleiste aus Tokens: Abspielen/Pause, Fortschritt mit Klick-Sprung, Zeitangabe, Ton, Vollbild — nutzt das native video-Element, kein Fremd-Player

Desktop-Fensterrahmen mit Titelleiste und Controls — Inhalt via contentMode (legacy-iframe | integrated-page) ab Phase 5

Horizontale Content-Karten-Reihe mit CSS-Scroll-Snap (kein JS): farbige Karten (Ton per Prop aus Tokens) mit Badge, Titel, Link und optionaler Media-Fläche

Aufruf-Banner mit Titel, Text und Button-Slot — brand- oder neutral-getönt, mobil kompakt

Fragen-Accordion auf nativen details/summary-Elementen (kein JS): Sektions-Kopf + Haarlinien-Trenner, Chevron dreht im offenen Zustand

Karten-Grid mit Haarlinien-Bordern (Bento-Muster): Sektions-Kopf (Mono-Kicker + Display-Titel), Karten mit Mono-Label, Text, optionaler Media-Fläche und Breit-Option

Feature-Kacheln mit Icon, Titel und Text — auto-fit-Raster, mobil eine Spalte

Seitenfuß mit Marke, Link-Spalten und Copyright-Zeile — Spalten stapeln mobil

Großer Website-Footer als Band: große Nav-Links + Gesprächs-CTA, Trennlinie, Rechtliches/Firma/Social, Copyright — ton-neutral, Instanz wählt den Ton, Theme liefert die Werte

Große Einstiegs-Section mit Titel, Untertitel und Aktions-Slot

Zentrierter Hero: zweizeiliger Display-Titel, horizontale Häkchen-Zeile, Primary- + Ghost-CTA, Plattform-Leiste in Mono — ton-neutral, Theme liefert Farben und Schrift-Familien

Generischer Split-Hero als dunkles Band: zweifarbiger Titel, Häkchen-Liste, CTA, Foto — Farben vollständig über die color.band-Tokens (Theme steuert)

Referenz-Logos in einer fluiden Reihe (gedämpft, Hover farbig)

Vier Logos

Vertraut von

Endlos laufendes Band für Logos oder Kurztexte: Richtung und Tempo wählbar, Randabblendung, Pause bei Mauskontakt — hält bei prefers-reduced-motion an

Text-Bild-Wechselzeile: Display-Titel + Text + Text-Link-CTA neben einer Media-Fläche (Bild oder Platzhalter-Fläche), Seite wählbar

Reservierte Sektion für noch fehlende Inhalte (Produktvisuals, Videos, Embeds): optionaler Kicker/Titel + gestrichelte Fläche mit Mono-Label und wählbarem Seitenverhältnis

Preispläne als Karten (Highlight-Plan hervorgehoben) — auto-fit-Raster, mobil gestapelt

Responsives Grid aus Produkt-Karten (auto-fill) mit optionalem Sektions-Kopf — für Empfehlungen, Kategorien, Suchergebnisse

Der Kopf der Produktdetailseite: Produkt-Galerie | Kaufbox (Titel, Sterne, Preis, Varianten-Picker, Mengen-Stepper, Warenkorb-CTA mit cart-Event, Trust-Punkte)

Karten mit Zitat, Person, Handle und Plattform-Hinweis — statische Social-Proof-Karten ohne externen Abruf (keine Fremd-API zur Laufzeit)

Review-Sektion: Zusammenfassung (große Zahl + Sterne + Verteilungs-Balken + Passform-Feedback) neben Review-Karten mit Autorin, Datum, Variante

Stat-Kacheln mit Haarlinien-Border: Mono-Label mit Status-Punkt, große Display-Zahl, Mono-Fußnote — optional mit Sektions-Kopf (Mono-Kicker + Display-Titel)

Zahlen-Banner (Wert + Beschriftung) — auto-fit, mobil gestapelt

Im Block Builder eingefrorene Komposition

Zitate-Raster mit Avatar (Initialen), Name und Rolle — auto-fit, mobil gestapelt

Universeller Inhalts-Block: Kicker (Akzent), zweifarbiger Titel, Text, Häkchen-Liste (optional mit fettem Auftakt je Punkt), Zitat-Balken, optionales Foto — als dunkles oder helles Band (Wechsel-Rhythmus)

App-Seitengerüst: Seitenleiste links (Navigation), Kopfzeile optional, Arbeitsbereich — für Desktop-Apps und Web-Applications

Templates liefern Slot-Regeln statt HTML — der Surface-Renderer (Phase 4) und der Builder (Phase 7) setzen sie durch.

Portal-Seitengerüst MIT eigenem Grundlayout: Header in voller Breite mit Linie (sticky), Inhalts-Container, Footer-Band in voller Breite — das erste Template, das sein Layout selbst besitzt

Templates liefern Slot-Regeln statt HTML — der Surface-Renderer (Phase 4) und der Builder (Phase 7) setzen sie durch.

Standard-Seitenaufbau: Navigation oben (Pflicht), beliebige Sections in der Mitte, Footer unten (Pflicht)

Templates liefern Slot-Regeln statt HTML — der Surface-Renderer (Phase 4) und der Builder (Phase 7) setzen sie durch.