Заголовок, короткий текст, факт или вывод. Здесь читатель понимает, зачем двигаться дальше.
K24 / strict tech orange-blue / v3
Одна система.
Текст + графика.
Дизайн-система описывает не только цвета и кнопки. Она задаёт, как сайт собирается из ячеек, где появляется смысл, где действие, а где — пауза и процедурная графика.
DS-COLOR-07: на светлой поверхности основной текст — глубокий сине-графитовый #17283a. Чистый чёрный и белый текст на светлом фоне не используются.
01 / Composition
Страница как
сетка ячеек.
Каждый экран собирается из повторяемых модулей. Ячейка всегда имеет роль: содержание, действие, параметр, графика или воздух.
Один ясный primary CTA без конкурирующих сигналов.
Процедурный объект поддерживает содержание и не заменяет его.
GRID_12 / GAP_24 / SIGNAL_ORANGE
Статус, индекс, метрика или параметр.
Не каждая ячейка должна быть заполнена. Воздух управляет ритмом.
02 / Graphics
Куб — это
модульный сигнал.
Графика строится как инженерный объект: базовая форма, разрезание на полосы, контролируемая хаотичность, выдавливание и локальное движение.
CUBE_FRAGMENT / 01
01 / ОсноваКубическая форма в фиксированной камере. Оранжевые рёбра, тёмные матовые грани.
02 / НарезкаПолосы 4–12 px, разный шаг и длина. Хаос ограничен общей осью и сеткой.
03 / ВыдавливаниеСмещение фрагментов по нормали на 8–32 px. Не разрушать читаемый силуэт.
04 / MotionОдна доминантная операция: build, split или drift. Цикл 4–10 секунд.
05 / ОграниченияБез glow, glossy-бликов, случайных градиентов и постоянного движения всего экрана.
Текст → графикаПосле смыслового блока, когда графика помогает объяснить структуру.
Графика → текстВ hero, если объект создаёт вход в тему, а не отвлекает от неё.
Графика вместо шумаПустая ячейка может получить один сильный объект вместо пяти декораций.
03 / Social content
Форматы
постов.
Пост начинается не с красивой фразы, а с задачи. Формат определяет логику, длину и допустимый призыв к действию.
Экспертный пост
Объяснить сложное простым языком.
СкелетТезис → 2–3 аргумента → практический вывод → мягкий CTA.
Кейс / результат
Показать путь от проблемы к изменению.
СкелетКонтекст → решение → измеримый результат → чему научились.
Разбор / наблюдение
Дать аудитории полезный способ смотреть на тему.
СкелетНаблюдение → неожиданная связь → пример → вопрос читателю.
Вовлекающий пост
Запустить разговор, а не просто собрать лайки.
СкелетСитуация → выбор или конфликт → позиция бренда → открытый вопрос.
Общие правила постаОдин пост — одна мысль.Факты не выдумываются.Тон бренда сохраняется.CTA соответствует цели.Эмодзи и хэштеги только по входным правилам.
04 / Editorial pages
Статья как
длинный маршрут.
Большие материалы используют ту же сетку, но дают читателю навигацию, доказательства и ритм между смысловыми блоками.
ARTICLE / HEROЗаголовок и обещание результата
ARTICLE / BODYАбзац 55–75 знаков в строке
Короткие смысловые блоки, подзаголовки и факты. Один экран — один доминирующий переход.
ARTICLE / QUOTEВыносной тезис
ON THIS PAGE01 / Контекст02 / Механика03 / Пример04 / Вывод
DATA PANEL4–7
смысловых секций в базовой статье
ВходТема, поисковый вопрос, факты, аудитория и желаемый результат.
РитмHero → навигация → текст → графический модуль → вывод → следующий шаг.
ВыходЧитатель получает ответ, может проверить доказательства и понимает действие.
05 / Preflight
Если убрать графику, страница всё равно должна быть понятной.
Графический модуль усиливает структуру, а не маскирует отсутствие содержания.