agents/brandbook/index.html

<!doctype html>
<html lang="ru">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Вечерний детектив — Брендбук</title><link rel="stylesheet" href="brandbook.css"></head>
<body><main>
<section class="page" id="logo" aria-labelledby="logo-title">
<div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>01 / Логотип</span></div>
<h1 id="logo-title">Логотип и название</h1>
<p class="lead">Три композиции: знак, название справа и название снизу.</p>
<div class="logo-grid"><figure class="logo-card mark"><a href="assets/logos/mark-color-light-background.png"><img src="assets/logos/mark-color-light-transparent.png" alt="Знак отдельно, светлый фон"></a><figcaption>Знак отдельно · светлый фон</figcaption></figure><figure class="logo-card mark"><a href="assets/logos/mark-color-dark-background.png"><img src="assets/logos/mark-color-dark-transparent.png" alt="Знак отдельно, тёмный фон"></a><figcaption>Знак отдельно · тёмный фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-color-light-background.png"><img src="assets/logos/horizontal-color-light-transparent.png" alt="Название справа, светлый фон"></a><figcaption>Название справа · светлый фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-color-dark-background.png"><img src="assets/logos/horizontal-color-dark-transparent.png" alt="Название справа, тёмный фон"></a><figcaption>Название справа · тёмный фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-color-light-background.png"><img src="assets/logos/vertical-color-light-transparent.png" alt="Название снизу, светлый фон"></a><figcaption>Название снизу · светлый фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-color-dark-background.png"><img src="assets/logos/vertical-color-dark-transparent.png" alt="Название снизу, тёмный фон"></a><figcaption>Название снизу · тёмный фон</figcaption></figure></div><div class="grid2 rule"><div><h3>Светлый фон</h3><p class="small">Чёрное название, золотые акценты.</p></div><div><h3>Тёмный фон</h3><p class="small">Белое название, золотые акценты.</p></div></div>
<p class="source-note">Используйте готовые композиции из комплекта.</p>
<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>01 / 04</span></footer></section>
<section class="page" id="logo-mono" aria-labelledby="logo-mono-title">
<div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>01 / Логотип · продолжение</span></div>
<h2 id="logo-mono-title">Монохром и размещение</h2>
<p class="lead">На тёмном фоне заменяем золото белым, сохраняя рисунок эмблемы.</p>
<div class="logo-grid"><figure class="logo-card mark"><a href="assets/logos/mark-black-background.png"><img src="assets/logos/mark-black-transparent.png" alt="Знак отдельно, светлый фон"></a><figcaption>Знак отдельно · светлый фон</figcaption></figure><figure class="logo-card mark"><a href="assets/logos/mark-white-background.png"><img src="assets/logos/mark-white-transparent.png" alt="Знак отдельно, тёмный фон"></a><figcaption>Знак отдельно · тёмный фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-black-background.png"><img src="assets/logos/horizontal-black-transparent.png" alt="Название справа, светлый фон"></a><figcaption>Название справа · светлый фон</figcaption></figure><figure class="logo-card horizontal"><a href="assets/logos/horizontal-white-background.png"><img src="assets/logos/horizontal-white-transparent.png" alt="Название справа, тёмный фон"></a><figcaption>Название справа · тёмный фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-black-background.png"><img src="assets/logos/vertical-black-transparent.png" alt="Название снизу, светлый фон"></a><figcaption>Название снизу · светлый фон</figcaption></figure><figure class="logo-card vertical"><a href="assets/logos/vertical-white-background.png"><img src="assets/logos/vertical-white-transparent.png" alt="Название снизу, тёмный фон"></a><figcaption>Название снизу · тёмный фон</figcaption></figure></div><div class="grid2 rule"><div><h3>Свободное поле</h3><p class="small">Не меньше ¼ диаметра знака. В готовых файлах поле уже включено.</p></div><div><h3>Размер и контраст</h3><p class="small">Знак — от 48 px. С названием — от 240 px по ширине. Фон спокойный, без пёстрого рисунка.</p></div></div>
<p class="source-note">Не менять пропорции, цвета и расположение элементов. Не добавлять тени.</p>
<p class="small"><a href="assets/logos/catalog.html">Все варианты логотипа →</a></p>
<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>02 / 04</span></footer></section>
<section class="page" id="fonts" aria-labelledby="fonts-title">
<div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>02 / Шрифты</span></div>
<h2 id="fonts-title">Шрифты</h2>
<p class="lead">Oswald — логотип и заголовки. Podkova — акцентные надписи. Noto Sans — основной текст.</p>
<div class="type-sample">
<div class="type-row"><div class="caption">OSWALD / SEMIBOLD 600</div><p class="type-heading">У каждого дела есть разгадка</p></div>
<div class="type-row"><div class="caption">PODKOVA / SEMIBOLD 600</div><p class="type-display">Вечерний детектив</p></div>
<div class="type-row"><div class="caption">NOTO SANS / REGULAR 400 · BOLD 700</div><p class="type-body">Изучите улики, обсудите версии и найдите ответ.<br><strong>Дело № 17 · Расследование продолжается.</strong></p></div>
</div>
<table><thead><tr><th>Роль / шрифт</th><th>Размер</th><th>Правило</th></tr></thead><tbody>
<tr><td>Логотип / Oswald 600</td><td>По масштабу логотипа</td><td>Готовые композиции, без разрядки</td></tr>
<tr><td>Заголовки / Oswald 600</td><td>32–48 px / 15 pt</td><td>Межстрочный интервал 1,15</td></tr>
<tr><td>Текст / Noto Sans 400</td><td>18 px / 11 pt</td><td>Межстрочный интервал 1,5</td></tr>
<tr><td>Подписи / Noto Sans 400</td><td>14 px / 9 pt</td><td>Краткие пояснения</td></tr>
<tr><td>Выделение / Noto Sans 700</td><td>Как основной текст</td><td>Ключевые слова, без длинных капслоков</td></tr>
</tbody></table>
<p class="source-note">Шрифты включены в комплект. Лицензии SIL OFL 1.1: <a href="assets/fonts/Oswald-OFL.txt">Oswald</a>, <a href="assets/fonts/Podkova-OFL.txt">Podkova</a>, <a href="assets/fonts/LICENSE.txt">Noto Sans</a>. Передавайте шрифты вместе с лицензиями.</p>

<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>03 / 04</span></footer>
</section>
<section class="page" id="colors" aria-labelledby="colors-title">
<div class="eyebrow"><span>Вечерний детектив / Брендбук</span><span>03 / Цвета</span></div>
<h2 id="colors-title">Цвета</h2>
<p class="lead">Чёрный и белый — основа. Золотой — акцент.</p>
<div class="palette">
<div style="background:#111;color:#fff"><strong>Чёрный / основной фон</strong><code>#111111</code></div>
<div style="background:#fff;border:1px solid #11111125"><strong>Белый / текст и светлый фон</strong><code>#FFFFFF</code></div>
<div style="background:#fcbf02"><strong>Золотой / акцент</strong><code>#FCBF02</code></div>
<p class="small">Золото — для рамки, полос и ключевых действий.</p>
</div>
<div class="grid2 rule"><div><h3>Служебные цвета</h3><p class="small">Серый — для элементов интерфейса. Цвета статусов сопровождаются текстом.</p></div><div><h3>Контраст</h3><p class="small">Белый на чёрном; чёрный на белом и золотом. Не набирать мелкий текст золотым на белом.</p></div></div>
<p class="small">Для печати — цветопроба. <a href="README.md">Источники и лицензии →</a></p>
<footer class="folio"><span>ЛОГОТИП · ШРИФТЫ · ЦВЕТА</span><span>04 / 04</span></footer>
</section>
</main></body></html>