# Sistema de design Emplifi Soul

## Prévia da interface do sistema de design Emplifi Soul

Experimente selecionar tudo, usar a seleção indeterminada, ordenar, revisar em lote e cancelar.

## 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.

### Modelo de camadas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --color-layer-level-0 | #f3f3f5 | Nível de superfície no modo claro. |
| --color-layer-level-1 | #ffffff | Nível de superfície no modo claro. |
| --color-layer-level-2 | #f3f3f5 | Nível de superfície no modo claro. |
| --color-layer-level-3 | #e7e7e7 | Nível de superfície no modo claro. |
| --color-on-layer-primary | #24242b | Texto principal. |
| --color-on-layer-secondary | #505057 | Texto de apoio. |
| Dark level 0 / level 1 | #111114 / #24242b | No modo escuro, as superfícies ficam mais claras à medida que aumenta a profundidade. |
### Cores de ações e tabelas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --color-button-primary | #0c4bff | Cor de fundo do botão primário. |
| --color-on-layer-interactive | #003beb | Texto interativo. |
| --color-border-focus-ring | #003beb | Anel de foco. |
| --color-table-row-odd | #ffffff | Linhas ímpares e cabeçalho/rodapé da tabela. |
| --color-table-row-even | #f9f9fa | Linhas pares. |
| --color-table-row-hover | #d5efff | Indicador de carregamento. |
| --color-layer-main-navigation | #111114 | Apenas navegação principal. |
### Espaçamento e raio

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --space-1 | 3px | Espaçamento de Foundation. |
| --space-2 | 6px | Espaçamento de Foundation. |
| --space-3 | 9px | Espaçamento de Foundation. |
| --space-4 | 12px | Espaçamento de Foundation. |
| --space-5 | 18px | Espaçamento de Foundation. |
| --space-6 | 24px | Espaçamento de Foundation. |
| --space-7 | 30px | Espaçamento de Foundation. |
| --space-8 | 36px | Espaçamento de Foundation. |
| --space-9 | 48px | Espaçamento de Foundation. |
| Default control height | 36px | Opção compacta de 30 px; não confunda com a escala de espaçamento. |
### Hierarquia dos cantos

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --border-radius-small | 2px | Arredondamento sutil. |
| --border-radius-medium | 6px | Elementos padrão. |
| --border-radius-large | 8px | Contêineres. |
| --border-radius-full | 50% | Círculo. |
| --border-radius-pill | 999px | Pílula. |
### Receitas tipográficas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| headline-1 | 500 · 30px / 42px | Título principal da página. |
| headline-2 | 500 · 20px / 30px | Título da seção. |
| headline-3 | 500 · 16px / 24px | Título da subseção. |
| paragraph-regular | 400 · 13px / 18px | Texto de corpo médio. |
| Button label | 600 · 13px / 18px | Maiúsculas e minúsculas de frase. |
| Table numerals | Tabular numbers | Alinhe valores numéricos comparáveis. |
### Botão React API

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Package | @sbks/ds-button | Escopo privado; Button é uma exportação nomeada. |
| variant | BUTTON_VARIANT.LIGHT default | Baseado em enum; use as constantes de enum exportadas, não strings literais em TypeScript. |
| size | BUTTON_SIZE.MEDIUM default | Medium é a opção básica. |
| isLoading | false | Indicador visual de carregamento. |
| isSelected | false | Aparência selecionada. |
| isApplied | false | Atualmente, há suporte visual para a variante invisible. |
| onClick | Mouse event handler | Conecte o estado da aplicação local. |
| badge | string \| number | Informações sobre a seleção aplicada. |
| theme | Inherited; light fallback | Não suponha que uma superfície escura altere automaticamente todos os elementos descendentes. |
## Guia completo do sistema de design Emplifi Soul

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

### O modo em lote altera as ações disponíveis

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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

1. Conclua a configuração autorizada do escopo privado e dos carregadores de build seguindo o início rápido oficial.

2. Importe o CSS de base uma vez na entrada da aplicação e configure os recursos de fonte escolhidos.

3. 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.

Consulte a especificação de apoio

## 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.

```
<!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>
```

Referência de código

- 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.

```
// ContentReview.tsx — inside a configured, authorized Soul application
import React, { useState } from 'react';
import { Button } from '@sbks/ds-button';
import '@sbks/ds-design-library/dist/css/variables.css';
import '@sbks/ds-design-library/dist/css/default-styles.css';

const posts = [
  { id: 'field', title: 'A morning in the field', channel: 'Instagram' },
  { id: 'studio', title: 'Inside the studio', channel: 'Facebook' },
  { id: 'guide', title: 'Care guide: summer edition', channel: 'Instagram' }
];
export default function ContentReview() {
  const [selected, setSelected] = useState<string[]>([]);
  const [reviewed, setReviewed] = useState<string[]>([]);
  const [message, setMessage] = useState('');
  const toggle = (id: string) => setSelected(previous =>
    previous.includes(id) ? previous.filter(x => x !== id) : [...previous, id]);
  const review = () => {
    setReviewed(previous => [...new Set([...previous, ...selected])]);
    setMessage(`${selected.length} items reviewed locally. Nothing published.`);
    setSelected([]);
  };
  return <section aria-labelledby="review-title">
    <h1 id="review-title">Content review</h1>
    <table style={{ width: '100%', borderCollapse: 'collapse' }}>
      <caption>Fictional content drafts</caption>
      <thead><tr><th scope="col">Select</th><th scope="col">Content</th>
        <th scope="col">Channel</th><th scope="col">Review</th></tr></thead>
      <tbody>{posts.map(post => <tr key={post.id}>
        <td><input type="checkbox" aria-label={`Select ${post.title}`}
          checked={selected.includes(post.id)} onChange={() => toggle(post.id)} /></td>
        <th scope="row">{post.title}</th><td>{post.channel}</td>
        <td>{reviewed.includes(post.id) ? 'Reviewed locally' : 'Not reviewed'}</td>
      </tr>)}</tbody>
    </table>
    {selected.length > 0 && <div aria-label="Bulk actions"
      style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-6)' }}>
      <Button onClick={review}>Mark {selected.length} as reviewed</Button>
      <Button onClick={() => setSelected([])}>Cancel selection</Button>
    </div>}
    <p role="status">{message}</p>
  </section>;
}
```

Referência de código

- 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.

## 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.

```
# 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

```
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.
```

## 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.

- Modelo de camadas Hierarquia de superfícies no modo claro/escuro.

- Tokens de cor da interface Cores nomeadas e funções de estado.

- Espaçamento Unidade de seis pixels e dimensionamento de componentes.

- Tipografia Estilos tipográficos e cores semânticas de texto.

- Tipografias Funções das famílias Inter e Noto.

- Raio Valores 2, 6, 8 px, integral e em formato de pílula.

- Uso de Button Destaque das ações.

- Orientações para a tabela Comportamento de seleção, classificação e resumo.

- Início rápido dos pacotes privados Requisitos reais de acesso e build.

- Pontos de entrada de CSS Importações de variáveis e estilos padrão.

- Botão API Propriedades e pacote do componente real.

## Sistema de design Emplifi Soul Recursos relacionados

### Esri Calcite

Uma referência prática do Calcite para ferramentas espaciais com foco: superfícies semânticas e ações azuis, painéis compactos de inspeção, APIs reais de entrada e um exemplo completo de revisão local de site.

### GitLab Pajamas

Um guia Pajamas para fluxos de trabalho técnicos: tokens semânticos reais, tipografia e espaçamento fluidos, um inspetor de pipeline em etapas, saída de falhas legível e uma simulação de nova tentativa explicitamente local.

### HPE Grommet

Modele uma reserva de capacidade com os primitivos de layout do Grommet, campos de formulário controlados e medidores numéricos. Use deliberadamente a escala do tema e mantenha o tema base do Grommet separado do tema HPE instalado à parte.


- [Referência de implementação](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Fonte](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Fonte](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Fonte](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Fonte](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Fonte](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Fonte](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Consulte a especificação de apoio](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Consulte a especificação de apoio](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Consulte a especificação de apoio](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Consulte a especificação de apoio](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Consulte a especificação de apoio](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Consulte a especificação de apoio](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Consulte a especificação de apoio](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Referência de código](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Referência de código](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Modelo de camadas Hierarquia de superfícies no modo claro/escuro.](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Tokens de cor da interface Cores nomeadas e funções de estado.](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Espaçamento Unidade de seis pixels e dimensionamento de componentes.](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Tipografia Estilos tipográficos e cores semânticas de texto.](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Tipografias Funções das famílias Inter e Noto.](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Raio Valores 2, 6, 8 px, integral e em formato de pílula.](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Uso de Button Destaque das ações.](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Orientações para a tabela Comportamento de seleção, classificação e resumo.](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Início rápido dos pacotes privados Requisitos reais de acesso e build.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Pontos de entrada de CSS Importações de variáveis e estilos padrão.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Botão API Propriedades e pacote do componente real.](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)