Lesen Sie Souls Vertrag für Datentabellen zusammen mit den sechs Pixeln Abstand, den abgestuften Farbrollen und der kompakten Inter-Typografie. Vergleichen Sie die Mehrfachauswahl, die Kennzeichnung fehlender Daten und die Zusammenfassungszeilen. Prüfen Sie anschließend die Einstiegspunkte des verifizierten privaten React-Pakets.
Eigenständige Interpretation der Soul-Designrichtlinien und geprüften Tokens für den hellen Modus durch HTML/CSS. System-Fallback-Schriftart; keine privaten React-Assets. · Implementierungsreferenz
02
Emplifi Soul Designsystem-Referenz
Öffentliche Designdokumentation von Soul und offizielles Storybook in Echtzeit. Dies sind benannte Basiswerte für den hellen Modus und keine Aussage darüber, dass alle Dokumentationsseiten und Paketversionen denselben Status haben. Die Vorschau verwendet Systemschriften als lokales Fallback.
Emplifi Soul-Designsystem: Designrichtlinien und Implementierungsstatus
Leiten Sie kein Paket aus einem Komponentennamen ab.
Soul ist das Designsystem von Emplifi. Die öffentlich zugänglichen Designreferenzen und das Storybook lassen sich lesen, für den offiziellen Schnellstart ist jedoch Zugriff auf einen privaten npm-Scope erforderlich. Die Browser-Demo ist davon unabhängig HTML/CSS; sie bündelt Soul nicht React. Das Tabellenverhalten setzt die Designrichtlinien um, deren öffentliche Seite React weiterhin als geplant kennzeichnet.
Das bereitgestellte Beispiel für React verwendet bewusst eine semantische Tabelle und echte Soul-Button-Steuerelemente. Es stellt einen funktionierenden Anwendungsstatus bereit, ohne einen undokumentierten DataTable-Export zu behaupten. Öffentlich zugängliche Dokumentation gewährt weder Zugriff auf das Paket noch die Erlaubnis, private Assets weiterzuverbreiten.
Emplifi Soul-Designsystem: Ein Tabellenvertrag, der über die Zeilenauswahl hinausgeht
Kopfzeilen, Zusammenfassungen und fehlende Werte
Die Tabellenrichtlinien von Soul unterscheiden zwischen Kopfzeilen, Zeilen, Zellen und einer optionalen Zusammenfassungsleiste. Zahlenwerte werden rechtsbündig, Textinhalte linksbündig ausgerichtet. Eine Zusammenfassung kann Summen oder Durchschnittswerte anzeigen. Daher muss ihre Beschriftung die Berechnung benennen, statt eine unerklärte Zahl darzustellen.
Verwenden Sie N/A, wenn ein Messwert nicht zutrifft, etwa die Videodauer bei einem Bild. Ein Geviertstrich steht für nicht verfügbare oder unbekannte Daten. Diese Fälle sollten nicht in null umgewandelt werden: Dadurch ändert sich die Interpretation einer Zusammenfassung und jedes darauf aufbauenden Vergleichs.
Die aktuelle Demo unterstützt Sortierung und auswählbare Zeilen, berechnet jedoch keine Zusammenfassung.
Aufklappbare Zeilen und Erläuterungen zu fehlenden Daten sind dokumentierte Erweiterungspunkte; in der Vorschau werden sie nicht simuliert.
Die Designreferenz kennzeichnet die Tabelle React als geplant. Deshalb enthält der bereitgestellte Code eigenes Tabellen-Markup, statt einen Soul-DataTable-Import zu erfinden.
Im Sammelmodus stehen andere Aktionen zur Verfügung.
Soul platziert die Sammelaktionsleiste unterhalb der Sammlung und unterdrückt einzelne Zeilenaktionen, solange die Sammelauswahl aktiv ist. Das Kontrollkästchen in der Kopfzeile kennt die Zustände aktiviert, deaktiviert und unbestimmt. Es kann jeweils nur nach einer Spalte sortiert werden.
In der Demo sind alle drei Datensätze lokal und Teil desselben Auswahlbereichs. Die Kopfzeile der Reichweitenspalte gibt die Sortierrichtung an; die ausgewählten IDs bleiben beim Umsortieren erhalten. Eine künftige Aktion auf Zeilenebene sollte die dokumentierte Einschränkung für den Sammelmodus beachten, statt mit der Sammelaktionsleiste zu konkurrieren.
Emplifi Soul-Designsystem: Räumliche Tiefe mit neutralen Ebenen gestalten
Ein zurückhaltender CX-Arbeitsbereich
Im hellen Modus wechseln sich bei Soul graue und weiße Oberflächen ab, während dunklere Ebenen zunehmend heller werden. Die Demo verwendet eine graue Seite, eine weiße Tabellenfläche und einen schmalen dunklen Navigationsbereich. Farbe kennzeichnet Funktionen, statt jede Zeile dekorativ zu gestalten.
Das interaktive Blau ist der Prüfaktion und den ausgewählten Steuerelementen vorbehalten. Kleine Originalillustrationen zu den Beiträgen setzen dekorative Farbakzente. Sie helfen dabei, die Themen der Inhalte zu unterscheiden, ohne ihnen fälschlich eine Bedeutung wie Erfolg oder Gefahr zuzuweisen.
Emplifi Soul-Designsystem: Kompakte Typografie mit klarer Hierarchie
Inter ist die primäre Schriftfamilie
Soul legt Inter für die Benutzeroberfläche, Noto Sans Arabic für arabische Texte und Noto Sans Mono für Code fest. Die Vorschau verwendet Systemschriften, da sie diese Schriftdateien nicht mitliefert. Die Maße orientieren sich weiterhin an den veröffentlichten Vorgaben.
Eine Hauptüberschrift mit 30/42 führt ein Schriftsystem mit 13/18 für Fließtext an. Tabellenzahlen verwenden tabellarische Ziffern. Die Tabelle nutzt keinen übergroßen Marketing-Schriftstil, und Beitragstitel bleiben als lesbarer Text erhalten, statt in ein Bild eingebettet zu sein.
Emplifi Soul-Designsystem: Sechs-Pixel-Rhythmus und Container-Radius
Dichte Steuerelemente übersichtlich anordnen
Die grundlegende Abstandseinheit beträgt 6 px. Werte wie 12, 18, 24 und 36 px schaffen größere Abstände; 3 und 9 px sind kompakten Komponenten-Innenabständen vorbehalten und nicht als Standardseitenränder gedacht. Der dokumentierte Innenabstand des Inhalts beträgt bei 1559 px und weniger 24 px und ab 1560 px 36 px.
Soul unterscheidet zwischen Abstandsangaben und T-Shirt-Größen für Komponenten. Eine mittelgroße Komponente entspricht nicht --space-6. Die Demo verwendet 36 px hohe Steuerelemente, eine Abrundung von 6 px für Elemente und einen Container-Radius von 8 px.
Emplifi Soul-Designsystem: Mit Hervorhebungen die nächste Aktion verdeutlichen
Eine einzelne primäre Prüfaktion
Die primäre Variante von Soul hebt die wichtigste Aktion hervor. Helle und Ghost-Varianten eignen sich für unterstützende Aufgaben; unsichtbare Steuerelemente verringern die visuelle Gewichtung in dicht belegten Werkzeugleisten. In der Vorschau erhält nur die Sammelprüfaktion die primäre, ausgefüllte Darstellung.
Auswahl aufheben entfernt die ausgewählten Zeilen, ohne die Prüfkennzeichnungen zu ändern. Durch das Prüfen ändert sich nur der lokale Prüfstatus; die Meldung stellt ausdrücklich klar, dass nichts veröffentlicht wurde. Der Steuerelementtext verwendet normale Satzschreibung.
Emplifi Soul-Designsystem: Die private Bibliothek gezielt einbinden
Foundation CSS vor dem Zusammensetzen von Komponenten
Der offizielle Einstiegspunkt importiert variables.css und default-styles.css aus @sbks/ds-design-library. Der Sass-Einstiegspunkt stellt Mixins bereit und ist vom globalen CSS getrennt. Button stammt aus @sbks/ds-button.
Die aktuelle Button-API API umfasst isLoading, isSelected, isApplied und badge. Für Enum-basierte Props sind die exportierten Enum-Konstanten der Bibliothek in TypeScript erforderlich. Dieses Beispiel verwendet die verifizierte Standardvariante LIGHT, statt einen Importpfad für ein Enum zu erraten.
Richten Sie den Zugriff auf den privaten Scope und den Build-Loader gemäß dem offiziellen Schnellstart ein.
Importieren Sie das grundlegende CSS einmalig im Anwendungseinstiegspunkt und konfigurieren Sie die ausgewählten Schriftdateien.
Binden Sie das bereitgestellte Beispiel einer gesteuerten Tabelle ein und testen Sie anschließend die Auswahl, das Aufheben der Auswahl und die lokale Prüfung, bevor Sie einen Veröffentlichungsworkflow anbinden.
Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Unabhängige Interpretation von Soul-Designrichtlinien mit HTML/CSS und verifizierten Tokens des hellen Modus. Systemschrift als Fallback; keine privaten Assets von React.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Content review</title><style>:root{--color-layer-level-0:#f3f3f5;--color-layer-level-1:#fff;--color-on-layer-primary:#24242b;--color-on-layer-secondary:#505057;--color-button-primary:#0c4bff;--space-2:6px;--space-4:12px;--space-6:24px;--border-radius-medium:6px;--border-radius-large:8px}*{box-sizing:border-box}body{margin:0;background:var(--color-layer-level-0);color:var(--color-on-layer-primary);font:13px/18px system-ui}nav{padding:15px 24px;background:#111114;color:#f9f9fa;font-size:13px;display:flex;justify-content:space-between;gap:24px}main{padding:24px}header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}h1{font-size:30px;font-weight:500;line-height:42px;margin:0}p{color:#505057;margin:6px 0}small{font-size:11px}.surface{background:white;border:1px solid #ddd;border-radius:8px;overflow:hidden}.bar{padding:18px 24px;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:12px}table{width:100%;border-collapse:collapse;table-layout:fixed}caption{text-align:left;padding:12px 24px;background:#f9f9fa;font-size:11px;color:#505057}th,td{padding:16px 12px;text-align:left;border-bottom:1px solid #e7e7e7;font-weight:400}thead th{font-size:11px;font-weight:600;padding-top:12px;padding-bottom:12px}th:first-child,td:first-child{width:44px;text-align:center}.title{width:46%}.reach{width:15%;text-align:right;font-variant-numeric:tabular-nums}tbody tr:nth-child(even){background:#f9f9fa}tbody tr:hover{background:#d5efff}input{accent-color:#003beb;width:16px;height:16px;cursor:pointer}input:focus-visible,button:focus-visible{outline:2px solid #003beb;outline-offset:3px}button{font:600 13px/18px system-ui;border:1px solid #ccc;background:white;padding:8px 12px;border-radius:6px;min-height:36px;cursor:pointer;color:inherit}button:hover{background:#f3f3f5}#sort{border:0;background:transparent;padding:0;min-height:28px;color:#003beb}#apply{background:#0c4bff;color:white;border-color:#0c4bff}#apply:hover{background:#003beb}.name{display:flex;align-items:center;gap:12px}.art{width:52px;height:52px;flex:0 0 52px;border-radius:6px;position:relative;overflow:hidden}.field{background:#d4e5d3}.field:before{content:'';position:absolute;width:65px;height:65px;border-radius:50%;background:#7ca77a;left:15px;top:20px}.field:after{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background:#fff1c5;left:8px;top:8px}.studio{background:#e6daee}.studio:before{content:'';position:absolute;width:20px;height:36px;background:#a089b2;left:8px;top:16px;transform:rotate(-14deg)}.studio:after{content:'';position:absolute;width:20px;height:28px;background:#c3abc9;left:30px;top:24px;transform:rotate(12deg)}.guide{background:#f4e4c9}.guide:before{content:'';position:absolute;width:26px;height:38px;background:#fff;left:13px;top:9px;transform:rotate(8deg);border:1px solid #c9ad7c}.name strong{font-weight:600;display:block}.name small{color:#505057}.state{font-size:11px;color:#505057}#bulk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;background:#f3f3f5;border-top:1px solid #ccc}#bulk[hidden]{display:none}.actions{display:flex;gap:6px}#status{margin:18px 0;min-height:18px}footer{padding:0 24px 20px;color:#505057;font-size:11px}@media(min-width:1560px){main{padding:36px}}@media(max-width:600px){main{padding:18px}.bar{padding:12px}.channel{display:none}.title{width:57%}.reach{width:22%}.state{display:block;margin-top:4px}th,td{padding:12px 6px}.art{width:36px;height:42px;flex-basis:36px}.name{gap:6px}#bulk{padding:12px;flex-direction:column;align-items:stretch}.actions{flex-wrap:wrap}header{flex-direction:column;gap:8px}h1{font-size:27px}.bar small{max-width:140px;text-align:right}nav{padding:14px 18px}}</style><nav><strong>Soul / Content workspace</strong><span>Demo collection</span></nav><main><header><div><h1>Content review</h1><p>A final editorial check before your team publishes.</p></div><small>3 fictional drafts · No publishing connection</small></header><section class="surface" aria-label="Content drafts"><div class="bar"><strong>Draft collection</strong><small>Select items to review together</small></div><table><caption>Local sample data. Reach values are illustrative.</caption><thead><tr><th scope="col"><input id="all" type="checkbox" aria-label="Select all drafts"></th><th scope="col" class="title">Content</th><th scope="col" class="channel">Channel</th><th scope="col" class="reach" id="reach-head" aria-sort="none"><button id="sort">Reach ↕</button></th></tr></thead><tbody id="rows"></tbody></table><div id="bulk" hidden><span id="count"></span><div class="actions"><button id="apply">Mark as reviewed</button><button id="cancel">Cancel selection</button></div></div></section><p id="status" role="status">Select a draft to begin. All changes stay in this example.</p></main><footer>Independent Soul interpretation · verified light-mode tokens · system font fallback</footer><script>let items=[{id:'field',title:'A morning in the field',channel:'Instagram',reach:2480},{id:'studio',title:'Inside the studio',channel:'Facebook',reach:1860},{id:'guide',title:'Care guide: summer edition',channel:'Instagram',reach:3210}],selected=new Set(),reviewed=new Set(),direction=0;const rows=document.querySelector('#rows'),all=document.querySelector('#all'),bulk=document.querySelector('#bulk'),status=document.querySelector('#status');function render(){rows.innerHTML=items.map(i=>`<tr><td><input type="checkbox" data-id="${i.id}" aria-label="Select ${i.title}" ${selected.has(i.id)?'checked':''}></td><th scope="row"><div class="name"><div class="art ${i.id}" aria-hidden="true"></div><div><strong>${i.title}</strong><span class="state">${reviewed.has(i.id)?'Reviewed locally':'Not reviewed'}</span></div></div></th><td class="channel">${i.channel}</td><td class="reach">${i.reach.toLocaleString('en-US')}</td></tr>`).join('');rows.querySelectorAll('input').forEach(x=>x.onchange=()=>{x.checked?selected.add(x.dataset.id):selected.delete(x.dataset.id);sync()});sync()}function sync(){all.checked=selected.size===items.length;all.indeterminate=selected.size>0&&selected.size<items.length;bulk.hidden=!selected.size;document.querySelector('#count').textContent=selected.size+' selected'}all.onchange=()=>{selected=all.checked?new Set(items.map(i=>i.id)):new Set();render()};document.querySelector('#cancel').onclick=()=>{selected.clear();render();all.focus()};document.querySelector('#apply').onclick=()=>{let n=selected.size;selected.forEach(x=>reviewed.add(x));selected.clear();render();status.textContent=n+(n===1?' draft':' drafts')+' reviewed locally. Nothing published.';all.focus()};document.querySelector('#sort').onclick=()=>{direction=direction===1?-1:1;items.sort((a,b)=>(a.reach-b.reach)*direction);document.querySelector('#reach-head').setAttribute('aria-sort',direction===1?'ascending':'descending');document.querySelector('#sort').textContent='Reach '+(direction===1?'↑':'↓');render()};render();</script></html>
Die Tabelle setzt Auswahl und Sortierung direkt in HTML um. Sie behauptet nicht, einen privaten Soul-DataTable-Export zu verwenden; das Beispiel für React nutzt den verifizierten Button-Export zusammen mit einer anwendungseigenen Tabelle.
Auswählbare Prüftabelle mit echten Soul-Schaltflächen
Native semantische Tabelle mit gesteuerten Kontrollkästchen, zusammengesetzt mit dem dokumentierten Button-Export. Die Tabelle ist Anwendungscode und keine erfundene Soul-DataTable-Komponente.
Der Standardwert für Button ist LIGHT. In diesem Beispiel wird weder ein Speicherort für einen Enum-Export geraten noch werden DataTable-Props erfunden.
Installieren und konfigurieren Sie zuerst die private Designbibliothek und die Button-Pakete. Die Importe sind im offiziellen Storybook verifiziert.
Die Massenprüfung aktualisiert nur den lokalen Zustand. Es werden keine Inhalte veröffentlicht.
04
Einrichtung des Emplifi Soul-Designsystem-Agenten
Ausgangspunkt für die Implementierung
Der offizielle Schnellstart setzt privaten npm-Zugriff sowie Zugriff auf das Emplifi-Repository und VPN voraus. Unterstützt werden React 18/19 und Webpack 4/5; außerdem ist eine Einrichtung von Sass und des SVG-Loaders erforderlich. Nutzen Sie das verlinkte Onboarding für interne Bereiche, statt davon auszugehen, dass diese Pakete über die öffentliche Registry verfügbar sind. Für die eigenständige Vorschau werden keine dieser privaten Ressourcen benötigt.
bash / tsx
# For authorized Emplifi environments with the private @sbks scope configured:
npm i -D @sbks/ds-design-library @sbks/ds-button
// Application entry:
import "@sbks/ds-design-library/dist/css/variables.css";
import "@sbks/ds-design-library/dist/css/default-styles.css";
// Optional SCSS file:
@use "@sbks/ds-design-library/dist/sass/main.scss" as *;
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie eine Inhaltsprüfungsoberfläche für Emplifi Soul mit verifizierten Variablen für Ebenen, Farben und Abstände, Fließtext in 13/18, einem Kontrollradius von 6 px und Containern mit 8 px. Verwenden Sie eine semantische, auswählbare Tabelle mit stabilen IDs, einer unbestimmten Alles-auswählen-Option und einer sortierten Spalte. Nutzen Sie für autorisierte Apps den echten Export @sbks/ds-button und das Foundation-CSS; erfinden Sie niemals ein öffentliches DataTable-Paket.
05
Quellen und Geltungsbereich des Emplifi Soul-Designsystems
Soul ist das Designsystem von Emplifi. Die öffentlich zugänglichen Designreferenzen und das Storybook lassen sich lesen, für den offiziellen Schnellstart ist jedoch Zugriff auf einen privaten npm-Scope erforderlich. Die Browser-Demo ist davon unabhängig HTML/CSS; sie bündelt Soul nicht React. Das Tabellenverhalten setzt die Designrichtlinien um, deren öffentliche Seite React weiterhin als geplant kennzeichnet.
