Все цвета системы. Базовые зелёные передают экологическую миссию, акценты — разнообразие проектов.
Основные цвета
Forest
--color-forest
#1C3B2F
Фон героя, кнопки, заголовки, шапка навигации
Forest Mid
--color-forest-mid
#2D5E48
Акцентные блоки, градиенты, hover-состояния
Sage
--color-sage
#5C8A72
Иконки, вторичные акценты, декоративные элементы
Mint BG
--color-mint-bg
#EBF3EE
Фон секций, теги, лёгкие блоки
Mint Card
--color-mint-card
#C9DDD2
Бордеры, светлые карточки, клуб друзей
Off White
--color-off-white
#F7F9F7
Фон страниц, белые секции
Текст
Text Dark
#1A2820
Основные заголовки и текст
Text Mid
#3D5249
Описания, вторичный текст
Text Light
#6B8478
Подписи, мета-информация, плейсхолдеры
Акцентные цвета карточек
Card Teal
#3D7A6E
Природоохранные проекты
Card Purple
#7B6EA8
Исследования и консультации
Card Coral
#C4634A
Вовлечение общества
Card Rose
#B5637A
Дополнительные направления
Card Gold
#C49A3A
Исследовательские инициативы
Card Slate
#5A7080
Вода и ресурсы
Статистические числа
Stat Coral
#D4623F
«10 лет», первое число
Stat Purple
#8B6DB8
«100+», второе число
Stat Teal
#3A8A7A
«ТОП-10», третье число
Stat Blue
#4A7EB0
«ТОП-10», четвёртое число
Два семейства: Playfair Display (дисплейный, для заголовков) + Inter (гротеск, для текста и UI).
Сохранить уникальные природные экосистемы
Фонд работает ради будущих поколений, помогая защищать уникальные природные территории и водные ресурсы России. Мы объединяем учёных, бизнес и людей, которым не всё равно.
Мы защищаем уникальные виды Байкала и их естественную среду обитания. Поддерживаем научные исследования, мониторинг популяций и меры по предотвращению угроз дикой природе.
ПОЖЕРТВОВАТЬ · СМОТРЕТЬ ВСЕ ПРОЕКТЫ · ВСТУПИТЬ В КЛУБ
Все кнопки — капслок, шрифт 600, трекинг 0.06em, радиус 6px. Паддинг 12×24px (стандарт).
Полностью скруглённые пилюли. Три роли: метка секции, категориальный тег, проектный бейдж.
Метки секций (на белом фоне страницы)
Миссия Чем занимается Фонд Проекты Сбор пожертвований Клуб друзей Фонда Варианты помощи Заслуги Партнёры Новости и мероприятия Файлы Команда
Категориальные теги новостей
Наука Мероприятие Экспедиция Экология Образование Форум Наследие Проект
Проектные бейджи (на фото-карточках)
Москва Байкал 2026 Подписка Презентация
Четыре типа: направления (цветные), проекты (с фото+оверлей), новости (белые), помощи (белые с фото).
Карточки направлений деятельности
????
Природоохранные проекты
- Помогаем сохранить биоразнообразие
- Создаём молодёжный водный совет
- Реализуем лесоклиматические инициативы
????
Исследовательские и консультационные инициативы
- Тематические исследования для стратегий
- Консультации по раздельному сбору отходов
❄️
Вовлечение общества в охрану природы
- Делимся результатами в науч-поп формате
- Открыты к участию волонтёров
- Популяризируем охрану природы
Карточки проектов (с фоновым фото)
????
Москва 2026
Байкальская нерпа
Проект по сохранению и мониторингу популяции и защите её естественной среды обитания.
????
Москва 2026
Национальные парки без мусора
Снижение загрязнения и развитие ответственного туризма.
????
Байкал 2026
Молодёжный водный совет
Платформа для вовлечения молодёжи в водные вопросы.
Карточки новостей/активностей
????️
27.01.26
Наука Экспедиция
Полевые исследования на Байкале
В январе стартовал новый этап наблюдений за состоянием воды и природных процессов озера.
????
27.01.26
Мероприятие Образование
Участие фонда в научном конгрессе
Команда Фонда представила проекты по сохранению экосистемы Байкала.
Полноширинный тёмно-зелёный фон с декоративными растительными SVG и двумя CTA-кнопками.
О фонде Сохраняем природу России.
Начали с Байкала — продолжаем по всей стране.
Фонд работает ради будущих поколений, помогая защищать уникальные природные территории и водные ресурсы России.
Крупные числа шрифтом Inter 300, каждое в своём акцентном цвете. Под числом — короткая подпись и кнопка.
10 лет
Сохраняем природу Байкала
Отчёты ТОП-10
НКО по прозрачности и партнёрскому потенциалу RAEX
Рейтинг 150 тыс.
Школьников обучили заботе о природе
Подробнее Белая «плавающая» шапка. Логотип слева, ссылки по центру, телефон + CTA справа. Лого — текстовое на белом.
Кратность 4px. Внутренние паддинги карточек: 20–28px. Гэпы в гридах: 16–24px. Между секциями: 64–96px.
Мягкие скругления создают «органический» характер. Тени — деликатные, зелёного оттенка.
Радиусы
Тени
shadow-sm
0 2px 8px rgba(28,59,47, 0.08)
Карточки новостей, чипы
shadow-md
0 4px 20px rgba(28,59,47, 0.12)
Карточки проектов, навигация
shadow-lg
0 8px 40px rgba(28,59,47, 0.16)
Модальные окна, попапы
Три основных грида: 3 колонки для проектов/направлений, 4 колонки для новостей/помощи, 2 колонки для крупных блоков.
3 колонки — проекты и направления
gap: 20px, min-width: 280px, auto-fill
4 колонки — новости и «варианты помощи»
gap: 16px, min-width: 220px
2 колонки — «клуб друзей», крупные секции
40/60 или 50/50 split. Левый — текст+CTA, правый — фото
Горизонтальный скролл — слайдеры
«Направления», партнёры, история воздействия. Кнопки ← →
SVG-иллюстрации листьев, веток, папоротников — тёмно-зелёные, низкая непрозрачность. Используются как фоновые украшения.
????
Мелкая ветка
opacity: 0.15–0.20
????
Побег
opacity: 0.10–0.15
????
Трава/колос
opacity: 0.07–0.10
????
На тёмном фоне
цвет: white, opacity: 0.12
Правило: Растительные декоры всегда позиционируются абсолютно (absolute), за контентом (z-index: 0). Направление — правый нижний или правый верхний угол секции. Размер — 150–300px. Цвет — либо тёмно-зелёный на светлом, либо белый на тёмном фоне.
Готовый :root для вставки в любой CSS-файл проекта.
/* ===================================== Фонд «Озеро Байкал» — CSS Variables ===================================== */ :root { /* ЦВЕТА — ОСНОВНЫЕ */ --color-forest: #1C3B2F;
--color-forest-mid: #2D5E48;
--color-sage: #5C8A72;
--color-mint-bg: #EBF3EE;
--color-mint-card: #C9DDD2;
--color-white: #FFFFFF;
--color-off-white: #F7F9F7;
/* ЦВЕТА — ТЕКСТ */ --color-text-dark: #1A2820;
--color-text-mid: #3D5249;
--color-text-light: #6B8478;
/* ЦВЕТА — КАРТОЧКИ НАПРАВЛЕНИЙ */ --color-card-teal: #3D7A6E;
--color-card-purple: #7B6EA8;
--color-card-coral: #C4634A;
--color-card-rose: #B5637A;
--color-card-gold: #C49A3A;
--color-card-slate: #5A7080;
--color-card-olive: #6E8A4A;
/* ЦВЕТА — СТАТИСТИКА */ --color-stat-coral: #D4623F;
--color-stat-purple: #8B6DB8;
--color-stat-teal: #3A8A7A;
--color-stat-blue: #4A7EB0;
/* ШРИФТЫ */ --font-display: 'Playfair Display', 'Georgia', serif;
--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
/* РАЗМЕРЫ ТЕКСТА */ --text-hero: clamp(32px, 5vw, 52px);
--text-h1: clamp(28px, 4vw, 42px);
--text-h2: clamp(22px, 3vw, 32px);
--text-body-lg: 17px;
--text-body: 15px;
--text-small: 13px;
--text-xs: 11px;
/* ОТСТУПЫ */ --space-4: 4px; --space-8: 8px;
--space-12: 12px; --space-16: 16px;
--space-20: 20px; --space-24: 24px;
--space-32: 32px; --space-40: 40px;
--space-48: 48px; --space-64: 64px;
--space-80: 80px; --space-96: 96px;
--space-120:120px;
/* РАДИУСЫ */ --radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
/* ТЕНИ */ --shadow-sm: 0 2px 8px rgba(28,59,47, 0.08);
--shadow-md: 0 4px 20px rgba(28,59,47, 0.12);
--shadow-lg: 0 8px 40px rgba(28,59,47, 0.16);
}