Интерфейсный акцент
#ff8562Яркий кораллово-оранжевый. Правило Tilda для ссылок: #allrecords a. Используйте для меню, ссылок, надписей кнопок и названий магазинов.
Техническая страница
Здесь зафиксированы цвета, шрифты, кнопки, наведение, границы, тени, скругления и размеры для сайта книги «Быть собой». Это не публичная страница, а рабочая памятка: она помогает создавать новые T123-блоки в одном визуальном языке.
На сайте есть два разных тёплых акцента. Их нельзя путать: яркий используется для действия и кликабельных элементов, спокойный — для редакционных деталей и тонких рамок.
Фон главной кнопки
#7f5f63
Пыльный бордово-сливовый. Это фон и рамка кнопки «Полистать книгу».
Главная кнопка должна быть одна на смысловой блок. На ней используется яркая оранжево-коралловая надпись. При наведении её фон темнеет, а цвет текста остаётся тем же.
Яркий кораллово-оранжевый. Правило Tilda для ссылок: #allrecords a. Используйте для меню, ссылок, надписей кнопок и названий магазинов.
Спокойный терракотовый. Используйте для меток, декоративных кавычек, тонких акцентных рамок и деталей страницы отзывов.
Пудрово-розовый светлый фон для спокойных заметок, выделений и мягких градиентов.
На сайте используются два разных эффекта наведения для оранжевых ссылок. Главная страница сохраняет цвет #ff8562, но делает ссылку чуть прозрачнее. На внутренних страницах со своей отдельной шапкой ссылка при наведении меняется на более светлый персиковый #ffa68d.
Обычный цвет ссылки — #ff8562. При наведении цвет не меняется: используется opacity:.7. Поэтому оранжевый выглядит мягче за счёт прозрачности на бежевом фоне.
Читать в разделе новостей →Обычный цвет меню — #ff8562. При наведении применяется отдельный более светлый персиковый цвет #ffa68d, без прозрачности. Это используется в самостоятельной шапке с логотипом «Быть собой».
Используется для ссылок меню и обычных ссылок в большом коде главной страницы.
Используется на внутренних страницах, где шапка создана отдельным блоком T123.
Текст всегда остаётся #ff8562. Меняется только фон и рамка главной бордовой кнопки.
Обычное состояние
#7f5f63
При наведении
#725458
Не смешивать два варианта без причины: на главной — прозрачность, в отдельной шапке внутренних страниц — светлый цвет #ffa68d. Обычный цвет ссылок и логотипа в шапке при этом остаётся #ff8562.
Нейтральные цвета создают спокойное «бумажное» ощущение сайта. Они должны занимать большую площадь, а яркие акценты — только направлять внимание.
Главный кремовый фон всего сайта и крупных секций.
Фон обычных текстовых карточек, цитат и смысловых блоков.
Чистый тёплый белый для карточек команды, портретов и фотографий.
Для очень мягких выделенных блоков, предупреждений и редакционных плашек.
Заголовки, логотип, важные имена и основной сильный контраст.
Основной длинный читаемый текст на главной странице.
Все эти варианты построены от спокойного редакционного акцента #d78669. Они нужны для границ и деталей, а не для текста главных кнопок.
Точки списка и маленькие заметные детали.
Подчёркивание ссылки или заметная тонкая рамка.
Выделенные карточки, например блоки с цитатами.
Граница большого мягкого акцентного блока.
Тонкие линии рядом с подписью или спокойные рамки.
Почти незаметная граница полей, карточек или email-блока.
Эти оттенки не заменяют главные акценты. Они уже используются в градиентах, обложке, заметках и фонах изображений.
Мягкая атмосферная деталь старой версии главной страницы.
Ненавязчивый зелёный оттенок в больших мягких градиентах.
Спокойный фон информационной плашки, например про презентацию.
Подложка до загрузки фотографии или нейтральный фон мини-изображения.
Подложка крупного коллажа или фотографии в карточке команды.
Фон вокруг изображения с object-fit contain, когда фото показывают целиком.
Эти градиенты уже использовались в главной странице. Выбирайте один готовый вариант для крупного смыслового блока, вместо того чтобы добавлять новый яркий фон.
Вертикальный мягкий розово-бежевый градиент для обложки или крупного изображения.
Пудрово-розовый, тёплый бежевый и светлый шалфей для мягкой смысловой плашки.
Переход от мягкого акцентного фона к бумажному. Подходит для вводной плашки с текстом.
Нейтральный светлый фон для блока «Больше фотографий» или похожего продолжения раздела.
Georgia отвечает за книжное, редакционное ощущение. Arial используется там, где нужен интерфейс: меню, кнопки, подписи и карточки.
Georgia — заголовки и художественный текст
Шрифт: Georgia, запасной: Times New Roman. Использовать для названия книги, заголовков, цитат, основного литературного текста.
Arial — меню, кнопки и подписи
Шрифт: Arial, запасной: sans-serif. Использовать для навигации, кнопок, меток, пояснений, описаний карточек и служебной информации.
| Элемент | Шрифт | Размер | Правило |
|---|---|---|---|
| Название книги | Georgia | 38–68px | clamp(38px,5.2vw,68px) |
| Заголовок раздела | Georgia | 28–44px | clamp(28px,3.4vw,44px) |
| Основной текст | Georgia | 20px | На телефоне: 18px |
| Меню | Arial | 18px | На телефоне остаётся читаемым и прокручивается горизонтально |
| Кнопка | Arial | 17px | Жирность 600, минимальная высота 54px |
| Название магазина | Georgia | 18px | Интерфейсный акцент #ff8562 |
| Описание в карточке | Arial | 16px | Приглушённый тёмный цвет |
Мягкие скругления и очень деликатные тени — важная часть характера сайта. Чем крупнее и важнее блок, тем обычно больше радиус и немного глубже тень.
| Элемент | Значение | Где использовать |
|---|---|---|
| Большая смысловая плашка | 28px | Крупная цитата или визуально важный блок |
| Большая карточка | 24px | Обложка, крупный текстовый контейнер, основная плашка |
| Обычная карточка | 22px | Отзывы, галерея, карточка новости, блок с текстом и кнопкой |
| Компактная карточка | 18–20px | Магазин, iframe, маленькая фотокарточка |
| Кнопка | 999px | Полностью овальная форма |
| Нейтральная рамка | rgba(32,24,22,.12) | Обычная граница карточек и блоков |
| Большая тень | 0 20px 60px rgba(45,25,20,.08) | Обложка и самый крупный визуальный объект |
| Тень фото | 0 10px 24px rgba(45,25,20,.04) | Лёгкое отделение фотографии от фона |
| Фото при наведении | 0 12px 28px rgba(45,25,20,.10) | Только для изображения, по которому можно нажать |
У разных страниц может быть разная максимальная ширина: это нормально. Ширина подбирается под содержание, а не должна быть одинаковой везде.
| Тип страницы или блока | Максимальная ширина | Почему |
|---|---|---|
| Главная страница | 1180px | Меню, обложка, шесть магазинов, широкая композиция |
| Галерея | 1120px | Три фотографии в строке требуют больше пространства |
| Команда | 1100px | Карточки людей, фотографии и подписи |
| Отзывы | 980px | Длинные цитаты проще читать в более узкой строке |
| До 980px | Планшет | Главные секции становятся одной колонкой; 6 магазинов идут в два ряда по 3 |
| До 720px | Телефон | Карточки по одной в строке, кнопки на всю ширину, меню прокручивается горизонтально |
Скопируйте эти переменные в начало стилей нового блока. Для кликабельных элементов используйте интерфейсный акцент #ff8562, а для тонких декоративных деталей — редакционный #d78669. Для обычных T123-блоков внутри главной страницы используйте эффект прозрачности при наведении; светлый #ffa68d оставьте для ссылок отдельной шапки внутренних страниц.
Не выбирайте новые оттенки для ссылок «на глаз». Основной интерфейсный оранжевый — #ff8562. На главной странице при наведении этот цвет не заменяется: используется прозрачность opacity:.7. На внутренних страницах, где работает самостоятельная шапка «Быть собой», при наведении используется отдельный светлый персиковый оттенок #ffa68d. Спокойный #d78669 оставьте для внутренней редакционной графики: меток, кавычек, подчёркиваний и тонких акцентных рамок.