PLAYFACES™ proposal

01-overview

время чтения ~3 мин.

Что такое PLAYFACES и чем его делать

Продукт

PLAYFACES™ — шрифтовая студия (type foundry), связанная с KOBRA STUDIO. Основана в 2022 году. Сайт — витрина и магазин собственных шрифтов, плюс портфолио студии.

Каталог и контент

По факту Figma-макета:

  • Минимум 11 шрифтов в каталоге: Repro, Plastinka, Polymer, Typewriter Test, Typewriter_v.1, Rene, Pitcrew, MATISSE, MC-Worms, Crazy Yellow, Form. У Repro анонсированы стили Light и Bold на 2025.
  • 13 кейсов в разделе services: aliexpress, atom, цветной, ecomtech, afisha, picnic afisha, joompay, мхат, myra, polytech, постнаука, worldchess, designworkout.
  • Каждая страница шрифта — длинная редакционная статья: заголовки, параграфы, цитаты, подписи, библиография, сноски, галереи с разными пропорциями. Не «карточка товара», а скорее журнальная публикация.

Структура сайта

Шесть публичных разделов плюс сквозные модалки:

  • / — главная
  • /fonts — каталог шрифтов (судя по Button_fonts_popup — popup из хедера)
  • /fonts/[шрифт] — страница шрифта с состояниями default / spec / trial / buy
  • /services — услуги и кейсы
  • /intro — о студии (формат интервью)
  • /lab — экспериментальная страница (назначение уточняется)
  • /t&c — условия использования (с аккордеоном)
  • Newsletter popup — модалка подписки, срабатывает с любой страницы
  • Menu overlay — меню-оверлей на мобильных

Подробная карта — в 02-sitemap.md.

Ключевые наблюдения

Что упрощает задачу

  • Аккуратная design system: 11 цветов, единый border-radius: 56px (pill-buttons), один shadow-preset, шаг stroke 4px. Система дисциплинированная.
  • Компоненты проработаны: Header, Footer, Menu, 8 вариантов Button, E_mail_popup, Option_bar (лицензионный селектор), Pictures_article (параметрическая галерея) — всё уже в Figma.
  • Собственные шрифты студии используются и в UI: Polymer — кнопки, Typewriter Test / v.1 — body и интерфейс. Не надо подключать Google Fonts.
  • Content-first сайт: без аккаунтов, без dashboards, без хитрых state-машин приложения.

Что усложняет

  • Много контента: ≈11 статей про шрифты × по 30–50 блоков + 13 кейсов × галереи. Сотни блоков в CMS.
  • Лицензионный виджет Option_bar найден в макете LAB — это полноценная покупка с тарифами (desktop/web/app × users × regular/extended), а не «форма заявки». См. 03-packages.md, пакет Full.
  • Контент в макете русский, а в хедере есть переключатель EN — задумана мультиязычность, но переводов ещё нет.
  • Дизайн не закрыт: три canvas’а помечены 🟡 (WIP), на странице PLASTINKA в Credits стоит Name: REPRO (template drift), в интро services стоит плейсхолдер “WOULD BE NICE TO ADD HERE SOME CALL TO ACTION YO”. Нормальное состояние середины проекта — но стартовать в код можно только после финала макетов.
  • В дизайне до 10 брейкпоинтов (375, 390, 430, 712, 744, 1024, 1280, 1512, 1728, 2560). Честно верстать все — дорого и не нужно. Решение — в 05-adaptive-strategy.md.

Технический подход

  • Стек российский, деплой на Timeweb Cloud (регистрация на стороне PlayFaces), домен playfaces.org уже есть. Платежи через YooKassa, аналитика — Яндекс.Метрика. Stripe/Vercel/GA исключены — санкционные зависимости создают риск на годы вперёд.
  • Собственный scale-адаптив вместо 10 брейкпоинтов: верстаются mobile и desktop, между ними всё масштабируется плавно. Экономит ~30% времени вёрстки без потери качества.
  • Content-first CMS: предпочтительно PayloadCMS (self-host на Timeweb) — блочный редактор, полная автономия, всё в РФ. Альтернативы — Directus (тоже self-host) или Sanity (если устраивает облако США). Подробнее — в internal/01-tech-stack.md.
  • Итеративный запуск: стартуем с минимального MVP, потом пристраиваем buy-flow, больше шрифтов, больше кейсов. Три пакета — в 03-packages.md.