# Sprout Social Seeds-Designsystem ## Sprout Social Seeds-Designsystem: Interface-Vorschau Wählen Sie sichtbare Beiträge aus, prüfen Sie die gemischte Auswahl und stellen Sie den Zustand nach einer Änderung an einer gefilterten Auswahl wieder her oder machen Sie die Änderung rückgängig. ## Sprout Social Seeds-Designsystem: Designreferenz Tatsächliche Exporte aus Seeds color 2.5.0, space 0.8.1, typography 3.8.0 und border 1.7.1 für CSS. ### Palettenreferenzen für Produktstudien | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --color-neutral-0 | #ffffff | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-neutral-100 | #f3f4f4 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-neutral-200 | #dee1e1 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-neutral-700 | #515e5f | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-neutral-900 | #273333 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-blue-0 | #e9f4ff | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-blue-300 | #a1c2f8 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-blue-700 | #205bc3 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-green-100 | #d7f4d7 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | | --color-green-900 | #006b40 | Tatsächliche veröffentlichte Palettentokens. Ihre Zuordnung zu den Aktionen und Statuswerten dieser eigens entwickelten Warteschlange ist anwendungsspezifisch. | ### Vollständige feste Abstandsskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --space-size--0 | 0px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--100 | 2px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--200 | 4px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--300 | 8px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--350 | 12px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--400 | 16px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--450 | 24px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--500 | 32px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | | --space-size--600 | 40px | Tatsächliche CSS-Pixel-Tokens. Das Paket enthält außerdem rem-Entsprechungen auf Basis einer 18px-Grundgröße. Gehen Sie nicht von einer Umrechnung mit 16px aus. | ### Produkttypografie und gut lesbare Informationsdichte | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --typography-family | system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--100 | 11px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--200 | 13px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--300 | 16px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--400 | 18px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--500 | 21px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--600 | 24px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-font-size--700 | 32px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-line-height--300 | 24px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | | --typography-line-height--500 | 29.333333333333332px | Veröffentlichte Werte des Typografiepakets. Das Produktbeispiel verwendet die Systemschriftfamilie, nicht die Proxima-Nova-Schrift für Marketingmaterialien. | ### Form- und Rahmenabstufungen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --border-radius-400 | 4px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-radius-500 | 6px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-radius-600 | 8px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-radius-800 | 12px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-radius-900 | 24px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-radius-1000 | 999999px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-width-500 | 1px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-width-600 | 2px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | | --border-width-700 | 3px | Tatsächliche Werte des Border-Pakets; die eigens entwickelten Karten verwenden einen 8px-Rundungsradius und ein Pixel breite Rahmen. | ## Sprout Social Seeds-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. ## Sprout Social Seeds-Designsystem: Produkttokens und Laufzeitumfang ### Produktgrundlagen verwenden > Seeds unterscheidet Produkttypografie von Markentypografie. Die Warteschlange verwendet das tatsächliche Systemschriftarten-Token aus dem öffentlichen Typografie-Paket sowie veröffentlichte Farb-, Abstands- und Rahmen-Tokens. Sie lädt keine Marketing-Schriftart und gibt dann vor, das Produktsystem nachzubilden. Die Paketversionen sind in der Einrichtung festgeschrieben, damit Referenz und Beispiel vergleichbar bleiben. ### Tokens von Komponenten trennen Das Laden der Seeds-Token-Pakete stellt Variablen bereit; es erstellt weder einen Beitragseditor noch einen Komponentenbaum aus React. Die Karten, die Auswahllogik und die lokale Prüfaktion in dieser Studie sind eigenständiger Code in OpenDesign. Die Seite bezeichnet dies bewusst als tokenbasierte Implementierung. Für native Seeds-Komponenten aus React gelten eigene Integrationsanforderungen, die in den offiziellen Komponentenressourcen beschrieben sind. ## Sprout Social Seeds Designsystem: Farbpalette, Abstände und Typografie-Referenzen ### Exakte Token-Namen verwenden Die Referenz enthält tatsächliche exportierte Namen wie --space-size--350 für 12px und --border-radius-600 für 8px. Diese Namen lassen sich nicht ableiten, indem man eine Skalierungsstufe mit einem Faktor multipliziert. CSS importiert die Token-Dateien direkt und verwendet ihre Variablen. So lässt sich ein gerenderter Wert bis zur festgelegten Distribution zurückverfolgen, statt ihn einer geratenen Farbpalette zuzuordnen. ### Den rem-Ausgangswert beachten Das Abstands-Paket stellt Werte sowohl in Pixeln als auch in rem bereit. Der Schritt von 16px entspricht beispielsweise auch 0.8888888888888888rem und basiert damit auf einem Ausgangswert von 18px. In dieser Studie werden die Pixelwerte der Tokens verwendet, damit die vorgesehenen Abstände eindeutig sind. Wer diese rem-Werte ohne Weiteres in ein Dokument mit einem 16px-Stammwert übernimmt, verändert die Dichte, statt sie beizubehalten. ## Sprout Social Seeds Designsystem: redaktionelle Karten und Prüfkontext ### Jede Karte schon vor der Interaktion nützlich gestalten Jede Karte enthält einen Kanal, einen Status, einen eigens verfassten Titel und einen vollständigen kurzen Beitrag. Über eine zusätzliche Einblendung lassen sich Prüfkriterien aufrufen. Die Inhalte sind fiktives Übungsmaterial, und der Arbeitsbereich ist nicht mit Social-Media-Konten verbunden. So vermittelt eine Karte eine glaubwürdige Aufgabe, ohne den Zugriff auf tatsächliche Beiträge oder Analysen vorzutäuschen. ### Markenakzente der Lesbarkeit unterordnen Blau kennzeichnet die eigens für diese Warteschlange entwickelte Prüfaktion; Grün begleitet den Text „Zur Prüfung bereit“. Diese Rollenzuweisungen sind Anwendungsentscheidungen, für die tatsächliche Farbwerte aus der Palette verwendet werden. Der Status wird immer ausgeschrieben, sodass seine Bedeutung nicht allein von der Farbe abhängt. Rahmen und Abstände trennen die drei Beiträge, ohne lesbare Inhalte durch dekorative Platzhalter zu ersetzen. ## Sprout Social Seeds Designsystem: sichtbare Auswahl und gemischter Zustand ### Massenauswahl an die aktuelle Ansicht binden „Sichtbare Beiträge auswählen“ wirkt sich auf die gefilterte Auswahl aus. Wird nur eine von mehreren sichtbaren Karten ausgewählt, erhält das Kontrollkästchen für die Massenauswahl seinen nativen unbestimmten Zustand. Bei einem Filterwechsel wird die Auswahl aufgehoben. So kann eine ausgeblendete Zeile nicht durch eine spätere Aktion geändert werden. Die Anzahl der sichtbaren Einträge zeigt sowohl die Zahl der angezeigten als auch der ausgewählten Einträge an. - Die Massenauswahl gilt nur für sichtbare Einträge. - Bei einer gemischten Auswahl wird die native indeterminate-Eigenschaft verwendet. - Bei einem Filterwechsel wird die Auswahl aufgehoben. - Der Aktionsstatus wird aus den ausgewählten Entwürfen abgeleitet. ### Nur sinnvolle Aktionen aktivieren „Zur Prüfung freigeben“ ist nur dann aktiviert, wenn mindestens ein ausgewählter, sichtbarer Beitrag den Status „Entwurf“ hat. Für bereits freigegebene Einträge kehrt diese Aktion den Status nicht um. Aktualisiert werden nur die ausgewählten Entwürfe; anschließend wird ihre Auswahl aufgehoben und die Ansicht neu berechnet. Es werden keine Beiträge im Netzwerk veröffentlicht oder geplant. ## Sprout Social Seeds Designsystem: gefilterte Leerzustände und Rückgängigmachen ### Eine leere Warteschlange wiederherstellbar halten Wenn alle sichtbaren Entwürfe in der Ansicht „Entwurf“ zur Prüfung freigegeben werden, bleibt erwartungsgemäß kein Treffer übrig. Der Leerzustand erklärt, dass die Einträge weiterhin vorhanden sind, und bietet die Option „Alle Beiträge anzeigen“. Er zeigt weder einen Ladekreisel noch eine erfundene Netzwerkfehlermeldung für ein bekanntes lokales Ergebnis an. Der Unterschied zwischen keinen Treffern und keinen Einträgen bleibt sichtbar. ### Die letzte tatsächliche Änderung rückgängig machen Die Anwendung speichert den vorherigen Status nur für Einträge, die durch die letzte Prüfaktion geändert wurden. Mit „Rückgängig“ werden diese Werte wiederhergestellt, die aktuelle Ansicht neu dargestellt und der Fokus auf den Filter gesetzt. Andere Einträge werden nicht zurückgesetzt, und es wird nicht vorgetäuscht, ein veröffentlichter Social-Media-Beitrag lasse sich rückgängig machen. Ein nachfolgender Stapelvorgang ersetzt die einzige verfügbare Rückgängig-Aktion – entsprechend der Beschriftung „Letzte Änderung rückgängig machen“. ## Sprout Social Seeds Designsystem: vollständige, ausführbare Warteschlange und Prüfungen ### Alle vier Token-Distributionen verwenden Der Quellcode importiert Farb-, Abstands-, Typografie- und Rahmenwerte aus CSS vor dem eigens erstellten Stylesheet für die Gestaltung. Speichern Sie main.js, seeds.css und die HTML-Shell vollständig zusammen. Die Vorschau bündelt dieselben öffentlichen Werte und den Anwendungscode – ohne externe Schriftarten und ohne Backend. Die exakten Paketversionen sind im Installationsbefehl angegeben. 1. Die vier festgelegten Seeds-Token-Pakete installieren. 2. Den bereitgestellten Einstiegspunkt, CSS und das HTML-Stammelement speichern. 3. Die gemischte Auswahl prüfen, bevor der Filter geändert wird. 4. Die Wiederherstellung aus dem gefilterten Leerzustand und das Rückgängigmachen nach einer Stapelprüfung überprüfen. ### Eine Kombination von Zuständen testen Wählen Sie einen Beitrag aus und prüfen Sie den gemischten Zustand der Massenauswahl. Wechseln Sie zu „Entwurf“ und vergewissern Sie sich, dass die Auswahl aufgehoben wird. Wählen Sie die sichtbaren Entwürfe aus, geben Sie sie zur Prüfung frei und prüfen Sie das leere Ergebnis. Machen Sie die Aktion rückgängig, bestätigen Sie, dass die beiden Entwürfe wieder angezeigt werden, und rufen Sie anschließend alle Beiträge auf. Bei schmaler Bildschirmbreite werden die Karten zu einer einzigen Lesespalte; Beschriftungen und Prüfsteuerelemente bleiben dabei zugänglich. ## Sprout Social Seeds Designsystem: Komponentenbeispiele ### main.js — vollständige redaktionelle Warteschlange Eigene Daten, Filter, gemischte Auswahl, Stapeländerung und Rückgängigmachen. ``` import '@sproutsocial/seeds-color/dist/seeds-color.css'; import '@sproutsocial/seeds-space/dist/seeds-space.css'; import '@sproutsocial/seeds-typography/dist/seeds-typography.css'; import '@sproutsocial/seeds-border/dist/seeds-border.css'; import './seeds.css'; let items=[{id:'p1',title:'A clearer first step',channel:'Team updates',copy:'A useful guide starts with the task someone needs to complete. This week, we are revisiting the first step in our workshop toolkit.',status:'Draft'},{id:'p2',title:'Room for different perspectives',channel:'Community notes',copy:'Good workshop preparation creates more than an agenda. It gives people time to think and more than one way to contribute.',status:'Draft'},{id:'p3',title:'From notes to next actions',channel:'Team updates',copy:'Close a conversation with a decision, an owner and a date to look again. Keep open questions visible alongside the agreed next step.',status:'Ready for review'}];let chosen=new Set(),previous=null; document.querySelector('#root').innerHTML=`

OpenDesign · Editorial practice

A small queue, ready for a closer look

Prepare original sample posts for review. This workspace does not connect to social accounts or publish content.

3 sample posts

`; function visible(){let value=document.querySelector('#filter').value;return items.filter(x=>value==='All posts'||x.status===value)} function updateSelection(){let rows=visible(),selected=rows.filter(x=>chosen.has(x.id));const all=document.querySelector('#all');all.checked=rows.length>0&&selected.length===rows.length;all.indeterminate=selected.length>0&&selected.lengthx.status==='Draft');document.querySelector('#count').textContent=`${rows.length} posts shown · ${selected.length} selected`;} function render(){let rows=visible();chosen=new Set([...chosen].filter(id=>rows.some(x=>x.id===id)));const root=document.querySelector('#posts');root.replaceChildren(...rows.map(x=>{let a=document.createElement('article');a.innerHTML=`
${x.status}

${x.title}

${x.copy}

Review checklist
`;a.querySelector('input').onchange=e=>{e.target.checked?chosen.add(x.id):chosen.delete(x.id);updateSelection()};return a}));document.querySelector('#empty').hidden=rows.length>0;updateSelection();} document.querySelector('#filter').onchange=()=>{chosen.clear();render()};document.querySelector('#all').onchange=e=>{chosen=new Set(e.target.checked?visible().map(x=>x.id):[]);render()};document.querySelector('#review').onclick=()=>{let changed=items.filter(x=>chosen.has(x.id)&&x.status==='Draft');if(!changed.length)return;previous=changed.map(x=>({id:x.id,status:x.status}));changed.forEach(x=>x.status='Ready for review');chosen.clear();render();document.querySelector('#notice').hidden=false;document.querySelector('#message').textContent=`${changed.length} ${changed.length===1?'post marked':'posts marked'} ready for review locally. Nothing was published.`;};document.querySelector('#undo').onclick=()=>{previous?.forEach(p=>{items.find(x=>x.id===p.id).status=p.status});previous=null;render();document.querySelector('#notice').hidden=true;document.querySelector('#filter').focus()};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All posts';render();document.querySelector('#filter').focus()};render(); ``` Code-Referenz - Es wird keine Einbindung sozialer Netzwerke in API, Veröffentlichung und keine native Komponente aus React impliziert. ### seeds.css — Gestaltung mit echten Tokens Das vollständige responsive Layout verwendet die installierten Variablen aus CSS. ``` *{box-sizing:border-box}body{margin:0;font:var(--typography-font-size--300)/var(--typography-line-height--300) var(--typography-family);color:var(--color-neutral-900);background:var(--color-neutral-100)}main{max-width:1160px;padding:var(--space-size--500);margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:32px}h1{font-size:var(--typography-font-size--700);line-height:var(--typography-line-height--700);margin:8px 0 16px;max-width:24ch}header p:last-child{max-width:64ch}.eyebrow,.badge{font-size:13px;font-weight:600}.badge{white-space:nowrap;background:var(--color-green-100);color:var(--color-green-900);padding:8px 12px;border-radius:var(--border-radius-400)}.filters{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px;background:white;border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-600)}label{display:flex;align-items:center;gap:8px}select,button{font:inherit;border:1px solid var(--color-neutral-600);border-radius:var(--border-radius-400);padding:8px 12px;min-height:40px}select{background:white;color:var(--color-neutral-900);max-width:100%}button{background:var(--color-blue-700);color:white;border-color:var(--color-blue-700);font-weight:600;cursor:pointer}button:disabled{opacity:.5;cursor:default}input{width:18px;height:18px;accent-color:var(--color-blue-700);flex-shrink:0}#count{font-size:13px;color:var(--color-neutral-700);margin:24px 0 16px}#posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}article{display:flex;flex-direction:column;border:1px solid var(--color-neutral-200);border-radius:var(--border-radius-600);padding:24px;background:white;min-width:0}.post-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.channel,.status{font-size:13px}.status{padding:2px 8px;border-radius:4px}.draft{background:var(--color-neutral-100)}.ready{background:var(--color-green-100);color:var(--color-green-900)}h2{font-size:21px;line-height:29.333px;margin:24px 0 16px}.copy{min-height:144px}details{border-top:1px solid var(--color-neutral-200);padding-top:16px;margin-top:auto;font-size:13px;line-height:1.6}summary{cursor:pointer;font-weight:600}details ul{padding-left:20px}details li{margin:8px 0}#notice{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--color-blue-0);border:1px solid var(--color-blue-300);border-radius:8px;padding:16px 24px;margin-top:24px}#notice p{margin:0}#empty{background:white;padding:24px;border-radius:8px}#empty h2{margin-top:0}footer{font-size:13px;line-height:1.6;border-top:1px solid var(--color-neutral-200);margin-top:32px;padding-top:24px}:focus-visible{outline:3px solid var(--color-blue-700);outline-offset:3px}[hidden]{display:none!important}@media(max-width:850px){#posts{grid-template-columns:1fr}.copy{min-height:0}header{flex-wrap:wrap}#notice{flex-wrap:wrap}}@media(max-width:480px){main{padding:16px}.filters,article{padding:16px}.filters>label:first-child{flex-wrap:wrap}h1{font-size:24px;line-height:32px}.filters{gap:16px}.eyebrow{overflow-wrap:anywhere}} ``` Code-Referenz - Die Zuordnung von Farbpalette und Rollen ist eine eigenständige Anwendungsentscheidung. ### index.html — vollständige App-Shell Stammelement und Einstiegspunkt für die lokale App. ``` Editorial review queue
``` Code-Referenz - Die Vite-Stammdatei index.html durch diese Datei ersetzen. ## Sprout Social Seeds Designsystem: Agenteneinrichtung ### Ausgangspunkt für die Implementierung Dies sind öffentliche Token-Pakete. Die oben bereitgestellte vollständige Prüfanwendung besteht aus eigenständigem Code. ``` npm create vite@latest seeds-review -- --template vanilla cd seeds-review npm install npm install @sproutsocial/seeds-color@2.5.0 @sproutsocial/seeds-space@0.8.1 @sproutsocial/seeds-typography@3.8.0 @sproutsocial/seeds-border@1.7.1 # Save index.html at root; main.js and seeds.css in src. npm run dev ``` ### Ein Prompt für dein Projekt ``` Erstelle die bereitgestellte redaktionelle Warteschlange mit dem angehefteten öffentlichen Seeds-Token CSS. Bewahre die tatsächlichen Tokennamen, die Produkttypografie des Systems, die Auswahl nur sichtbarer Einträge, den nativen gemischten Status, stapelweise Aktualisierungen nur für Entwürfe, die Wiederherstellung bei leeren Ergebnissen und das Rückgängigmachen in einem Schritt. Behalte die ursprünglichen Beispielinhalte bei und erwecke niemals den Eindruck, ein Social-Media-Konto sei verbunden oder ein Beitrag werde veröffentlicht. ``` ## Sprout Social Seeds-Designsystem: Quellen und Geltungsbereich Eine originale OpenDesign-Anwendung mit veröffentlichten Seeds-Token-Paketen. Die Karten und der Prüfablauf sind originale Implementierungen mit HTML/JavaScript und keine nativen Seeds-React-Komponenten. Es ist kein Social-Media-Konto verbunden und nichts wird veröffentlicht. - Token-Pakete Öffentliche Bereitstellungspfade und versionierte Basiswerte. - Farbe Palettenreferenzen und Kontext für Produkt und Marke. - Abstände Skaleneinträge und Verwendung von Abständen. - Produkttypografie Produktleitlinien für Systemschriften. - Einrichtung nativer Komponenten Separate Integrationsanforderungen für React. ## Sprout Social Seeds-Designsystem: verwandte Ressourcen ### SumUp Circuit Ein Circuit-Leitfaden mit exakten semantischen Tokens, nativen Validierungs-Props, einem vollständigen Editor für Händlerartikel und einer illustrierten Vorschau aus Kundensicht. ### TDesign Erstellen Sie einen kompakten Richtlinieneditor für API mit TDesign React: konkreten Theme-Rollen, einer zweipixeligen Größenskala, der Registrierung von Form-Feldern und einer typisierten Table-Komposition. ### Thumbtack Thumbprint Erstelle eine Oberfläche zur Suche nach Dienstleistern mit den dokumentierten v2-Primitiven von Thumbprint: kompakte Anbieter-Karten, übersichtliche Vergleichsdetails, eindeutige Auswahlzustände und eine dauerhaft sichtbare Merkliste. - [Implementierungsreferenz](https://seeds.sproutsocial.com/resources/tokens/) - [Quelle](https://seeds.sproutsocial.com/resources/tokens/) - [Code-Referenz](https://seeds.sproutsocial.com/resources/tokens/) - [Token-Pakete Öffentliche Bereitstellungspfade und versionierte Basiswerte.](https://seeds.sproutsocial.com/resources/tokens/) - [Farbe Palettenreferenzen und Kontext für Produkt und Marke.](https://seeds.sproutsocial.com/visual/color/) - [Abstände Skaleneinträge und Verwendung von Abständen.](https://seeds.sproutsocial.com/visual/space/) - [Produkttypografie Produktleitlinien für Systemschriften.](https://seeds.sproutsocial.com/visual/product-typography/) - [Einrichtung nativer Komponenten Separate Integrationsanforderungen für React.](https://seeds.sproutsocial.com/components/getting-started/)