Дума Шелеховского района обсудила проект бюджета на 2027 год
Депутаты-коммунисты потребовали увеличить расходы на ремонт школ и теплосетей.
Для редакции и дизайнеров
Дизайн-система
Все элементы портала собраны из одной палитры, трёх шрифтов и нескольких «рукописных» приёмов. Ниже — живая шпаргалка: цвета, кегли, кнопки, карточки и токены CSS.
1. Палитра
Бумага
#F1E5CE
--paper
фон сайта
Карточка
#F8F1E2
--card
фон карточек
Крафт
#E4D2B2
--paper-3
подвал, плашки
Графит
#1F1F1F
--ink
основной текст
Карандаш
#3B3530
--ink-2
рамки, линии
Красный
#C1121F
--red
акценты, теги, кнопки
Бордовый
#7A0010
--bordeaux
блоки КПРФ
Кирпичный
#A63A2A
--brick
дополнительный акцент
Золото
#C9A227
--gold
печать, детали
2. Типографика
Caveat · 64 px
Главное сегодня
Caveat · 44 px
Главные материалы
PT Serif Bold · 32 px
Дума Шелеховского района обсудила проект бюджета
PT Serif · 18 px
Депутаты-коммунисты потребовали увеличить расходы на ремонт школ и теплосетей и предложили поправки по социальной поддержке семей. Основной текст набран засечным шрифтом — как в бумажной газете.
Inter · 13 px
Caveat · 17 px (подзаголовок раздела)
Главное сегодня
3. Кнопки и ярлыки
Политика
Важно
#ЖКХ
4. Карточка новости
Газета, которую делают читатели
«Половина наших материалов начинается с письма или звонка. Мы не просто пишем о городе — пишем вместе с городом».
Карандашная рамка. Псевдоэлемент с рамкой проходит через SVG-фильтр #i38-pencil: линия дрожит, как проведённая от руки.
Канцелярская кнопка. Красный кружок с бликом и тенью, свисает с верхней границы карточки.
Скотч. Полупрозрачная полоска с рваными краями приклеивает карточку к «странице».
Пунктир. Разделители — 2 px пунктиром цветом карандаша, с небольшим шагом.
5. Формы
6. CSS-токены
:root {
--paper: #F1E5CE;
--card: #F8F1E2;
--paper-3: #E4D2B2;
--ink: #1F1F1F;
--ink-2: #3B3530;
--red: #C1121F;
--bordeaux: #7A0010;
--brick: #A63A2A;
--gold: #C9A227;
--font-hand: 'Caveat', cursive;
--font-serif: 'PT Serif', Georgia, serif;
--font-ui: 'Inter', system-ui, sans-serif;
--shadow-card: 3px 4px 0 rgba(59, 53, 48, .14), 0 18px 26px -22px rgba(0, 0, 0, .5);
--radius: 12px;
}Шрифты хранятся локально (woff2, кириллица + латиница), внешние CDN не используются. Иконки — инлайновый SVG-набор.