ЛКР — Optical Art Brand System

Брендбук 2025 · Optical Art Design System

ЛАБОРА ТОРИЯ РАЗРАБОТКИ

Фирменный стиль в духе оптического арта.
Визуальные иллюзии · Паттерны · ИИ-разработка · 2025

✦ Op Art ✦ Bridget Riley ✦ Vasarely ✦ ИИ-разработка ✦ Kinetic Visual

01 — Философия бренда

DNA · Оптическая Иллюзия

Оптический арт — это искусство заставить глаз усомниться в реальности. Лаборатория КР делает то же с бизнесом: превращает привычные форматы в трансформационные продукты, которые сложно игнорировать.

Интеллект

15 лет экспертизы. Продюсерский подход. Авторская методология трансформации.

15 лет стажа

Энергия

Дофаминовый визуал. Идеи, которые невозможно игнорировать. ИИ-скорость.

ИИ-разработка

Трансформация

От концепции до физического тиража. Смыслы, упакованные в продукты.

Под ключ

Tone of Voice

Уверенный Говорим как эксперт, не как продавец

Прямой Без воды. Конкретные результаты

Вдохновляющий Зажигаем идеи

Технологичный ИИ как инструмент

Позиционирование

"Разработка трансформационных продуктов, игр и бренд-контента с помощью ИИ"

Студия, превращающая смыслы в физические продукты. Психологи, HR и бренды доверяют нам упаковку идей.

Настольные игры МАК-карты ИИ-визуал Маскоты Стратегии

02 — Цветовая система

Dopamine × Op Art

Высококонтрастная палитра строится на двух полюсах: абсолютный чёрный и дофаминовые акценты. Белый входит только как оп-арт контраст в паттернах.

Акцентные цвета

Electric Violet

#7B2FFF

Основной акцент. Кнопки, иконки, rings.

Hot Magenta

#FF2D87

Эмоциональный акцент. CTA, хайлайты.

Cyber Yellow

#FFE500

Энергия. CTA, маркеры, акценты.

Neon Mint

#00D68F

Успех, live-индикаторы.

Plasma Orange

#FF6B2B

Тепло, творчество.

Electric Cyan

#00E5FF

Технологичность, данные.

Op Black

#0A0A0A

Основной фон. Абсолютная глубина.

Op White

#F8F8F0

Только в B&W паттернах и текстах.

Градиенты

Hero Gradient

Violet → Magenta → Yellow

Заголовки, логотип, числа

Primary

Violet → Magenta

Кнопки, icon boxes

Tech

Mint → Cyan

ИИ-блоки, data-визуализация

Animated Full

Все 4 цвета · анимированный

Hero-текст, акцентные слова

Op Art Stripe

Violet + Magenta + Black

Декоративные полосы, разделители

Halftone Black

Op Art · Dot Pattern

Фон секций, карточек

CSS-переменные

 /* === Op Art Dopamine System — Лаборатория КР === */
:root {
  /* Accent Palette */ --op-violet:  #7B2FFF;
  --op-magenta: #FF2D87;
  --op-yellow:  #FFE500;
  --op-mint:    #00D68F;
  --op-orange:  #FF6B2B;
  --op-cyan:    #00E5FF;

  /* Op Art Base */ --op-black:   #0A0A0A;
  --op-white:   #F8F8F0;

  /* Key Gradients */ --grad-hero:   linear-gradient(135deg, #7B2FFF, #FF2D87, #FFE500);
  --grad-anim:   linear-gradient(-45deg, #7B2FFF, #FF2D87, #FFE500, #00D68F);
  --grad-tech:   linear-gradient(135deg, #00D68F, #00E5FF);

  /* Op Art Patterns */ --pat-stripe: repeating-linear-gradient(45deg,
    #7B2FFF 0px,#7B2FFF 8px, #0A0A0A 8px,#0A0A0A 16px,
    #FF2D87 16px,#FF2D87 24px, #0A0A0A 24px,#0A0A0A 32px);
  --pat-dot:    radial-gradient(circle, rgba(255,255,255,0.18) 1.5px, transparent 1.5px);
  --pat-check:  repeating-conic-gradient(#0A0A0A 0% 25%, #F8F8F0 0% 50%);
}
    

03 — Типографика

Font System

Три шрифта — три роли. Оп-арт добавляет четвёртый приём: outline-текст как паттерн.

Display · Syne 800 · Hero Gradient

Syne

Разработка трансформационных продуктов

Начертания: 400–800

Применение: H1, H2, логотип, числа

Spacing: –0.035em

Display · Syne 800 · Op Art Outline — уникальный приём

OUTLINE

ТЕКСТ

Outline-текст — фирменный оп-арт приём. Используется для вторичных заголовков, фоновых декоративных надписей, overlay-слоёв. CSS: -webkit-text-stroke: 1.5px rgba(255,255,255,0.4);

Body · Space Grotesk · Основной текст

Space Grotesk

От концепции и методологии до физического тиража. Помогаю психологам, HR и брендам упаковывать смыслы в продукты, которые покупают.

Начертания: 300–700

Применение: Текст, H3–H4, кнопки

Line-height: 1.75

UI · Inter · Метки и навигация

INTER

ПРОДЮСЕР С 15-ЛЕТНИМ СТАЖЕМ · ОП-АРТ ДИЗАЙН · АВТОРСКАЯ МЕТОДОЛОГИЯ

Начертания: 300–600

Применение: Теги, лейблы, nav, мета

Letter-spacing: 0.12–0.24em

Шкала типографики

Уровень	Размер	Вес	Шрифт	Эффект	Где
Hero XL	72–112px	800	Syne	Gradient fill	Cover заголовок
Hero Outline	60–96px	800	Syne	-webkit-text-stroke	Декоративный overlay
Display LG	48–64px	800	Syne	Shadow stagger	H1 секций
Heading	32–40px	700	Syne	White / Gradient	H2
Subheading	20–24px	600	Space Grotesk	White 80%	H3
Body LG	18px	400	Space Grotesk	White 55%	Hero sub
Body MD	15–16px	400	Space Grotesk	White 50%	Основной текст
Label	9–11px	700	Inter	White 30–40%	Теги, секция-лейблы

04 — Оп-арт паттерны

Visual Patterns

Паттерны — главный визуальный язык бренда. Вдохновение: Бриджет Райли, Виктор Вазарели, Ричард Аньюскевич. Каждый паттерн несёт смысловую нагрузку.

B&W Stripe · Движение

Diag Stripe · Динамика

Checker · Иллюзия глубины

Halftone · Цифровая точка

Concentric · Фокус

Color Stripe · Дофамин

Grid · Структура

Moiré · Вибрация

Смысловая карта паттернов

Когда использовать

Горизонтальные полосы → процессы, этапы

Шахматка → дуальность, выбор, контраст

Точки → данные, масштаб, экосистема

Цветные полосы → творчество, многообразие

Правила применения

→ Паттерн всегда на заднем плане, текст поверх

→ Opacity паттерна: 5–15% в фоне, 60–80% в декоре

→ Максимум 1 паттерн на один визуальный блок

→ B&W паттерн + цветной текст = максимальный контраст

→ Анимированные паттерны только в hero и декоре

→ Concentric rings → всегда медленная анимация (18–25s)

SVG Op-Art элементы

Target

Vortex

Wheel

Grid Wave

Diamond

05 — UI Компоненты

Component Library

Иконки — Op Art Style

🎲

🎨

⚡

🤖

🚀

🔮

🧠

✦

Иконки в скруглённых прямоугольниках со stripe-паттерном внутри. Hover: rotate(10deg) + scale(1.1).

Кнопки

Обсудить проект → Рассчитать стоимость ✦ Смотреть кейс Op Art CTA

Primary SM Yellow SM Outline SM

Теги

Настольные игры МАК-карты ИИ-разработка Маскоты Бренд-стратегия Оп-арт Визуальные иллюзии

Карточки услуг

Флагман

Настольные игры и МАК-карты

Методология, дизайн, подготовка к печати. Под ключ.

Популярно

Маскоты и персонажи

Бренд-герои с помощью нейросетей для соцсетей и сайтов.

ИИ-разработка

ИИ-контент и стратегии

Визуальные концепты, мультфильмы, иллюстрации без огромных бюджетов.

Процесс — Op Art Infographic

Брифинг

Поиск смыслов. Глубинный анализ задачи и аудитории.

→

Прототип

Создание прототипа и ИИ-визуала. Концепт.

→

Производство

Верстка, подготовка к производству, тираж.

Числовые показатели

лет продюсерского стажа

продуктов «Живая Среда»

3×

скорость с ИИ

∞

возможностей

Форма заявки

Воплотим ваш продукт?

Оставьте заявку — обсудим этапы, сроки и стоимость.

Ваше имя и ссылка на соцсеть / канал

Ниша / Кто ваша аудитория?

В чём суть продукта?

Бюджет на разработку

Рассчитать стоимость разработки ✦

06 — Логотип

Logo System

Три варианта. Анимированная подложка — фирменный оп-арт приём.

Основной (тёмный фон)

ЛАБОРАТОРИЯ КР

AI-powered creative studio

Op Art (полный)

ЛАБОРАТОРИЯ КР

AI-powered creative studio

Знак / Аватар

Минимум: 32×32px

07 — Правила

DO & DON'T

✓ Делайте так

✓ Чёрный (#0A0A0A) — единственный основной фон
✓ Паттерны только поверх чёрного, opacity 5–15%
✓ SVG-элементы с медленной анимацией (12–25s)
✓ Outline-текст как декоративный приём на фоне
✓ Stripe-паттерн в разделителях nav и секций
✓ Concentric rings = фокус внимания на блоке
✓ Gradient text только для ключевых слов
✓ Hover иконок: rotate + scale, плавно (0.4s)

✗ Не делайте

✗ Белый или светлый фон как основной
✗ Быстрые анимации (быстрее 4s) в паттернах
✗ Более 2 движущихся паттернов в одной секции
✗ Весь текст outline — только декоративные слова
✗ Цветной фон без чёрного контраста
✗ Смешивать более 4 акцентных цветов в одном блоке
✗ Шрифты без letter-spacing на Display уровне
✗ Паттерн как основа без затемняющего overlay

Отступы и скругления

Токен	Значение	Применение
XS	8px	Иконка + текст, gap тегов
SM	16px	Внутри карточек, строки форм
MD	32px	Между карточками, секции
LG	64px	Вертикальные блоки
XL	120px	Padding секции (desktop)
r-sm	6px	Теги, мелкие элементы
r-md	12px	Инпуты, код-блоки
r-lg	20px	Карточки
r-pill	100px	Кнопки, badges

08 — Структура лендинга

Hero

Concentric rings BG + spinning wheels + gradient title + outline subtitle

ringsgradient h1outline h2

Услуги

Halftone bg + 3 карточки с SVG op-art иконками. Hover: translateY.

halftonesvg icons

Кейс «Живая Среда»

Grid bg + число «13» hero gradient + фото продуктов + stat cards

grid bgstat 13

Процесс

Concentric bg subtle + 3 карточки + op-art arrows + num badges

flowbadges

Обо мне

Диагональные полосы bg + фото + stat cards (15, 13) + spinning ring декор

stripesstats

Форма заявки

Halftone bg + 4 поля + target SVG + btn-yellow CTA + budget select

4 fieldsyellow CTAbudget