Китайский язык в Харбине
4 недели обучения в Харбинском политехническом университете с полным погружением в языковую среду
Brand Style Guide
Цветовая палитра
Все цвета определены как CSS-переменные и должны использоваться только из этого набора. Никаких других оттенков зелёного или акцентных цветов без согласования.
Правила использования цвета
Используется для заголовков-акцентов, кнопок Primary, иконок, границ активных элементов. Не применять для больших фоновых плашек — для этого есть --primary-light.
Например, секция «Корпоративные программы» или подвал. Текст на нём всегда белый, с использованием полупрозрачных белых контейнеров.
Не используйте #4CAF50 в качестве основного — только для индикаторов успеха или экономии. Основной зелёный — строго #2f7537.
Типографика и шрифты
Единственный допустимый шрифт — Montserrat. Импорт через Google Fonts с набором весов 300, 400, 500, 600, 700, 800.
font-size: 3.5rem (desktop), 2.2rem (mobile)
font-weight: 800
line-height: 1.1
max-width: 900px, центрирован
font-size: 3rem / 2.5rem (mobile)
font-weight: 800
.hm-section-accent — цвет primary
font-size: 1.5rem – 1.8rem
font-weight: 700
font-size: 1rem – 1.2rem
color: --text-light
line-height: 1.6 – 1.7
color: --text-lighter
font-size: 0.9rem
Правила типографики
Строго Montserrat. Даже для китайских иероглифов (например, логотип «华铭中心») используется тот же шрифт. В редких случаях допускается системный sans-serif как fallback.
H1 — только один на страницу, в hero-блоке. H2 — секционные заголовки с акцентным словом. H3 — заголовки карточек. Ниже — простой текст.
Для китайских символов допускается letter-spacing: 3px, для латиницы — стандартный.
Кнопки и CTA
Правила использования кнопок
Всегда градиент linear-gradient(135deg, var(--primary), var(--primary-dark)), белый текст, тень 0 10px 30px rgba(47,117,55,0.3). При наведении поднимается на 5px и увеличивается тень.
Прозрачный фон, обводка primary. При наведении заливается --primary-light. Не имеет тени.
Все кнопки имеют border-radius: 50px и паддинги не менее 18px сверху и снизу, 45px слева и справа. Между текстом и стрелкой — 15px gap.
Карточки и контейнеры
Feature Card
Белый фон, border-radius 20px, тень --shadow. При наведении border становится --primary-light, сдвиг вверх 10px.
Teacher Card
Носитель языкаИспользуется для преподавателей. Внутри — цитата с левой границей primary, звёзды рейтинга.
Общие правила карточек
Все карточки изначально имеют border: 2px solid white. При наведении цвет меняется на --primary-light.
Использовать @keyframes cardReveal (opacity 0 → 1, translateY 30px → 0). Задержка для каждой последующей карточки 0.1–0.2s.
Другие компоненты
Правила компонентов
Всегда primary-градиент, белый текст, цифры в полупрозрачных плашках. Анимация pulseBadge (лёгкое масштабирование).
Звёзды — color: #ffc107, шрифт 1.5rem, межбуквенное расстояние 2px. Никаких других цветов для звёзд.
Анимации и переходы
Правила анимаций
Все анимации используют cubic-bezier(0.4, 0, 0.2, 1) или ease. Длительность ховер-эффектов — 0.3–0.4s.
Плавающие иероглифы — только в hero и faq. Не использовать на каждом блоке. Задержка анимации карточек не более 0.2s между элементами.
Адаптивность
1100px — переход от 3 колонок к 2 колонкам для сеток.
900px — вертикализация статистики, уменьшение отступов.
768px — основная мобильная точка: одноколоночные сетки, уменьшение заголовков, кнопки на всю ширину.
480px — дополнительная оптимизация для маленьких экранов.
На мобильных устройствах кнопки CTA должны быть шириной 100% (max-width 350px), карточки — одна под другой, аватарки соц. доказательства сдвигаются меньше, бейдж таймера переносится.
Готовый промпт
Используйте следующий текст для постановки задачи дизайнеру / разработчику:
Дизайн-система страниц должна строго следовать установленному стайлгайду:
• Цвета: primary #2f7537, primary-dark #265c2c, primary-light rgba(47,117,55,0.1). Акцентный золотой #dcb43c только для особых пометок. Фон светлый #f8f9fa, тёмный #0a1f0e — для корпоративных блоков. Текст #222, #666, #888.
• Типографика: только Montserrat (веса 300–800). H1 — 3.5rem/800, H2 — 3rem/800, H3 — 1.5rem/700. Основной текст 1–1.2rem/400, цвет #666.
• Кнопки: primary — градиент от #2f7537 к #265c2c, border-radius 50px, тень. secondary — обводка primary, без фона.
• Карточки: белые, border-radius 20px, тень --shadow, при наведении border становится rgba(47,117,55,0.1) и сдвиг вверх на 10px. Анимация появления cardReveal.
• Иконки: в кружках 80px с градиентом от primary-light к белому, граница 2px primary-light.
• Рейтинг: звёзды #ffc107, шрифт 1.5rem.
• Анимации: плавные, через cubic-bezier(0.4,0,0.2,1). Длительность появления 0.8s, ховеры 0.3–0.4s.
• Адаптивность: контрольные точки 1100px, 900px, 768px, 480px. Мобильные кнопки — на всю ширину, сетки — в одну колонку.
Соблюдение этих правил обязательно для всех новых страниц.