103 lines
3.6 KiB
Markdown
103 lines
3.6 KiB
Markdown
# 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); }
|
||
```
|