Brand book · v1.0

Фирменный стиль Тимирязевки

Палитра, типографика, компоненты и правила использования визуального языка РГАУ-МСХА имени К.А. Тимирязева. Документ — источник истины для разработчиков и редакторов сайта testsite.timacad.ru.

Версия 1.0 · 2026-05 · автоматически синхронизирован с кодом

02

Цветовая палитра

Только emerald + grayscale. Никаких amber/blue/red/purple — даже для статусов и предупреждений (используем серую шкалу).

Brand · primary (emerald)

brand 50

#eefbf5

bg-brand-50

brand 100

#d8f4e7

bg-brand-100

brand 200

#b4e9d2

bg-brand-200

brand 300

#81d8b6

bg-brand-300

brand 400

#4dbf99

bg-brand-400

brand 500

#289a7c

bg-brand-500

brand 600

#1f7c64

bg-brand-600

brand 700

#185f4f

bg-brand-700

brand 800

#144c40

bg-brand-800

brand 900

#123f36

bg-brand-900

brand 950

#082720

bg-brand-950

primaryhsl(151, 58%, 34%)
secondaryhsl(192, 62%, 42%)
primary twbg-primary text-primary

Grayscale

gray 50

#f9fafb

bg-gray-50

gray 100

#f3f4f6

bg-gray-100

gray 200

#e5e7eb

bg-gray-200

gray 300

#d1d5db

bg-gray-300

gray 400

#9ca3af

bg-gray-400

gray 500

#6b7280

bg-gray-500

gray 600

#4b5563

bg-gray-600

gray 700

#374151

bg-gray-700

gray 800

#1f2937

bg-gray-800

gray 900

#111827

bg-gray-900

gray 950

#030712

bg-gray-950

⛔ Запрещено в лендингах:

amber, yellow, orange, red, blue, purple, pink — даже для предупреждений / ошибок. Используем grayscale + primary с разной opacity.

03

Типографика

Системный font-stack (Inter + sans-serif fallback). Иерархия — через размер и вес, не через цвет.

H1 — Hero title

sizeclamp(2.2rem, 5.5vw, 4.5rem)
weightfont-black (900)
leading1.05
trackingtight

H2 — Section heading

classtext-3xl sm:text-4xl md:text-5xl
weightfont-black

H3 — Card title

classtext-xl sm:text-2xl font-bold

Body large — используется для лидов в hero и крупных описаний секций. Длинный текст разрядкой в 1.6, цвет gray-700, размер 16-18px.

classtext-base md:text-lg leading-relaxed
colortext-gray-700

Caption / meta — мелкий текст рядом с компонентами, подписи под карточками, даты.

classtext-sm text-gray-500
Eyebrow / badge label
classtext-[11px] uppercase tracking-[0.25em] font-bold

04

Кнопки

3 типа CTA: primary (зелёный), secondary (белый с обводкой), inverse (для тёмного фона).

Primary

landingCtaClass("primary")

Secondary

landingCtaClass("secondary")

Inverse (на тёмном)

landingCtaClass("inverse")

С иконкой

Pill (small)

05

Карточки

Универсальный стиль: rounded-2xl, белый фон, тонкая рамка, soft shadow при hover.

Заголовок карточки 1

Описание карточки в две-три строки. Используется как стандартная единица контента в большинстве лендингов.

Подробнее

Заголовок карточки 2

Описание карточки в две-три строки. Используется как стандартная единица контента в большинстве лендингов.

Подробнее

Заголовок карточки 3

Описание карточки в две-три строки. Используется как стандартная единица контента в большинстве лендингов.

Подробнее

Класс

group rounded-2xl border border-gray-100 bg-white p-5 sm:p-6 shadow-sm
transition-all duration-300
hover:-translate-y-1 hover:border-primary/20 hover:shadow-lg

06

Бейджи и pill-плашки

Eyebrow в hero, статусы, теги. Только grayscale + primary tones.

Hero eyebrowАктивныйЧерновикPDFГотово

07

Иконки

Используем только Lucide React. В лендингах — gradient='emerald'. Сторонние SVG/PNG-иконки запрещены.

Sprout

Leaf

Wheat

Trees

Microscope

Beaker

GraduationCap

BookOpen

Полная библиотека (~190 иконок) — в quickLinkIcons.tsx + Russian-подписи в LucideIconPicker.tsx. У всех Unit'ов теперь есть тематическая иконка вместо логотипа (193/193).

08

Формы

Поля ввода, чекбоксы, кнопки отправки. Везде — единый стиль.

Чекбокс не отмечен по умолчанию. Без отметки форма не отправляется.

Кнопка отправки

09

Hero-секция

Стандартный паттерн: слева текст с eyebrow + h1 + lead + CTA, справа фото / плашки. Никаких центрированных hero.

EYEBROW BADGE

Заголовок hero с акцентом

Лид: 1-2 предложения, что это за раздел и зачем сюда зашёл пользователь.

10

152-ФЗ: согласие на ПД и cookies

Чекбоксы под формами, cookie-баннер, ссылки на политику и согласие. Обязательно на всех публичных формах.

Чекбокс согласия на ПД

  • ✓ Не отмечен по умолчанию
  • ✓ Без отметки handleSubmit прерывается
  • ✓ Ссылки на /personal-data-consent и /personal-data-policy открываются в новой вкладке

Мы используем cookies и Яндекс.Метрику

Сайт использует файлы cookies и сервис веб-аналитики. Подробнее — в Политике.

11

Запреты и анти-паттерны

Что нельзя делать в визуальном языке Тимирязевки.

Hero по центру

Только слева текст / справа фото. Симметричный hero не используем.

Цветные статусы

amber/yellow/orange/red/blue/purple — запрещены даже для warning/error.

Тёмный фон секций

bg-gray-900/950 — только в финальном CTA. Все секции — белый или gray-50.

Сторонние иконки

Только Lucide. SVG/PNG из других пакетов — не использовать.

GradientIcon другого цвета

В лендингах ТОЛЬКО gradient="emerald". Никаких blue/violet/rose.

Логотип-картинка вместо иконки

Решение руководства 2026-05: иконки приоритетнее логотипов в карточках.

Анимации Reveal

Появление при скролле через IntersectionObserver, в /editor/ — bypass.

Чёткая иерархия heading

h1 одна на странице, h2 для секций, h3 для карточек. Размеры — стандартные.

Brand book

РГАУ-МСХА имени К.А. Тимирязева

Версия 1.0 · 2026-05 · автоматически синхронизирован с production-кодом