Дмитрий
887abf444e
Получен handoff-пакет liderra_v8_handoff/ от дизайнера Платона (kpd9363@gmail.com) от 07.05.2026 — v8 Forest. Заказчик 08.05 решил применить только в части дизайна, имени, логотипа. Функционал, состав страниц и правила (CTO-11, click-wrap, SSO break-glass, 14 статусов воронки) — без изменений (источник — ТЗ v8.5/schema v8.5). Что сделано: - Массовая замена Лидпоток→Лидерра (с учётом падежей: Лидерры/Лидерре) в 33 файлах (449 вхождений) — все .md/.sql/.json/.toml/.yml/.txt/.html, кроме исторических упоминаний внутри liderra_v8_handoff/ - Удалён docs/brandbook.md v1.1 — заменён на BRANDBOOK_v2.md из handoff - Скопированы 13 концептов liderra_v8_handoff/concepts/v8_*.html в web/v8/. Удалены старые web/01-login.html, 02-dashboard.html, 03-deals.html, index.html (палитра v1.1 deprecated) - CLAUDE.md v1.0→v1.1: §0 (BRANDBOOK_v2 + DEVELOPER_HANDOFF в источниках), §2 (палитра Forest, Inter+JBM, Lucide), §5 п.6 (anti-pattern Inter снят — в Forest Inter наш основной шрифт), §6 (13 концептов в web/v8/) - Реестр Открытые_вопросы_v8_3.md v1.12→v1.13: добавлена запись о ребрендинге + 4 точечных расхождений handoff vs ТЗ (статусы воронки, click-wrap чекбоксы, SSO fallback, axe violations) - package.json/package-lock.json: name lidpotok→liderra 4 расхождения handoff vs ТЗ (НЕ применены, источник истины — ТЗ/schema): 1. 14 «обобщённых» статусов в BRANDBOOK_v2 §3.6 ≠ 14 slug'ов в schema.sql:2076 (совпадает 2 из 14: «Переговоры», «Оплачено»). Источник — schema/ТЗ §6.4 (реселлерская модель из аудита crm.bp-gr.ru, 6 системных + 8 настраиваемых статусов). 2. 3-й click-wrap в v8_login.html («маркетинг-опционально») ≠ ТЗ §1.5/§4.1 («согласие на ПДн», обязательное, OPEN-Ж-3). 3. SSO в v8_admin.html («локальный 2FA fallback») ≠ ТЗ OPEN-И-13 (break-glass super_admin, локальный 2FA выключен). 4. Заявление «axe-core 4.10.2 — 0 violations» в README handoff — локально Pa11y 9.1.1 + axe нашёл 81 violation на 10/13 HTML (преимущественно color-contrast на декоративных separator'ах с --ink-disabled). Чисто: settings/errors/palette_options. Что НЕ включено в коммит: - лендинг/TZ_landing_v1_0.md — untracked, не моя работа в этой сессии - .tmp/ — gitignored Что осталось (для следующих сессий): - Возможное переименование GitHub-репо CoralMinister/lidpotok → liderra (отдельное решение заказчика) - Опционально: обратная связь Платону по 4 расхождениям handoff vs ТЗ Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
611 lines
28 KiB
HTML
611 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>v8 · Бренд — нейминг и лого</title>
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&family=Fraunces:opsz,wght,SOFT@9..144,300..700,0..100&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html, body { margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
/* v8 Forest tokens — same as v8_dashboard/v8_deals */
|
||
--bg: #F6F3EC;
|
||
--surface: #FFFDFA;
|
||
--sunken: #F0EDE4;
|
||
--hairline: #D9D5CD;
|
||
--hairline-soft:#E8E3D6;
|
||
--ink: #081319;
|
||
--ink-2: #343C41;
|
||
--ink-3: #66635C;
|
||
--ink-disabled: #92907B;
|
||
--accent: #0F6E56;
|
||
--accent-tint: #E1EEEA;
|
||
|
||
--side-bg: #012019;
|
||
--side-text: #B1C2BD;
|
||
--side-icon-act:#32C8A9;
|
||
|
||
--r-sm: 6px;
|
||
--r-md: 10px;
|
||
--r-lg: 14px;
|
||
|
||
--font-ui: 'Inter', system-ui, sans-serif;
|
||
--font-display:'Fraunces', Georgia, serif;
|
||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
font-family: var(--font-ui);
|
||
font-feature-settings: 'cv11','ss01';
|
||
-webkit-font-smoothing: antialiased;
|
||
font-variation-settings: 'opsz' 14;
|
||
padding: 32px 28px 80px;
|
||
}
|
||
|
||
a:focus-visible, button:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 2px;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
|
||
.wrap { max-width: 1280px; margin: 0 auto; }
|
||
|
||
.hero {
|
||
margin-bottom: 36px;
|
||
padding-bottom: 22px;
|
||
border-bottom: 1px solid var(--hairline);
|
||
}
|
||
.hero h1 {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
font-variation-settings: 'opsz' 28;
|
||
letter-spacing: -0.022em;
|
||
margin: 0 0 6px;
|
||
}
|
||
.hero .meta {
|
||
font-family: var(--font-mono);
|
||
font-size: 12px;
|
||
color: var(--ink-3);
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.hero .meta strong { color: var(--accent); font-weight: 600; }
|
||
|
||
.section-h {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
margin: 40px 0 18px;
|
||
gap: 12px;
|
||
}
|
||
.section-h h2 {
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
font-variation-settings: 'opsz' 24;
|
||
letter-spacing: -0.018em;
|
||
margin: 0;
|
||
}
|
||
.section-h .num {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--ink-3);
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* ============================================================
|
||
NAMING GRID — 10 options
|
||
============================================================ */
|
||
.names {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.name-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
padding: 0;
|
||
overflow: hidden;
|
||
display: grid;
|
||
grid-template-rows: 110px auto;
|
||
}
|
||
.name-render {
|
||
background: var(--side-bg);
|
||
display: flex; align-items: center; justify-content: center;
|
||
position: relative;
|
||
padding: 0 24px;
|
||
}
|
||
.name-wordmark {
|
||
font-size: 38px;
|
||
font-weight: 600;
|
||
font-variation-settings: 'opsz' 32;
|
||
letter-spacing: -0.025em;
|
||
color: #FFFFFF;
|
||
display: inline-flex; align-items: baseline; gap: 8px;
|
||
}
|
||
.name-wordmark.serif {
|
||
font-family: var(--font-display);
|
||
font-weight: 500;
|
||
font-variation-settings: 'opsz' 144, 'SOFT' 0;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
.name-wordmark .dot { color: var(--side-icon-act); }
|
||
.name-wordmark .accent-letter { color: var(--side-icon-act); }
|
||
.name-render .badge {
|
||
position: absolute;
|
||
top: 10px; right: 12px;
|
||
font-family: var(--font-mono);
|
||
font-size: 9px;
|
||
letter-spacing: 0.06em;
|
||
font-weight: 600;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
background: rgba(255,255,255,0.10);
|
||
color: var(--side-text);
|
||
}
|
||
.name-render .badge.acc {
|
||
background: rgba(50,200,169,0.15);
|
||
color: var(--side-icon-act);
|
||
}
|
||
.name-meta {
|
||
padding: 14px 18px 16px;
|
||
}
|
||
.name-num {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
color: var(--ink-3);
|
||
margin-bottom: 4px;
|
||
}
|
||
.name-tag {
|
||
font-size: 12.5px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
letter-spacing: -0.005em;
|
||
margin-bottom: 6px;
|
||
}
|
||
.name-desc {
|
||
font-size: 12.5px;
|
||
color: var(--ink-2);
|
||
line-height: 1.5;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.name-desc em { color: var(--ink); font-style: normal; font-weight: 500; }
|
||
|
||
/* ============================================================
|
||
LOGO CONCEPTS — 5 marks
|
||
============================================================ */
|
||
.logos {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.logo-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
overflow: hidden;
|
||
display: flex; flex-direction: column;
|
||
}
|
||
.logo-on-dark {
|
||
background: var(--side-bg);
|
||
padding: 26px 16px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border-bottom: 1px solid #1A3A30;
|
||
min-height: 96px;
|
||
}
|
||
.logo-on-light {
|
||
background: var(--bg);
|
||
padding: 16px 16px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
border-bottom: 1px solid var(--hairline-soft);
|
||
min-height: 64px;
|
||
}
|
||
.logo-sizes {
|
||
display: flex; align-items: center; justify-content: space-around;
|
||
padding: 12px 14px;
|
||
gap: 8px;
|
||
background: var(--sunken);
|
||
min-height: 56px;
|
||
}
|
||
.logo-sizes svg, .logo-sizes .tiny-mark {
|
||
flex-shrink: 0;
|
||
}
|
||
.logo-meta {
|
||
padding: 12px 14px 14px;
|
||
border-top: 1px solid var(--hairline-soft);
|
||
}
|
||
.logo-num {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
color: var(--ink-3);
|
||
margin-bottom: 4px;
|
||
}
|
||
.logo-name {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--ink);
|
||
margin-bottom: 6px;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
.logo-desc {
|
||
font-size: 11.5px;
|
||
color: var(--ink-2);
|
||
line-height: 1.45;
|
||
letter-spacing: -0.005em;
|
||
}
|
||
|
||
/* ============================================================
|
||
COMBINATIONS — preview top 3 names × 2 marks in sidebar
|
||
============================================================ */
|
||
.combos {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.combo-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-md);
|
||
overflow: hidden;
|
||
}
|
||
.combo-side {
|
||
background: var(--side-bg);
|
||
padding: 14px 14px 16px;
|
||
display: flex; align-items: center; gap: 10px;
|
||
min-height: 60px;
|
||
}
|
||
.combo-mark { flex-shrink: 0; }
|
||
.combo-name {
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
font-variation-settings: 'opsz' 18;
|
||
letter-spacing: -0.018em;
|
||
}
|
||
.combo-name.serif {
|
||
font-family: var(--font-display);
|
||
font-weight: 500;
|
||
font-variation-settings: 'opsz' 144, 'SOFT' 0;
|
||
letter-spacing: -0.012em;
|
||
}
|
||
.combo-name .dot { color: var(--side-icon-act); }
|
||
.combo-meta {
|
||
padding: 12px 14px;
|
||
display: flex; gap: 14px;
|
||
font-size: 11.5px;
|
||
color: var(--ink-3);
|
||
}
|
||
.combo-meta strong { color: var(--ink); font-weight: 500; }
|
||
|
||
@media (max-width: 1100px) {
|
||
.names { grid-template-columns: 1fr; }
|
||
.logos { grid-template-columns: repeat(2, 1fr); }
|
||
.combos { grid-template-columns: 1fr; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
body { padding: 18px 14px 60px; }
|
||
.logos { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="wrap">
|
||
|
||
<header class="hero">
|
||
<h1>Бренд · нейминг и лого</h1>
|
||
<p class="meta">v8 Forest палитра · <strong>10 имён</strong> + <strong>5 знаков</strong> · все варианты на тёмном sidebar #012019 для контекста</p>
|
||
</header>
|
||
|
||
<!-- ===== NAMING ===== -->
|
||
<div class="section-h">
|
||
<h2>10 вариантов имени</h2>
|
||
<span class="num">01 · нейминг</span>
|
||
</div>
|
||
|
||
<div class="names">
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark">Поток<span class="dot">.</span></span><span class="badge acc">FAVOURITE</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">01</div>
|
||
<div class="name-tag">Минимализм. Дистиллят.</div>
|
||
<p class="name-desc">Прямое сокращение от «Лидпоток». Уже знакомо команде, но звучит <em>тише и взрослее</em>. Domain: potok.app / potok.ru. Латиница: <em>Potok</em> — чисто читается.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark serif">Русло</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">02</div>
|
||
<div class="name-tag">Метафорический. Премиум.</div>
|
||
<p class="name-desc">Путь, по которому идёт вода. Элегантная русская метафора потока лидов. <em>Уникально</em>, не банально, домен почти точно свободен.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark">Жила</span><span class="badge">RAW</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">03</div>
|
||
<div class="name-tag">Арбитражный. Прямой.</div>
|
||
<p class="name-desc">Золотая жила. Связь с pay-per-lead = «копаем источник дохода». <em>Резкий</em> образ, может быть слишком прямолинейным для премиума.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark">Нерв</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">04</div>
|
||
<div class="name-tag">Технологичный. Живой.</div>
|
||
<p class="name-desc">Нервная система продаж. <em>Real-time</em> приём лидов, моментальные сигналы. Хорошо для CRM/продаж, отдаёт «неон» — может быть слишком напряжённо.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark">Пульс</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">05</div>
|
||
<div class="name-tag">Real-time. Живой.</div>
|
||
<p class="name-desc">Пульс входящих лидов, <em>биение</em>. Ассоциация с медтехом и Mercury-вайбом. Минус: часто используется в фитнес-сфере.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark serif">Volna<span class="accent-letter">.</span></span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">06</div>
|
||
<div class="name-tag">Двуязычный. Премиум.</div>
|
||
<p class="name-desc">Латиница для премиум-восприятия. Кириллический корень <em>«волна»</em> — поток лидов как волна. Читается легко на обоих языках, домен `volna.io` доступен.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark serif">Vento</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">07</div>
|
||
<div class="name-tag">Итальянский. Технологичный.</div>
|
||
<p class="name-desc">Ветер. Звучит как <em>финансовый или AI-стартап</em>. Без русских коннотаций — может оттолкнуть «понятностью» бренда. Linear-grade fonetика.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark">Колея</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">08</div>
|
||
<div class="name-tag">Инженерный. Русский.</div>
|
||
<p class="name-desc">Колея = направленный путь. Инженерная честная метафора, рельсы для лидов. <em>Менее очевидно</em>, чем «поток», но понятно.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark serif">Стерх</span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">09</div>
|
||
<div class="name-tag">Символический. Запоминается.</div>
|
||
<p class="name-desc">Редкая птица, символ миграции. <em>Поэтичный</em>, далёкий от «лидогенерации» лоб-в-лоб. Сильный образ, домен `sterh.io` свободен.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="name-card">
|
||
<div class="name-render"><span class="name-wordmark">Лидерра<span class="accent-letter">.</span></span></div>
|
||
<div class="name-meta">
|
||
<div class="name-num">10</div>
|
||
<div class="name-tag">Составной. Премиум-вариация.</div>
|
||
<p class="name-desc">«Лид» + «эра/терра». Сохраняет <em>смысловую связь</em> с «Лидпоток», но звучит дороже и менее буквально. Удачно для wordmark-логотипа.</p>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
|
||
<!-- ===== LOGOS ===== -->
|
||
<div class="section-h">
|
||
<h2>5 концептов знака</h2>
|
||
<span class="num">02 · логотип</span>
|
||
</div>
|
||
|
||
<div class="logos">
|
||
|
||
<!-- Logo 1: L-square — refined placeholder -->
|
||
<article class="logo-card">
|
||
<div class="logo-on-dark">
|
||
<svg width="48" height="48" viewBox="0 0 48 48" aria-label="Логотип L-square на тёмном">
|
||
<rect x="2" y="2" width="44" height="44" rx="10" fill="#FFFFFF"/>
|
||
<path d="M16 14 L16 34 L32 34" stroke="#012019" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<circle cx="32" cy="34" r="3" fill="#0F6E56"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-on-light">
|
||
<svg width="32" height="32" viewBox="0 0 48 48" aria-label="Логотип L-square на светлом">
|
||
<rect x="2" y="2" width="44" height="44" rx="10" fill="#0A1319"/>
|
||
<path d="M16 14 L16 34 L32 34" stroke="#FFFFFF" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<circle cx="32" cy="34" r="3" fill="#32C8A9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-sizes">
|
||
<svg width="16" height="16" viewBox="0 0 48 48"><rect x="2" y="2" width="44" height="44" rx="10" fill="#0A1319"/><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||
<svg width="24" height="24" viewBox="0 0 48 48"><rect x="2" y="2" width="44" height="44" rx="10" fill="#0A1319"/><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3" fill="#32C8A9"/></svg>
|
||
<svg width="40" height="40" viewBox="0 0 48 48"><rect x="2" y="2" width="44" height="44" rx="10" fill="#0A1319"/><path d="M16 14 L16 34 L32 34" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3" fill="#32C8A9"/></svg>
|
||
</div>
|
||
<div class="logo-meta">
|
||
<div class="logo-num">A</div>
|
||
<div class="logo-name">L-Square с точкой</div>
|
||
<p class="logo-desc">Литера + закрывающая точка-цель = «лид прибыл». Чистый геометрический знак.</p>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Logo 2: Wave / river — поток как волны -->
|
||
<article class="logo-card">
|
||
<div class="logo-on-dark">
|
||
<svg width="56" height="48" viewBox="0 0 56 48" aria-label="Логотип Wave на тёмном">
|
||
<path d="M4 18 Q12 10 20 18 T36 18 T52 18" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||
<path d="M4 28 Q12 20 20 28 T36 28 T52 28" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" fill="none" opacity="0.7"/>
|
||
<path d="M4 38 Q12 30 20 38 T36 38 T52 38" stroke="#32C8A9" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-on-light">
|
||
<svg width="40" height="32" viewBox="0 0 56 48" aria-label="Логотип Wave на светлом">
|
||
<path d="M4 18 Q12 10 20 18 T36 18 T52 18" stroke="#0A1319" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||
<path d="M4 28 Q12 20 20 28 T36 28 T52 28" stroke="#343C41" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||
<path d="M4 38 Q12 30 20 38 T36 38 T52 38" stroke="#0F6E56" stroke-width="3" stroke-linecap="round" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-sizes">
|
||
<svg width="20" height="16" viewBox="0 0 56 48"><path d="M4 18 Q12 10 20 18 T36 18 T52 18" stroke="#0A1319" stroke-width="4" fill="none"/><path d="M4 38 Q12 30 20 38 T36 38 T52 38" stroke="#0F6E56" stroke-width="4" fill="none"/></svg>
|
||
<svg width="30" height="24" viewBox="0 0 56 48"><path d="M4 18 Q12 10 20 18 T36 18 T52 18" stroke="#0A1319" stroke-width="3" fill="none"/><path d="M4 28 Q12 20 20 28 T36 28 T52 28" stroke="#343C41" stroke-width="3" fill="none"/><path d="M4 38 Q12 30 20 38 T36 38 T52 38" stroke="#0F6E56" stroke-width="3" fill="none"/></svg>
|
||
<svg width="48" height="40" viewBox="0 0 56 48"><path d="M4 18 Q12 10 20 18 T36 18 T52 18" stroke="#0A1319" stroke-width="3" fill="none"/><path d="M4 28 Q12 20 20 28 T36 28 T52 28" stroke="#343C41" stroke-width="3" fill="none"/><path d="M4 38 Q12 30 20 38 T36 38 T52 38" stroke="#0F6E56" stroke-width="3" fill="none"/></svg>
|
||
</div>
|
||
<div class="logo-meta">
|
||
<div class="logo-num">Б</div>
|
||
<div class="logo-name">Three Waves · поток</div>
|
||
<p class="logo-desc">Три горизонтальные волны, нижняя — Teal. Ритм = поток. Подходит к «Поток / Volna / Русло».</p>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Logo 3: Drop / chevron forward -->
|
||
<article class="logo-card">
|
||
<div class="logo-on-dark">
|
||
<svg width="48" height="48" viewBox="0 0 48 48" aria-label="Логотип Drop на тёмном">
|
||
<path d="M24 6 L40 32 Q40 42 24 42 Q8 42 8 32 Z" fill="#FFFFFF"/>
|
||
<path d="M24 14 L24 34" stroke="#012019" stroke-width="2.5" stroke-linecap="round"/>
|
||
<path d="M18 28 L24 34 L30 28" stroke="#012019" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<circle cx="24" cy="14" r="3.5" fill="#32C8A9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-on-light">
|
||
<svg width="32" height="32" viewBox="0 0 48 48" aria-label="Логотип Drop на светлом">
|
||
<path d="M24 6 L40 32 Q40 42 24 42 Q8 42 8 32 Z" fill="#0A1319"/>
|
||
<path d="M24 14 L24 34" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>
|
||
<path d="M18 28 L24 34 L30 28" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<circle cx="24" cy="14" r="3.5" fill="#0F6E56"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-sizes">
|
||
<svg width="16" height="16" viewBox="0 0 48 48"><path d="M24 6 L40 32 Q40 42 24 42 Q8 42 8 32 Z" fill="#0A1319"/><circle cx="24" cy="14" r="4" fill="#32C8A9"/></svg>
|
||
<svg width="24" height="24" viewBox="0 0 48 48"><path d="M24 6 L40 32 Q40 42 24 42 Q8 42 8 32 Z" fill="#0A1319"/><path d="M24 14 L24 34" stroke="#FFF" stroke-width="3" stroke-linecap="round"/><path d="M18 28 L24 34 L30 28" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="24" cy="14" r="3.5" fill="#32C8A9"/></svg>
|
||
<svg width="40" height="40" viewBox="0 0 48 48"><path d="M24 6 L40 32 Q40 42 24 42 Q8 42 8 32 Z" fill="#0A1319"/><path d="M24 14 L24 34" stroke="#FFF" stroke-width="2.5" stroke-linecap="round"/><path d="M18 28 L24 34 L30 28" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="24" cy="14" r="3.5" fill="#32C8A9"/></svg>
|
||
</div>
|
||
<div class="logo-meta">
|
||
<div class="logo-num">В</div>
|
||
<div class="logo-name">Drop · капля с движением</div>
|
||
<p class="logo-desc">Капля + стрелка вниз = лид падает в воронку. Подходит к «Жила / Пульс / Колея».</p>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Logo 4: Chevron forward / pipeline -->
|
||
<article class="logo-card">
|
||
<div class="logo-on-dark">
|
||
<svg width="56" height="48" viewBox="0 0 56 48" aria-label="Логотип Chevron на тёмном">
|
||
<path d="M6 12 L18 24 L6 36" stroke="#5C7A72" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<path d="M22 12 L34 24 L22 36" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<path d="M38 12 L50 24 L38 36" stroke="#32C8A9" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-on-light">
|
||
<svg width="40" height="32" viewBox="0 0 56 48" aria-label="Логотип Chevron на светлом">
|
||
<path d="M6 12 L18 24 L6 36" stroke="#92907B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<path d="M22 12 L34 24 L22 36" stroke="#343C41" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
<path d="M38 12 L50 24 L38 36" stroke="#0F6E56" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-sizes">
|
||
<svg width="20" height="16" viewBox="0 0 56 48"><path d="M22 12 L34 24 L22 36" stroke="#343C41" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M38 12 L50 24 L38 36" stroke="#0F6E56" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||
<svg width="30" height="24" viewBox="0 0 56 48"><path d="M6 12 L18 24 L6 36" stroke="#92907B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M22 12 L34 24 L22 36" stroke="#343C41" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M38 12 L50 24 L38 36" stroke="#0F6E56" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||
<svg width="48" height="40" viewBox="0 0 56 48"><path d="M6 12 L18 24 L6 36" stroke="#92907B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M22 12 L34 24 L22 36" stroke="#343C41" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M38 12 L50 24 L38 36" stroke="#0F6E56" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
||
</div>
|
||
<div class="logo-meta">
|
||
<div class="logo-num">Г</div>
|
||
<div class="logo-name">Pipeline · 3 шеврона</div>
|
||
<p class="logo-desc">Три «>>>» нарастающих по контрасту = пайплайн лидов. Подходит к «Колея / Поток / Vento / Лидерра».</p>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Logo 5: Wordmark only — Fraunces serif "P." -->
|
||
<article class="logo-card">
|
||
<div class="logo-on-dark">
|
||
<svg width="64" height="48" viewBox="0 0 64 48" aria-label="Wordmark Fraunces на тёмном">
|
||
<text x="32" y="36" text-anchor="middle" font-family="Fraunces, Georgia, serif" font-size="36" font-weight="500" fill="#FFFFFF" letter-spacing="-0.02em">П</text>
|
||
<circle cx="48" cy="34" r="3" fill="#32C8A9"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-on-light">
|
||
<svg width="48" height="32" viewBox="0 0 64 48" aria-label="Wordmark Fraunces на светлом">
|
||
<text x="32" y="36" text-anchor="middle" font-family="Fraunces, Georgia, serif" font-size="36" font-weight="500" fill="#0A1319" letter-spacing="-0.02em">П</text>
|
||
<circle cx="48" cy="34" r="3" fill="#0F6E56"/>
|
||
</svg>
|
||
</div>
|
||
<div class="logo-sizes">
|
||
<svg width="20" height="16" viewBox="0 0 64 48"><text x="32" y="36" text-anchor="middle" font-family="Fraunces, Georgia, serif" font-size="36" font-weight="500" fill="#0A1319" letter-spacing="-0.02em">П</text></svg>
|
||
<svg width="30" height="24" viewBox="0 0 64 48"><text x="32" y="36" text-anchor="middle" font-family="Fraunces, Georgia, serif" font-size="36" font-weight="500" fill="#0A1319" letter-spacing="-0.02em">П</text><circle cx="48" cy="34" r="3" fill="#0F6E56"/></svg>
|
||
<svg width="48" height="40" viewBox="0 0 64 48"><text x="32" y="36" text-anchor="middle" font-family="Fraunces, Georgia, serif" font-size="36" font-weight="500" fill="#0A1319" letter-spacing="-0.02em">П</text><circle cx="48" cy="34" r="3" fill="#0F6E56"/></svg>
|
||
</div>
|
||
<div class="logo-meta">
|
||
<div class="logo-num">Д</div>
|
||
<div class="logo-name">Serif Initial · буква + точка</div>
|
||
<p class="logo-desc">Только литера в Fraunces (variable serif) + Teal-точка. Editorial. Подходит к «Русло / Volna / Стерх / Vento».</p>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
|
||
<!-- ===== COMBINATIONS ===== -->
|
||
<div class="section-h">
|
||
<h2>3 favourite комбинации в контексте sidebar</h2>
|
||
<span class="num">03 · превью</span>
|
||
</div>
|
||
|
||
<div class="combos">
|
||
|
||
<article class="combo-card">
|
||
<div class="combo-side">
|
||
<span class="combo-mark">
|
||
<svg width="22" height="22" viewBox="0 0 48 48"><rect x="2" y="2" width="44" height="44" rx="10" fill="#FFFFFF"/><path d="M16 14 L16 34 L32 34" stroke="#012019" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="32" cy="34" r="3.5" fill="#0F6E56"/></svg>
|
||
</span>
|
||
<span class="combo-name">Лидерра<span class="dot">.</span></span>
|
||
</div>
|
||
<div class="combo-meta">
|
||
<span><strong>Имя:</strong> Лидерра</span>
|
||
<span><strong>Знак:</strong> A · L-Square</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="combo-card">
|
||
<div class="combo-side">
|
||
<span class="combo-mark">
|
||
<svg width="34" height="20" viewBox="0 0 56 48"><path d="M4 18 Q12 10 20 18 T36 18 T52 18" stroke="#FFFFFF" stroke-width="3" fill="none"/><path d="M4 28 Q12 20 20 28 T36 28 T52 28" stroke="#FFFFFF" stroke-width="3" fill="none" opacity="0.7"/><path d="M4 38 Q12 30 20 38 T36 38 T52 38" stroke="#32C8A9" stroke-width="3" fill="none"/></svg>
|
||
</span>
|
||
<span class="combo-name">Поток<span class="dot">.</span></span>
|
||
</div>
|
||
<div class="combo-meta">
|
||
<span><strong>Имя:</strong> Поток</span>
|
||
<span><strong>Знак:</strong> Б · Three Waves</span>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="combo-card">
|
||
<div class="combo-side">
|
||
<span class="combo-mark">
|
||
<svg width="26" height="22" viewBox="0 0 64 48"><text x="32" y="36" text-anchor="middle" font-family="Fraunces, Georgia, serif" font-size="36" font-weight="500" fill="#FFFFFF" letter-spacing="-0.02em">Р</text><circle cx="48" cy="34" r="3" fill="#32C8A9"/></svg>
|
||
</span>
|
||
<span class="combo-name serif">Русло</span>
|
||
</div>
|
||
<div class="combo-meta">
|
||
<span><strong>Имя:</strong> Русло</span>
|
||
<span><strong>Знак:</strong> Д · Serif Initial</span>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|