ADS Artemy Design System
ADS / examples / catalog

Artemy Design System

Единая система для софта, документов, презентаций и железа: светлая терминальная структура, честная инженерная логика и Teenage Engineering-подход к инструментальности.

ADS-MANIFEST-001

manifest / tools for real work

Мы делаем не интерфейсы ради интерфейсов, а понятные рабочие инструменты.

Artemy Design System соединяет софт и железо в одну систему поведения. Экран, кнопка, LED, корпус, таблица, презентация и сервисная инструкция должны говорить одним языком: коротко, честно, спокойно и по делу. Продукт может быть живым и чуть игровым, но обязан оставаться профессиональным инструментом для кухни, офиса, сервиса и производства.

Сделай так, чтобы вещь хотелось трогать, было легко понять и невозможно перепутать с другой.
ADS-P-01

Действие важнее данных

Сотруднику нужна команда, менеджеру - смысл, сервису - причина. Сырые метрики уходят глубже.

ADS-P-02

Честная конструкция

В интерфейсе и железе видно, где статус, где действие, где порт, где ручка, где риск.

ADS-P-03

Один сильный образ

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

ADS-P-04

Тактильность и ясность

Кнопки крупные, статусы видны издалека, тексты короткие, motion помогает ждать и понимать.

ADS-P-05

Меньше экранов, больше режимов

Не плодим админки. Делаем 3-5 режимов вокруг реальных сценариев: сейчас, скоро, проблема, история.

ADS-P-06

Ограничения становятся стилем

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

Разделы каталога

Открываются как обычные HTML-файлы без dev server.

ADS-CAT-000
VIT-SW

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

Action command, field card, шкаф, BI, сервисная строка и подсказки.

 VIT-ST

Статусы и состояния

Норма, скоро действие, проблема, сервис, loading, empty, offline.

 VIT-UI

Контролы и формы

Кнопки, сегменты, поля, подтверждения и сервисные формы.

 VIT-MO

Анимации и загрузки

Skeleton, spinner, pulse, scan, toast и мягкий progress.

 ADS-SL

Презентации

Отступы, шаблоны слайдов, картинки, таблицы, карточки, радиусы и тени.

 ADS-TB

Таблицы

BI, документы, сервис, статусы, hover note, плотность, loading, empty и error.

 ADS-HW

Железо

Корпуса, материалы, свет, крепления, сервис и hard-принципы для ВИТ Field System.

 ADS-GAL

Галерея вдохновения

Все локальные изображения из исследования Teenage Engineering в одном moodboard.

 ADS-TXT

Текст и типографика

Шрифты, строки, отступы, линии, переносы и правила длинного текста.

Как читать компонент

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

ADS-USE-001

Смотри превью

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

Бери правила

  • Блоки "как делать", "смотреть", "не делать" - это требования к применению.
  • Если компонент меняется, обновляй и советы рядом с ним.

Копируй код

  • HTML snippet и CSS/tokens свернуты под превью, чтобы каталог не превращался в простыню.
  • Не копируй стиль точечно без токенов: компонент должен жить в ADS целиком.