Фолиант.AZ
Читалка и библиотека компании: общие полки, поиск по каталогу, чтение с телефона и из браузера с синхронизацией позиции. Форматы FB2, EPUB, MOBI, PDF и другие. Учётные записи общие с Эфиром — отдельной регистрации нет. Акцент — терракота: цвет кожаного переплёта и тёплой бумаги, спокойный и негромкий, каким и должен быть продукт, в котором люди читают. Ниже — живые компоненты на токенах брендбука. Переключите тему в шапке — всё перекрашивается само.
Полка
Главный экран. Книга опознаётся обложкой, а обложек у файлов из библиотеки почти никогда нет — поэтому обложка рисуется из названия: тёплая подложка, корешок акцентом и инициалы. Полоска под обложкой показывает, что книга начата: продолжать чтение важнее, чем начинать новое.
Продолжить чтение
позиция синхронизируется между телефоном и браузеромЛента прокручивается вбок внутри себя — страница по горизонтали не едет. На телефоне обложки цепляются к краю (scroll-snap), и полка не останавливается на полукнижке.
Карточка книги и прогресс чтения
Слева — что за книга и что с ней делать, справа — где остановились. Процент дочитанности набран моноширинно: это число, за которым следят, и оно не должно прыгать при смене цифр.
Мои книги
по дочитанностиДочитанная книга уходит в зелёный — это успех, а успех во всей экосистеме зелёный. Терракота остаётся у того, что в работе.
Страница читалки
Экран, ради которого всё затевалось. Бумага — свой тёплый тон, отдельный от поверхностей интерфейса, и он есть во всех трёх темах. Текст книги набран нейтральным цветом: акцент здесь имеет право только на буквицу, выделенную цитату и полосу прогресса. Продукт не должен спорить с тем, что в нём читают.
Когда я не могу открыть дверь с первого раза или включаю не ту конфорку, я виню не себя. Я виню дизайн. Хорошая вещь объясняет себя сама: если предмету нужна инструкция на двери, дизайн провалился — и никакая табличка «от себя» этого уже не исправит.
Означаемое — это подсказка, которую вещь даёт о себе сама. Плоская пластина на двери говорит «толкай» без единого слова, а ручка, за которую удобно взяться, зовёт потянуть. Беда начинается там, где вещь говорит одно, а устроена иначе.
Проектировщик редко видит эту беду: он-то знает, как всё работает. Ошибка кажется ему нелепой, а человек за дверью в этот момент чувствует себя глупым — и почти всегда молчит об этом.
Настройки чтения
меняют только бумагу, не интерфейсСтрока держится около 60–70 знаков: длиннее — глаз теряет начало следующей, короче — рвётся ритм. Это правило читалки, а не общий токен брендбука.
Как выглядит бумага
пример набораШрифт с засечками — по умолчанию: в длинном тексте он ведёт строку и меньше утомляет.
Без засечек — для тех, кому так привычнее, и для технических книг с кодом.
Unbounded в книгу не заходит никогда: он для заголовков интерфейса. Внутри бумаги — только читабельные текстовые гарнитуры.
Каталог библиотеки
Общий на компанию: то, что загрузили коллеги, видно всем. Формат файла подписан всегда — от него зависит, откроется ли книга на телефоне. Статус выдачи — семантикой, а не акцентом.
Тяжёлый PDF со сканами честно помечен: он не переверстается под экран телефона. Лучше предупредить до скачивания 86 мегабайт, чем после.
Статусы книги
Путь книги у читателя. Статус — общая семантика экосистемы, а не акцент продукта: «дочитана» должно выглядеть так же, как «готово» в Tasker и «оплачен» в PSA. Терракота достаётся только текущему, активному состоянию.
Успех — зелёный, внимание — медный, ошибка — красный. Эти три цвета общие для всей платформы и берутся из нейтральной базы, а не из палитры продукта.
Кнопки, чипы, форматы
Акцент — только на действия. Никаких градиентов и цветных теней. Радиусы 12 px поля и кнопки, 16 px карточки, 8 px обложка — у книги угол мельче, она маленькая. Высота кнопок и полей не ниже 40 px: Фолиант читают с телефона.
Кнопки
Форматы и статусы
Палитра — терракота
Квадраты живые — переключите тему в шапке, и они перекрасятся. Подписанные хексы — значения светлой темы; для серой и тёмной смотрите tokens.css, там прописаны все три.
Бумага — единственный токен сверх общего набора, и он нужен по делу: поверхность интерфейса (--surface) холодная и белая, а страница книги тёплая. Заводить ради этого новые шрифты или скругления не нужно — только этот один тон.
Типографика
В Фолианте две типографики, и их нельзя смешивать: интерфейс — общий для платформы, книга — своя, настраиваемая читателем.
Интерфейс
как везде на платформеUnbounded · заголовки
Manrope · весь остальной текст интерфейса: названия, кнопки, подписи, меню.
JetBrains Mono · проценты, размеры файлов, номера страниц
Книга
выбирает читательС засечками — по умолчанию: длинный текст читается легче.
Без засечек — альтернатива по вкусу читателя.
Размер, ширина строки и межстрочное расстояние в книге — настройки, а не константы брендбука. Единственное жёсткое правило: строка около 60–70 знаков.
Как не сломать бренд Фолианта
Терракота — на действия и прогресс: кнопка «Читать», полоса дочитанности, корешок обложки, активная полка, суффикс .AZ. Текст книги — всегда нейтральный.
Формат файла подписан всегда и моноширинно: FB2, EPUB, MOBI, PDF. От формата зависит, откроется ли книга на телефоне — это не украшение, а предупреждение.
Тап-таргеты не ниже 40 px, обложки в ленте цепляются к краю. Фолиант читают с телефона в дороге — мимо мелкой кнопки попадают всегда.
Не красить текст книги акцентом и не подставлять Unbounded в бумагу. Акцент внутри страницы имеет право только на буквицу, выделение и прогресс.
Не путать с янтарным BI и с медью ЗБС: терракота краснее и глуше янтаря, а медь у ЗБС вторичная — здесь терракота основная и единственная.
Без градиентов на обложках и кнопках, без теней цветом акцента. Обложка-заглушка — плоская подложка с корешком, а не «объёмная книга».