# calls24 — Logo Set

**Дата:** 19.06.2026  
**Стек:** Pure SVG, без внешних зависимостей, полностью self-hosted

## Файлы

```
logos/
├── README.md                  ← этот файл
├── preview.html               ← превью всех 5 логотипов
│
├── logo-01-wordmark-wave.svg           # Главный вариант
├── logo-01-wordmark-wave-icon-only.svg # Иконка только (фавикон)
├── logo-01-wordmark-wave-black.svg     # Чёрная версия
│
├── logo-02-circle-wave.svg
├── logo-02-circle-wave-black.svg
│
├── logo-03-phone-wave.svg
├── logo-03-phone-wave-black.svg
│
├── logo-04-hex-data.svg
├── logo-04-hex-data-black.svg
│
├── logo-05-c-wave.svg
└── logo-05-c-wave-black.svg
```

## Концепции

### 01. Wordmark + Sound Wave (главный)
- **Тип:** Словоформ с иконкой
- **Формат:** Горизонтальный (320x60)
- **Иконка:** 5 вертикальных баров — аудио-волна слева от текста
- **Цвет:** Зелёный градиент (#22c55e → #16a34a)
- **Текст:** `calls` белый, `24` зелёный
- **Шрифт:** Inter Bold / SF Pro / -apple-system
- **Использование:** header, футер, презентации, сайт
- **Файлы:** wordmark + icon-only + black version

### 02. Circle Sound Wave
- **Тип:** Circular icon / Favicon
- **Формат:** Квадрат 60x60, центрированный
- **Форма:** Круг с аудио-волной внутри
- **Использование:** фавикон, иконка приложения, avatars, дашборд

### 03. Phone + Wave
- **Тип:** Line-art icon
- **Формат:** Квадрат 60x60
- **Форма:** Телефонная трубка + исходящие волны
- **Использование:** иконка раздела звонков, кнопки, иллюстрации

### 04. Hex Data Grid
- **Тип:** Geometric icon (Bauhaus)
- **Формат:** Квадрат 60x60, гексагон
- **Форма:** Гексагон с аудио-волной и точками данных
- **Использование:** премиальный вариант, tech-ассоциация, дашборд

### 05. C-Wave
- **Тип:** Abstract letterform
- **Формат:** Квадрат 60x60
- **Форма:** Буква «C» → звуковая волна (непрерывный path)
- **Использование:** минималистичный вариант, Apple-like, favicon

## Цвета

| Назначение | HEX |
|-----------|-----|
| Зелёный акцент | #22c55e |
| Зелёный тёмный | #16a34a |
| Зелёный глубокий | #15803d |
| Белый | #ffffff |
| Чёрный | #000000 |

## Использование

### В HTML
```html
<!-- Wordmark (header) -->
<img src="logos/logo-01-wordmark-wave.svg" alt="calls24" height="48">

<!-- Icon only (favicon / mobile header) -->
<img src="logos/logo-01-wordmark-wave-icon-only.svg" alt="calls24" height="32">

<!-- Icon variant -->
<img src="logos/logo-02-circle-wave.svg" alt="calls24" height="32">
```

### В SVG (inline, рекомендуемо)
```html
<svg class="calls24-logo" role="img" aria-label="calls24">
  <use href="logos/logo-01-wordmark-wave.svg"/>
</svg>
```

### CSS
```css
/* Зелёный акцент из логотипа */
.calls24 .cta { color: #22c55e; }
.calls24 .accent { background: linear-gradient(135deg, #22c55e, #15803d); }
```