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:

&:focus-visible {
  @include focus_ring;
}

Motion

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

• $motion-fast
• $motion-base
• $motion-slow
• $motion-ease

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

Иконки

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

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

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

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