# Decanter-Designsystem ## Decanter-Designsystem: Oberflächenvorschau Filtere originale Veranstaltungskarten, öffne eine Zusammenfassung und behebe eine Suche ohne Treffer zu einem Thema. ## Decanter-Designsystem: Designreferenz Paket Decanter 7.5.3 und offizielle Installationsanleitung sowie Konventionen für v7. Die eingestellten Funktionen in v8 werden als Migrationshinweise behandelt. Die Vorschau ist eine gekennzeichnete Interpretation mit HTML/CSS, verwendet lokale Schrift-Fallbacks und enthält keine Identitätskennzeichen einer Universität. ### Typografiekonfiguration | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Primary sans / serif | Source Sans 3 / Source Serif 4 | Als Fallbacks dienen Helvetica/Arial und Georgia/Times. | | Long-form line height | 1.4–1.5em | Empfohlener Lesebereich. | | Short text / headings | 1.2–1.3em | Kompaktere Gruppen. | ### Ausgewählte modulare Einstellungen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Scale mobile / tablet / desktop | 1.15 / 1.2 / 1.25 | Verhältnis zwischen den type-*-Stufen. | | basefont-23 selection | 18px XS–SM; 21px MD–XL; 23px 2XL | Explizite Konfiguration für das Beispiel. | | Breakpoints SM / MD / LG / XL / 2XL | 576 / 768 / 992 / 1200 / 1500px | Responsive Grenzen. | | cc maximum | 1500px at 1700px viewport | Fließender Inhaltscontainer mit Abständen zu den Bildschirmrändern. | | Screen edge XS / SM / MD / LG / XL | 20 / 30 / 50 / 80 / 100px | Kuratierte statt mathematisch abgeleiteter Skala. | ### Identitäts- und Aktionsfarben | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Cardinal red | #8c1515 | Primäre Identitätsfarbe. | | Black / cool grey | #2e2d29 / #53565a | Primäre neutrale Palette. | ### Interaktive Web-Palette | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Digital red / dark | #b1040e / #820000 | Interaktive Gestaltung; kein Ersatz für die Wortmarkenfarbe. | | Digital blue / dark | #006cb8 / #00548f | Linkgestaltung. | ## Decanter-Designsystem: vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Decanter-Designsystem: ein Tailwind-Preset, kein SDK ### Dokumentierten Installationspfad festlegen > Das verifizierte Paket Decanter hat die Version 7.5.3 und gibt Tailwind CSS ^3.4.17 an. Der öffentliche Einstiegspunkt ist ein Tailwind-Konfigurations-Preset. Füge require("decanter") zu den Presets hinzu, verweise content auf die tatsächlichen Quelldateien und kompiliere das Utility-Stylesheet. Es gibt keinen Decanter-React-Provider, den du importieren könntest. Die Dokumentation enthält für v8 angekündigte Entfernungshinweise, bezeichnet den Installationspfad aber weiterhin als v7. Diese Referenz legt v7.5.3 fest und vermeidet die veralteten foggy-, slab- und älteren modular-text-Utilities. Die eigenständige Vorschau ist eine klar gekennzeichnete Interpretation der Layoutregeln und keine vorgebliche Tailwind-Kompilierung. Unterstützende Spezifikation lesen ## Decanter-Designsystem: responsive modulare Typografie ### Die Skala hängt von ihrer Basis ab Source Sans 3 und Source Serif 4 sind die primären serifenlosen und Serifenschriften; als Fallbacks dienen Helvetica/Arial und Georgia/Times. Die type-*-Utilities stehen für proportionale Rollen und nicht für Überschriften mit festen Pixelmaßen. Ihr Skalierungsfaktor beträgt auf Mobilgeräten 1.15, auf Tablets 1.2 und auf Desktop-Geräten 1.25. Das Beispiel verwendet die dokumentierte Konfiguration basefont-23: 18px bei XS–SM, 21px bei MD–XL und 23px bei 2XL. Die Überschrift hat die Größe type-3, damit die Darstellung in einem kompakten eingebetteten Beispiel proportional bleibt. Wer eine andere Basis wählt, muss die daraus entstehenden Größen neu berechnen, statt die Pixelwerte aus dieser Vorschau zu übernehmen. Unterstützende Spezifikation lesen ## Decanter-Designsystem: fließender Container und Raster ### Der Bildschirmrand ist Teil des Layouts Der cc-Container verwendet kuratierte Abstände zum Bildschirmrand: 20px bei XS, 30px bei SM, 50px bei MD, 80px bei LG und 100px bei XL. Er wächst, bis bei einer Viewport-Breite von 1700px eine maximale Inhaltsbreite von 1500px erreicht ist. Es handelt sich um ein fließendes System mit expliziten Regeln für die Abstände zum Rand, nicht einfach um einen festen Container mit 1200px Breite. Das Beispiel folgt diesen Abständen und ordnet die beiden redaktionellen Karten unterhalb von MD in einer einzelnen Spalte an. Die Karteninhalte folgen der normalen Dokumentreihenfolge, sodass die Tastaturnavigation beim Stapeln des Layouts dieselbe Lesereihenfolge verwendet. Unterstützende Spezifikation lesen ## Decanter-Designsystem: responsive Abstände ### Responsive Utilities gezielt einsetzen Decanter stellt die Familien rs-m-* und rs-p-* für responsive Außen- und Innenabstände bereit. Ein ausgewählter Schritt ändert sich in den dokumentierten Bereichen; er ist kein Alias für einen festen Tailwind-Abstand. Der Beispielcode verwendet rs-p-1 für den Innenabstand einer Karte und einen gewöhnlichen festen Innenabstand für ihre Aktion. Damit die Referenz reproduzierbar bleibt, kennzeichnet die eigenständige Interpretation jede Anpassung an CSS als Anwendungscode. Verwende für eine native Implementierung das vom Preset erzeugte Utility, statt eine zweite, konkurrierende Regel mit demselben Namen zu definieren. Vermeide dynamische Fragmente wie "rs-p-" + size, wenn der Build-Scanner die vollständige Klasse nicht erkennen kann. Unterstützende Spezifikation lesen ## Decanter-Designsystem: Identitäts- und Interaktionsfarben ### Kardinalrot und Digitalrot erfüllen unterschiedliche Aufgaben Das primäre Cardinalrot von Stanford ist #8c1515. Digitalrot #b1040e ist eine interaktive Akzentfarbe und ersetzt Cardinalrot nicht in der Universitätsidentität. Digitalblau #006cb8 ist für Links vorgesehen, #00548f für den dunkleren Interaktionszustand. Das Beispiel verwendet Digitalrot für die Aktion zum Aufklappen von Details und zurückhaltende neutrale Oberflächen. Es enthält weder ein Stanford-Wortzeichen noch ein Siegel oder einen offiziellen Identitätsbalken. Bei einer institutionellen Nutzung müssen autorisierte Identitätsressourcen und die Markenrichtlinien der Universität verwendet werden. Eine technische Referenz stellt keine Befürwortung dar. Unterstützende Spezifikation lesen ## Decanter Designsystem: redaktionelle Karten mit Aktionen ### Inhalte zusammenstellen, statt eine Komponente zu erraten API Die offiziellen Kartenbeispiele sind semantisch aufgebaut HTML und verwenden Utilities für Abstände, Typografie, Oberflächen und Aktionen. Unsere Zusammenstellung trennt die Veranstaltungskategorie vom Titel, zeigt Datum und Veranstaltungsort als Text und verwendet eine echte Schaltfläche, um eine Zusammenfassung direkt an Ort und Stelle einzublenden. Sie erfindet keine Decanter Card-Prop API. Ein verlinkter Titel wäre passend, wenn tatsächlich eine Navigation das Ergebnis wäre. Hier wird der Inhalt lokal erweitert. Deshalb kommuniziert eine Schaltfläche mit aria-expanded und aria-controls dieses Verhalten. Die Vorschau verwendet eigens verfasste Veranstaltungsnamen und Zusammenfassungen, statt Universitätsnachrichten zu kopieren. - Den Veranstaltungstitel als Überschrift der Karte verwenden. - Zeit und Ort vor dem Aufklappen sichtbar lassen. - Für das Aufklappen eine Schaltfläche verwenden und einen Link nur für tatsächliche Navigation. Unterstützende Spezifikation lesen ## Decanter Designsystem: Filter und aufklappbare Inhalte ### Inhalte über verschiedene Layouts hinweg verfügbar halten Der Themenfilter filtert die beiden eigens verfassten Karten zu Forschungsveranstaltungen und aktualisiert die sichtbare Trefferzahl. Die Option ohne Treffer veranschaulicht bewusst einen leeren Zustand und eine Möglichkeit zum Zurücksetzen. Der Filter verändert weder die Überschriftenhierarchie noch macht er aus den Karten auswählbare Formularoptionen. Jede Zusammenfassung hat einen eigenen Schaltflächenzustand. Beim Schließen einer Karte bleibt der Fokus auf derselben Auslöseschaltfläche. Wird der Filter geändert, werden ausgeblendete Zusammenfassungen geschlossen, damit beim Zurückkehren zu einem Thema wieder eine einheitliche Übersicht angezeigt wird. Die Steuerelemente ergänzen einen utilitybasierten Designansatz um Anwendungsverhalten; sie sind keine gebündelten Decanter JavaScript. Unterstützende Spezifikation lesen ## Decanter Designsystem: Ergebnis erstellen und validieren ### Generierte Klassen erfordern gescannte Quelldateien Die bereitgestellte Einrichtung ist für Tailwind 3 und das verifizierte Preset Decanter 7.5.3 ausgelegt. Sie umfasst die Input-Direktiven, den content-Glob, den Ausgabebefehl und eine eigens erstellte Kartenkomposition. Binden Sie das resultierende Stylesheet im Dokumentkopf ein. Laden Sie zugelassene Schriftdateien separat oder verwenden Sie bewusst die dokumentierten Fallbacks. Die Vorschau wurde nicht mit dieser Toolchain erstellt; darauf weist auch ihre Implementierungskennzeichnung hin. Bei einer produktiven Übernahme sollte der vollständige Klassensatz selbst kompiliert und die generierte Ausgabe geprüft werden, insbesondere nach einem Wechsel der Hauptversion, durch den veraltete Utilities geändert werden. 1. Decanter und die dazu passende Tailwind-Hauptversion festschreiben. 2. Das Preset registrieren und das tatsächliche Quellverzeichnis scannen. 3. Die drei Tailwind-Direktiv-Ebenen kompilieren. 4. Die gewählte Grundschrift, Bildschirmränder und Kartenaktionen an den dokumentierten Breakpoints überprüfen. Unterstützende Spezifikation lesen ## Decanter Designsystem: Komponentenbeispiele ### Eigens erstellte redaktionelle Karte Semantisches HTML, zusammengesetzt aus verifizierten Utility-Familien und einer anwendungseigenen Schaltfläche zum Aufklappen. ```

Research conversation

Reading the changing coast

An original example event about field observations.

``` Code-Referenz ### Preset-Konfiguration Eine vollständige Minimalkonfiguration für den festgelegten Tailwind-3-Weg. ``` module.exports = { presets: [require('decanter')], content: ['./src/**/*.{html,js}'] }; ``` Code-Referenz ### Vollständiges eigenständiges Beispiel Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit. ``` Decanter editorial composition

RESEARCH CONVERSATIONS · ORIGINAL EXAMPLES

Ideas take shape in conversation.

A compact editorial collection interpreting Decanter’s responsive type and screen-edge rules.

2 example events

ENVIRONMENT

Reading the changing coast

How field notes reveal changes that a single measurement cannot capture.

ARCHIVES

The stories between records

Exploring how context connects objects in a community archive.

Independent OpenDesign specimen. Original content, local font fallbacks and interpreted Decanter layout rules. No Stanford identity or real event listing.
``` Code-Referenz - Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl. - Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden. ## Decanter Designsystem: Einrichtung des AI-Agenten ### Ausgangspunkt für die Implementierung Ein quellverifizierter Einstiegspunkt für den Preset-Build; für die interpretierte eigenständige Vorschau nicht ausgeführt. Binden Sie dist/styles.css im Dokumentkopf ein. Schriftarten und institutionelle Identitätsressourcen sind separate Entscheidungen. Das vollständige ZIP-Beispiel in den Quellen enthält auch die exakten Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacken Sie es, führen Sie python3 -m http.server 8080 in diesem Verzeichnis aus und öffnen Sie dann http://localhost:8080/stanford-decanter.html. Öffnen Sie modulbasierte Beispiele nicht über file://. ``` npm install --save-dev decanter@7.5.3 tailwindcss@3.4.17 # tailwind.config.cjs # module.exports = { # presets: [require('decanter')], # content: ['./src/**/*.{html,js}'] # }; # src/input.css # @tailwind base; # @tailwind components; # @tailwind utilities; npx tailwindcss -c tailwind.config.cjs -i ./src/input.css -o ./dist/styles.css ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie eine redaktionelle Veranstaltungsseite mit Decanter 7.5.3/Tailwind 3. Verwenden Sie das Preset, eine explizite Auswahl der Grundschrift, die Skala type-* und die Bildschirmränder cc. Halten Sie Thema, Titel, Zeit und Ort in semantischen Karten voneinander getrennt. Implementieren Sie einen lokalen Themenfilter und Steuerelemente für Zusammenfassungen mit aria-expanded. Vermeiden Sie veraltete foggy-/slab-Utilities, kopierte Universitätsgeschichten und Identitätskennzeichen. Kennzeichnen Sie jede manuell interpretierte Vorschau separat von einem kompilierten Decanter-Build. ``` ## Decanter Designsystem: Quellen und Umfang Unabhängige, lehrreiche OpenDesign-Zusammenstellung, keine offizielle Veranstaltungsseite der Universität. Eigene Inhalte und keine Stanford-Kennzeichen. Die Codeübernahme und die autorisierte Verwendung der Markenidentität sind getrennte Aspekte. - Decanter-Übersicht Offizieller Zweck, Zielgruppen und Einstiege zu Ressourcen. - Installation für Entwickler Versionsspezifische Implementierungs- und Konfigurationshinweise. - Gestaltung in Figma Einstieg zur offiziellen Designbibliothek. - Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich. ## Decanter Designsystem: Weiterführende Ressourcen ### Suomi.fi Designsystem Gestalte gut lesbare Formulare für finnische öffentliche Dienste mit Source Sans 3, ausdrücklich festgelegten Abstands-Design-Token und einem Muster für die wiederherstellbare Dokumentauswahl. ### UNDP Designsystem Entdecke die veröffentlichten Farb- und Abstandstokens von UNDP, native, per Tastatur bedienbare Tabs und ein vollständiges Beispiel zum Lesen eines Workshops mit lokal gespeichertem Lesefortschritt. ### USWDS USWDS-Abstands-Tokens, Theme-Rollen, semantische Tabellen und native Akkordeons in einem durchsuchbaren Vergleich von Möglichkeiten verbinden. - [Implementierungsreferenz](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Quelle](https://decanter.stanford.edu/for-designers/type-grids-and-color) - [Quelle](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Quelle](https://identity.stanford.edu/design-elements/color/primary-colors/) - [Quelle](https://identity.stanford.edu/design-elements/color/web/) - [Unterstützende Spezifikation lesen](https://decanter.stanford.edu/for-developers/installation) - [Unterstützende Spezifikation lesen](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Unterstützende Spezifikation lesen](https://identity.stanford.edu/design-elements/color/web/) - [Unterstützende Spezifikation lesen](https://decanter.stanford.edu/examples/cards) - [Code-Referenz](https://decanter.stanford.edu/examples/cards) - [Code-Referenz](https://decanter.stanford.edu/for-developers/installation) - [Code-Referenz](https://decanter.stanford.edu/for-developers/strategies-and-conventions) - [Decanter-Übersicht Offizieller Zweck, Zielgruppen und Einstiege zu Ressourcen.](https://decanter.stanford.edu/) - [Installation für Entwickler Versionsspezifische Implementierungs- und Konfigurationshinweise.](https://decanter.stanford.edu/for-developers/installation) - [Gestaltung in Figma Einstieg zur offiziellen Designbibliothek.](https://decanter.stanford.edu/for-designers/figma)