# Дизайн-система платформы 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` |