# Sistema di design Emplifi Soul

## Anteprima dell’interfaccia del sistema di design Emplifi Soul

Prova la selezione di tutti gli elementi, la selezione indeterminata, l’ordinamento, la revisione in blocco e l’annullamento.

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

### Modello a livelli

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --color-layer-level-0 | #f3f3f5 | Livello della superficie in modalità chiara. |
| --color-layer-level-1 | #ffffff | Livello della superficie in modalità chiara. |
| --color-layer-level-2 | #f3f3f5 | Livello della superficie in modalità chiara. |
| --color-layer-level-3 | #e7e7e7 | Livello della superficie in modalità chiara. |
| --color-on-layer-primary | #24242b | Testo principale. |
| --color-on-layer-secondary | #505057 | Testo di supporto. |
| Dark level 0 / level 1 | #111114 / #24242b | In modalità scura, le superfici diventano più chiare con l’aumentare della profondità. |
### Colori per azioni e tabelle

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --color-button-primary | #0c4bff | Sfondo del pulsante principale. |
| --color-on-layer-interactive | #003beb | Testo interattivo. |
| --color-border-focus-ring | #003beb | Anello di messa a fuoco. |
| --color-table-row-odd | #ffffff | Righe dispari e intestazione/piè di pagina della tabella. |
| --color-table-row-even | #f9f9fa | Righe pari. |
| --color-table-row-hover | #d5efff | Indicatore di scansione. |
| --color-layer-main-navigation | #111114 | Solo navigazione principale. |
### Spaziatura e raggio

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --space-1 | 3px | Spaziatura di Foundation. |
| --space-2 | 6px | Spaziatura di Foundation. |
| --space-3 | 9px | Spaziatura di Foundation. |
| --space-4 | 12px | Spaziatura di Foundation. |
| --space-5 | 18px | Spaziatura di Foundation. |
| --space-6 | 24px | Spaziatura di Foundation. |
| --space-7 | 30px | Spaziatura di Foundation. |
| --space-8 | 36px | Spaziatura di Foundation. |
| --space-9 | 48px | Spaziatura di Foundation. |
| Default control height | 36px | Opzione compatta da 30 px; non confonderla con la scala di spaziatura. |
### Gerarchia degli angoli

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| --border-radius-small | 2px | Arrotondamento leggero. |
| --border-radius-medium | 6px | Elementi predefiniti. |
| --border-radius-large | 8px | Contenitori. |
| --border-radius-full | 50% | Cerchio. |
| --border-radius-pill | 999px | A pillola. |
### Ricette tipografiche

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| headline-1 | 500 · 30px / 42px | Titolo principale della pagina. |
| headline-2 | 500 · 20px / 30px | Titolo di sezione. |
| headline-3 | 500 · 16px / 24px | Titolo di sottosezione. |
| paragraph-regular | 400 · 13px / 18px | Testo del corpo medio. |
| Button label | 600 · 13px / 18px | Maiuscole e minuscole da frase. |
| Table numerals | Tabular numbers | Allinea i valori numerici confrontabili. |
### Pulsante React API

| Nome / regola | Valore / configurazione | Utilizzo |
| --- | --- | --- |
| Package | @sbks/ds-button | Ambito privato; Button è un’esportazione denominata. |
| variant | BUTTON_VARIANT.LIGHT default | Basato su enum; usa le costanti enum esportate, non stringhe grezze in TypeScript. |
| size | BUTTON_SIZE.MEDIUM default | Medium è il valore di base. |
| isLoading | false | Indicatore di caricamento. |
| isSelected | false | Aspetto selezionato. |
| isApplied | false | Supporto visivo attualmente previsto per la variante invisibile. |
| onClick | Mouse event handler | Collega lo stato locale dell’applicazione. |
| badge | string \| number | Informazioni sulla selezione applicata. |
| theme | Inherited; light fallback | Non presumere che una superficie scura modifichi automaticamente tutti gli elementi discendenti. |
## Guida completa al sistema di design Emplifi Soul

Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale.

Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti.

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

Leggi la specifica di supporto

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

1. Completa la configurazione autorizzata dell’ambito privato e del loader di compilazione seguendo la guida rapida ufficiale.

2. Importa una sola volta il CSS fondamentale nel punto di ingresso dell’applicazione e configura i file dei font selezionati.

3. Monta l’esempio di tabella controllata fornito, quindi verifica la selezione, l’annullamento e la revisione locale prima di collegare qualsiasi flusso di pubblicazione.

Leggi la specifica di supporto

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

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

Riferimento del codice

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

```
// 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>;
}
```

Riferimento del codice

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

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

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

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

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

- Modello a livelli Gerarchia delle superfici in modalità chiara e scura.

- Token di colore dell’interfaccia utente Colori denominati e ruoli degli stati.

- Spaziatura Unità da sei pixel e dimensionamento dei componenti.

- Tipografia Stili tipografici e colori semantici del testo.

- Caratteri tipografici Ruoli delle famiglie Inter e Noto.

- Raggio Valori 2, 6, 8 px, interi e a pillola.

- Utilizzo dei pulsanti Enfasi delle azioni.

- Indicazioni per la tabella Selezione, ordinamento e comportamento del riepilogo.

- Guida rapida per i pacchetti privati Requisiti effettivi di accesso e compilazione.

- Punti di accesso CSS Importazioni delle variabili e degli stili predefiniti.

- Button API Proprietà e pacchetto del componente reali.

## Risorse correlate a sistema di design Emplifi Soul

### Esri Calcite

Una guida pratica a Calcite per strumenti spaziali progettati per un uso mirato: superfici semantiche e azioni blu, pannelli di ispezione compatti, API reali per gli input e un esempio completo, eseguibile in locale, per la revisione di un sito.

### GitLab Pajamas

Una guida Pajamas per i flussi di lavoro tecnici: token semantici effettivi, tipografia e spaziatura fluide, un ispettore di pipeline a fasi, messaggi di errore leggibili e una simulazione esplicitamente locale dei nuovi tentativi.

### HPE Grommet

Modella una prenotazione di capacità con le primitive di layout, i campi modulo controllati e gli indicatori numerici di Grommet. Usa con criterio la scala del tema e mantieni distinto il tema base di Grommet dal tema HPE installato separatamente.


- [Riferimento per l’implementazione](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)
- [Leggi la specifica di supporto](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Leggi la specifica di supporto](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Leggi la specifica di supporto](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Leggi la specifica di supporto](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Leggi la specifica di supporto](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Leggi la specifica di supporto](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Leggi la specifica di supporto](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Riferimento del codice](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Riferimento del codice](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Modello a livelli Gerarchia delle superfici in modalità chiara e scura.](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Token di colore dell’interfaccia utente Colori denominati e ruoli degli stati.](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Spaziatura Unità da sei pixel e dimensionamento dei componenti.](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Tipografia Stili tipografici e colori semantici del testo.](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Caratteri tipografici Ruoli delle famiglie Inter e Noto.](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Raggio Valori 2, 6, 8 px, interi e a pillola.](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Utilizzo dei pulsanti Enfasi delle azioni.](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Indicazioni per la tabella Selezione, ordinamento e comportamento del riepilogo.](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Guida rapida per i pacchetti privati Requisiti effettivi di accesso e compilazione.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Punti di accesso CSS Importazioni delle variabili e degli stili predefiniti.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Button API Proprietà e pacchetto del componente reali.](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)