Foundations

Typography

Typography задает базовый язык интерфейса: mono font, плотные заголовки, readable body text.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Body text for interface copy.</p>
<small>Meta text</small>

Практика:

• Используйте крупные заголовки только для настоящего начала экрана.
• Внутри cards, drawer, toolbar и compact panels используйте небольшие заголовки.
• Для technical labels и meta используйте uppercase только там, где это помогает scanning.

Palette

Palette демонстрирует доступные цвета и state colors.

Основные роли:

• primary - системный accent.
• secondary - action/navigation accent.
• success - успешное состояние.
• warning - требует внимания.
• error/danger - ошибка или рискованное действие.
• info - нейтральная информационная подсветка.

Не используйте state colors как декоративную палитру. Они должны означать состояние.

Buttons

Базовая кнопка:

<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-accent" type="button">Accent</button>

Кнопка с иконкой:

<button class="btn btn-accent with-icon" type="button">
  <i class="ph ph-plus"></i>
  Create
</button>

Icon-only:

<button class="btn-icon" type="button" aria-label="Close">
  <i class="ph ph-x"></i>
</button>

Правила:

• Primary/accent используйте для главного действия в группе.
• Danger/error используйте только для destructive actions.
• Icon-only кнопкам всегда нужен aria-label.

Utilities

Utilities закрывают частые layout-задачи без локального CSS.

Spacing:

<div class="p-4 mb-6">Content</div>
<div class="row g-3">Content</div>

Layout:

<div class="row items-center justify-between">
  <span>Label</span>
  <button class="btn btn-small">Action</button>
</div>

Text:

<p class="text-muted">Secondary text</p>
<p class="text-center">Centered text</p>

Используйте utilities для небольших компоновочных задач. Если паттерн повторяется как компонент, лучше вынести SCSS.