# Radix Themes-Designsystem ## Radix Themes-Designsystem-Vorschau Entdecken Sie einen Projektarbeitsbereich, ein Einstellungsformular und Komponentenstatus, die denselben visuellen Regeln folgen. ### Projekte Bringen Sie die gemeinsame Arbeit voran. ### Arbeitsbereichseinstellungen Verwalten Sie die Zusammenarbeit in Ihrem Team. ### Ein klarer nächster Schritt ### Status sichtbar machen ● Zur Überprüfung bereit ## Radix Themes-Designsystem-Tokens Eine Arbeitsreferenz mit Quellenverweisen. Die Werte entsprechen der dokumentierten Basisskala; Farben, Eckenradius und Schatten werden anhand des aktiven Themes festgelegt. ### Farbrollen | Token | Zweck | | --- | --- | | --accent-1⧉ | Seitenhintergrund | | --accent-2⧉ | Zurückhaltender Hintergrund | | --accent-3⧉ | Interaktive Oberfläche | | --accent-4⧉ | Hover-Zustand interaktiver Elemente | | --accent-5⧉ | Ausgewählte Oberfläche | | --accent-6⧉ | Zurückhaltender Rahmen | | --accent-7⧉ | Rahmen interaktiver Elemente | | --accent-8⧉ | Starker Rahmen | | --accent-9⧉ | Flächige Füllung | | --accent-10⧉ | Hover-Zustand der flächigen Füllung | | --accent-11⧉ | Ergänzender Text | | --accent-12⧉ | Text mit hohem Kontrast | | --gray-1⧉ | Seitenhintergrund | | --gray-2⧉ | Zurückhaltender Hintergrund | | --gray-3⧉ | Interaktive Oberfläche | | --gray-4⧉ | Hover-Zustand interaktiver Elemente | | --gray-5⧉ | Ausgewählte Oberfläche | | --gray-6⧉ | Zurückhaltender Rahmen | | --gray-7⧉ | Rahmen interaktiver Elemente | | --gray-8⧉ | Starker Rahmen | | --gray-9⧉ | Flächige Füllung | | --gray-10⧉ | Hover-Zustand der flächigen Füllung | | --gray-11⧉ | Ergänzender Text | | --gray-12⧉ | Text mit hohem Kontrast | ### Abstände | Token | Basis | Skala | | --- | --- | --- | | --space-1⧉ | 4px | | | --space-2⧉ | 8px | | | --space-3⧉ | 12px | | | --space-4⧉ | 16px | | | --space-5⧉ | 24px | | | --space-6⧉ | 32px | | | --space-7⧉ | 40px | | | --space-8⧉ | 48px | | | --space-9⧉ | 64px | | ### Eckenradius und Erhebung | Token | Auflösung | | --- | --- | | --radius-1⧉ | Theme-Einstellung für den Eckenradius | | --radius-2⧉ | Theme-Einstellung für den Eckenradius | | --radius-3⧉ | Theme-Einstellung für den Eckenradius | | --radius-4⧉ | Theme-Einstellung für den Eckenradius | | --radius-5⧉ | Theme-Einstellung für den Eckenradius | | --radius-6⧉ | Theme-Einstellung für den Eckenradius | | --shadow-1⧉ | Schatten-Skala des Themes | | --shadow-2⧉ | Schatten-Skala des Themes | | --shadow-3⧉ | Schatten-Skala des Themes | | --shadow-4⧉ | Schatten-Skala des Themes | | --shadow-5⧉ | Schatten-Skala des Themes | | --shadow-6⧉ | Schatten-Skala des Themes | ### Typografie | Stufe | Schriftgröße | Zeilenhöhe | Laufweite | Schriftprobe | | --- | --- | --- | --- | --- | | 1 | 12px | 16px | 0.0025em | Design im Detail | | 2 | 14px | 20px | 0em | Design im Detail | | 3 | 16px | 24px | 0em | Design im Detail | | 4 | 18px | 26px | -0.0025em | Design im Detail | | 5 | 20px | 28px | -0.005em | Design im Detail | | 6 | 24px | 30px | -0.00625em | Design im Detail | | 7 | 28px | 36px | -0.0075em | Design im Detail | | 8 | 35px | 40px | -0.01em | Design im Detail | | 9 | 60px | 60px | -0.025em | Design im Detail | ### Responsive Breakpoints | Name | Mindestbreite | Anwendung | | --- | --- | --- | | initial | 0px | Basislayout | | xs | 520px | Erste optionale Layoutänderung | | sm | 768px | Anordnung im Tablet-Format | | md | 1024px | Breitere mehrspaltige Layouts | | lg | 1280px | Große Inhaltsfläche | | xl | 1640px | Besonders breite Layouts | Referenz: Farbe · Abstände · Typografie · Eckenradius · Schatten · Breakpoints ## Vollständiger Leitfaden zum Radix Themes-Designsystem Neun Kapitel für Ihre nächste Produktoberfläche. Originalleitlinien zu OpenDesign; die offiziellen Zahlenwerte sind oben separat aufgeführt. Visuelle Regeln, Komponentenverhalten, responsive Richtlinien und ein Agent-Prompt. ## Visuelles Theme und Atmosphäre des Radix Themes-Designsystems ### Eine Arbeitsoberfläche, keine Moodboard-Sammlung > Radix Themes ist eine nützliche Referenz für Produkte, in denen Menschen lesen, Entscheidungen treffen, Informationen eingeben und zu unerledigter Arbeit zurückkehren. Der visuelle Charakter entsteht durch sorgfältig abgestimmte Abstände, zurückhaltende Oberflächen, eine klare typografische Hierarchie und wiederkehrende Komponentenstatus. Nutzen Sie diesen Leitfaden, um einen Projektarbeitsbereich, einen Kontobereich, einen Einstellungsbildschirm oder einen Datenprüfungsablauf zu erstellen. Ziel ist ein stimmiger Arbeitsbildschirm mit echten Inhalten, keine Sammlung attraktiver Komponenten ohne konkrete Aufgabe. ### Den richtigen Ausgangspunkt wählen Beginnen Sie bei einer React-Anwendung mit dem tatsächlichen Radix Themes-Paket und verwenden Sie dessen Komponenten, bevor Sie eigene Alternativen entwickeln. Für ein visuelles Konzept in einem anderen Stack dienen diese Prinzipien als Referenz; beschreiben Sie das Ergebnis als vom System inspiriert. Radix Themes und Radix Primitives sind unterschiedliche Ausgangspunkte: Dieser Leitfaden behandelt die gestylte Themes-Bibliothek. Ein OpenDesign-Leitfaden macht aus einem beliebigen HTML-Mockup keine native Radix-Implementierung. ### An einer konkreten Aufgabe ausrichten 1. Wählen Sie für den ersten Bildschirm eine primäre Aktion, etwa ein Projekt zu erstellen oder Kontoeinstellungen zu speichern. 2. Stellen Sie die für die Entscheidung nötigen Informationen vor der Aktion bereit. 3. Halten Sie Navigation, Objektmetadaten, bearbeitbare Felder und Rückmeldungen visuell klar voneinander getrennt. 4. Gestalten Sie mit realistischen langen Titeln, unterschiedlichen Statuswerten und einem leeren Zustand. 5. Ein Bildschirm, der nur mit drei kurzen Platzhalterbeschriftungen funktioniert, bietet noch kein brauchbares System. ### Tonalität und Inhalte Verwenden Sie kurze, aussagekräftige Beschriftungen, konkrete Verben und direkte Erklärungen. Eine Schaltfläche sollte beschreiben, was als Nächstes geschieht: Änderungen speichern, Mitglied einladen oder Projekt erstellen. Verwenden Sie eine Überschrift für das Thema eines Abschnitts und vermeiden Sie Marketing-Slogans für jedes kleine Bedienelement. Erklären Sie bei einer fehlgeschlagenen Aktion, was die Person korrigieren kann, und bewahren Sie ihre Arbeit. Dies sind redaktionelle Empfehlungen OpenDesign zur Anwendung der Referenz, keine zusätzlichen APIs von Radix. ## Radix Themes Farbpalette und Rollen des Designsystems ### Markenfarbe und Bedeutung unterscheiden Wählen Sie eine Akzentfarbe für primäre Aktionen, ausgewählte Bedienelemente und wenige gezielte Hervorhebungen. Verwenden Sie diesen Akzent nicht als einziges Signal für Fehler, Warnungen oder Erfolg. Eine grüne Markenfarbe kann neben einer Erfolgsmeldung stehen, doch die Meldung braucht weiterhin einen eindeutigen Text und ein passendes Symbol. Legen Sie zuerst die semantische Rolle fest und wählen Sie anschließend die visuelle Gestaltung. So bleibt die Benutzeroberfläche lesbar, wenn sich Theme oder Markenfarben ändern. ### Theme verwenden, statt Ansichten fest zu codieren Die offizielle Theme-Konfiguration stellt accentColor und grayColorbereit. Legen Sie sie auf der obersten Ebene fest, damit alle Komponenten dieselben Vorgaben verwenden. Beziehen Sie sich in eigenen Komponenten auf die CSS-Variablen des aktuellen Themes, statt eine Farbe aus einem Screenshot zu übernehmen. Die folgende Token-Referenz enthält eine kompakte, praktische Auswahl. Ein Token bezeichnet eine Rolle innerhalb eines konfigurierten Themes. Es garantiert nicht, dass derselbe Hexadezimalwert im hellen und dunklen Modus sowie bei jeder Akzentfarbe erhalten bleibt. Besprechen Sie gemeinsam mit Ihrem Team die aktuelle Ausrichtung. ### Hierarchie von Oberflächen und Rahmen Beginnen Sie mit einem zurückhaltenden Seitenhintergrund. Geben Sie Karten und bearbeitbaren Bereichen nur dann eine eigene Oberfläche, wenn sie zusammengehörige Aufgaben bündeln. Verwenden Sie Trennlinien für Zeilen, die zur selben Liste gehören. Vermeiden Sie es, jedes Element gleichzeitig mit Rahmen, Schatten, getöntem Hintergrund und Badge zu versehen. Auf einer Einstellungsseite ist ein einzelner Bereich mit unterteilten Zeilen meist übersichtlicher als sechs schwebende Karten. Machen Sie die Hierarchie auch bei geringem Kontrast erkennbar, ohne wichtige Texte blass erscheinen zu lassen. ### Helle und dunkle Darstellung Verwenden Sie für native Komponenten die offizielle Einstellung für die Darstellung und prüfen Sie beide Darstellungen mit denselben Inhalten. Leiten Sie einen dunklen Bildschirm nicht durch blindes Umkehren der Farben oder Wiederverwenden von Schatten aus dem hellen Modus ab. Prüfen Sie Overlays, inaktive Felder, Trennlinien, ausgewählte Zeilen und Texte auf Akzentflächen einzeln. Die interaktive Untersuchung auf dieser Seite zeigt eine kleine Auswahl an Theme-Einstellungen. Für die vollständige Bibliothek und ihr natives Verhalten ist der offizielle Playground maßgeblich. ### Kontrast und zusätzliche Erkennungsmerkmale Prüfen Sie nach jeder Änderung an Akzent- oder Oberflächenfarben die endgültigen Kombinationen aus Vorder- und Hintergrundfarbe. Kombinieren Sie bei Statusangaben wie Ausstehend, Abgeschlossen und Fehlgeschlagen Farbe mit Text. Kennzeichnen Sie ausgewählte Optionen zusätzlich mit einem Häkchen oder einem anderen sichtbaren Merkmal. Gehen Sie nicht davon aus, dass eine barrierefreie Komponentenbibliothek jede Kombination aus Inhalt und Theme barrierefrei macht: Beschriftungen, Verschachtelungen, eigene CSS und die Informationsreihenfolge wirken sich weiterhin darauf aus, ob der gesamte Bildschirm nutzbar ist. ## Radix Themes Typografische Regeln des Designsystems ### Eine durchdachte Lesehierarchie Geben Sie dem Bildschirm einen klaren Titel und unterscheiden Sie anschließend Überschriften, Fließtext, Feldbeschriftungen und ergänzende Metadaten. Verwenden Sie so wenige Schriftgrößen wie möglich, um diese Beziehungen zu verdeutlichen. Auf umfangreichen Produktbildschirmen sind gut lesbare Beschriftungen wichtiger als übergroße Schautypografie. Platzieren Sie erklärende Absätze nahe bei den Bedienelementen, auf die sie sich beziehen, und lassen Sie Beschriftungen sichtbar, nachdem ein Eingabefeld ausgefüllt wurde. Platzhaltertext ist ein Hinweis, kein Ersatz für eine Feldbeschriftung. ### Schriftgrößenskala und Schriftschnitt Radix dokumentiert eine Typografieskala mit neun Stufen, die jeweils Schriftgröße, Zeilenhöhe und Laufweite kombinieren. Die Referenztabelle auf dieser Seite übernimmt diese Werte für die Grundskala. Wählen Sie eine Stufe als vollständige Kombination, statt eine unpassende Zeilenhöhe damit zu kombinieren. Verwenden Sie für Fließtext den normalen Schriftschnitt und für Überschriften oder ausgewählte Beschriftungen einen kräftigeren. Wird alles fett gesetzt, verschwindet die Hierarchie; ist jeder ergänzende Text zu hell, wird der Bildschirm schwer lesbar. Projektbeschreibung, Entscheidungen und nächste Schritte an einem Ort. ### Schriftwahl und Ersatzschriften Radix Themes verwendet standardmäßig einen Systemschriftstapel. Behalten Sie diesen bei, wenn Portabilität wichtiger ist als eine bestimmte Markenschrift, oder konfigurieren Sie über den dokumentierten Anpassungsmechanismus eine lizenzierte Schrift. Die umgebende Website OpenDesign verwendet Albert Sans; daraus folgt nicht, dass Albert Sans die offizielle Radix-Schrift ist. Testen Sie für mehrsprachige Anwendungen repräsentative chinesische, japanische und koreanische Texte sowie lange Beschriftungen in europäischen Sprachen mit den tatsächlich verwendeten Ersatzschriften. ### Zahlen, Code und Zeilenumbrüche Richten Sie Zahlenspalten einheitlich aus, damit sich Werte vertikal vergleichen lassen. Verwenden Sie eine Monospace-Darstellung für Code, Kennungen und Tokens, wenn die Zeichengrenzen wichtig sind. Lassen Sie Titel und Beschreibungen natürlich umbrechen. Schneiden Sie wichtige Anweisungen nicht ab, nur um eine einheitliche Kartenhöhe zu bewahren. Für Zeichenfolgen, die tatsächlich nicht umbrechen, etwa eine ID, bieten Sie einen kontrollierten Zeilenumbruch oder eine Kopierfunktion an. Stellen Sie auf Mobilgeräten die vollständige Bedeutung auch dann bereit, wenn sich das Layout ändert. ### Die Inhaltslänge ist Teil des Designs Teste einen langen Projektnamen, eine zweizeilige Mitgliederrolle und eine übersetzte Aktion, bevor du eine Komponente als wiederverwendbar einstufst. Lass Schaltflächen nach Möglichkeit mit ihrem Inhalt wachsen, statt jeder eine feste Breite zu geben. Halte Fließtext auf einer angenehm lesbaren Zeilenlänge. Verwende Listen oder Tabellen, wenn Nutzer parallele Fakten vergleichen müssen. Teile erklärende Texte nicht in viele winzige Schmuckkarten auf, nur damit die Seite stärker gestaltet wirkt. ## Radix Themes Designsystem: Gestaltung und Zustände von Komponenten ### Schaltflächen und Aktionshierarchie Bestimme innerhalb einer Aktionsgruppe die wichtigste Entscheidung und hebe sie am stärksten hervor. Sekundäre Aktionen sollten leicht zu finden sein, ohne gleich stark mit ihr zu konkurrieren. Trenne destruktive Aktionen von gewöhnlichen Bestätigungen. Verhindere während der Übermittlung doppelte Vorgänge und zeige den Fortschritt sichtbar an. Zeige nach Abschluss das tatsächliche Ergebnis. Wenn der Grund für eine deaktivierte Schaltfläche nicht aus dem Formular hervorgeht, sollte er verständlich in der Nähe stehen. ### Eingaben und Formulare - Platziere über oder neben jedem Eingabefeld eine dauerhaft sichtbare Beschriftung. - Platziere Hilfetext neben dem zugehörigen Feld und ordne Validierungsmeldungen direkt diesem Feld zu, statt nur ein allgemeines Banner anzuzeigen. - Erhalte eingegebene Werte, wenn die Validierung fehlschlägt. - Fasse zusammengehörige Felder unter einer aussagekräftigen Abschnittsüberschrift zusammen. - Verwende den passenden Eingabetyp und Autocomplete-Wert, damit Browser und assistive Technologien beim Ausfüllen helfen können. Eine klare Aktionsbeschriftung. Ein sichtbarer äußerer Ring. Erkläre die Wartezeit. Bestätige das Ergebnis. ### Karten, Listen und Tabellen Verwende eine Karte für ein eigenständiges Objekt mit aussagekräftiger Zusammenfassung und Aktion. Verwende eine Liste für eine Reihe ähnlicher Datensätze und eine Tabelle, wenn Nutzer Attribute verschiedener Datensätze vergleichen müssen. Zeige tatsächliche Felder wie Verantwortliche, Aktualisierungszeit und Status statt dekorativer Diagrammfragmente. Eine Karte sollte nicht so anklickbar sein, dass sie mit darin enthaltenen Links oder Schaltflächen konkurriert. Lege ein klares Linkziel fest und erhalte das gewohnte Tastaturverhalten. ### Navigation und Auswahl Halte die globale Navigation von Seitentabs und lokalen Filtern getrennt. Das aktive Ziel muss erkennbar bleiben, ohne sich allein auf die Akzentfarbe zu stützen. Verwende Links für die Navigation und Schaltflächen für Änderungen auf der aktuellen Seite. Wenn du ein Tab-Muster implementierst, berücksichtige auch die Tastaturbedienung. Verwende andernfalls eine klar beschriftete Gruppe gewöhnlicher Schaltflächen. Gestalte keine Reihe optisch interaktiver Spans, die sich tatsächlich nicht bedienen lassen. ### Menüs, Dialoge und Overlays Verwende beim Implementieren eines React-Produkts für komplexes Verhalten die native Komponente der Bibliothek. Ein Dialog benötigt einen Titel, eine eindeutige Möglichkeit zum Schließen, eine angemessene Fokusverwaltung und die Rückkehr zum auslösenden Steuerelement. Erstelle kein Modal aus einer absolut positionierten Karte, der diese Funktionen fehlen. Beschränke den Dialog auf eine einzige Entscheidung. Längere Bearbeitungsabläufe gehören oft auf eine eigene Seite, statt in ein immer überladeneres Overlay. ### Lade-, Leer-, Fehler- und Erfolgszustände - Gestalte jeden Zustand anhand derselben realen Aufgabe. - Eine leere Projektliste sollte erklären, wie das erste Projekt erstellt wird. - Ein Ladezustand sollte genügend Struktur beibehalten, um störende Layoutsprünge zu vermeiden. - Ein Fehler sollte eine sinnvolle nächste Aktion anbieten und bereits abgeschlossene Arbeit nicht verwerfen. - Eine Erfolgsmeldung sollte benennen, was geändert wurde. - Die statischen Beispieldarstellungen auf dieser Seite veranschaulichen das Erscheinungsbild. Sie belegen nicht, dass diese Zustände in der Produktion funktionieren. ## Radix Themes Designsystem: Layout, Abstände und Informationsdichte ### Eine gemeinsame Abstands-Skala verwenden Die dokumentierte Abstands-Skala umfasst neun Grundstufen: 4, 8, 12, 16, 24, 32, 40, 48 und 64 Pixel. Verwende kleine Stufen innerhalb eng zusammengehöriger Steuerelemente und größere Abstände zwischen unabhängigen Abschnitten. Stelle eine klare visuelle Beziehung zwischen einer Überschrift und ihrem Inhalt her. Verteile Leerraum nicht gleichmäßig, nur um den Bildschirm zu füllen: Nähe sollte vermitteln, welche Informationen zusammengehören. ### Die Informationsdichte richtet sich nach der Aufgabe > Ein Ressourcenverzeichnis benötigt genügend sichtbare Einträge zum Vergleichen. Ein Konfigurationsformular braucht Platz für Beschriftungen, Hilfetexte und Fehlermeldungen. Eine Leseseite benötigt eine gleichmäßige Zeilenlänge und eine sichtbare Gliederung. Wähle die Informationsdichte passend zur Aufgabe, statt überall dieselbe Kartengröße zu verwenden. Radix bietet außerdem eine Skalierungseinstellung, die zusammengehörige Abmessungen gemeinsam anpasst. Prüfe Lesbarkeit und Bedienelemente, bevor du eine kompakte Skalierung als Standard für das Produkt festlegst. Gib dem Team einen gemeinsamen Ausgangspunkt. ### Raster- und Containerverhalten Beginne mit einem Seitencontainer und definiere anschließend den Hauptinhalt sowie mögliche ergänzende Bereiche. Halte lange Texte auch bei einer breiten Arbeitsfläche in einer gut lesbaren Spalte. Verschiebe ergänzende Inhalte bei schmaleren Ansichten unter den Hauptinhalt oder wandle einen langen Zusatzbereich in eine barrierefrei bedienbare lokale Navigation um. Achte auf die Reihenfolge im Quelltext, damit der mobile Ablauf und die Tastaturreihenfolge auch ohne die Platzierung im Desktop-Raster sinnvoll sind. ### Zeilen statt verschachtelter Karten Platziere in einer kompakten Token-Referenz Name, Wert und Verwendung in einer Zeile, die sich schnell überblicken lässt. Fasse in einem Katalog Titel, Kategorie, Beschreibung und Ziel zusammen. Wiederholte verschachtelte Boxen erzeugen visuelles Rauschen und nehmen dem Inhalt Platz weg. Bevorzuge eine dünne Trennlinie zwischen zusammengehörigen Zeilen. Verwende einen umschlossenen Bereich nur bei einem tatsächlichen Kontextwechsel, etwa einer Live-Vorschau oder einem Codebeispiel. ### Wichtige Inhalte sichtbar halten Kürze einen ausführlichen Leitfaden nicht zu knappen Zusammenfassungen, nur damit die Seite kürzer wird. Biete ein Inhaltsverzeichnis und aussagekräftige Zwischenüberschriften, damit Leser direkt zu den für sie relevanten Abschnitten springen können. Wenn ein Filter oder Akkordeon die Sichtbarkeit verändert, sollten der Leerzustand und der ausgewählte Zustand klar erkennbar sein. Vermeide eine unabhängig scrollende Liste innerhalb der Seite, es sei denn, sie löst ein konkretes Interaktionsproblem. Bei einer langen Ressourcensammlung ist normales Seitenscrollen meist einfacher. ## Radix Themes Radix-Designsystem: Eckenradius, Tiefe und Bewegung ### Der Eckenradius ist eine Frage der Beziehungen Radix bietet benannte Eckenradius-Einstellungen und ein vom Kontext abhängiges Verhalten der Komponenten. Wähle eine Einstellung auf Theme-Ebene, statt jedem Element denselben beliebigen Eckenradius zuzuweisen. Ein Button, eine Checkbox und ein großes Panel erfüllen unterschiedliche strukturelle Rollen. Sorge dafür, dass ihre Formen zusammenpassen, ohne diese Rollen zu verwischen. Wenn deine eigene Komponente ein Eckenradius-Token verwendet, teste sie neben einem nativen Button und Eingabefeld, bevor du entscheidest, ob sie zum selben System gehört. ### Erhebung macht Ebenen verständlich Nutze Tiefe, um ein Overlay von der darunterliegenden Seite oder ein interaktives Panel von einer zurückhaltenden Fläche abzuheben. Radix bietet eine Schatten-Skala mit sechs Stufen. Behandle den Schattenindex nicht wie eine Rangliste dafür, welche Karten am dekorativsten sind. Bei einem dicht bestückten Katalog reichen oft Rahmen. Prüfe Schatten in beiden Darstellungsmodi: Eine Unschärfe, die im hellen Modus funktioniert, kann auf einer dunklen Oberfläche verschwinden oder einen Lichthof erzeugen, der eine falsche Tiefe vermittelt. ### Bewegung sollte Veränderungen verdeutlichen Verwende kurze Übergänge, um Auswahl, Öffnen, Fortschritt oder den Wechsel zwischen verwandten Zuständen zu verdeutlichen. Verzögere Inhalte nicht durch eine Eingangsanimation. Vermeide dauerhafte Hintergrundbewegungen auf einer arbeitsorientierten Oberfläche. Berücksichtige die Einstellung für reduzierte Bewegung und stelle sicher, dass der Endzustand auch ohne Übergänge gut lesbar bleibt. Zeitangaben in einer benutzerdefinierten Implementierung sind Entscheidungen der jeweiligen Anwendung. Dieser Leitfaden erfindet kein offizielles Radix-Dauer-Token, wenn keines bestätigt wurde. ### Interaktion ohne Dekoration Ein Hover-Effekt sollte verdeutlichen, dass ein Element bedient werden kann. Ein Fokuszustand sollte sich klar von angrenzenden Oberflächen abheben. Verschiebe beim Hover keine ganze, dicht gefüllte Zeile so stark, dass sich die Informationen beim Lesen verschieben. Auf Touchscreens müssen wichtige Aktionen auch ohne Hover verfügbar sein. Der Effekt ist gelungen, wenn er Nutzern hilft, das Steuerelement zu verstehen – nicht, wenn er die Animation selbst in den Mittelpunkt stellt. ## Radix Themes Empfehlungen und Fallstricke für Radix-Designsysteme ### Empfehlung: Erstelle einen vollständigen Bildschirm Erstelle einen Bildschirm mit der tatsächlichen Navigation, aussagekräftigen Inhalten, der primären Aktion und mindestens einem Sonderzustand. Prüfe den Bildschirm, bevor du Dutzende wiederverwendbare Komponenten daraus ableitest. Halte bewusste Entscheidungen fest, etwa Akzentfarbe, Informationsdichte, Schriftgrößen und Formulierungen für Leerzustände. So erhält ein Coding-Agent klare Vorgaben, und Abweichungen lassen sich bei späteren Iterationen leichter erkennen. ### Empfehlung: Sorge für Konsistenz zwischen nativen und benutzerdefinierten Elementen Verwende bevorzugt die vorhandenen Komponenten der Bibliothek für Verhaltensweisen, die sie bereits unterstützt. Nutze Theme-Variablen in benutzerdefinierten Wrappers und prüfe diese in beiden Darstellungsmodi. Bewahre Beschriftungen und Semantik HTML beim Gestalten. Wenn das Projekt bereits ein Designsystem hat, vergleiche es mit dieser Referenz, bevor du es ersetzt. Eine zweite, unkontrollierte Theme-Ebene kann mehr Inkonsistenzen schaffen, als sie beseitigt. ### Vermeiden: Eine Marke nur durch den Austausch von Farben nachbilden Allein durch das Ändern der Akzentfarbe entsteht keine stimmige Oberfläche. Abstände, Typografie, Inhaltshierarchie, Interaktionsmuster und Entscheidungen zum responsiven Verhalten tragen wesentlich zur visuellen Identität bei. Behaupte nicht, es gebe eine offizielle Integration, nur weil ein Mockup der Bibliothek ähnelt. Übernimm keine Marken, proprietären Assets oder geschäftlichen Aussagen eines anderen Produkts in die Oberfläche eines neuen Produkts. ### Vermeiden: Bedeutung für einen aufgeräumteren Screenshot opfern Entferne keine erklärenden Texte, Feldbeschriftungen, Fehlermeldungen oder nützlichen Metadaten, nur um die Oberfläche weniger überladen wirken zu lassen. Verbessere zuerst Gruppierung und Hierarchie. Verwende keine winzigen, kontrastarmen Beschriftungen als Abkürzung zu höherer Informationsdichte. Stelle die Inhalte realistisch dar: Ein aussagekräftiger Absatz, ein langer Dateiname oder eine mehrzeilige Statusmeldung gehören zur Oberfläche und sind keine Unannehmlichkeit, die versteckt werden sollte. ## Radix Themes Responsives Verhalten und Barrierefreiheit im Radix-Designsystem ### Passe zuerst die Struktur an, bevor du alles verkleinerst Wenn der Bildschirm schmaler wird, reduziere die Spaltenzahl, verkürze den Weg zur Hauptaktion und ordne sekundäre Informationen in den normalen Lesefluss ein. Skaliere ein Desktop-Dashboard nicht einfach als Bild herunter und bezeichne es als mobiles Layout. Stelle dieselben Inhalte weiterhin bereit, indem du Zeilen umbrechen lässt, Elemente stapelst oder eine geeignete Tabellenansicht verwendest. Bewahre aussagekräftige Linktexte, damit ein Ziel auch ohne die umgebende Desktop-Karte verständlich ist. ### Dokumentierte Breakpoints gezielt einsetzen Die offiziellen Namen der Breakpoints lauten initial, xs, sm, md, lg und xl. Ihre Mindestbreiten betragen 0, 520, 768, 1024, 1280 und 1640 Pixel. Betrachte sie als verfügbare Werkzeuge, nicht als verpflichtende Layoutänderungen bei jedem Schritt. Füge einen Breakpoint hinzu, wenn die Inhalte eine andere Anordnung erfordern. Teste auch eine Breite zwischen benannten Breakpoints, um neben dem Breakpoint selbst fragile Zwischenlayouts zu finden. Die nächsten Schritte deines Teams. Die nächsten Schritte deines Teams. ### Tastatur und Fokus - Alle wichtigen Aktionen müssen sich per Tastatur ausführen lassen. - Gestalte den sichtbaren Fokuszustand klar unterscheidbar vom Hover-Zustand und stelle sicher, dass er auch sichtbar bleibt, wenn ein Container seine Inhalte beschneidet. - Vermeide positive tabindex-Werte, die Steuerelemente unvorhersehbar neu anordnen. - Wenn ein Filter die Ergebnisse verändert, belasse den Fokus auf dem Steuerelement und gib eine knappe Ergebnisanzahl aus. - Gib den Fokus nach dem Schließen eines Modals an eine sinnvolle Stelle zurück, statt die Person an den Anfang des Dokuments zu versetzen. ### Beschriftungen, Interaktionsflächen und Hilfstexte Geben Sie Symbolaktionen ohne Beschriftung einen barrierefreien Namen, der die Aktion und nicht die Form des Symbols beschreibt. Sorgen Sie für ausreichend große Touch-Ziele, auch wenn das sichtbare Symbol klein ist. Halten Sie dekorative Symbole aus dem Accessibility Tree heraus. Machen Sie Aktualisierungen wie gespeicherte Änderungen oder die Anzahl der Suchergebnisse bekannt, ohne wiederholt auf nicht zusammenhängende Inhalte hinzuweisen. Wenn ein Zustand sowohl Symbol als auch Text verwendet, vermeiden Sie, dass Screenreader dieselbe Aussage doppelt vorlesen. ### Mit echten Inhalten prüfen - Prüfen Sie die Ansicht auf einem Desktop, einem Tablet und einem schmalen Smartphone. - Berücksichtigen Sie längere Texte, ein fehlendes Bild, eine leere Liste und eine lange, ununterbrochene Kennung. - Testen Sie die Seite mit reduzierter Bewegung und per Tastaturnavigation. - Prüfen Sie beide Darstellungsmodi nach jeder größeren Farbänderung. - Automatisierte Prüfungen können strukturelle Probleme aufdecken. Ob Hierarchie, Inhaltsdichte und visueller Gesamteindruck den Anforderungen des Produkts entsprechen, können sie jedoch nicht beurteilen. ## Radix Themes-Designsystem: Leitfaden und Implementierung für KI-Agenten ### Projektkontext vorbereiten 1. Beschreiben Sie dem KI-Agenten, was entwickelt wird, wer es verwendet, welche Aktion im Mittelpunkt steht und welche vorhandenen Dateien das aktuelle Design festlegen. 2. Fügen Sie diesen Leitfaden als Referenz hinzu, statt den KI-Agenten aufzufordern, einen nicht näher bezeichneten Screenshot nachzuahmen. 3. Wenn Sie React verwenden, geben Sie an, dass native Radix Themes-Komponenten bevorzugt werden sollen. 4. Bei einem anderen Technologie-Stack bitten Sie um eine ausdrücklich gekennzeichnete Interpretation und prüfen Sie, welchen zusätzlichen Interaktionsaufwand sie erfordert. ### Einen vollständigen ersten Entwurf anfordern Bitten Sie um einen funktionierenden Bildschirm mit echten Inhalten und einer kleinen Auswahl an Zuständen. Geben Sie die Navigation, Felder, Objektmetadaten und das erwartete Ergebnis der primären Aktion an. Berücksichtigen Sie in der Anfrage Tastaturfokus, einen leeren Zustand, Validierung und ein schmales Layout. Benennen Sie Vorgaben, die erhalten bleiben müssen, etwa eine vorhandene Kopfzeile, einen Vertrag für Produktionsdaten oder einen zuvor freigegebenen Inhaltsblock. ### In einer Reihenfolge prüfen, die echte Probleme aufdeckt 1. Prüfen Sie zuerst, ob der Bildschirm die vorgesehene Aufgabe unterstützt. 2. Vergleichen Sie anschließend Informationshierarchie, Abstände, Typografie und Farben mit der gewählten Referenz. 3. Testen Sie zum Schluss die interaktiven Zustände und responsiven Layouts. 4. Akzeptieren Sie eine visuelle Änderung nicht allein deshalb, weil die Seite kompiliert oder ein Screenshot aufgeräumt aussieht. 5. Prüfen Sie, ob längere Inhalte, Fehler und wiederholte Aktionen nach den visuellen Anpassungen weiterhin funktionieren. ### Mit klar festgehaltenen Entscheidungen erweitern Halten Sie nach Fertigstellung des ersten Bildschirms die Theme-Konfiguration, Typografierollen, Abstände und wiederkehrenden Komponenten fest. Bitten Sie den KI-Agenten, diese Entscheidungen auf den nächsten Bildschirm anzuwenden, ohne bereits freigegebene Inhalte stillschweigend umzuschreiben. Benötigt ein neuer Bildschirm ein anderes Muster, dokumentieren Sie den Grund und prüfen Sie den vorherigen Bildschirm auf Konsistenz. Bauen Sie auf überprüftem Verhalten auf, statt eine große Sammlung oberflächlich ähnlicher Seiten zu generieren. ### Geltungsbereich und Grenzen der Quellen Dies ist ein von OpenDesign verfasster Anwendungsleitfaden, keine offizielle Radix-Spezifikation und keine Garantie für die Kompatibilität mit allen Frameworks. Die Zahlenangaben stammen aus der verlinkten Radix-Dokumentation. Der dargestellte Arbeitsbereich und die Komponentenbeispiele sind lokale Studien zu HTML/CSS. Aktuelle APIs finden Sie in der Dokumentation des installierten Pakets. Prüfen Sie vor der Weitergabe von Code Dritter die Lizenz des Quell-Repositorys. Der herunterladbare Leitfaden enthält diese eigens verfassten Hinweise, keine weiterverbreitete Kopie der Bibliothek. ## Radix Themes-Designsystem: Einrichtung für KI-Agenten Laden Sie den Leitfaden herunter, geben Sie Ihrem KI-Agenten eine konkrete Bildschirmaufgabe und prüfen Sie das Ergebnis, bevor Sie das System erweitern. ### Eine anpassbare Eingabeaufforderung ``` Lesen Sie DESIGN-radix-themes.md, bevor Sie Änderungen vornehmen. Erstellen Sie einen responsiven Projektarbeitsbereich für ein kleines Designteam und verwenden Sie nach Möglichkeit native Radix Themes-Komponenten. Fügen Sie eine Projektliste mit Zuständigkeit und Status, einen Ablauf zum Erstellen eines Projekts und Arbeitsbereichseinstellungen hinzu. Verwenden Sie eine grüne Akzentfarbe, eine neutrale Hierarchie der Oberflächen, eine klare typografische Skala und einheitliche Abstände. Behalten Sie unsere vorhandene Seitennavigation und Inhalte bei. Berücksichtigen Sie Lade-, Leer-, Validierungs- und Erfolgszustände, einen sichtbaren Tastaturfokus und ein Layout für schmale Bildschirme. Erläutern Sie Abweichungen vom Leitfaden. Beginnen Sie mit einem vollständigen Bildschirm, bevor Sie das System erweitern. ``` ### React einrichten Führen Sie den Installationsbefehl im Terminal Ihres Projekts aus und fügen Sie dann die Imports sowie den Theme-Wrapper zu Ihrer Anwendung hinzu. Binden Sie das Stylesheet einmalig am Stammverzeichnis der Anwendung ein. ``` npm install @radix-ui/themes // App.jsx import '@radix-ui/themes/styles.css'; import { Theme, Button } from '@radix-ui/themes'; export default function App() { return ( ); } ``` ## Radix Themes-Designsystem: Quellen und Geltungsbereich Dies ist ein von OpenDesign verfasster Anwendungsleitfaden zu Radix Themes, keine offizielle Veröffentlichung von Radix. Die neue Ressource umfasst einen herunterladbaren Leitfaden; ein OpenDesign-Plugin wurde bislang nicht veröffentlicht. Die Vorschau ist eine eigenständige Studie zu HTML/CSS und ersetzt nicht das native Verhalten der Bibliothek. - Offizielle Dokumentation Installation, Komponenten-APIs und Theme-Konfiguration. - Offizielle Playground-Umgebung Native Komponenten und ihre unterstützten Zustände. - Quell-Repository Implementierung, Releases und Lizenz. ## Weiterführende Ressourcen zum Radix Themes-Designsystem ### Linear Projektmanagement. Extrem minimalistisch und präzise, mit violettem Akzent. ### GitHub Plattform mit Fokus auf Code. Funktionale Informationsdichte, präzise Gestaltung in Blau und Weiß, auf Basis von Primer. ### Shadcn Von Shadcn/ui inspiriertes Design mit minimalistischen, klaren Komponenten, monochromer Farbpalette und Utility-First-Mustern. - [Native Radix-Komponenten ausprobieren](https://www.radix-ui.com/themes/playground) - [Farbe](https://www.radix-ui.com/themes/docs/theme/color) - [Abstände](https://www.radix-ui.com/themes/docs/theme/spacing) - [Typografie](https://www.radix-ui.com/themes/docs/theme/typography) - [Eckenradius](https://www.radix-ui.com/themes/docs/theme/radius) - [Schatten](https://www.radix-ui.com/themes/docs/theme/shadows) - [Breakpoints](https://www.radix-ui.com/themes/docs/theme/breakpoints) - [Offizielle Dokumentation Installation, Komponenten-APIs und Theme-Konfiguration.](https://www.radix-ui.com/themes/docs/overview/getting-started) - [Offizielle Playground-Umgebung Native Komponenten und ihre unterstützten Zustände.](https://www.radix-ui.com/themes/playground) - [Quell-Repository Implementierung, Releases und Lizenz.](https://github.com/radix-ui/themes) - [LinearProduktivität und SaaSProjektmanagement. Extrem minimalistisch und präzise, mit violettem Akzent.Designsystem erkunden](https://open-design.ai/plugins/design-system-linear-app/) - [GitHubEntwicklerwerkzeugePlattform mit Fokus auf Code. Funktionale Informationsdichte, präzise Gestaltung in Blau und Weiß, auf Basis von Primer.Designsystem erkunden](https://open-design.ai/plugins/design-system-github/) - [ShadcnModern und minimalistischVon Shadcn/ui inspiriertes Design mit minimalistischen, klaren Komponenten, monochromer Farbpalette und Utility-First-Mustern.Designsystem erkunden](https://open-design.ai/plugins/design-system-shadcn/)