DESIGN SYSTEM / REFERENCE PAGE
Интерфейс
как инструмент мышления.
Отдельная страница визуального направления для сайта-инструкции. Она фиксирует дизайн и motion-правила, чтобы эти решения не перегружали основную методологию и не терялись внутри общего ТЗ.
1. Финальное визуальное направление
Сочетание редакционного / документационного интерфейса и геометрической абстракции. Сайт должен выглядеть как система знаний: умно, собранно и уверенно, без тяжёлого корпоративного портала.
Цвета
navy / beige / sand / orange-red / white. Основной текст — глубокий тёмно-синий, акценты — оранжево-красные.
navy / beige / sand / orange-red / white. Основной текст — глубокий тёмно-синий, акценты — оранжево-красные.
Форма
Крупные окружности, дуги, эллипсы, тонкие линии, пересечения и графические ноды.
Крупные окружности, дуги, эллипсы, тонкие линии, пересечения и графические ноды.
Фактура
Лёгкая бумажная фактура на фоне, но без шума, который мешает чтению.
Лёгкая бумажная фактура на фоне, но без шума, который мешает чтению.
Типографика
Крупные заголовки, спокойный текст, кодовая маркировка для статусов и разделов.
Крупные заголовки, спокойный текст, кодовая маркировка для статусов и разделов.
Правило ясности: первый экран должен сразу объяснять Research First. Вторичные аудиты, JSON и длинные журналы живут ниже или в раскрывающихся блоках.
2. Программные анимации
Анимация усиливает ощущение продуманной digital-системы, но не превращает документацию в шоу. Используются CSS и JavaScript без тяжёлых видеовставок.
01Hero artОчень лёгкий параллакс слоёв через requestAnimationFrame.
02CardsСдержанный hover: подъём, тень и изменение границы.
03RevealIntersectionObserver и мягкое появление секций.
04NavigationПлавные anchors, active state и аккуратный sticky top bar.
Ограничения
- не замедлять чтение и не отвлекать постоянным движением;
- поддерживать prefers-reduced-motion;
- не использовать тяжёлые canvas-симуляции без причины;
- magnetic hover применять только к главным CTA;
- scroll-анимации запускать один раз или очень мягко.
3. Контроль перед публикацией
[ ] Research First виден на первом экране
[ ] навигация ведёт к крупным смысловым блокам
[ ] контраст и размер текста позволяют спокойно читать
[ ] анимации не мешают содержанию
[ ] reduced-motion режим проверен
[ ] дизайн-решения не смешаны с runtime-логикой