ADS / Software Components

сейчас / шкаф 02

Добавь 6 стрипсов

Через 8 минут будет риск нехватки.

Как делать

Пиши один главный глагол: добавь, проверь, замени, очисти.
Сразу показывай количество, объект и срок.

Смотреть

Команда должна читаться с расстояния и в спешке.
Вторичная строка объясняет причину, но не спорит с командой.

Не делать

Не показывать вероятности, SLA и внутренние метрики сотруднику.
Не ставить рядом несколько равных CTA.

HTML snippet

<div class="lt-action-command">
  <div class="lt-action-command__label">сейчас / шкаф 02</div>
  <h3 class="lt-action-command__title">Добавь 6 стрипсов</h3>
  <p class="lt-action-command__text">Через 8 минут будет риск нехватки.</p>
</div>

CSS classes / tokens

.lt-action-command
.lt-action-command__label
.lt-action-command__title
.lt-action-command__text

--ds-vit-action: #ff6a00;
--ds-radius-16: 16px;
--ds-shadow-sm: 0 2px 10px rgba(0,0,0,0.06);

камера 02норма

Вижу все лотки

последний сигнал: 12:48

шкаф 01риск

Мяса меньше плана

действие: добавить 6

Как делать

Держи структуру: модуль, состояние, свежесть сигнала, статусная полоса.
Одинаково называй модуль в софте, BI и на физической наклейке.

Смотреть

Карточки в сетке должны быть одинаковой плотности.
Статус не должен зависеть только от цвета: нужен текст.

Не делать

Не превращать карточку в мини-лог.
Не смешивать сервисные ошибки и рабочие команды в одной строке.

HTML snippet

<div class="lt-field-card">
  <div class="lt-field-card__head">
    <span>камера 02</span>
    <span>норма</span>
  </div>
  <p class="lt-field-card__state">Вижу все лотки</p>
  <p class="lt-field-card__meta">последний сигнал: 12:48</p>
  <div class="lt-status-strip lt-status-strip--ok"></div>
</div>

CSS classes / tokens

.lt-field-card
.lt-field-card__head
.lt-field-card__state
.lt-field-card__meta
.lt-status-strip--ok
.lt-status-strip--soon

--ds-success
--ds-warning
--ds-warm-line
--ds-font-mono

полка 1

острые 8

байтсы 10

крылья 7

стрипсы 4

полка 2

стрипсы 1

ножки 5

острые 9

пусто

Как делать

Повторяй реальную геометрию шкафа: полки, лотки, порядок.
Подсвечивай конкретное место, куда надо посмотреть рукой и глазами.

Смотреть

Названия продуктов должны совпадать с кухонной терминологией.
На мобильном полки должны складываться без потери смысла.

Не делать

Не заменять шкаф абстрактной тепловой картой.
Не использовать больше трех статусов внутри одной схемы.

HTML snippet

<div class="ae-cabinet">
  <div class="ae-cabinet__row">
    <span class="ae-cabinet__label">полка 1</span>
    <div class="ae-tray ae-tray--ok">острые 8</div>
    <div class="ae-tray ae-tray--soon">стрипсы 4</div>
  </div>
  <div class="ae-cabinet__row">
    <span class="ae-cabinet__label">полка 2</span>
    <div class="ae-tray ae-tray--problem">стрипсы 1</div>
  </div>
</div>

CSS classes / tokens

.ad-cabinet
.ae-cabinet__row
.ae-cabinet__label
.ae-tray
.ae-tray--ok
.ae-tray--soon
.ae-tray--problem

--ds-success
--ds-warning
--ds-error
--ds-vit-steel-surface

Предложи сырный соус

К этому заказу хорошо подходит соус. Фраза: "Добавим сырный?"

Как делать

Давай один оффер и готовую человеческую фразу для кассира.
Основное действие должно подтверждать факт, а не продавить выбор.

Смотреть

Подсказка не должна закрывать корзину или оплату.
У кассира всегда должен быть тихий способ пропустить оффер.

Не делать

Не делать баннер с маркетинговой риторикой.
Не показывать сразу несколько предложений.

HTML snippet

<div class="lt-callout">
  <div>
    <h3 class="lt-callout__title">Предложи сырный соус</h3>
    <p class="lt-callout__text">К этому заказу хорошо подходит соус.</p>
    <div class="lt-actions">
      <button class="lt-button lt-button--primary">Предложил</button>
      <button class="lt-button lt-button--ghost">Пропустить</button>
    </div>
  </div>
</div>

CSS classes / tokens

.lt-callout
.lt-callout__title
.lt-callout__text
.lt-actions
.lt-button
.lt-button--primary
.lt-button--ghost

--ds-graphite-strong
--ds-cinema-red
--ds-radius-24

датчик масла 01скоро замена

Масло еще ок

проверь повторно через 40 минут

Как делать

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

Смотреть

Пороговые значения держи в сервисном/менеджерском слое.
Шкала должна поддерживать текст, а не заменять его.

Не делать

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

HTML snippet

<div class="ae-oil-gauge">
  <div class="lt-field-card__head"><span>датчик масла 01</span><span>скоро замена</span></div>
  <p class="lt-field-card__state">Масло еще ок</p>
  <p class="lt-field-card__meta">проверь повторно через 40 минут</p>
  <div class="ae-oil-gauge__scale">
    <div class="ae-oil-gauge__fill"></div>
  </div>
</div>

CSS classes / tokens

.ad-oil-gauge
.ae-oil-gauge__scale
.ae-oil-gauge__fill
.lt-field-card__head
.lt-field-card__state
.lt-field-card__meta

--ds-success
--ds-warning
--ds-radius-16

обед / шкаф 02обновлено 12:48

сейчас

Норма

Запас держится, действие не нужно.

через 7 мин

Риск по стрипсам

Подготовь 6 штук заранее.

через 15 мин

Пик спадет

Не закладывай лишнюю партию.

через 25 мин

Спокойно

Вернись к обычному режиму.

Как делать

Показывай прогноз как 3-4 временных окна с понятным текстом.
Выделяй только окно, где нужно подготовиться заранее.

Смотреть

Если нужен точный анализ, добавь подписи времени в BI-версии.
Текст в карточках должен выдерживать длинные названия продуктов.

Не делать

Не заставлять сотрудника читать график вместо команды.
Не использовать волну, если нужна конкретная инструкция.

HTML snippet

<div class="ae-demand-forecast" aria-label="Прогноз спроса">
  <div class="ae-demand-forecast__grid">
    <section class="ae-demand-slot ae-demand-slot--risk">
      <span class="ae-demand-slot__time">через 7 мин</span>
      <h3 class="ae-demand-slot__title">Риск по стрипсам</h3>
      <p class="ae-demand-slot__text">Подготовь 6 штук заранее.</p>
    </section>
  </div>
</div>

CSS classes / tokens

.ad-demand-forecast
.ae-demand-forecast__head
.ae-demand-forecast__grid
.ae-demand-slot
.ae-demand-slot--risk

--ds-terminal-cyan
--ds-vit-action
--ds-radius-14

12:48

Сотрудник подтвердил: добавил 6 стрипсов.

12:41

Часовик показал риск нехватки через 8 минут.

12:39

Камера 02 обновила состояние шкафа.

Как делать

Пиши событие, время и итог действия простым языком.
Последние события держи сверху, старые уводи ниже.

Смотреть

Для спорных событий показывай источник: камера, касса, сотрудник.
Длинные детали лучше раскрывать по клику или наведению.

Не делать

Не делать ленту сырой телеметрией.
Не смешивать важные события с шумом синхронизации.

HTML snippet

<div class="ae-timeline">
  <div class="ae-timeline__item">
    <span class="ae-timeline__time">12:48</span>
    <p class="ae-timeline__text">Сотрудник подтвердил: добавил 6 стрипсов.</p>
  </div>
</div>

CSS classes / tokens

.ad-timeline
.ae-timeline__item
.ae-timeline__time
.ae-timeline__text

--ds-font-mono
--ds-warm-line
--ds-radius-12

сейчас / шкаф 02 / длинный текст

Добавь 6 стрипсов и проверь, что лоток стоит на второй полке слева.

Если команда длиннее одной строки, она должна переноситься спокойно: без сжатия, без обрезки и без прыжка соседних элементов.

Как делать

Ограничивай ширину текста, а не уменьшай шрифт.
Для заголовков используй balance, для абзацев обычный поток.

Смотреть

Проверяй самую длинную фразу на 320, 768 и 1440 px.
Между заголовком и текстом нужен воздух 12-16 px.

Не делать

Не ставить hero-размер внутри узкой карточки.
Не обрезать рабочую команду многоточием.

HTML snippet

<div class="ae-text-sample">
  <span class="ae-text-sample__eyebrow">сейчас / шкаф 02</span>
  <h3 class="ae-text-sample__title">Добавь 6 стрипсов...</h3>
  <p class="ae-text-sample__lead">Причина и контекст.</p>
</div>

CSS classes / tokens

.ae-text-sample
.ae-text-sample__eyebrow
.ae-text-sample__title
.ae-text-sample__lead

text-wrap: pretty;
line-height: 1.65;

12:48последнее обновление шкафа

94%видимость лотков камерой

-18%риск просадки за смену

Как делать

Число крупное, подпись короткая, вывод рядом или выше.
Используй tabular/mono для времени, процентов и денег.

Смотреть

Подпись не должна становиться длиннее самого KPI.
На мобильном KPI складываются в одну колонку.

Не делать

Не показывать KPI без интерпретации.
Не смешивать разные единицы в одной строке без подписей.

HTML snippet

<div class="ae-kpi-strip">
  <div class="ae-kpi-card">
    <span class="ae-kpi-card__value">94%</span>
    <span class="ae-kpi-card__label">видимость лотков камерой</span>
  </div>
</div>

CSS classes / tokens

.ae-kpi-strip
.ae-kpi-card
.ae-kpi-card__value
.ae-kpi-card__label

font-family: var(--ds-font-mono);
line-height: 1;

Софт-компоненты

Добавь 6 стрипсов

Как делать

Смотреть

Не делать

Как делать

Смотреть

Не делать

Как делать

Смотреть

Не делать

Предложи сырный соус

Как делать

Смотреть

Не делать

Как делать

Смотреть

Не делать

Норма

Риск по стрипсам

Пик спадет

Спокойно

Как делать

Смотреть

Не делать

Как делать

Смотреть

Не делать

Добавь 6 стрипсов и проверь, что лоток стоит на второй полке слева.

Как делать

Смотреть

Не делать

Как делать

Смотреть

Не делать