Conheça o contrato de tabela de dados do Soul junto com seu espaçamento de seis pixels, funções de cores em camadas e tipografia compacta Inter. Compare a seleção em lote, a notação de dados ausentes e as linhas de resumo; depois, examine os pontos de entrada verificados do pacote privado React.
Interpretação independente de HTML/CSS das diretrizes de design do Soul e dos tokens verificados do modo claro. A prévia usa fontes do sistema como alternativa; não inclui recursos privados de React. · Referência de implementação
02
Referência de design do sistema sistema de design Emplifi Soul
Documentação pública de design do Soul e Storybook oficial ao vivo. Estes são valores básicos identificados para o modo claro, não uma afirmação de que todas as páginas da documentação e versões dos pacotes tenham o mesmo status. A prévia usa fontes do sistema como alternativa local.
Diretrizes de design e status da implementação do sistema de design Emplifi Soul
Não deduza a existência de um pacote pelo nome de um componente
Soul é o sistema de design da Emplifi. Suas referências públicas de design e seu Storybook podem ser consultados, mas o guia de início rápido oficial exige acesso a um escopo privado do npm. O exemplo no navegador é uma interpretação independente de HTML/CSS; ele não inclui o Soul React. O comportamento da tabela interpreta as diretrizes de design, cuja página pública ainda indica que React está planejado.
O exemplo fornecido de React usa deliberadamente uma tabela semântica e controles Button reais do Soul. Ele oferece um estado de aplicação funcional sem alegar a existência de uma exportação DataTable não documentada. O acesso à documentação pública não concede acesso ao pacote nem permissão para redistribuir recursos privados.
Sistema de design Emplifi Soul: um contrato de tabela de dados que vai além da seleção de linhas
Cabeçalhos, resumos e valores ausentes
As diretrizes de tabela do Soul distinguem cabeçalhos, linhas, células e uma barra de resumo opcional. Valores numéricos são alinhados à direita; conteúdo textual, à esquerda. Um resumo pode apresentar totais ou médias, por isso seu rótulo deve identificar a operação, em vez de exibir um número sem explicação.
Use N/A quando uma medida não se aplicar, como a duração de um vídeo para uma imagem. Um travessão representa dados indisponíveis ou desconhecidos. Esses casos não devem ser convertidos em zero, pois isso altera a interpretação do resumo e de qualquer comparação baseada nele.
O exemplo atual implementa ordenação e linhas selecionáveis, mas não calcula resumos.
Linhas expandidas e explicações sobre dados ausentes são pontos de extensão documentados; não são simulados na prévia.
A referência de design indica que a tabela React está planejada; por isso, o código fornecido controla a marcação da tabela, em vez de inventar uma importação de DataTable do Soul.
No Soul, a barra de ações em lote fica abaixo da coleção, e as ações individuais das linhas são ocultadas enquanto a seleção em lote está ativa. A caixa de seleção do cabeçalho tem estados marcado, desmarcado e indeterminado. A ordenação é limitada a uma coluna por vez.
No exemplo, os três registros são locais e permanecem dentro do escopo da seleção. O cabeçalho Reach anuncia a direção da ordenação; os IDs selecionados permanecem após a reordenação. Uma futura ação por linha deve respeitar a restrição documentada do modo em lote, em vez de competir com a barra de ações em lote.
Sistema de design Emplifi Soul: crie profundidade com camadas neutras
Um espaço de trabalho de CX com visual contido
O modo claro do Soul alterna entre superfícies cinza e brancas, enquanto as camadas escuras ficam progressivamente mais claras. O exemplo usa uma página cinza, uma superfície de tabela branca e uma faixa de navegação escura e compacta. A cor define papéis, em vez de decorar cada linha.
O azul interativo é reservado para a ação de revisão e os controles selecionados. Pequenas ilustrações originais das publicações acrescentam cor decorativa. Elas ajudam a distinguir os temas do conteúdo sem atribuir a esses temas um significado falso de sucesso ou perigo.
Sistema de design Emplifi Soul: tipografia compacta sem perder a hierarquia
Inter é a família tipográfica principal
O Soul especifica Inter para toda a interface, Noto Sans Arabic para textos em árabe e Noto Sans Mono para código. A prévia usa fontes do sistema porque não inclui esses arquivos de fonte. As medidas continuam baseadas nas receitas publicadas.
Um título principal de 30/42 conduz a um sistema de texto de corpo de 13/18. Os numerais da tabela usam formas tabulares. A tabela não usa um estilo de exibição de marketing superdimensionado, e os títulos das publicações permanecem como texto legível, em vez de rótulos incorporados a uma imagem.
Sistema de design Emplifi Soul: ritmo de seis pixels e raio dos contêineres
Organize controles compactos
A unidade básica de espaçamento é 6 px. Valores como 12, 18, 24 e 36 px estabelecem relações maiores; 3 e 9 px ficam reservados para detalhes internos compactos dos componentes, em vez de serem usados como margens padrão da página. O preenchimento de conteúdo documentado muda de 24 px, em telas de até 1559 px, para 36 px, em telas de 1560 px ou mais.
Soul distingue os valores de espaçamento dos tamanhos de componentes em escala de camiseta. Um controle médio não corresponde a --space-6. O exemplo usa controles de 36 px, arredondamento de elementos de 6 px e raio de 8 px para os contêineres.
Sistema de design Emplifi Soul Use o destaque para explicar a próxima ação
Uma única ação principal de revisão
A variante primária do Soul destaca a ação mais importante. As variantes clara e fantasma atendem a tarefas de apoio; os controles invisíveis reduzem o peso visual em barras de ferramentas compactas. Na visualização, apenas a ação de revisão em lote recebe o tratamento preenchido primário.
Cancelar seleção limpa as linhas selecionadas sem alterar os rótulos de revisão. A revisão altera apenas o estado local de revisão, e a mensagem deixa explícito que nada foi publicado. O texto do controle usa maiúsculas e minúsculas de frase.
Sistema de design Emplifi Soul Carregue a biblioteca privada de forma deliberada
Foundation CSS vem antes da composição dos componentes
A entrada oficial importa variables.css e default-styles.css de @sbks/ds-design-library. A entrada Sass fornece mixins; ela é separada do CSS global. Button vem de @sbks/ds-button.
O API ativo de Button inclui isLoading, isSelected, isApplied e badge. As propriedades baseadas em enum exigem as constantes de enum exportadas pela biblioteca em TypeScript. Este exemplo usa a variante LIGHT padrão verificada, em vez de supor um caminho de importação para o enum.
Conclua a configuração autorizada do escopo privado e dos carregadores de build seguindo o início rápido oficial.
Importe o CSS de base uma vez na entrada da aplicação e configure os recursos de fonte escolhidos.
Monte o exemplo de tabela controlada fornecido e, em seguida, teste a seleção, o cancelamento e a revisão local antes de conectar qualquer fluxo de publicação.
Sistema de design Emplifi Soul Exemplos de componentes
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação independente de HTML/CSS das orientações de design do Soul e dos tokens verificados do modo claro. Fonte alternativa do sistema; sem recursos privados de 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>
A tabela implementa diretamente a seleção e a classificação em HTML. Ela não afirma usar uma exportação privada de Soul DataTable; o exemplo React usa a exportação verificada de Button junto a uma tabela pertencente à aplicação.
Tabela de revisão selecionável com botões reais do Soul
Tabela semântica nativa e caixas de seleção controladas, compostas com a exportação documentada de Button. A tabela é código da aplicação, não um componente Soul DataTable inventado.
O padrão de Button é LIGHT. Este exemplo não supõe um local de exportação de enum nem inventa propriedades para DataTable.
Instale e configure primeiro a biblioteca de design privada e os pacotes de botões. As importações foram verificadas no Storybook oficial.
A revisão em lote atualiza apenas o estado local. Nenhum conteúdo é publicado.
04
Sistema de design Emplifi Soul Configuração do agente
Ponto de partida para implementação
O início rápido oficial exige acesso ao npm privado e ao repositório/VPN da Emplifi. Ele oferece suporte a React 18/19 e Webpack 4/5, com configuração de Sass e do carregador de SVG. Use o processo de integração vinculado ao escopo interno, em vez de esperar encontrar esses pacotes no registro público. A visualização independente não precisa de nenhum desses recursos privados.
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 *;
Um prompt para seu projeto
Prompt para agente de IA
Crie uma interface Emplifi Soul para revisão de conteúdo com variáveis verificadas de camadas/cores/espaçamento, tipografia de corpo 13/18, raio de 6 px para controles e contêineres de 8 px. Use uma tabela semântica selecionável, com IDs estáveis, seleção de todos com estado indeterminado e uma coluna classificada. Em aplicações autorizadas, use a exportação real de @sbks/ds-button e o CSS de base; nunca invente um pacote público DataTable.
05
Sistema de design Emplifi Soul Fontes e escopo
Soul é o sistema de design da Emplifi. Suas referências públicas de design e seu Storybook podem ser consultados, mas o guia de início rápido oficial exige acesso a um escopo privado do npm. O exemplo no navegador é uma interpretação independente de HTML/CSS; ele não inclui o Soul React. O comportamento da tabela interpreta as diretrizes de design, cuja página pública ainda indica que React está planejado.
