Внутренняя база знаний по визуальной системе GSA: цвета, типографика, кнопки, отступы, карточки и секционные паттерны из production-шаблонов.
Foundations
Страница фиксирует текущую систему как документацию для повторного использования. Новые блоки лучше собирать из этих классов и подходов, добавляя scoped-стили только когда существующего паттерна не хватает.
#c50a33
CTA, акценты, активные состояния, ключевые заголовки.
#4b4b4d
Основной текст, заголовки на светлом фоне, навигация.
#7e5f5f
Иконки, служебные акценты, заливки в production-блоках.
#a6a098
Лейблы секций и второстепенные подписи.
#fff
Фон карточек, текст на hero, контрастные поверхности.
rgba(126,95,95,.1)
Мягкие фоновые секции и внутренние блоки.
rgba(217,217,217,.5)
Границы стеклянных hero-панелей и документационных таблиц.
| Токен | Размер | Где применять |
|---|---|---|
.h1-heading |
700 / 60px / 110% | Главные hero-заголовки страниц. |
.hero-i .sub-heading |
300 / 24px / 120% | Подзаголовок внутреннего hero. |
.section-heading p |
700 / 20px / 100% | Малый заголовок секции с листком. |
.regular-text, p |
300 / 20px / 120% | Основной текст абзацев и описаний. |
.contr .heading |
700 / 50px / 110% | Крупные контрастные предупреждающие блоки. |
.contr .list-heading |
700 / 22px / 100% | Заголовки списков внутри `.contr`. |
Заголовок страницы
Подзаголовок hero
Обычный текст: технологическая дисциплина, селекционная экспертиза и понятная структура контента.
Core Elements
.red-button
Один главный CTA в hero, карточке или секционном завершении.
.section-heading
Начало смыслового блока: “Культуры”, “О компании”, “Производство”.
.regular-text
Все длинные описания, списки и карточки.
.icons-list
Преимущества, проверки, критерии выбора и ценность для агробизнеса.
.facts .item
Числа, короткие показатели, компактные преимущества.
.proizv-wrapper .item
Технологические этапы, иконка плюс заголовок плюс текст.
.hero-i
Внутренние страницы и single-шаблоны культур.
.contacts
Финальный контактный блок, общий для сайта.
Демо секции
Используется для явного входа в смысловой блок и одного понятного действия.
При выборе семян обращайте внимание на:
Spacing
1320
max-width контейнера, боковые поля 20px, на desktop от 1201px — 32px.
120 / 80 / 48
типовой вертикальный rhythm секций: desktop, tablet, mobile.
20 / 32 / 50
частые gap-значения для сеток, текстовых групп и отступа после заголовка.
Reusable Blocks
Ниже — список блоков, которые стоит переиспользовать при создании новых страниц, лендингов культур и внутренних материалов.
Первый экран с full-bleed изображением, белым заголовком и коротким пояснением.
.hero-i, .h1-heading, .sub-heading
О нас, Культуры, Портрет компании, single-шаблоны
Текстовая история плюс изображение. Использовать для объясняющих блоков.
.about.text-img, .about.inside, .about.rev
О нас, Портрет компании, company-страницы
3-5 равнозначных фактов или метрик.
.facts, .facts .wrapper, .facts .item
О нас, культура, производство
Навигация по культурам и продуктовым направлениям.
.cultures, .cultures .wrapper, .cultures .item
Главная, Культуры
Сложный блок с технологическими карточками и изображениями.
.proizv-wrapper, .proizv-wrapper .row, .proizv-wrapper .item
О нас, Портрет компании, Производство в России
Акцентный список рекомендаций, критериев или проверок.
.about.inside.contr, .icons-list
Производство в России, single-шаблоны
Карточки гибридов, характеристик и технологии возделывания.
.hibrids-wrapper, .tehnology-wrapper, .hibrid
single культуры / продукта / гибрида
Финальная точка маршрута: адрес, менеджеры, соцсети, карта.
.contacts
Главная и внутренние страницы
Source Map
| Элемент | Где используется | Что переиспользовать | Когда применять |
|---|---|---|---|
| Hero | О нас, Культуры, Портрет компании, культура / продукт / гибрид | .hero-i, .h1-heading, .sub-heading |
Первый экран внутренней страницы. |
| Текст плюс изображение | О нас, Портрет компании, Производство в России | .about.text-img, .about-img, .about-top-r |
Объяснение компании, подхода, технологии или миссии. |
| Карточки фактов | О нас, культура, production-страницы | .facts, .facts .wrapper, .facts .item |
Короткие метрики и преимущества. |
| Сетка культур | Главная, Культуры | .cultures, .cultures .item |
Каталог направлений с изображениями культур. |
| Production | О нас, Портрет компании, Производство в России | .proizv-wrapper, .proizv-wrapper .item |
Когда нужен плотный блок “иконка, заголовок, текст, фото”. |
| Акцентный список | Производство в России, single-шаблоны | .contr, .icons-list |
Предупреждения, критерии выбора, контрольные списки. |
| Контакты | Главная, внутренние страницы | .contacts |
Финальный блок маршрута страницы. |
Section Library
Ниже собраны живые примеры блоков на текущих классах темы. Их можно брать как базовые шаблоны для новых страниц и менять только контент, изображения и порядок.
Homepage hero, blog, history, map, slider, membership, company cards, checklist, CTA, library, hybrid characteristics и region block.
Header/footer и мелкие варианты состояний не размножены как отдельные страницы, чтобы brand-kit оставался рабочей базой, а не копией всего сайта.
Hero внутренней страницы · .hero-i
Портфель семян ГСА для стабильного результата в разных агроклиматических условиях.
Text + image · .about.text-img
О компании
Такой блок подходит для объяснения подхода, миссии, производственного процесса или отдельного направления компании.
Facts / cards · .facts
ГСА в цифрах
15 лет
опыта селекции в РФ
11 культур
из портфеля ГСА в локальном производстве
50+
сотрудников работает с клиентами во всех регионах России
Cultures grid · .cultures
Культуры
Рапс
Горох
Ячмень
Лён масличный
Production grid · .proizv-wrapper
Производство
Используйте этот паттерн, когда нужны технологические карточки, иконки и фото в одной плотной секции.
Производственный цикл
Последовательность и точность этапов напрямую влияют на посевные характеристики.
Контроль качества
Проверки помогают сохранить соответствие продукции заявленным характеристикам.
Contr / checklist · .about.inside.contr
Акцентная секция для критериев выбора, предупреждений и контрольных списков.
Работая с нами, вы получаете:
Hybrid / product cards · .hibrids-wrapper + .tehnology-wrapper
Продукты культуры
Яровой рапс
Озимый рапс
Адаптация
Подбор решений под условия региона и технологию хозяйства.
Стабильность
Карточки характеристик, преимуществ и технологических свойств.
Homepage hero · .hero + .hero-heading
Главный экран Главной использует full-screen слайд, стеклянную панель и один CTA.
Blog cards · .blog
Блог
Полевые испытания
Короткий анонс новости или материала библиотеки.
Подробнее
Рекомендации по культуре
Карточка подходит для блога, новостей и экспертных материалов.
Подробнее Производство семян
Одинаковая высота карточек и компактная ссылка внизу.
ПодробнееHistory timeline · .history
История
2009
2018
Сегодня
Map coverage · .about.inside.map
География
Паттерн для географии продаж, присутствия менеджеров или зон возделывания.
Portret carousel + membership · .slider-h + .chlenstvo
Портрет компании
Карточки истории в формате слайдера: год, изображение, заголовок и описание.
2018
Расширение портфеля
Паттерн подходит для milestone-контента и презентации фактов во времени.
Компактная сетка логотипов для партнёров, учредителей, ассоциаций и сертификатов.
Company page pack · .company-cards + .company-checklist + .company-cta + .company-library
Ключевые направления
Checklist-паттерн для списка ценностей, условий или результата.
CTA-блок для завершения смысловой страницы.
Библиотека
Hybrid details · .why.ins.chars + .why.rbg
Характеристики
Потенциал урожайности
Устойчивость
Регионы
Используется в single-гибриде для зоны применения и сильного визуального завершения.
Контакты
Контакты
