KK
Операционный партнёр для эксперта
Возвращаю вас к вашему делу. Остальное беру на себя. Системное мышление, глубокая работа с AI, 15 лет фриланса.
Визуальная система
2026
Строгое, тёплое, без инфобиз-эстетики. Для экспертов, которые знают цену своему времени.
Scroll
Цветовая палитра
Color Palette
& Gradients
AAA
Red
#D64933
Primary color — акценты, CTA, ссылки, hover-эффекты
AAA
Red Dark
#B83A26
Secondary color — градиенты, состояния active, тени
AAA
Black
#020202
Brand color — основной фон, primary текст, контраст
AAA
Paper
#F6F4F1
Neutral color — текст на тёмном фоне, светлый фон секций
AA
Stone
#E4DED2
Neutral color — разделители, границы, тонкие линии
AA
Gradient
135°
Gradient — переход от Red к Red Dark. Для кнопок, карточек, акцентов.
Типографическая система
Typography
& Hierarchy
Display
Bebas Neue
Regular / Display
Font weight: 400
Font size: 60px – 180px
Line height: 0.95
Letter spacing: -0.02em
Use case: Декоративные элементы, большие водяные знаки
Font size: 60px – 180px
Line height: 0.95
Letter spacing: -0.02em
Use case: Декоративные элементы, большие водяные знаки
Creative
Partner
Partner
Headline / Heading
Oswald
Bold / Condensed
Font weight: 700
Font size: 36px – 96px
Line height: 1.05 – 1.1
Letter spacing: -0.02em
Text transform: uppercase
Use case: Заголовки секций, hero-текст, H1-H3
Font size: 36px – 96px
Line height: 1.05 – 1.1
Letter spacing: -0.02em
Text transform: uppercase
Use case: Заголовки секций, hero-текст, H1-H3
Когда вы эксперт,
а приходится быть
ещё маркетологом
а приходится быть
ещё маркетологом
Subheading / Quote
Cormorant Garamond
Light Italic
Font weight: 300
Font size: 20px – 32px
Line height: 1.45
Letter spacing: 0.02em
Style: Italic
Use case: Цитаты, посылы, subheading, ценностное предложение
Font size: 20px – 32px
Line height: 1.45
Letter spacing: 0.02em
Style: Italic
Use case: Цитаты, посылы, subheading, ценностное предложение
"Возвращаю вас к вашему делу. Остальное беру на себя. Система должна работать, пока вы спите."
Body text / Copy
DM Sans
300 – 600
Font weight: 300 / 400 / 500 / 600
Font size: 14px – 18px
Line height: 1.6 – 1.8
Letter spacing: 0.02em – 0.08em
Use case: Body copy, UI, кнопки, метаинформация, navigation
Font size: 14px – 18px
Line height: 1.6 – 1.8
Letter spacing: 0.02em – 0.08em
Use case: Body copy, UI, кнопки, метаинформация, navigation
Я не курс, не наставник и не очередной консультант с методичкой. Я операционный партнёр для эксперта. Захожу внутрь проекта, нахожу точку, где система ломается, и собираю её руками. Мы работаем вместе: вы — экспертиза, я — операционка.
Spacing System
Margin · Padding
· Spacing · Rhythm
Визуальный ритм построен на базе 8px. Все отступы кратны 4. Margin — внешний отступ, Padding — внутренний отступ, Spacing — интервалы между элементами.
4px
8px
16px
24px
32px
48px
64px
Shape Language
Shapes · Forms
· Border Radius
0
Sharp — 0px 15
Rounded — 15px 40
Pill — 40px ∞
Circle — 100% 24
Soft — 24px Компоненты интерфейса
Components
& Interactions
CTA Button — Primary Action
Кнопка действия
Основное действие. Padding 16px 32px. Border-radius 15px. Transition 0.22s ease. Hover — lift + glow. Active — scale(0.98).
Primary CTA
Outline Button — Secondary
Вторичная кнопка
Альтернативное действие. Чёрный контур на светлом фоне. Hover — заливка чёрным, цвет текста Paper.
Ghost Button — Tertiary
Прозрачная кнопка
Третичное действие. Полупрозрачный фон, blur backdrop. Hover — акцентный цвет, усиление border.
Divider Line — Разделитель
Линия-разделитель
Высота 1px. Градиент от transparent к stone к transparent. Используется между секциями.
Section
Badge / Eyebrow Label
Лейбл секции
10px, letter-spacing 0.28em, uppercase, color Red. Используется перед заголовками для текстовой иерархии.
ОПЕРАЦИОННЫЙ ПАРТНЁР
Card — Карточка
Card Component
Padding 24–32px. Border 1px stone. Border-radius 15px. Background с градиентом. Hover — левая красная линия.
Элемент списка
Описание элемента
Overlay System
Hover Effects
· Overlay · Transition
Pattern & Texture
Patterns
· Opacity · Contrast
100%
60%
30%
8%
Design Language Glossary
Terms
& Definitions
Margin
Внешний отступ элемента. Расстояние от границы элемента до соседних элементов.
margin: 24px;
Padding
Внутренний отступ. Расстояние от границы элемента до его содержимого.
padding: 16px 32px;
Spacing
Отступы и интервалы между элементами. Система ритма в дизайне.
gap: 24px;
Headline / Heading
Заголовок. H1-H6. Основной элемент текстовой иерархии.
font-size: clamp(48px, 6vw, 96px)
Subheading
Подзаголовок. Дополняет headline, создаёт промежуточный уровень.
font-size: clamp(20px, 2vw, 32px)
Body text / Copy
Основной текст. Параграфы, описания, статьи. Читаемость превыше всего.
font-size: 16px; line-height: 1.7
CTA Button
Call To Action. Кнопка действия. Основной элемент конверсии.
.btn-primary { background: #D64933 }
Overlay
Наложение поверх изображения. Градиент или цвет для читаемости текста.
background: linear-gradient(0deg, #000, transparent)
Shape
Форма элемента. Border-radius определяет характер: резкий или мягкий.
border-radius: 15px | 9999px
Divider Line
Линия-разделитель. Визуальное разграничение секций или элементов.
height: 1px; background: #E4DED2
Typography
Типографика. Искусство оформления текста. Шрифты, размеры, интервалы.
Oswald + Cormorant + DM Sans
Font Pair
Шрифтовая пара. Сочетание шрифтов для создания контраста и иерархии.
Display + Serif + Sans-serif
Font Weight
Насыщенность шрифта. От Light (300) до Bold (700).
font-weight: 300 | 400 | 600 | 700
Font Size
Размер шрифта. Используем clamp() для адаптивности.
clamp(14px, 1.2vw, 18px)
Line Height / Leading
Межстрочный интервал. Для заголовков — тесный, для текста — свободный.
line-height: 1.1 | 1.6 | 1.8
Letter Spacing / Tracking
Межбуквенный интервал. Увеличиваем для капса и мелкого текста.
letter-spacing: 0.02em | 0.2em
Text Hierarchy
Текстовая иерархия. Размер, вес, цвет создают порядок чтения.
H1 → H2 → Subhead → Body
Visual Hierarchy
Визуальная иерархия. Что видит пользователь первым, вторым, третьим.
Contrast + Size + Position
Balance
Баланс. Распределение визуального веса по композиции.
Grid 1fr 1fr | Asymmetric
Contrast
Контраст. Разница между светом и тьмой, крупным и мелким.
#020202 vs #F6F4F1
Rhythm
Ритм. Повторяющиеся интервалы создают визуальный темп.
8px base × 2, 3, 4, 6, 8
Proximity
Близость элементов. Расстояние объединяет или разделяет группы.
gap: 16px (close) vs 64px (far)
Alignment
Выравнивание. Создаёт порядок и структуру. Left, center, right, justify.
text-align: left | center
Color Palette
Цветовая палитра. Набор фирменных цветов бренда.
Red + Black + Paper + Stone
Primary / Secondary / Accent
Основной, дополнительный, акцентный цвета. Роли в палитре.
Black / Gunmetal / Red
Neutral Colors
Нейтральные цвета. Фоны, текст, разделители без эмоциональной нагрузки.
Paper #F6F4F1 | Stone #E4DED2
Gradient
Градиент. Плавный переход между цветами. Добавляет глубину.
135deg, #D64933 → #B83A26
Opacity
Прозрачность. Используется для второстепенного текста, оверлеев.
opacity: 0.6 | 0.3 | 0.08
Pattern
Паттерн. Повторяющаяся текстура или графика. Фоновый элемент.
Dots | Lines | Grid
Popup / Tooltip
Всплывающее окно и подсказка. Информируют без перегрузки интерфейса.
Hover trigger | Click trigger
Slider / Carousel
Слайдер. Карусель контента. Экономит пространство, показывает серии.
transform: translateX()
Responsive Design
Адаптивный дизайн. Подстраивается под размер экрана. Mobile-first.
@media (max-width: 768px)
Scroll Behavior
Поведение при скролле. Плавность, sticky-элементы, parallax.
scroll-behavior: smooth
Hover Effect
Эффект наведения. Обратная связь для пользователя. Lift, glow, scale.
transform: translateY(-2px)
Transition
Переход. Плавное изменение свойств между состояниями.
transition: all 0.4s cubic-bezier(...)
Animation
Анимация. Движение элементов. Привлекает внимание, объясняет процесс.
@keyframes fadeUp | float
Sticky Element
Липкий элемент. Фиксируется при скролле. Навигация, заголовки.
position: fixed | sticky
