mirror of
https://github.com/wasrusgen/vizelberg-mockups.git
synced 2026-06-03 14:04:50 +00:00
432 lines
26 KiB
HTML
432 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>VIZELBERG — Брендбук</title>
|
||
<style>
|
||
:root{
|
||
--sage:#7C9070; --herbal:#2F4A3C; --cream:#F5EFE6;
|
||
--terra:#E8A87C; --gold:#C9A24B; --ink:#23302a;
|
||
--line:rgba(47,74,60,.12);
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth}
|
||
body{font-family:'Segoe UI',-apple-system,Roboto,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
|
||
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}
|
||
/* nav */
|
||
nav{position:sticky;top:0;background:rgba(245,239,230,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:10}
|
||
nav .wrap{display:flex;gap:18px;flex-wrap:wrap;padding:12px 28px;font-size:13px}
|
||
nav a{color:var(--herbal);text-decoration:none;font-weight:600;opacity:.7}
|
||
nav a:hover{opacity:1}
|
||
/* cover */
|
||
.cover{background:var(--herbal);color:var(--cream);padding:90px 0 80px;text-align:center}
|
||
.cover .lead{font-size:13px;letter-spacing:6px;text-transform:uppercase;color:var(--gold);margin-bottom:30px}
|
||
.cover h1{font-family:Georgia,serif;font-size:18px}
|
||
.cover .tag{margin-top:18px;color:var(--sage);letter-spacing:3px;font-size:14px}
|
||
/* sections */
|
||
section{padding:64px 0;border-bottom:1px solid var(--line)}
|
||
.kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:700}
|
||
h2{font-family:Georgia,serif;font-size:30px;color:var(--herbal);margin:8px 0 6px}
|
||
.sub{color:#5d6b62;max-width:640px;margin-bottom:30px}
|
||
h3{font-size:15px;color:var(--herbal);margin:26px 0 10px;letter-spacing:.4px}
|
||
p.note{color:#6c7a71;font-size:13.5px}
|
||
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
|
||
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||
.box{border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;align-items:center;justify-content:center;min-height:150px}
|
||
.box.cream{background:var(--cream)}
|
||
.box.dark{background:var(--herbal)}
|
||
.box.sage{background:var(--sage)}
|
||
.cap{font-size:12px;color:#6c7a71;margin-top:8px;text-align:center}
|
||
/* colors */
|
||
.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
|
||
.color{border-radius:14px;overflow:hidden;border:1px solid var(--line)}
|
||
.color .chip{height:90px}
|
||
.color .meta{padding:12px;font-size:11.5px;line-height:1.5}
|
||
.color .meta b{display:block;font-size:13px;color:var(--ink);margin-bottom:4px}
|
||
.color .meta span{color:#6c7a71}
|
||
/* type */
|
||
.type-row{border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin-bottom:14px}
|
||
.type-row .lbl{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
|
||
.serif{font-family:Georgia,serif}
|
||
.scale span{display:block;color:var(--herbal)}
|
||
/* clear space */
|
||
.cs{position:relative;background:var(--cream);border-radius:16px;padding:40px}
|
||
.csbox{border:1px dashed var(--sage);padding:34px;display:inline-block;border-radius:10px;background:#fff}
|
||
/* misuse */
|
||
.dont{position:relative}
|
||
.dont .x{position:absolute;top:10px;right:12px;width:24px;height:24px;border-radius:50%;background:#c0584f;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
|
||
/* voice */
|
||
.voice{display:grid;grid-template-columns:1fr 1fr;gap:18px}
|
||
.voice .card{border:1px solid var(--line);border-radius:14px;padding:20px}
|
||
.voice .yes{border-left:4px solid var(--sage)}
|
||
.voice .no{border-left:4px solid #c0584f}
|
||
.voice h4{font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
|
||
.voice .yes h4{color:var(--sage)} .voice .no h4{color:#c0584f}
|
||
.voice ul{list-style:none;font-size:14px}
|
||
.voice li{padding:5px 0;border-bottom:1px dashed var(--line)}
|
||
.pill{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:30px;padding:7px 16px;margin:4px 6px 0 0;font-size:13px;color:var(--herbal)}
|
||
/* mockups */
|
||
.card-mock{aspect-ratio:1.7/1;border-radius:14px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
|
||
.footer{padding:50px 0;text-align:center;color:#6c7a71;font-size:13px;background:var(--cream)}
|
||
@media(max-width:760px){.grid2,.voice{grid-template-columns:1fr}.grid3,.colors{grid-template-columns:1fr 1fr}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<nav><div class="wrap">
|
||
<a href="#logo">Логотип</a>
|
||
<a href="#build">Построение</a>
|
||
<a href="#space">Охранное поле</a>
|
||
<a href="#misuse">Запреты</a>
|
||
<a href="#color">Цвета</a>
|
||
<a href="#type">Типографика</a>
|
||
<a href="#icon">Иконка</a>
|
||
<a href="#voice">Tone of voice</a>
|
||
<a href="#apply">Носители</a>
|
||
</div></nav>
|
||
|
||
<header class="cover">
|
||
<div class="lead">Brand Book · v1.0</div>
|
||
<!-- primary logo on dark -->
|
||
<svg width="360" height="110" viewBox="0 0 360 110">
|
||
<circle cx="48" cy="52" r="22" fill="#C9A24B"/>
|
||
<path d="M37 47 C37 39 44 33 54 33 C51 43 46 49 37 52 Z" fill="#2F4A3C"/>
|
||
<text x="84" y="56" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="40" fill="#F5EFE6">vizelberg</text>
|
||
<text x="86" y="82" font-family="'Segoe UI',sans-serif" font-size="12" letter-spacing="1.5" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||
</svg>
|
||
<div class="tag">персональный бренд нутрициолога</div>
|
||
</header>
|
||
|
||
<!-- LOGO -->
|
||
<section id="logo"><div class="wrap">
|
||
<div class="kicker">01 · Логотип</div>
|
||
<h2>Основной знак</h2>
|
||
<p class="sub">Логотип — это связка из трёх элементов: иконка-листок в круге, строчный шрифтовой знак «vizelberg» и слоган-дескриптор. Строчное начертание задаёт мягкий, дружелюбный и доступный характер бренда.</p>
|
||
<div class="grid2">
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="320" height="100" viewBox="0 0 320 100">
|
||
<circle cx="42" cy="48" r="20" fill="#7C9070"/>
|
||
<path d="M32 43 C32 36 38 31 47 31 C44 40 40 45 32 48 Z" fill="#F5EFE6"/>
|
||
<text x="74" y="52" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="36" fill="#2F4A3C">vizelberg</text>
|
||
<text x="76" y="75" font-family="'Segoe UI',sans-serif" font-size="11" letter-spacing="1.5" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Основная версия — на светлом фоне</div>
|
||
</div>
|
||
<div>
|
||
<div class="box dark">
|
||
<svg width="320" height="100" viewBox="0 0 320 100">
|
||
<circle cx="42" cy="48" r="20" fill="#C9A24B"/>
|
||
<path d="M32 43 C32 36 38 31 47 31 C44 40 40 45 32 48 Z" fill="#2F4A3C"/>
|
||
<text x="74" y="52" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="36" fill="#F5EFE6">vizelberg</text>
|
||
<text x="76" y="75" font-family="'Segoe UI',sans-serif" font-size="11" letter-spacing="1.5" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Инверсная версия — на тёмном фоне</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Версии знака</h3>
|
||
<div class="grid3">
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="200" height="64" viewBox="0 0 200 64">
|
||
<circle cx="28" cy="32" r="16" fill="#7C9070"/>
|
||
<path d="M20 28 C20 22 25 18 32 18 C30 25 26 30 20 32 Z" fill="#F5EFE6"/>
|
||
<text x="52" y="40" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="26" fill="#2F4A3C">vizelberg</text>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Без слогана (компактный)</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="140" height="64" viewBox="0 0 140 64">
|
||
<text x="70" y="30" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||
<text x="70" y="48" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-size="7" letter-spacing="0.3" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Текстовая (без иконки)</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="80" height="64" viewBox="0 0 80 64">
|
||
<circle cx="40" cy="32" r="20" fill="#7C9070"/>
|
||
<path d="M30 27 C30 20 36 15 45 15 C42 24 38 29 30 32 Z" fill="#F5EFE6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Только иконка (фавикон/аватар)</div>
|
||
</div>
|
||
</div>
|
||
<p class="note" style="margin-top:18px">Чёрно-белая версия: знак строится в один цвет (100% травяной или 100% белый) для факсов, штампов, гравировки и одноцветной печати.</p>
|
||
</div></section>
|
||
|
||
<!-- BUILD -->
|
||
<section id="build"><div class="wrap">
|
||
<div class="kicker">02 · Построение</div>
|
||
<h2>Сетка и пропорции</h2>
|
||
<p class="sub">Размер строится от высоты строчной буквы «x» (x-height). Диаметр иконки = 1,6×, отступ между иконкой и текстом = 0,8× от высоты заглавной.</p>
|
||
<div class="box cream">
|
||
<svg width="420" height="150" viewBox="0 0 420 150">
|
||
<defs><pattern id="g" width="14" height="14" patternUnits="userSpaceOnUse"><path d="M14 0 L0 0 0 14" fill="none" stroke="rgba(124,144,112,.25)" stroke-width="1"/></pattern></defs>
|
||
<rect x="20" y="20" width="380" height="110" fill="url(#g)"/>
|
||
<circle cx="62" cy="68" r="26" fill="#7C9070"/>
|
||
<path d="M49 61 C49 52 57 45 69 45 C66 57 60 64 49 68 Z" fill="#F5EFE6"/>
|
||
<text x="104" y="78" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="44" fill="#2F4A3C">vizelberg</text>
|
||
<line x1="104" y1="92" x2="320" y2="92" stroke="#C9A24B" stroke-width="1"/>
|
||
<text x="106" y="112" font-family="'Segoe UI',sans-serif" font-size="13" letter-spacing="2" fill="#7C9070">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||
</svg>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- CLEAR SPACE -->
|
||
<section id="space"><div class="wrap">
|
||
<div class="kicker">03 · Охранное поле и минимальный размер</div>
|
||
<h2>Свободное пространство</h2>
|
||
<p class="sub">Вокруг логотипа всегда сохраняется защитное поле, равное диаметру иконки-листка. В это поле не заходят другие элементы, текст и края макета.</p>
|
||
<div class="grid2">
|
||
<div>
|
||
<div class="cs">
|
||
<span class="csbox">
|
||
<svg width="240" height="50" viewBox="0 0 240 50">
|
||
<circle cx="22" cy="26" r="14" fill="#7C9070"/>
|
||
<path d="M14 22 C14 16 19 12 26 12 C24 19 20 24 14 26 Z" fill="#F5EFE6"/>
|
||
<text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||
</svg>
|
||
</span>
|
||
</div>
|
||
<div class="cap">Минимальное защитное поле = Ø иконки</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream" style="gap:30px">
|
||
<svg width="120" height="34" viewBox="0 0 240 50">
|
||
<circle cx="22" cy="26" r="14" fill="#7C9070"/>
|
||
<path d="M14 22 C14 16 19 12 26 12 C24 19 20 24 14 26 Z" fill="#F5EFE6"/>
|
||
<text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C">vizelberg</text>
|
||
</svg>
|
||
<span class="cap" style="margin:0">→ мин. ширина<br>в печати: 28 мм<br>в цифре: 120 px</span>
|
||
</div>
|
||
<div class="cap">Меньше — переходим на версию «только иконка»</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- MISUSE -->
|
||
<section id="misuse"><div class="wrap">
|
||
<div class="kicker">04 · Запреты</div>
|
||
<h2>Недопустимое использование</h2>
|
||
<p class="sub">Целостность знака неприкосновенна. Запрещено искажать пропорции, перекрашивать произвольно, наклонять и располагать на «шумном» фоне.</p>
|
||
<div class="grid3">
|
||
<div>
|
||
<div class="box cream dont"><span class="x">✕</span>
|
||
<svg width="160" height="50" viewBox="0 0 240 50"><circle cx="22" cy="26" r="14" fill="#7C9070"/><text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#2F4A3C" transform="skewX(-18)">vizelberg</text></svg>
|
||
</div><div class="cap">Не наклонять</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream dont"><span class="x">✕</span>
|
||
<svg width="160" height="50" viewBox="0 0 240 50" preserveAspectRatio="none"><circle cx="22" cy="26" r="14" fill="#c0584f"/><text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#3a6cd0">vizelberg</text></svg>
|
||
</div><div class="cap">Не перекрашивать вне палитры</div>
|
||
</div>
|
||
<div>
|
||
<div class="box dont" style="background:linear-gradient(45deg,#888,#ccc,#555)"><span class="x">✕</span>
|
||
<svg width="160" height="50" viewBox="0 0 240 50"><circle cx="22" cy="26" r="14" fill="#7C9070"/><text x="44" y="34" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#fff">vizelberg</text></svg>
|
||
</div><div class="cap">Не ставить на пёстрый фон</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- COLORS -->
|
||
<section id="color"><div class="wrap">
|
||
<div class="kicker">05 · Цвета</div>
|
||
<h2>Фирменная палитра</h2>
|
||
<p class="sub">Тёплая природная гамма: спокойный шалфейный и глубокий травяной как основа, кремовый фон, терракота и золото — акценты. Никакого «медицинского» голубого и кислотного зелёного.</p>
|
||
<div class="colors">
|
||
<div class="color"><div class="chip" style="background:#7C9070"></div><div class="meta"><b>Шалфей</b><span>HEX #7C9070<br>RGB 124·144·112<br>CMYK 35·15·40·15</span></div></div>
|
||
<div class="color"><div class="chip" style="background:#2F4A3C"></div><div class="meta"><b>Травяной</b><span>HEX #2F4A3C<br>RGB 47·74·60<br>CMYK 70·40·65·45</span></div></div>
|
||
<div class="color"><div class="chip" style="background:#F5EFE6;border-bottom:1px solid var(--line)"></div><div class="meta"><b>Крем</b><span>HEX #F5EFE6<br>RGB 245·239·230<br>CMYK 3·4·8·0</span></div></div>
|
||
<div class="color"><div class="chip" style="background:#E8A87C"></div><div class="meta"><b>Терракота</b><span>HEX #E8A87C<br>RGB 232·168·124<br>CMYK 5·40·52·0</span></div></div>
|
||
<div class="color"><div class="chip" style="background:#C9A24B"></div><div class="meta"><b>Золото</b><span>HEX #C9A24B<br>RGB 201·162·75<br>CMYK 22·35·80·5</span></div></div>
|
||
</div>
|
||
<h3>Пропорции использования</h3>
|
||
<div style="display:flex;height:42px;border-radius:10px;overflow:hidden;border:1px solid var(--line)">
|
||
<div style="flex:55;background:#F5EFE6"></div>
|
||
<div style="flex:22;background:#7C9070"></div>
|
||
<div style="flex:13;background:#2F4A3C"></div>
|
||
<div style="flex:6;background:#E8A87C"></div>
|
||
<div style="flex:4;background:#C9A24B"></div>
|
||
</div>
|
||
<p class="note" style="margin-top:8px">55% крем (фон) · 22% шалфей · 13% травяной · 6% терракота · 4% золото (акценты, премиум-детали).</p>
|
||
</div></section>
|
||
|
||
<!-- TYPOGRAPHY -->
|
||
<section id="type"><div class="wrap">
|
||
<div class="kicker">06 · Типографика</div>
|
||
<h2>Шрифтовые пары</h2>
|
||
<p class="sub">Заголовки — гуманистический serif (тепло, экспертность). Текст и интерфейс — гротеск (чистота, читаемость). В превью системные аналоги; лицензионная пара указана.</p>
|
||
<div class="type-row">
|
||
<div class="lbl">Заголовки · Serif → Cormorant / PT Serif</div>
|
||
<div class="serif scale">
|
||
<span style="font-size:40px;color:var(--herbal)">Питание — это система</span>
|
||
<span style="font-size:24px;color:var(--sage)">Спокойно. Доказательно. По шагам.</span>
|
||
</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div class="lbl">Текст и интерфейс · Sans → Inter / Manrope</div>
|
||
<div class="scale" style="font-family:'Segoe UI',sans-serif">
|
||
<span style="font-size:18px;font-weight:600">Заголовок блока · 18 / 600</span>
|
||
<span style="font-size:15px">Основной текст · 15 / 400. Аа Бб Вв Гг Дд Ее · 1234567890</span>
|
||
<span style="font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold)">Надзаголовок · 12 / caps / трекинг</span>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- APP ICON -->
|
||
<section id="icon"><div class="wrap">
|
||
<div class="kicker">07 · Иконка приложения</div>
|
||
<h2>Telegram & MAX mini-app</h2>
|
||
<p class="sub">Для аватара бота и иконки мини-приложения — версия «только листок» на сплошной заливке. Хорошо читается в маленьком размере.</p>
|
||
<div class="grid3">
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<rect x="6" y="6" width="108" height="108" rx="26" fill="#2F4A3C"/>
|
||
<circle cx="60" cy="58" r="30" fill="#7C9070"/>
|
||
<path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#F5EFE6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Тёмная (основная)</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<rect x="6" y="6" width="108" height="108" rx="26" fill="#7C9070"/>
|
||
<path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#F5EFE6"/>
|
||
<text x="60" y="98" text-anchor="middle" font-family="'Segoe UI',sans-serif" font-weight="700" font-size="13" letter-spacing="1" fill="#F5EFE6">vizelberg</text>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Шалфейная</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream">
|
||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||
<rect x="6" y="6" width="108" height="108" rx="26" fill="#F5EFE6" stroke="#C9A24B" stroke-width="1.5"/>
|
||
<circle cx="60" cy="58" r="30" fill="#C9A24B"/>
|
||
<path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#2F4A3C"/>
|
||
</svg>
|
||
</div>
|
||
<div class="cap">Светлая премиум</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- GRAPHIC ELEMENT -->
|
||
<section><div class="wrap">
|
||
<div class="kicker">08 · Графика</div>
|
||
<h2>Фирменный элемент — листок</h2>
|
||
<p class="sub">Листок из логотипа — основной паттерн. Используется как маркер списков, разделитель, водяной знак и текстура фона (низкая прозрачность).</p>
|
||
<div class="grid2">
|
||
<div>
|
||
<div class="box sage" style="position:relative;overflow:hidden">
|
||
<svg width="100%" height="150" viewBox="0 0 400 150" style="position:absolute;inset:0;opacity:.25">
|
||
<g fill="#F5EFE6">
|
||
<path d="M40 40 C40 28 48 20 62 20 C58 34 52 42 40 40 Z"/>
|
||
<path d="M160 90 C160 78 168 70 182 70 C178 84 172 92 160 90 Z"/>
|
||
<path d="M300 30 C300 18 308 10 322 10 C318 24 312 32 300 30 Z"/>
|
||
<path d="M250 110 C250 98 258 90 272 90 C268 104 262 112 250 110 Z"/>
|
||
</g>
|
||
</svg>
|
||
<span style="position:relative;color:#fff;font-family:Georgia,serif;font-size:22px">паттерн фона</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div class="box cream" style="flex-direction:column;align-items:flex-start;gap:10px">
|
||
<div style="display:flex;gap:10px;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#7C9070"/></svg><span>маркер списка / буллет</span></div>
|
||
<div style="display:flex;gap:10px;align-items:center"><svg width="20" height="20" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#C9A24B"/></svg><span>акцентный маркер</span></div>
|
||
<div style="width:100%;display:flex;align-items:center;gap:8px;color:#6c7a71;font-size:13px"><span style="flex:1;height:1px;background:var(--sage)"></span><svg width="16" height="16" viewBox="0 0 24 24"><path d="M4 12 C4 6 9 2 16 2 C14 11 9 14 4 12 Z" fill="#7C9070"/></svg><span style="flex:1;height:1px;background:var(--sage)"></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- VOICE -->
|
||
<section id="voice"><div class="wrap">
|
||
<div class="kicker">09 · Tone of voice</div>
|
||
<h2>Голос бренда</h2>
|
||
<p class="sub">VIZELBERG говорит как заботливый эксперт: спокойно, понятно, без морализаторства и запугивания. Объясняем «почему», а не приказываем «нельзя».</p>
|
||
<div style="margin-bottom:22px">
|
||
<span class="pill">тёплый</span><span class="pill">доказательный</span><span class="pill">поддерживающий</span><span class="pill">без чувства вины</span><span class="pill">конкретный</span><span class="pill">на «ты», по-доброму</span>
|
||
</div>
|
||
<div class="voice">
|
||
<div class="card yes"><h4>✓ Говорим так</h4><ul>
|
||
<li>«Давай разберём, что в твоём меню работает, а что мешает»</li>
|
||
<li>«Это не диета, а привычки, которые останутся с тобой»</li>
|
||
<li>«Сорвалась? Это нормально. Возвращаемся к плану без драмы»</li>
|
||
<li>«Вот почему организму это важно — простыми словами»</li>
|
||
</ul></div>
|
||
<div class="card no"><h4>✕ Не говорим так</h4><ul>
|
||
<li>«Запрещено есть после 18:00»</li>
|
||
<li>«Вредная еда убивает ваш организм»</li>
|
||
<li>«Срочно худейте к лету!»</li>
|
||
<li>«Минус 10 кг за неделю гарантированно»</li>
|
||
</ul></div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<!-- APPLICATIONS -->
|
||
<section id="apply"><div class="wrap">
|
||
<div class="kicker">10 · Носители</div>
|
||
<h2>Примеры применения</h2>
|
||
<p class="sub">Как бренд живёт на визитке, в шапке соцсетей и на экране приложения.</p>
|
||
<div class="grid3">
|
||
<!-- business card -->
|
||
<div>
|
||
<div class="card-mock" style="background:var(--herbal)">
|
||
<svg width="150" height="44" viewBox="0 0 240 60">
|
||
<circle cx="22" cy="30" r="15" fill="#C9A24B"/><path d="M14 26 C14 19 19 15 26 15 C24 22 20 27 14 30 Z" fill="#2F4A3C"/>
|
||
<text x="46" y="30" font-family="'Segoe UI',sans-serif" font-weight="600" font-size="22" fill="#F5EFE6">vizelberg</text>
|
||
<text x="48" y="48" font-family="'Segoe UI',sans-serif" font-size="8" letter-spacing="1" fill="#E8A87C">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</text>
|
||
</svg>
|
||
<div style="color:var(--cream);font-size:11px;line-height:1.7">
|
||
<b>Имя Фамилия</b> · нутрициолог<br>
|
||
@vizelberg · +7 ··· ·· ··
|
||
</div>
|
||
</div>
|
||
<div class="cap">Визитка</div>
|
||
</div>
|
||
<!-- social header -->
|
||
<div>
|
||
<div class="card-mock" style="background:var(--sage);align-items:center;justify-content:center;text-align:center">
|
||
<div>
|
||
<svg width="60" height="60" viewBox="0 0 120 120" style="margin-bottom:6px"><circle cx="60" cy="60" r="40" fill="#F5EFE6"/><path d="M44 52 C44 40 52 32 66 32 C62 46 56 54 44 60 Z" fill="#7C9070"/></svg>
|
||
<div style="color:#fff;font-family:Georgia,serif;font-size:18px">vizelberg</div>
|
||
<div style="color:var(--cream);font-size:10px;letter-spacing:1px">НУТРИЦИОЛОГИЯ ЗДОРОВЬЯ</div>
|
||
</div>
|
||
</div>
|
||
<div class="cap">Шапка соцсети / аватар</div>
|
||
</div>
|
||
<!-- app screen -->
|
||
<div>
|
||
<div class="card-mock" style="background:var(--cream);padding:14px">
|
||
<div style="display:flex;align-items:center;gap:8px">
|
||
<svg width="26" height="26" viewBox="0 0 120 120"><rect width="120" height="120" rx="28" fill="#2F4A3C"/><circle cx="60" cy="58" r="30" fill="#7C9070"/><path d="M44 50 C44 38 52 30 66 30 C62 44 56 52 44 58 Z" fill="#F5EFE6"/></svg>
|
||
<span style="font-weight:600;color:var(--herbal);font-size:13px">Моё меню</span>
|
||
</div>
|
||
<div style="background:#fff;border-radius:10px;padding:10px;font-size:11px;color:#6c7a71;border:1px solid var(--line)">
|
||
<b style="color:var(--herbal)">Завтрак</b><br>Овсянка с ягодами · 320 ккал
|
||
<div style="height:6px;background:#eee;border-radius:4px;margin-top:8px"><div style="width:62%;height:6px;background:#C9A24B;border-radius:4px"></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="cap">Экран мини-приложения</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
|
||
<div class="footer">
|
||
VIZELBERG · Brand Book v1.0 · 2026 — Превью на системных шрифтах. На продакшн заменяются лицензионные пары Cormorant/PT Serif + Inter/Manrope.<br>
|
||
Логотип построен на концепции №6.
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|