FLATLAY — Мудборд бренда v2.1

FLATLAY

Мудборд бренда v2.1
Стиль: адаптация VEED | Шрифт: Inter | Акцент: Lime #96FF1A
СУТЬ БРЕНДА
Белая галерея с неоново-зелёными кнопками
Спокойные матовые поверхности. Единственный лайм-акцент, запускающий действие. 99% интерфейса ахроматично.
ПАЛИТРА — БРЕНДОВЫЕ (4)
LIME SPARK
#96FF1A
Кнопки, акцент
SPRING WASH
#D6FFA6
Фоны для акцентов
FOREST INK
#083300
Границы на зелёном
MINT MIST
#E6FFC8
Мягкий акцент
Пример — Hero блок

Ретушь украшений без ручной работы

Готовые кадры для каталога и маркетплейсов с помощью ИИ

Попробовать →
разрешение
~2 минна кадр
[Фото до/после]
ПАЛИТРА — НЕЙТРАЛЬНЫЕ (10)
#0C0A09
Carbon
#121212
Onyx
#292A2E
Graphite
#323232
Charcoal
#71737A
Smoke
#4D4D51
Slate
#444446
Ash
#F2F1F0
Mist
#E6E6E7
Fog
#FFFFFF
Paper
ИЕРАРХИЯ ПОВЕРХНОСТЕЙ
L0 · Бумага
#FFFFFF · холст
L1 · Туман
#F2F1F0 · секции
L2 · Весна
#D6FFA6 · бренд
L3 · Оникс
#121212 · полосы
L4 · Графит
#292A2E · верх
Пример — Как это работает (тёмный фон)
Как это работает
Всего три шага
01
Пришлите ссылку
JPG/PNG в облако
02
ИИ ретуширует
Модель обрабатывает кадры
03
Готовые файлы
С теми же названиями
ТИПОГРАФИКА — INTER
Съешь ещё этих мягких
Дисплей · 54px · Regular · -0.05em
Съешь ещё этих мягких
Заголовок · 44px · Medium · -0.04em
Съешь ещё этих мягких французских булок
Подзаголовок · 40px · Regular · -0.025em
Съешь ещё этих мягких французских булок да выпей чаю
Текст · 16px · Regular · -0.016em
НАЗВАНИЕРАЗМЕРИНТЕРЛ.ТРЕКИНГ
дисплей54px0.88-0.05em
заголовок44px0.90-0.04em
подзаголовок40px1.00-0.025em
текст16px1.50-0.016em
подпись11px1.500.01em
АНИМАЦИЯ ПОЯВЛЕНИЯ
1 секунда, expo-out, stagger 0.1s
Все элементы стартуют с opacity: 0. Запуск через двойной requestAnimationFrame. Easing: cubic-bezier(0.22, 1, 0.36, 1)
flFadeUp — текст, кнопки, бейджи
FadeUp
flFadeLeft — правая колонка
FadeLeft
flScaleIn — карточки (осторожно)
ScaleIn
Пример — Stagger (задержка 0.1s между элементами)
Появление элементов по очереди
0s
0.1s
0.2s
0.3s
0.4s
0.5s
0.6s
СВОДКА ПРАВИЛ
Длительность: 1s (не 0.5s, не 2s)
Easing: cubic-bezier(0.22,1,0.36,1) — expo-out
Stagger: animation-delay: 0.1s шаг
Запуск: двойной requestAnimationFrame
Accessibility: prefers-reduced-motion: reduceopacity:1; animation:none
ОТСТУПЫ И ФОРМЫ
Модуль: 4px
Max-width: 1200px
Секция: 80px 24px
Мобилка: 56px 16px
Кнопки: r10px
Карточки: r16px
Пилюли: r9999px
ЕДИНАЯ СЕТКА
Padding 24px — на секции, inner = padding: 0
Десктоп: 80px 24px | inner max-width: 1200px
Мобилка: 56px 16px
Искл: CTA inner = 640px
КОМПОНЕНТЫ
Основная →
Призрак
Пилюля
Обводка
НОВОЕ Категория Активно
Пример — До/После слайдер
ДО
ПОСЛЕ
01
Металл как в жизни
Физически достоверно
02
Камни с игрой света
Настоящие блики
03
Свет и фон — авто
Студийный свет
ПРАВИЛА
Делай / Не делай

ДЕЛАЙ

  • ✓ Лайм только для кнопок
  • ✓ Плотный трекинг (-0.05em)
  • ✓ Радиус: кнопки 10px, карточки 16px
  • ✓ Чередовать свет/тёмную
  • ✓ #0C0A09, не #000
  • ✓ Padding на секции

НЕ ДЕЛАЙ

  • ✗ Лайм на больших фонах
  • ✗ Чистый #000
  • ✗ Объёмные тени
  • ✗ Лишние акценты
  • ✗ Смешивать радиусы
  • ✗ Padding на inner
Пример — Галерея (матричный дождь)
Галерея
Примеры обработки
Пример — CTA блок
Бета-тест

Хотите попробовать?

Приглашаем поучаствовать в закрытом тесте

Запросить доступ →
Пример — О нас
Снимаем. Обучаем. Делимся.

Снимаем рекламу и каталоги для товарных категорий.

16 летв съёмке

Настраиваем и обучаем ИИ в продакшен-команде.

4 годавнедряем ИИ

Делаем инструменты для потоковых студий.

12чна проект
НАПРАВЛЕНИЕ В ИЗОБРАЖЕНИЯХ
Фотографии, не иллюстрации
Реальные люди, тёплый свет, живые позы. Без иллюстраций и 3D.
CSS-ТОКЕНЫ
--color-lime: #96FF1A
--color-carbon: #0C0A09
--color-onyx: #121212
--color-smoke: #71737A
--radius: 10px | 16px | 9999px
--max-width: 1200px | padding: 80px 24px
Пример — Контакты с картой

Бережковская наб., 20с67

м. Киевская · с 11 до 21

Пример — Футер

FLATLAY

Мудборд бренда v2.1 | 2026