# Foundations

## Typography

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

```html
<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

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

```html
<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>
```

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

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

Icon-only:

```html
<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:

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

Layout:

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

Text:

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

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