calls24-landing/logos/README.md

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

<!-- 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, рекомендуемо)

<svg class="calls24-logo" role="img" aria-label="calls24">
  <use href="logos/logo-01-wordmark-wave.svg"/>
</svg>

CSS

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