Esamina il contratto delle tabelle dati di Soul insieme alla spaziatura di sei pixel, ai ruoli cromatici su più livelli e alla tipografia Inter compatta. Confronta la selezione multipla, la notazione dei dati mancanti e le righe di riepilogo, quindi consulta i punti di accesso verificati del pacchetto privato React.
Interpretazione indipendente di HTML/CSS delle linee guida di design di Soul e dei token verificati per la modalità chiara. Font di sistema come fallback; nessuna risorsa privata di React. · Riferimento per l’implementazione
02
Riferimento di design del sistema di design Emplifi Soul
Documentazione pubblica di design di Soul e Storybook ufficiale aggiornato. Si tratta di valori di base dichiarati per la modalità chiara, non dell’affermazione che ogni pagina della documentazione e ogni versione del pacchetto abbiano lo stesso stato. L’anteprima usa i font di sistema come fallback locale.
Linee guida di design e stato dell’implementazione del sistema di design Emplifi Soul
Non dedurre l’esistenza di un pacchetto dal nome di un componente
Soul è il sistema di design di Emplifi. I riferimenti pubblici di design e lo Storybook sono consultabili, ma la guida ufficiale rapida richiede l’accesso a un ambito npm privato. L’esempio nel browser è un’interpretazione indipendente di HTML/CSS; non include Soul React. Il comportamento della tabella interpreta le linee guida di design, la cui pagina pubblica indica ancora React come pianificato.
L’esempio React fornito usa intenzionalmente una tabella semantica e controlli Button effettivi di Soul. Offre uno stato applicativo funzionante senza dichiarare l’esistenza di un’esportazione DataTable non documentata. La documentazione pubblica consultabile non concede l’accesso al pacchetto né il permesso di ridistribuire risorse private.
Un contratto per le tabelle dati che va oltre la selezione delle righe del sistema di design Emplifi Soul
Intestazioni, riepiloghi e valori mancanti
Le linee guida di Soul per le tabelle distinguono intestazioni, righe, celle e una barra di riepilogo facoltativa. I valori numerici sono allineati a destra; i contenuti testuali a sinistra. Un riepilogo può mostrare totali o medie, quindi la relativa etichetta deve specificare l’operazione invece di presentare un numero senza spiegazioni.
Usa N/A quando una misura non è applicabile, per esempio la durata video per un’immagine. Un trattino lungo indica dati non disponibili o sconosciuti. Questi casi non vanno convertiti in zero: ciò cambierebbe l’interpretazione di un riepilogo e di ogni confronto basato su di esso.
L’esempio attuale implementa l’ordinamento e la selezione delle righe, non il calcolo di un riepilogo.
Le righe espanse e le spiegazioni dei dati mancanti sono punti di estensione documentati; non sono simulati nell’anteprima.
Il riferimento di design indica la tabella React come pianificata, quindi il codice fornito gestisce il markup della tabella senza inventare un’importazione Soul DataTable.
La modalità in blocco modifica le azioni disponibili
Soul colloca la barra delle azioni in blocco sotto la raccolta e nasconde le azioni delle singole righe quando è attiva la selezione in blocco. La casella di controllo dell’intestazione ha tre stati: selezionata, non selezionata e indeterminata. È possibile ordinare una sola colonna alla volta.
Nell’esempio, tutti e tre i record sono locali e rientrano nell’ambito della selezione. L’intestazione della copertura comunica la direzione dell’ordinamento; gli ID selezionati restano selezionati dopo il riordino. Un’eventuale azione a livello di riga dovrà rispettare la restrizione documentata per la modalità in blocco, anziché competere con la barra degli strumenti per le operazioni in blocco.
Crea profondità con livelli neutri nel sistema di design Emplifi Soul
Un’area di lavoro CX sobria
La modalità chiara di Soul alterna superfici grigie e bianche, mentre i livelli scuri diventano progressivamente più chiari. L’esempio usa una pagina grigia, una superficie bianca per la tabella e una barra di navigazione scura e compatta. Il colore definisce il ruolo, invece di decorare ogni riga.
Il blu interattivo è riservato all’azione di revisione e ai controlli selezionati. Le piccole illustrazioni originali dei post usano colori decorativi. Aiutano a distinguere gli argomenti dei contenuti senza attribuire loro un significato ingannevole di successo o pericolo.
Caratteri compatti senza perdere la gerarchia nel sistema di design Emplifi Soul
Inter è la famiglia principale
Soul specifica Inter per tutta l’interfaccia, Noto Sans Arabic per il testo arabo e Noto Sans Mono per il codice. L’anteprima usa i font di sistema perché non include i file dei font. Le misure si basano comunque sulle ricette pubblicate.
Un titolo principale da 30/42 apre un sistema di testo del corpo da 13/18. I numeri della tabella usano cifre tabulari. La tabella non adotta uno stile display sovradimensionato da marketing e i titoli dei post restano testo leggibile, anziché etichette incorporate in un’immagine.
Ritmo di sei pixel e raggio dei contenitori nel sistema di design Emplifi Soul
Organizza i controlli compatti
L’unità di base della spaziatura è 6 px. Valori come 12, 18, 24 e 36 px definiscono relazioni più ampie; 3 e 9 px sono riservati agli spazi interni compatti dei componenti, non ai margini predefiniti della pagina. La spaziatura interna del contenuto documentata passa da 24 px a 1559 px e inferiori a 36 px da 1560 px in su.
Soul distingue i valori di spaziatura dalle dimensioni dei componenti indicate con taglie di magliette. Un controllo medio non equivale a --space-6. L’esempio usa controlli da 36 px, angoli degli elementi arrotondati di 6 px e un raggio dei contenitori di 8 px.
Usa l’enfasi per indicare l’azione successiva nel sistema di design Emplifi Soul
Una sola azione di revisione principale
La variante principale di Soul mette in evidenza l’azione più importante. Le varianti light e ghost gestiscono le attività secondarie; i controlli invisibili riducono il peso visivo nelle barre degli strumenti dense. Nell’anteprima, solo l’azione di revisione in blocco ha lo stile principale a riempimento pieno.
Annulla selezione deseleziona le righe senza modificare le etichette di revisione. La revisione modifica solo lo stato locale della revisione e il messaggio specifica chiaramente che non è stato pubblicato nulla. Il testo dei controlli usa le maiuscole e minuscole da frase.
Carica la libreria privata in modo consapevole nel sistema di design Emplifi Soul
Foundation CSS precede la composizione dei componenti
Il punto di ingresso ufficiale importa variables.css e default-styles.css da @sbks/ds-design-library. Il suo punto di ingresso Sass fornisce mixin; è separato dal CSS globale. Button proviene da @sbks/ds-button.
Il Button API attuale include isLoading, isSelected, isApplied e badge. Le proprietà basate su enum richiedono le costanti enum esportate dalla libreria in TypeScript. Questo esempio usa la variante predefinita LIGHT, verificata, anziché ipotizzare un percorso di importazione dell’enum.
Completa la configurazione autorizzata dell’ambito privato e del loader di compilazione seguendo la guida rapida ufficiale.
Importa una sola volta il CSS fondamentale nel punto di ingresso dell’applicazione e configura i file dei font selezionati.
Monta l’esempio di tabella controllata fornito, quindi verifica la selezione, l’annullamento e la revisione locale prima di collegare qualsiasi flusso di pubblicazione.
Esempi di componenti del sistema di design Emplifi Soul
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS delle linee guida di design di Soul e dei token verificati per la modalità chiara. Font di sistema come fallback; nessuna risorsa privata di 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>
La tabella implementa direttamente in HTML la selezione e l’ordinamento. Non dichiara l’esistenza di un’esportazione Soul DataTable privata; l’esempio React usa l’esportazione Button verificata insieme a una tabella gestita dall’applicazione.
Tabella di revisione selezionabile con pulsanti Soul effettivi
Tabella semantica nativa e caselle di controllo controllate, composte con l’export Button documentato. La tabella è codice applicativo, non un inesistente componente Soul DataTable.
Il valore predefinito di Button è LIGHT. Questo esempio non presume la posizione di un export enum né inventa proprietà per DataTable.
Installa e configura prima la libreria di design privata e i pacchetti dei pulsanti. Gli import sono verificati nello Storybook ufficiale.
La revisione in blocco aggiorna solo lo stato locale. Nessun contenuto viene pubblicato.
04
Configurazione di sistema di design Emplifi Soul Agent
Punto di partenza per l’implementazione
La guida rapida ufficiale richiede l’accesso a npm privato e al repository/VPN di Emplifi. Supporta React 18/19 e Webpack 4/5, con la configurazione di Sass e del loader SVG. Segui la procedura di onboarding collegata per gli ambiti interni, senza aspettarti di trovare questi pacchetti nel registro pubblico. L’anteprima autonoma non richiede nessuna di queste risorse private.
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 *;
Un prompt per il tuo progetto
Prompt per l’agente
Crea un’interfaccia di revisione dei contenuti Emplifi Soul con variabili verificate per livelli, colori e spaziature, testo del corpo 13/18, raggio dei controlli di 6px e contenitori da 8px. Usa una tabella semantica selezionabile con ID stabili, selezione di tutti gli elementi con stato indeterminato e una colonna ordinabile. Per le app autorizzate, usa l’export effettivo @sbks/ds-button e le fondamenta CSS; non inventare mai un pacchetto DataTable pubblico.
05
Fonti e ambito di sistema di design Emplifi Soul
Soul è il sistema di design di Emplifi. I riferimenti pubblici di design e lo Storybook sono consultabili, ma la guida ufficiale rapida richiede l’accesso a un ambito npm privato. L’esempio nel browser è un’interpretazione indipendente di HTML/CSS; non include Soul React. Il comportamento della tabella interpreta le linee guida di design, la cui pagina pubblica indica ancora React come pianificato.
