Бумага, тушь и сезонный слой поверх. Все компоненты берут цвет из токенов, поэтому смена сезона перекрашивает весь сайт, включая Ai.
Идея
Касанэ — наслоение одежд, при котором цвет каждого слоя виден по краю. Сайт устроен так же. Страница — верхний слой, слева всегда видны края трёх нижних: это эри. Секции ложатся друг на друга листами, у каждого листа виден край из трёх полос — хэм. На первом экране поверх свадебного кадра лежат листы васи, при прокрутке они раздвигаются, как сёдзи. Форматы при прокрутке ложатся друг на друга, оставляя цветные края. В шапке — текущий из 24 сезонов японского календаря. Фото обрамлены сдвинутыми слоями цвета — касанэ-рамка. Скролл главной проходит по слоям сезона по порядку: бумага, первый слой, второй слой, глубокий слой, тушь. Читателю это не объясняется.
Базовые токены
Shironeri--paper · #F4EFE6
Sumi--sumi · #211C16
Ai--ai · по сезону
Wakakusa--wakakusa · #9AA08A
Тушь разбавленная--ink-2 · #5A5246
Линия--line · #D8CFBF
Ночь · куро-уруси: чёрный лак #14100D вместо серого, текст цвета гофуна #ECE4D6, линии старого золота #6B5836. Ai ночью светлеет в тон сезона — осенью уходит в золото кутибы. Тема следует настройке устройства, в шапке есть переключатель «день — ночь».
Сезонные слои
Сезон
Слой 1 · подложка
Слой 2 · акцент
Слой 3 · глубина
Ai
Весна
Усубэни#E9CDC6
Моэги#B4C397
Вакатакэ#6E8458
Ai#3B5870
Лето
Гофун#E7ECEA
Камэнодзоки#A3BFCB
Кон-ай#2A4566
Ai#223A5E
Осень
Кутиба#D6B36C
Бэнигара#A5523A
Токива#3E5642
Ai#2E4257
Зима
Сиро#EEECE7
Гиннэдзуми#B3B4B3
Эбидзомэ#6E3F55
Ai#353C55
Подложки: слой 1 × 30% с бумагой, слой 2 × 20%. Глубокий лист — затемнённый слой 3. Сезон ставится по дате, страница сезона фиксирует свой слой.
Одна сетка — два слоя
Экран рубрики в весеннем и осеннем слоях. Вёрстка идентична, меняются только токены.
Shippori Mincho не содержит кириллицы, поэтому им набран только латинский знак «kasane». Заголовки — Cormorant Garamond 400–500 с курсивом для акцентов. Текст статей — Literata Light 18 / 1,78, колонка до 64 знаков. Интерфейс — Manrope.
Display · 96 / 1.02 · 200Тихий день
H1 · 80 / 1.04 · 200Роспись у воды
H2 · 58 / 1.08 · 300Три слоя тёплого
H3 · 29 / 1.2 · 400Клятвы своими словами
Цитата · 48 italic 200«Этот час все вспоминали»
Текст статьи · 18.5 / 1.78Двенадцать — число, при котором ещё можно поговорить со всеми.
Лид · 21 / 1.6Вторник, одиннадцать человек и длинный стол.
Татэгаки · 12.5 +0.18emКамерно · октябрь
Сетка и ма
Колонка 56 px для вертикальных подписей + 12 колонок, межколонник 24 px, поля 18–64 px, контейнер 1320 px. Лист — 72–150 px воздуха сверху и снизу. Главный элемент экрана занимает 5–7 колонок, остальное — пауза.
В этой рубрике пока тихо. Первые тексты выйдут в четверг.
Успех
Спасибо. Первое письмо придёт в четверг утром.
Движение
Фото проявляется как тушь в воде: размытие 14 px и прозрачность уходят за 2,4 с. Затем из-под фото выходят два слоя цвета — с задержкой 0,9 и 1,25 с. Заголовок и лид поднимаются на 18 px с шагом 0,25 с. Смена сезона перетекает 1,4 с. Кривая — ease-out-expo. При «уменьшить движение» всё статично.
Роль блоков в воронке
Пометки на макете включаются в подвале: «Роли блоков в воронке».
Тихий первый экранВход
Одна история и один снимок. Доверие к голосу.
Сейчас — сезонУдержание
Материалы по дате, цвет слоя меняется сам.
ФорматыСегментация
Читатель выбирает масштаб и уходит в страницу формата.
Лента журналаГлубина
Время на сайте, переходы между рубриками.
МестоМонетизация · слот
Каталог площадок, на старте — лист ожидания.
КольцаПартнёр · BENDES
Гид, затем кураторская карточка.
Спокойный планКонверсия
Дата + формат → план → Telegram-бот.
ПодпискаВозврат
Письмо раз в неделю и Telegram.
Мобильная версия
Та же система, собранная под палец. Эри сужается до 5 px. Под шапкой — лента рубрик со свайпом. Вертикальные подписи становятся строчными метками. Внизу — четыре раздела: Журнал, Форматы, Сезоны, План. Карусели мест и «Читайте дальше» листаются свайпом. Меню открывается шторкой справа, у её края тоже видны три слоя.
