wasrusgen/vizelberg-mockups
1
0
Fork 0
mirror of https://github.com/wasrusgen/vizelberg-mockups.git synced 2026-06-03 13:24:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
main
vizelberg-mockups/logo_concepts.html

335 lines
17 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VIZELBERG — 10 концепций логотипа</title>
<style>
:root{
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
font-family:'Segoe UI',-apple-system,Roboto,sans-serif;
background:var(--cream); color:var(--ink);
padding:48px 32px; line-height:1.5;
}
.head{max-width:1200px;margin:0 auto 40px}
.head h1{font-size:30px;font-weight:700;letter-spacing:.5px;color:var(--herbal)}
.head p{color:#5d6b62;margin-top:8px;max-width:760px}
.palette{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;align-items:center;font-size:11px;color:#5d6b62}
.sw i{width:46px;height:46px;border-radius:10px;display:block;margin-bottom:6px;border:1px solid rgba(0,0,0,.06)}
.grid{
max-width:1200px;margin:0 auto;
display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
}
.card{
background:#fff;border-radius:18px;overflow:hidden;
box-shadow:0 6px 24px rgba(47,74,60,.08);border:1px solid rgba(47,74,60,.06);
}
.card .num{
font-size:12px;font-weight:700;color:var(--gold);
padding:14px 18px 0;letter-spacing:1px;text-transform:uppercase;
}
.card .name{padding:2px 18px 0;font-weight:600;color:var(--herbal);font-size:15px}
.card .desc{padding:4px 18px 14px;color:#6c7a71;font-size:12.5px;min-height:36px}
.stage{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(47,74,60,.07)}
.light{background:var(--cream);display:flex;align-items:center;justify-content:center;padding:30px 16px;min-height:150px}
.dark{background:var(--herbal);display:flex;align-items:center;justify-content:center;padding:30px 16px;min-height:150px}
svg{max-width:100%;height:auto}
.footer{max-width:1200px;margin:34px auto 0;color:#6c7a71;font-size:13px}
</style>
</head>
<body>
<div class="head">
<h1>VIZELBERG · 10 концепций логотипа</h1>
<p>Персональный экспертный бренд нутрициолога. Палитра: природный шалфейный + глубокий травяной, кремовый фон, тёплые терракота и золото как акценты. Каждый знак показан на светлом и тёмном фоне.</p>
<div class="palette">
<div class="sw"><i style="background:#7C9070"></i>#7C9070 шалфей</div>
<div class="sw"><i style="background:#2F4A3C"></i>#2F4A3C травяной</div>
<div class="sw"><i style="background:#F5EFE6"></i>#F5EFE6 крем</div>
<div class="sw"><i style="background:#E8A87C"></i>#E8A87C терракота</div>
<div class="sw"><i style="background:#C9A24B"></i>#C9A24B золото</div>
</div>
</div>
<div class="grid">
<!-- 1 -->
<div class="card">
<div class="num">01</div>
<div class="name">Лист в букве V</div>
<div class="desc">Классический wordmark; буква V прорастает листом — еда + рост.</div>
<div class="stage">
<div class="light">
<svg width="280" height="80" viewBox="0 0 280 80">
<g>
<path d="M14 22 L26 58 L38 22" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round"/>
<path d="M26 40 C26 28 34 18 46 16 C44 28 38 38 26 40 Z" fill="#7C9070"/>
<path d="M26 40 C26 30 30 22 38 19" stroke="#2F4A3C" stroke-width="1.6" fill="none"/>
</g>
<text x="56" y="50" font-family="Georgia,serif" font-size="30" letter-spacing="3" fill="#2F4A3C">IZELBERG</text>
</svg>
</div>
<div class="dark">
<svg width="280" height="80" viewBox="0 0 280 80">
<g>
<path d="M14 22 L26 58 L38 22" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round"/>
<path d="M26 40 C26 28 34 18 46 16 C44 28 38 38 26 40 Z" fill="#C9A24B"/>
<path d="M26 40 C26 30 30 22 38 19" stroke="#2F4A3C" stroke-width="1.6" fill="none"/>
</g>
<text x="56" y="50" font-family="Georgia,serif" font-size="30" letter-spacing="3" fill="#F5EFE6">IZELBERG</text>
</svg>
</div>
</div>
</div>
<!-- 2 -->
<div class="card">
<div class="num">02</div>
<div class="name">Эмблема-кружок с ростком</div>
<div class="desc">Монограмма V и росток в круге — компактный знак для аватара/иконки.</div>
<div class="stage">
<div class="light">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="46" fill="none" stroke="#7C9070" stroke-width="3"/>
<path d="M42 44 L60 82 L78 44" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round"/>
<path d="M60 60 C60 48 67 40 78 39 C76 50 70 58 60 60 Z" fill="#7C9070"/>
<circle cx="60" cy="60" r="46" fill="none" stroke="#C9A24B" stroke-width="1" stroke-dasharray="2 4"/>
</svg>
</div>
<div class="dark">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="46" fill="none" stroke="#C9A24B" stroke-width="3"/>
<path d="M42 44 L60 82 L78 44" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round"/>
<path d="M60 60 C60 48 67 40 78 39 C76 50 70 58 60 60 Z" fill="#7C9070"/>
</svg>
</div>
</div>
</div>
<!-- 3 -->
<div class="card">
<div class="num">03</div>
<div class="name">Тонкий serif (премиум)</div>
<div class="desc">Высокий межбуквенный интервал, аптечно-чистый. Доверие и экспертность.</div>
<div class="stage">
<div class="light">
<svg width="300" height="80" viewBox="0 0 300 80">
<text x="150" y="42" text-anchor="middle" font-family="'Times New Roman',serif" font-size="26" letter-spacing="8" fill="#2F4A3C">VIZELBERG</text>
<line x1="60" y1="56" x2="240" y2="56" stroke="#C9A24B" stroke-width="1"/>
<text x="150" y="70" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="6" fill="#7C9070">НУТРИЦИОЛОГИЯ</text>
</svg>
</div>
<div class="dark">
<svg width="300" height="80" viewBox="0 0 300 80">
<text x="150" y="42" text-anchor="middle" font-family="'Times New Roman',serif" font-size="26" letter-spacing="8" fill="#F5EFE6">VIZELBERG</text>
<line x1="60" y1="56" x2="240" y2="56" stroke="#C9A24B" stroke-width="1"/>
<text x="150" y="70" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="6" fill="#C9A24B">НУТРИЦИОЛОГИЯ</text>
</svg>
</div>
</div>
</div>
<!-- 4 -->
<div class="card">
<div class="num">04</div>
<div class="name">V из двух листьев / капли</div>
<div class="desc">Буква V собрана из двух листьев — природа, баланс, забота.</div>
<div class="stage">
<div class="light">
<svg width="120" height="120" viewBox="0 0 120 120">
<path d="M60 84 C40 64 38 40 44 30 C58 40 62 62 60 84 Z" fill="#7C9070"/>
<path d="M60 84 C80 64 82 40 76 30 C62 40 58 62 60 84 Z" fill="#2F4A3C"/>
<path d="M52 34 C56 50 59 66 60 80" stroke="#F5EFE6" stroke-width="1.4" fill="none"/>
</svg>
</div>
<div class="dark">
<svg width="120" height="120" viewBox="0 0 120 120">
<path d="M60 84 C40 64 38 40 44 30 C58 40 62 62 60 84 Z" fill="#7C9070"/>
<path d="M60 84 C80 64 82 40 76 30 C62 40 58 62 60 84 Z" fill="#C9A24B"/>
<path d="M52 34 C56 50 59 66 60 80" stroke="#2F4A3C" stroke-width="1.4" fill="none"/>
</svg>
</div>
</div>
</div>
<!-- 5 -->
<div class="card">
<div class="num">05</div>
<div class="name">Монограмма VB</div>
<div class="desc">Сплетённые V и B — лаконичный знак для печати, штампа, фавикона.</div>
<div class="stage">
<div class="light">
<svg width="120" height="120" viewBox="0 0 120 120">
<rect x="20" y="20" width="80" height="80" rx="18" fill="none" stroke="#7C9070" stroke-width="3"/>
<path d="M38 40 L52 76 L60 56" fill="none" stroke="#2F4A3C" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M64 40 L64 80 L78 80 C88 80 88 66 78 64 C86 62 86 50 76 50 L64 50" fill="none" stroke="#C9A24B" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="dark">
<svg width="120" height="120" viewBox="0 0 120 120">
<rect x="20" y="20" width="80" height="80" rx="18" fill="none" stroke="#C9A24B" stroke-width="3"/>
<path d="M38 40 L52 76 L60 56" fill="none" stroke="#F5EFE6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M64 40 L64 80 L78 80 C88 80 88 66 78 64 C86 62 86 50 76 50 L64 50" fill="none" stroke="#E8A87C" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</div>
<!-- 6 -->
<div class="card">
<div class="num">06</div>
<div class="name">Модерн lowercase + слоган</div>
<div class="desc">Мягкий строчный sans, дружелюбно и современно. Под мини-приложение.</div>
<div class="stage">
<div class="light">
<svg width="300" height="80" viewBox="0 0 300 80">
<circle cx="36" cy="40" r="16" fill="#7C9070"/>
<path d="M28 36 C28 30 33 26 40 26 C38 33 34 38 28 40 Z" fill="#F5EFE6"/>
<text x="62" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#2F4A3C">vizelberg</text>
<text x="63" y="58" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="0.8" fill="#7C9070">нутрициология здоровья</text>
</svg>
</div>
<div class="dark">
<svg width="300" height="80" viewBox="0 0 300 80">
<circle cx="36" cy="40" r="16" fill="#C9A24B"/>
<path d="M28 36 C28 30 33 26 40 26 C38 33 34 38 28 40 Z" fill="#2F4A3C"/>
<text x="62" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#F5EFE6">vizelberg</text>
<text x="63" y="58" font-family="'Segoe UI',sans-serif" font-size="9" letter-spacing="0.8" fill="#E8A87C">нутрициология здоровья</text>
</svg>
</div>
</div>
</div>
<!-- 7 -->
<div class="card">
<div class="num">07</div>
<div class="name">Бейдж с колосом</div>
<div class="desc">Круглая печать-эмблема с колосом и инициалом — нутрициология/цельность.</div>
<div class="stage">
<div class="light">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="48" fill="none" stroke="#2F4A3C" stroke-width="2"/>
<circle cx="60" cy="60" r="42" fill="none" stroke="#C9A24B" stroke-width="1"/>
<line x1="60" y1="40" x2="60" y2="80" stroke="#7C9070" stroke-width="2"/>
<g stroke="#7C9070" stroke-width="2" fill="none">
<path d="M60 48 q8 -2 12 -8"/><path d="M60 48 q-8 -2 -12 -8"/>
<path d="M60 58 q8 -2 12 -8"/><path d="M60 58 q-8 -2 -12 -8"/>
<path d="M60 68 q8 -2 12 -8"/><path d="M60 68 q-8 -2 -12 -8"/>
</g>
<text x="60" y="100" text-anchor="middle" font-family="Georgia,serif" font-size="9" letter-spacing="4" fill="#2F4A3C">VIZELBERG</text>
</svg>
</div>
<div class="dark">
<svg width="120" height="120" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="48" fill="none" stroke="#F5EFE6" stroke-width="2"/>
<circle cx="60" cy="60" r="42" fill="none" stroke="#C9A24B" stroke-width="1"/>
<line x1="60" y1="40" x2="60" y2="80" stroke="#C9A24B" stroke-width="2"/>
<g stroke="#C9A24B" stroke-width="2" fill="none">
<path d="M60 48 q8 -2 12 -8"/><path d="M60 48 q-8 -2 -12 -8"/>
<path d="M60 58 q8 -2 12 -8"/><path d="M60 58 q-8 -2 -12 -8"/>
<path d="M60 68 q8 -2 12 -8"/><path d="M60 68 q-8 -2 -12 -8"/>
</g>
<text x="60" y="100" text-anchor="middle" font-family="Georgia,serif" font-size="9" letter-spacing="4" fill="#F5EFE6">VIZELBERG</text>
</svg>
</div>
</div>
</div>
<!-- 8 -->
<div class="card">
<div class="num">08</div>
<div class="name">Лист + ложка</div>
<div class="desc">Прямой символ нутрициологии: природа встречает приём пищи.</div>
<div class="stage">
<div class="light">
<svg width="280" height="90" viewBox="0 0 280 90">
<g transform="translate(20,18)">
<ellipse cx="26" cy="22" rx="13" ry="20" fill="#7C9070"/>
<path d="M26 4 L26 56" stroke="#F5EFE6" stroke-width="1.6"/>
<rect x="24" y="42" width="4" height="22" rx="2" fill="#C9A24B"/>
</g>
<text x="70" y="58" font-family="Georgia,serif" font-size="28" letter-spacing="2" fill="#2F4A3C">VIZELBERG</text>
</svg>
</div>
<div class="dark">
<svg width="280" height="90" viewBox="0 0 280 90">
<g transform="translate(20,18)">
<ellipse cx="26" cy="22" rx="13" ry="20" fill="#C9A24B"/>
<path d="M26 4 L26 56" stroke="#2F4A3C" stroke-width="1.6"/>
<rect x="24" y="42" width="4" height="22" rx="2" fill="#E8A87C"/>
</g>
<text x="70" y="58" font-family="Georgia,serif" font-size="28" letter-spacing="2" fill="#F5EFE6">VIZELBERG</text>
</svg>
</div>
</div>
</div>
<!-- 9 -->
<div class="card">
<div class="num">09</div>
<div class="name">Молекула + лист</div>
<div class="desc">Наука + природа: нутрициология как доказательный подход. Современно.</div>
<div class="stage">
<div class="light">
<svg width="120" height="120" viewBox="0 0 120 120">
<g stroke="#7C9070" stroke-width="2.4" fill="none">
<line x1="60" y1="34" x2="38" y2="58"/><line x1="60" y1="34" x2="82" y2="58"/>
<line x1="38" y1="58" x2="60" y2="82"/><line x1="82" y1="58" x2="60" y2="82"/>
</g>
<circle cx="60" cy="34" r="7" fill="#2F4A3C"/>
<circle cx="38" cy="58" r="7" fill="#C9A24B"/>
<circle cx="82" cy="58" r="7" fill="#E8A87C"/>
<path d="M60 82 C56 70 60 60 70 56 C70 68 66 78 60 82 Z" fill="#7C9070"/>
</svg>
</div>
<div class="dark">
<svg width="120" height="120" viewBox="0 0 120 120">
<g stroke="#F5EFE6" stroke-width="2.4" fill="none">
<line x1="60" y1="34" x2="38" y2="58"/><line x1="60" y1="34" x2="82" y2="58"/>
<line x1="38" y1="58" x2="60" y2="82"/><line x1="82" y1="58" x2="60" y2="82"/>
</g>
<circle cx="60" cy="34" r="7" fill="#F5EFE6"/>
<circle cx="38" cy="58" r="7" fill="#C9A24B"/>
<circle cx="82" cy="58" r="7" fill="#E8A87C"/>
<path d="M60 82 C56 70 60 60 70 56 C70 68 66 78 60 82 Z" fill="#7C9070"/>
</svg>
</div>
</div>
</div>
<!-- 10 -->
<div class="card">
<div class="num">10</div>
<div class="name">Рукописная подпись</div>
<div class="desc">Авторский почерк — максимум персонального бренда и женственности.</div>
<div class="stage">
<div class="light">
<svg width="300" height="80" viewBox="0 0 300 80">
<text x="40" y="50" font-family="'Brush Script MT','Segoe Script',cursive" font-size="40" fill="#2F4A3C">Vizelberg</text>
<path d="M40 58 C110 66 200 66 262 56" stroke="#C9A24B" stroke-width="2" fill="none"/>
<path d="M255 50 C262 52 265 54 262 56" stroke="#7C9070" stroke-width="2" fill="none"/>
</svg>
</div>
<div class="dark">
<svg width="300" height="80" viewBox="0 0 300 80">
<text x="40" y="50" font-family="'Brush Script MT','Segoe Script',cursive" font-size="40" fill="#F5EFE6">Vizelberg</text>
<path d="M40 58 C110 66 200 66 262 56" stroke="#C9A24B" stroke-width="2" fill="none"/>
<path d="M255 50 C262 52 265 54 262 56" stroke="#E8A87C" stroke-width="2" fill="none"/>
</svg>
</div>
</div>
</div>
</div>
<div class="footer">
Шрифты в превью системные (Georgia/Times/Segoe) — на финальном этапе заменяются на лицензионные пары (напр. serif: Cormorant/PT Serif; sans: Inter/Manrope). Выбери 1–2 концепции — доработаю в финальный лого-замок (горизонтальный + иконка + ч/б версия).
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink