Елементи інтерфейсів і звітів у нейтральних плейсхолдерах. Кожен елемент має чотири обовʼязкові стани: наведення, фокус (2px синій), натиск (зсув 1px), вимкнений (40%). Перемикай тему вгорі.
Кнопки
основна = чорнило · другорядна = контур · небезпечна = корал · без радіусів і тіней
Поля
лише нижня лінія · підпис над полем дрібним моно · фокус потовщує лінію і фарбує в синій
Вкладки і перемикач
Статуси
ok · виконаноwarn · перевіритиcrit · помилкаinfo · у роботі
виконано · Серія А закрита 4 вересня. Усі 214 записів пройшли перевірку.
перевірити · Три записи етапу 4 мають розбіжність із реєстром до 2%.
помилка · Канал Б не відповідає з 10:42. Записи чекають у черзі.
кольорова кромка 3px ліворуч, слово статусу моно, ніколи лише колір
Числа і прогрес
214
записів за серпень
+12 до липня
31 хв
медіана обробки
-15 хв
3
повернень
без змін
62% виконано · дизер = прогноз до кінця місяця
прийомпідготовкаобробкаперевіркавидача
Таблиця
етап
виконавець
записів
хв / запис
статус
1 · прийом
Олена
214
4,2
ok
2 · підготовка
Ігор, Марта
214
9,6
ok
3 · обробка
Марта
211
7,1
у роботі
4 · перевірка
Юрій
211
10,4
перевірити
без рамок · заголовок дрібним моно · лінія під заголовком, пунктир між рядками · числа моно, табличні, праворуч
Тост і картка
Збережено · серія А · 10:42
Запис №214 · звірити з реєстром
етап 4 · Юрій · до 6 вересня
Серія Б · підготувати шаблон
етап 2 · Марта · до 9 вересня
картка канбану - єдине місце, де дозволена рамка 1px: вона позначає інтерактивну зону
Класи цих елементів лежать у site.css; токени - у tokens.css. У самодостатніх артефактах копіюй потрібні правила всередину сторінки.