# Vtorum stylebook

Stylebook для людей

vtorum-styleguide.html
Стайлбук Вторум

Мини-стайлбук · знак, надпись, цвет
Вторум: знак и палитра

Всё ниже снято с продукта: цвета — из apps/web/src/styles.css , файлы — из apps/web/src/assets и apps/web/public , контрасты посчитаны. Это опора для новых элементов интерфейса и для всего, что выходит наружу — писем, публикаций, презентаций.

Две отдельные вещи

Знак — градиентная «V». Надпись — слово «Vtorum». Это два самостоятельных элемента, и в один блок они не собираются : нет и не должно быть файла, где знак и название стоят вместе.

Знак ставится там, где название уже известно: панель приложения, вкладка, иконка на рабочем столе, аватар. Надпись — там, где продукт представляется впервые: экран входа, публикация, письмо, обложка. Если нужны оба, они разносятся по композиции, а не склеиваются.

Знак на светлом vtorum-logo.png · 512×512 · прозрачный

Знак на тёмном тот же файл — ночной версии не требуется

Надпись на светлом vtorum-full-logo.png · #030736

Надпись на тёмном vtorum-full-logo-dark.png · белая

Правила

Знак — один файл на оба фона

Он цветной на прозрачном и одинаково читается и на светлом, и на ночном. Ночной версии у него нет намеренно: она была бы копией.

Надпись — два файла

Тёмно-синяя #030736 для светлого фона, белая для тёмного. Подменяется сам файл, а не подкрашивается: пересчёт палитры картинок не касается. Оба файла одной геометрии, иначе при смене темы надпись прыгает.

Свободное поле и размеры

Вокруг — не ближе половины высоты знака. Знак от 24 px: ниже теряется вырез между плечами. Надпись от 120 px по ширине. Под знаком не должно быть цветной плашки — он сам себе форма и цвет.

Чего не делают

Не соединяют знак с названием в один блок. Не растягивают непропорционально, не перекрашивают градиент, не обводят, не кладут на пёстрый фон, не подменяют цвет надписи фильтром вместо готового файла.

Градиент знака

#019CFE синий, левое плечо

#01EDDB зелёный, правое плечо

#7434FC фиолетовый, основание

Это цвета знака, а не палитра интерфейса. В макетах они берут

---

Stylebook для моделей

Вторум — мини-стайлбук: знак и палитра

[vtorum\-styleguide\.md](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/ec56da8e-00f0-4a47-b8ce-8dd4d450c2a6/raw)

---

Логотип малый

![на белом фоне](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/6b0848a0-11b2-4673-8f1f-f3ec0ccf0795/raw)

![на прозрачном фоне](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/60e12229-9b02-4985-9627-15b093bc5890/raw)

![маскируемый для PWA](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/6cb0634d-bc83-418d-bc91-abe3ada24feb/raw)

---

Логотип большой

![Фонема белая на прозрачном](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/004d0f07-f3bd-4422-a70f-4f3eb7fc4126/raw)

![Фонема черная на прозрачном](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/6bdd3e0a-12c1-4b5c-bde9-da17921825f2/raw)

> Шрифт: Gilroy Medium

---

Превью для соцсетей

![превью для соцсетей](https://notes.vtorum.net/api/public/web/vtorum-stylebook-12e60734/assets/10bad0c5-2b27-4ba4-a0ee-cc2a35c0b795/raw)

---