# Style Guide

## Характер интерфейса

GNexus UI Kit использует темный terminal/cyber стиль:

- IBM Plex Mono как базовый шрифт.
- Прямые формы без скруглений.
- Толстые accent borders.
- Яркие state colors для success, warning, error, info.
- Контрастные hover/focus состояния.

Интерфейс рассчитан на рабочие панели, админки, dev tools, monitoring и внутренние инструменты.

## Цвета

Основные цвета лежат в `src/scss/_palette-colors.scss`, производные design tokens - в `src/scss/_design-tokens.scss`.

Чаще всего в компонентах используются:

- `$surface-page` - фон страницы.
- `$surface-panel` - базовая поверхность панели.
- `$surface-panel-muted` - приглушенная поверхность карточек и блоков.
- `$color-text-light` - основной текст.
- `$color-text-medium` - вторичный текст.
- `$color-primary` - основной accent.
- `$color-secondary` - cyan/action accent.
- `$color-success`, `$color-warning`, `$color-error`, `$color-info` - состояния.

## Spacing

Spacing scale определен в `src/scss/_spacing.scss`.

Используйте `$space-1` ... `$space-12` вместо случайных пикселей. Для layout helpers доступны utility-классы:

- `m-*`, `mt-*`, `mr-*`, `mb-*`, `ml-*`, `mx-*`, `my-*`
- `p-*`, `pt-*`, `pr-*`, `pb-*`, `pl-*`, `px-*`, `py-*`
- `g-*`, `gx-*`, `gy-*`

## Типографика

Базовая типографика находится в `src/scss/components/_typography.scss`.

Практика:

- Заголовки секций - uppercase и плотный line-height.
- Внутри compact UI используйте небольшие заголовки, не hero-size.
- Для meta/status текста используйте `$font-size-xs` или `$font-size-sm`.

## Focus

Интерактивные элементы должны иметь видимый focus. В SCSS используйте mixin:

```scss
&:focus-visible {
  @include focus_ring;
}
```

## Motion

Переходы короткие и функциональные:

- `$motion-fast`
- `$motion-base`
- `$motion-slow`
- `$motion-ease`

Не добавляйте декоративные анимации, которые отвлекают от работы. Hover должен помогать понять affordance, а не привлекать внимание сам по себе.

## Иконки

Используйте Phosphor Icons:

```html
<i class="ph ph-sidebar-simple"></i>
```

Кнопки команд лучше делать `with-icon`, если действие становится понятнее с иконкой:

```html
<button class="btn btn-accent with-icon" type="button">
  <i class="ph ph-upload-simple"></i>
  Upload
</button>
```