ipwhitelist-app/docs/nubes-design-system.md

Дизайн-система платформы Nubes

Извлечено из сохранённой страницы h.h (deck-test.ngcloud.ru)

---

Сетка и контейнеры

Элемент	Класс	Описание
Страница	navigation:flex, services:grid	Flex/grid на всём
Карточка	ui-kit:bg-card ui-kit:rounded-xl ui-kit:border ui-kit:shadow-sm	Белая карточка, border-radius 12px
Заголовок карточки	ui-kit:bg-brand-grey-light ui-kit:px-3 ui-kit:py-3	Серый фон #f3f4f6, padding 12px
Тело карточки	ui-kit:px-3 ui-kit:py-3	padding 12px

---

Цвета (переменные)

Переменная	Назначение	Примерный HEX
--brand-primary	Основной цвет	#2563eb (синий)
--brand-gray	Цвет границ	#d1d5db
--brand-grey-light	Фон заголовков	#f3f4f6
--brand-primary-dark	Ховер ссылок	#1d4ed8

---

Формы

form-table (класс services:):
  grid-template-columns: fit-content(200px) minmax(200px, 1fr) 0px
  gap: 8px 16px

Элемент	Класс	Стиль
Лейбл	ui-kit:text-sm ui-kit:leading-none ui-kit:font-normal ui-kit:mb-1 ui-kit:ml-1	14px, sans-serif, отступ слева
Инпут	ui-kit:h-9 ui-kit:rounded-md ui-kit:border ui-kit:px-3 ui-kit:text-sm	h=36px, border, padding
Текстареа	ui-kit:rounded-md ui-kit:border ui-kit:px-3 ui-kit:py-2 ui-kit:text-sm	авто-height

---

Кнопки

Тип	Стиль	Класс
Обычная	border, bg-white, hover:bg-accent	ui-kit:border ui-kit:bg-background ui-kit:h-8 ui-kit:rounded-md
Удалить	bg-destructive, text-white	ui-kit:bg-destructive ui-kit:text-white
Иконка	size-5	ui-kit:size-5 ui-kit:cursor-pointer

Все кнопки: ui-kit:h-8 ui-kit:rounded-md ui-kit:gap-1.5 ui-kit:px-3, 14px шрифт.

---

Таблицы

Элемент	Стиль
Обёртка	ui-kit:rounded-md ui-kit:border ui-kit:overflow-hidden
Шапка (th)	ui-kit:bg-brand-grey-light, uppercase, ui-kit:py-1 ui-kit:px-2, border-right
Ячейка (td)	ui-kit:px-2 ui-kit:py-1, border-right, border-bottom
Строка (tr)	ui-kit:border-b ui-kit:border-brand-gray-8, hover: ui-kit:bg-brand-grey-light/50

---

Иконки

Используются: Lucide (lucide-*)

Часто используемые:

• lucide-square-pen — редактировать
• lucide-rotate-cw — перезапустить
• lucide-trash — удалить
• lucide-pause — остановить
• lucide-play — запустить
• lucide-save — сохранить
• lucide-x — закрыть
• lucide-copy — копировать
• lucide-check — успех (зелёный)
• lucide-x — ошибка (красный)

---

Типографика

• Основной шрифт: system-ui (Segoe UI, Roboto, etc.)
• Размер: text-sm = 14px, text-base = 16px
• Межстрочный: leading-none (1), leading-normal (1.5)
• Цвет текста: #1a1a1a
• Muted: text-muted-foreground = серый #6b7280
• Заголовки карточек: font-semibold, 16px

---

Навигация (слева)

• Ширина: var(--sidebar-width) = 12rem (192px)
• Свёрнуто: var(--sidebar-width-icon) = 4.5rem (72px)
• Верхняя панель: h-20 (80px), border-t-4 border-t-blue-500
• Лого: инлайн SVG, 150px ширина

---

Состояния

Статус	Цвет
Успех / running	text-green-500 + иконка lucide-check
Ошибка	text-red-500 + иконка lucide-x
Предупреждение	text-amber-500