01 / Палитра

Тёмная база

Четыре ступени графита и три ступени костяного света. Базовый --ink-0 уходит чуть в синеву — это нейтральная пустота, не «люксовый» чёрный.

--ink-0
Deep Void
#0a0c10
--ink-1
Graphite
#11141a
--ink-2
Charcoal
#1a1e26
--ink-3
Slate
#2a2f3a
--ink-4
Steel
#3d4351
--bone
Bone
#ebe8df
--bone-dim
Bone Dim
#a8a59a
--bone-low
Bone Low
#6e6c64
--cool
Cool Platinum
#c8d0dc
--err
Err
#b85a4a
02 / Кейсы

Палитры кейсов

У каждого кейса своя пара: основной (background) и текст. Акцент задаётся холодным платиновым тоном — не золото, не охра. Палитры сэмплированы из реальных кадров.

01 / 07
Gentle Monster
--case-gentle-bg
#e8e5e1
--case-gentle-ink
#0a0a0a
--case-gentle-sub
#8a96a4
02 / 07
Hublot
--case-hublot-bg
#0a1428
--case-hublot-ink
#a8b4c8
--case-hublot-sub
#3d5577
03 / 07
ЦУМ
--case-tsum-bg
#3a1f15
--case-tsum-ink
#d4d8de
--case-tsum-sub
#8898a8
04 / 07
Гоша Рубчинский
--case-gosha-bg
#3d3833
--case-gosha-ink
#a8a098
--case-gosha-sub
#7088a0
05 / 07
Edomo
--case-edomo-bg
#1a1c22
--case-edomo-ink
#d4d8de
--case-edomo-sub
#7088a0
06 / 07
Аутлеты
--case-outlet-bg
#1a1a1a
--case-outlet-ink
#d4d8de
--case-outlet-sub
#8898a8
07 / 07
Ancuta Sarca
--case-ancuta-bg
#2a3038
--case-ancuta-ink
#d4d8de
--case-ancuta-sub
#7088a0
03 / Типографика

Geometric sans · Inter · Mono

Заголовки — geometric sans (PP Neue Montreal с фоллбэками на Aeonik / Söhne / Inter), вес 500, минусовый трекинг. Body — Inter regular. Технические подписи и индексы — JetBrains Mono в нижнем регистре.

Display XLSans · 500
clamp(56, 12vw, 128)
lh 0.96 · -0.035em
katama
ai-imagery
H1Sans · 500
clamp(40, 8vw, 80)
lh 1.02 · -0.03em
AI-съёмки для имиджевых брендов
H2Sans · 500
clamp(28, 5vw, 48)
lh 1.06 · -0.025em
Авторская работа с применением AI
H3Inter · 500
clamp(22, 3vw, 28)
lh 1.2
Семь кейсов. Восемь карточек на сфере.
Body LInter · 400
18px / lh 1.5
Тёмная база — не пресный чёрный, а оттенки графита и угля. Под каждый кейс — своя пара цветов, которая подмешивается в фон при просмотре. Тон спокойный, технический, имиджевый.
BodyInter · 400
15px / lh 1.55
KATAMA делает AI-съёмки и AI-дизайн для крупных брендов: Gentle Monster, Hublot, ЦУМ, Гоша Рубчинский, Edomo, Аутлеты, ANCUTA SARCA.
CaptionInter · 500 · upper
13px / 0.04em
Москва · 2024 · AI photography
Mono SJetBrains Mono · 500
12px · 0.08em · lower
ai · photo · motion · design
IndexJetBrains Mono · 500
14px · 0.12em
01 / 07
04 / Спейсинг

Спейсинг

База 4, шкала 1 — 10. Токены везде, кроме произвольной композиции медиа. Mobile sections — sp-7, desktop hero — sp-10.

--sp-1 · 4
--sp-2 · 8
--sp-3 · 12
--sp-4 · 16
--sp-5 · 24
--sp-6 · 32
--sp-7 · 48
--sp-8 · 64
--sp-9 · 96
--sp-10 · 128
05 / Радиусы

Радиусы

Карточки на сфере — острые с микроскруглением (2px). UI-элементы — 4–12px. 999 — только для пилюли-табов и кружков аватаров.

--r-1
2px · карточка-пин
--r-2
4px · стандарт
--r-3
8px · кнопка
--r-4
12px · модал
--r-pill
999 · pill
06 / Кнопки

Кнопки

Три уровня. Primary — костяной заполненный (главное действие). Secondary — outline на тёмном. Ghost — стрелочный текст-CTA. Hover на primary осветляется до чистого белого.

Primary — default / hover / active / disabled
Secondary — default / hover / disabled
Ghost — текстовый CTA
Следующий кейс Следующий кейс Следующий кейс
07 / Поля

Поля

Underline-only, без рамок. Line становится сплошной костяной на focus; красная — error, зелёная — success.

Состояния
Для связи и брифа
Для связи и брифа
Проверьте домен
Принято
08 / Карточка на сфере

Карточки на сфере

На пине — только превью, без текста. На фокусе — рамка усиливается до 1.5px костяной, появляется индекс и название карточкой снизу. Без bloom и тёплых свечений.

Idle / Hover / Focus (с подсветкой)
8 пинов — все кейсы + меню
KATAMA
about
09 / Loaders

Loaders

Один — линия под лого, пока грузится сфера. Второй — кружок в углу фокусной карточки, пока подгружается видео.

Preloader сферы
katama
Загружаем сферу
68%
Video loader — в углу фокусной карточки
VIDEO · 00:14
Фокусная карточка играет видео в loop. Преподгрузка показывается кружком в верхнем правом углу. Не-фокус играет статикой или GIF.
Иконка меню
44 × 44 · hover — стенка костяная · клик — открывается оверлей
Индекс кейса
01 / 07 04 / 07 07 / 07
10 / Эффекты

Эффекты

Применяются через @react-three/postprocessing на сцене сферы. Барely noticeable: грейн ≤ 4.5%, аберрация ≤ 1px, DoF мягкий. Без bloom и тёплых glow.

chromatic aberration · 1px
depth of field · soft
film grain · 4.5%
11 / Motion · заметки для R3F

Motion

Не код — заметки для разработки сферы в R3F. Финальные таймлайны делаем на этапе сборки.

Auto-rotate (idle)
Ось Y, скорость 0.06 rad/s. Через 3.5с бездействия после drag — снова включается с easing-in (1.2с).
Drag
Свободный по обеим осям. Инерция: damping 0.92, остановка ~2.4с после отпускания. Без ограничений угла — сфера может крутиться насквозь.
Фокус карточки (hover / центр)
scale 1.0 → 1.18 за 320ms · cubic-bezier(0.22, 1, 0.36, 1). Соседние карточки → opacity 0.45, blur 4px. Появляется индекс и название — fade-up 16px / 220ms.
Провал в кейс
Камера летит к карточке, она раскрывается на весь экран за 680ms (cubic-bezier(0.65, 0, 0.35, 1)). Фон параллельно палитруется в цвета кейса (palette crossfade 800ms). Сфера улетает за камеру, не исчезает резко.
Возврат к сфере
Обратное движение. 520ms. Сфера слегка вибрирует на возврате (1.05 → 1.0 scale).