# Emplifi Soul — дизайн-система

## Предпросмотр интерфейса дизайн-системы Emplifi Soul

Проверьте выбор всех элементов, частичный выбор, сортировку, массовую проверку и отмену.

## Справочник по дизайн-системе Emplifi Soul

Общедоступная документация по дизайну Soul и актуальный официальный Storybook. Это именованные базовые значения светлой темы, а не утверждение о том, что все страницы документации и версии пакетов имеют одинаковый статус. В предпросмотре системные шрифты используются как локальный запасной вариант.

### Модель слоёв

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --color-layer-level-0 | #f3f3f5 | Уровень поверхности светлой темы. |
| --color-layer-level-1 | #ffffff | Уровень поверхности светлой темы. |
| --color-layer-level-2 | #f3f3f5 | Уровень поверхности светлой темы. |
| --color-layer-level-3 | #e7e7e7 | Уровень поверхности светлой темы. |
| --color-on-layer-primary | #24242b | Основной текст. |
| --color-on-layer-secondary | #505057 | Вспомогательный текст. |
| Dark level 0 / level 1 | #111114 / #24242b | В тёмной теме поверхности становятся светлее по мере увеличения глубины. |
### Цвета действий и таблиц

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --color-button-primary | #0c4bff | Фон основной кнопки. |
| --color-on-layer-interactive | #003beb | Интерактивный текст. |
| --color-border-focus-ring | #003beb | Индикатор фокуса. |
| --color-table-row-odd | #ffffff | Нечётные строки, а также заголовок и подвал таблицы. |
| --color-table-row-even | #f9f9fa | Чётные строки. |
| --color-table-row-hover | #d5efff | Индикация сканирования. |
| --color-layer-main-navigation | #111114 | Только основная навигация. |
### Отступы и радиусы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --space-1 | 3px | Отступы Foundation. |
| --space-2 | 6px | Отступы Foundation. |
| --space-3 | 9px | Отступы Foundation. |
| --space-4 | 12px | Отступы Foundation. |
| --space-5 | 18px | Отступы Foundation. |
| --space-6 | 24px | Отступы Foundation. |
| --space-7 | 30px | Отступы Foundation. |
| --space-8 | 36px | Отступы Foundation. |
| --space-9 | 48px | Отступы Foundation. |
| Default control height | 36px | Компактный вариант — 30px; не путайте его со шкалой отступов. |
### Иерархия скруглений

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --border-radius-small | 2px | Лёгкое скругление. |
| --border-radius-medium | 6px | Элементы по умолчанию. |
| --border-radius-large | 8px | Контейнеры. |
| --border-radius-full | 50% | Круг. |
| --border-radius-pill | 999px | Капсула. |
### Типографические рецепты

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| headline-1 | 500 · 30px / 42px | Заголовок главной страницы. |
| headline-2 | 500 · 20px / 30px | Заголовок раздела. |
| headline-3 | 500 · 16px / 24px | Подзаголовок раздела. |
| paragraph-regular | 400 · 13px / 18px | Основной текст среднего размера. |
| Button label | 600 · 13px / 18px | Регистр предложения. |
| Table numerals | Tabular numbers | Выравнивайте сопоставимые числовые значения. |
### Кнопка React API

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Package | @sbks/ds-button | Приватная область; Button — именованный экспорт. |
| variant | BUTTON_VARIANT.LIGHT default | Основано на enum; используйте экспортированные константы enum, а не строковые значения в TypeScript. |
| size | BUTTON_SIZE.MEDIUM default | Базовый размер — Medium. |
| isLoading | false | Анимация загрузки. |
| isSelected | false | Внешний вид выбранного элемента. |
| isApplied | false | Визуальная поддержка пока доступна для варианта invisible. |
| onClick | Mouse event handler | Свяжите с локальным состоянием приложения. |
| badge | string \| number | Информация о применённом выборе. |
| theme | Inherited; light fallback | Не предполагайте, что тёмная поверхность автоматически меняет все вложенные элементы. |
## Полное руководство по дизайн-системе Emplifi Soul

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Emplifi Soul: рекомендации по дизайну и статус реализации

### Не делайте вывод о наличии пакета по названию компонента

> Soul — дизайн-система Emplifi. Общедоступные материалы по дизайну и Storybook доступны для чтения, но для работы по официальному руководству по быстрому старту необходим доступ к приватной области npm. Пример в браузере — независимая реализация в HTML/CSS; он не включает Soul React. Поведение таблицы интерпретирует рекомендации по дизайну, хотя на общедоступной странице таблица React по-прежнему обозначена как запланированная.

В предоставленном примере React намеренно используется семантическая таблица и настоящие элементы управления Button из Soul. Пример обеспечивает работающее состояние приложения, не заявляя о наличии недокументированного экспорта DataTable. Доступ к общедоступной документации не даёт доступа к пакету и не разрешает распространять приватные ресурсы.

Прочитать вспомогательную спецификацию

## Дизайн-система Emplifi Soul: контракт таблицы данных — не только выбор строк

### Заголовки, сводки и отсутствующие значения

В рекомендациях Soul по таблицам различаются заголовки, строки, ячейки и необязательная панель сводки. Числовые значения выравниваются по правому краю, текст — по левому. Сводка может показывать суммы или средние значения, поэтому её подпись должна указывать на выполняемую операцию, а не просто отображать необъяснённое число.

Используйте N/A, если показатель неприменим, например для длительности видео у изображения. Для недоступных или неизвестных данных используйте длинное тире. Не заменяйте такие значения нулём: это меняет смысл сводки и любого сравнения на её основе.

- В текущем примере реализованы сортировка и выбор строк, но не расчёт сводки.

- Раскрываемые строки и пояснения к отсутствующим данным описаны как возможные расширения; в предпросмотре они не имитируются.

- В справочнике таблица React обозначена как запланированная, поэтому в предоставленном коде используется собственная разметка таблицы, а не вымышленный импорт Soul DataTable.

Прочитать вспомогательную спецификацию

### В режиме массовых действий меняется набор доступных операций

В Soul панель массовых действий располагается под коллекцией, а отдельные действия для строк скрываются, пока активен массовый выбор. Флажок в заголовке имеет три состояния: установлен, снят и частично установлен. Одновременно сортировать можно только по одному столбцу.

В примере все три записи локальные и входят в область выбора. Заголовок столбца охвата объявляет направление сортировки; выбранные идентификаторы сохраняются при изменении порядка. Будущее действие для отдельной строки должно учитывать документированное ограничение режима массовых действий, а не конкурировать с панелью пакетных операций.

Прочитать вспомогательную спецификацию

## Дизайн-система Emplifi Soul: создавайте глубину с помощью нейтральных слоёв

### Сдержанный интерфейс для работы с клиентским опытом

В светлой теме Soul чередуются серые и белые поверхности, а тёмные слои становятся светлее по мере увеличения глубины. В примере используются серая страница, белая поверхность таблицы и компактная тёмная панель навигации. Цвет обозначает роль, а не служит украшением каждой строки.

Интерактивный синий цвет используется только для действия проверки и выбранных элементов управления. Небольшие оригинальные иллюстрации публикаций используют декоративные цвета. Они помогают различать тематику контента, не приписывая ему ложный смысл успеха или опасности.

Прочитать вспомогательную спецификацию

## Дизайн-система Emplifi Soul: компактный текст без потери иерархии

### Основной шрифт — Inter

В интерфейсе Soul указан Inter, для арабского текста — Noto Sans Arabic, для кода — Noto Sans Mono. В предпросмотре используются системные шрифты, поскольку файлы этих шрифтов не включены. Размеры основаны на опубликованных типографических рецептах.

Заголовок первого уровня размером 30/42 задаёт тон системе основного текста 13/18. В числах таблицы используются табличные цифры. Здесь нет крупного рекламного шрифта, а заголовки публикаций представлены читаемым текстом, а не надписями внутри изображений.

Прочитать вспомогательную спецификацию

## Дизайн-система Emplifi Soul: шестипиксельный ритм и радиус контейнера

### Сохраняйте порядок в плотных интерфейсах

Базовый шаг отступов — 6 px. Значения 12, 18, 24 и 36 px задают более крупные интервалы; 3 и 9 px предназначены для компактных внутренних отступов компонентов, а не для стандартных полей страницы. Документированный внутренний отступ контента составляет 24 px при ширине 1559 px и менее и 36 px при ширине 1560 px и более.

В Soul значения отступов отделены от размеров компонентов по шкале T-shirt. Элемент управления размера Medium — это не --space-6. В примере используются элементы управления высотой 36 px, скругление элементов 6 px и радиус контейнера 8 px.

Прочитать вспомогательную спецификацию

## Дизайн-система Emplifi Soul: используйте акценты, чтобы обозначить следующее действие

### Одно основное действие проверки

Вариант primary в Soul выделяет самое важное действие. Варианты light и ghost подходят для вспомогательных действий, а invisible уменьшает визуальный вес элементов в плотных панелях инструментов. В предпросмотре только действие массовой проверки выделено залитым основным стилем.

Отмена выбора снимает выделение со строк, не меняя их статусы проверки. Проверка меняет только локальное состояние, а сообщение прямо указывает, что публикации не было. Текст элемента управления оформлен в регистре предложения.

Прочитать вспомогательную спецификацию

## Дизайн-система Emplifi Soul: подключайте приватную библиотеку осознанно

### Foundation CSS предшествует композиции компонентов

Официальная точка входа импортирует variables.css и default-styles.css из @sbks/ds-design-library. В Sass-точке входа находятся миксины; она отделена от глобального CSS. Компонент Button импортируется из @sbks/ds-button.

В актуальном API компонента Button есть свойства isLoading, isSelected, isApplied и badge. Для свойств на основе enum в TypeScript требуются экспортированные библиотекой константы enum. В этом примере используется проверенный вариант LIGHT по умолчанию, а не предполагаемый путь импорта enum.

1. Выполните настройку доступа к приватной области и загрузчика сборки согласно официальному руководству по быстрому старту.

2. Импортируйте базовый CSS один раз в точку входа приложения и настройте выбранные ресурсы шрифтов.

3. Подключите предоставленный пример таблицы с управляемым состоянием, затем проверьте выбор, отмену и локальную проверку, прежде чем связывать его с процессом публикации.

Прочитать вспомогательную спецификацию

## Примеры компонентов дизайн-системы Emplifi Soul

### Полноценный автономный интерактивный пример

Сохраните весь документ как index.html и откройте его в браузере. Независимая интерпретация рекомендаций по дизайну Soul и проверенных токенов светлой темы в HTML/CSS. Системные шрифты используются как запасной вариант; ресурсы приватной библиотеки 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>
```

Справочник по коду

- В таблице напрямую реализованы выбор и сортировка в HTML. Пример не заявляет о наличии приватного экспорта Soul DataTable; в примере React используется проверенный экспорт Button и таблица, принадлежащая приложению.

### Таблица проверки с возможностью выбора и настоящими кнопками Soul

Семантическая таблица HTML и управляемые флажки, созданные с использованием документированного экспорта Button. Таблица реализована в коде приложения — это не выдуманный компонент 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>;
}
```

Справочник по коду

- По умолчанию Button использует вариант LIGHT. В этом примере не предполагается расположение экспорта enum и не выдумываются свойства DataTable.

- Сначала установите и настройте закрытые пакеты библиотеки дизайн-системы и кнопок. Импорты подтверждены в официальном Storybook.

- Массовая проверка изменяет только локальное состояние. Публикация не выполняется.

## Настройка AI-агента дизайн-системы Emplifi Soul

### Отправная точка для реализации

Для официального быстрого старта необходим доступ к закрытому npm-реестру, репозиторию Emplifi и VPN. Поддерживаются React 18/19 и Webpack 4/5; требуется настроить Sass и загрузчик SVG. Пройдите инструктаж по работе с внутренними пакетами по ссылке — эти пакеты не опубликованы в открытом реестре. Для автономного предпросмотра закрытые ресурсы не нужны.

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

### Запрос для вашего проекта

```
Создайте интерфейс проверки контента Emplifi Soul с подтверждёнными переменными слоёв, цветов и отступов, основным текстом 13/18, скруглением элементов управления 6px и контейнерами 8px. Используйте семантическую таблицу с выбором строк, стабильными идентификаторами, флажком «Выбрать всё» с неопределённым состоянием и сортировкой по одному столбцу. В приложениях с соответствующими правами используйте настоящий экспорт @sbks/ds-button и базовый CSS; не выдумывайте общедоступный пакет DataTable.
```

## Источники и область применения дизайн-системы Emplifi Soul

Soul — дизайн-система Emplifi. Общедоступные материалы по дизайну и Storybook доступны для чтения, но для работы по официальному руководству по быстрому старту необходим доступ к приватной области npm. Пример в браузере — независимая реализация в HTML/CSS; он не включает Soul React. Поведение таблицы интерпретирует рекомендации по дизайну, хотя на общедоступной странице таблица React по-прежнему обозначена как запланированная.

- Модель слоёв Иерархия светлых и тёмных поверхностей.

- Токены цветов интерфейса Именованные цвета и роли состояний.

- Интервалы Шаг 6px и размеры компонентов.

- Типографика Стили типографики и семантические цвета текста.

- Шрифты Роли семейств Inter и Noto.

- Скругления Значения 2, 6, 8 px, полное скругление и форма капсулы.

- Использование кнопок Акценты действий.

- Рекомендации по таблицам Выбор, сортировка и поведение сводки.

- Инструкция по быстрому старту с закрытыми пакетами Требования к доступу и сборке.

- Точки входа CSS Переменные и импорты стилей по умолчанию.

- Кнопка API Реальные свойства компонента и пакет.

## Связанные ресурсы дизайн-системы Emplifi Soul

### Esri Calcite

Практическое руководство по Calcite для компактных пространственных инструментов: семантические поверхности и синие действия, панели проверки данных, нативные API полей ввода и полноценный локальный пример проверки сайта.

### GitLab Pajamas

Руководство Pajamas для технических процессов: настоящие семантические токены, адаптивные шкалы типографики и отступов, пошаговая панель проверки конвейера, понятный вывод ошибок и явно обозначенная локальная симуляция повтора.

### HPE Grommet

Смоделируйте резервирование вместимости с помощью примитивов компоновки Grommet, управляемых полей формы и числовых индикаторов. Продуманно используйте шкалу темы и не смешивайте базовую тему Grommet с отдельно устанавливаемой темой HPE.


- [Справочник по реализации](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Источник](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Источник](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Источник](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Источник](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Источник](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Источник](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Прочитать вспомогательную спецификацию](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Прочитать вспомогательную спецификацию](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Прочитать вспомогательную спецификацию](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Прочитать вспомогательную спецификацию](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Прочитать вспомогательную спецификацию](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Прочитать вспомогательную спецификацию](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Прочитать вспомогательную спецификацию](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Справочник по коду](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Справочник по коду](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)
- [Модель слоёв Иерархия светлых и тёмных поверхностей.](https://soul.emplifi.io/latest/foundations/foundations/colors/overview-X0TahKWD)
- [Токены цветов интерфейса Именованные цвета и роли состояний.](https://soul.emplifi.io/latest/foundations/foundations/colors/ui-colors-aysX6TuQ)
- [Интервалы Шаг 6px и размеры компонентов.](https://soul.emplifi.io/latest/foundations/foundations/spacing-67iRzZzQ)
- [Типографика Стили типографики и семантические цвета текста.](https://soul.emplifi.io/latest/foundations/foundations/typography/overview-D0qyFyli)
- [Шрифты Роли семейств Inter и Noto.](https://soul.emplifi.io/latest/foundations/foundations/typography/typefaces-hFaPahBG)
- [Скругления Значения 2, 6, 8 px, полное скругление и форма капсулы.](https://soul.emplifi.io/latest/foundations/foundations/radius-Z9zxhvSr)
- [Использование кнопок Акценты действий.](https://soul.emplifi.io/latest/components/components/button/usage-LajmcVQv)
- [Рекомендации по таблицам Выбор, сортировка и поведение сводки.](https://soul.emplifi.io/latest/components/components/data-table/usage-nLS68kIE)
- [Инструкция по быстрому старту с закрытыми пакетами Требования к доступу и сборке.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-overview--overview)
- [Точки входа CSS Переменные и импорты стилей по умолчанию.](https://soul.dev.emplifi.io/?path=/docs/getting-started-quickstart-guide-css-variables-and-mixins--overview)
- [Кнопка API Реальные свойства компонента и пакет.](https://soul.dev.emplifi.io/?path=/docs/components-button--overview)