Что такое Mauna

Лицензия CC BY-SA 4.0

Mauna: дизайн-система для кроссплатформенных писательских интерфейсов. Токены и компоненты рассчитаны на минимальную площадь хрома: панели, тулбары и боковые меню занимают на экране минимум места, необходимого для текущей задачи.

Принципы

Приоритет текста. Панели активны, пока используются. При переключении внимания на письмо контраст панелей снижается, насыщенность снижается, анимация отсутствует.

Плоские поверхности. Заливки плоские. Линии толщиной 0.5px. Без градиентов. Без мягких теней, кроме одного исключения в разделе «Компоненты».

Один акцентный цвет. Акцентный цвет применяется к курсору, активному выделению и одной кнопке действия за раз. Остальные элементы используют оттенки серого и охры.

Раздельная типографика. Документ набран моноширинным шрифтом. Интерфейс набран гуманистическим sans. Различие визуально считывается без чтения подписей.

Цвет

Две базовые темы: светлая и тёмная. Холодный нейтральный фон, один акцентный цвет, минимальный контраст между соседними уровнями поверхности.

Светлая тема

Тёмная тема

Контрасты тёмной темы пересчитаны отдельно от светлой. mauna.text.secondary использует близкие, но не идентичные значения между темами: холодный серый требует небольшой коррекции светлоты для сохранения контраста AA на каждом фоне отдельно.

Кастомизация акцента

mauna.accent это токен. Значение по умолчанию: стальной синий. Пользователь может задать любой hex. Ниже перечислены альтернативы с проверенным контрастом AA на обеих базовых темах.

Типографика

Шрифт документа

Основной шрифт: Courier Prime, лицензия SIL Open Font License 1.1. Встраивается в бинарник без ограничений. Поддерживает кириллицу. Четыре начертания: Regular, Bold, Italic, Bold Italic.

Альтернатива: JetBrains Mono, лицензия Apache License 2.0. Смена шрифта документа применяется без пересборки интерфейса.

Courier Prime шире большинства моно-шрифтов, спроектированных для кода. Ширина колонки документа рассчитана с учётом этого, см. раздел «Ширина колонки».

Шрифт интерфейса

Для тулбара, боковой панели, диалогов и статус-бара используется Inter, лицензия SIL Open Font License 1.1. Используются начертания Regular и Medium. Bold в интерфейсе не используется.

Шкала

mauna.type.caption   12px   line-height 1.3   статус-бар, метаданные
mauna.type.ui        14px   line-height 1.3   тулбар, панели, диалоги
mauna.type.doc       16px   line-height 1.6   тело документа
mauna.type.heading   20px   line-height 1.3   заголовки диалогов, крупные метки
mauna.type.title     28px   line-height 1.25  экран приветствия, пустые состояния

Шаг между уровнями подобран под роли элементов.

Ширина колонки

Документ ограничен по ширине и центрирован. 65-75 символов Courier Prime на строку, около 620px на стандартном DPI.

Пространство и сетка

8-точечная сетка.

mauna.space.xs   4px
mauna.space.sm   8px
mauna.space.md   12px
mauna.space.lg   16px
mauna.space.xl   24px
mauna.space.2xl  32px
mauna.space.3xl  48px

Скругления:

mauna.radius.sm  4px   мелкие элементы: чипы, точки, теги
mauna.radius.lg  8px   карточки, попапы, диалоги

Значения больше 8px не используются.

Движение

Три длительности. Пружины и bounce-эффекты не используются.

mauna.motion.fast   120ms  ease-out       hover, переключатели
mauna.motion.base   200ms  ease-in-out    появление панелей, попапов
mauna.motion.slow   320ms  ease-in-out    переход между режимами

Анимация используется для элементов, требующих объяснения появления на экране. Для остальных случаев анимация не применяется.

Компоненты

Компонентная система реализована как набор функций отрисовки поверх собственного canvas, не как дерево виджетов.

Тулбар

Высота 40px. Фон mauna.bg.chrome. Нижняя граница mauna.line. Иконки без подписей, стиль outline. В фокус-режиме тулбар скрывается через mauna.motion.slow сдвигом вверх за пределы холста.

Боковая панель

Список сцен и заголовков документа. Сворачивается в 0px. Ширина по умолчанию: от 170 до 200px, фиксированная. При изменении размера окна растягивается только холст документа.

Активный пункт списка: заливка mauna.bg.canvas на фоне mauna.bg.chrome, без рамки. Акцентная заливка на пункт списка не используется.

Холст документа

Центрированная колонка фиксированной ширины. Поля учитываются при расчёте макета страницы.

Курсор: вертикальная линия толщиной 2px, цвет mauna.accent, период мигания 530 мс.

Статус-бар

Высота 28px. Текст 12px, цвет mauna.text.secondary. Содержимое: счётчик слов, номер страницы. Интерактивные элементы сложнее ссылки размещаются в тулбаре.

Попап и командная палитра

Появление по mauna.motion.base. Фон mauna.bg.chrome, радиус mauna.radius.lg. Тень: 0 2px 8px rgba(0,0,0,0.08) в светлой теме, вдвое слабее в тёмной. Это единственный компонент системы, использующий тень.

Тема как открытая структура

Токены переопределяются через конфигурационный файл. Структура хранится и читается из TOML или JSON при инициализации темы.

typedef struct {
    MaunaColor bg_canvas;
    MaunaColor bg_chrome;
    MaunaColor text_primary;
    MaunaColor text_secondary;
    MaunaColor line;
    MaunaColor accent;
    MaunaFont  font_doc;
    MaunaFont  font_ui;
    float      line_height_doc;
    float      line_height_ui;
    int        radius_sm;
    int        radius_lg;
} MaunaTheme;

typedef struct {
    MaunaColor bg_canvas;
    MaunaColor bg_chrome;
    MaunaColor text_primary;
    MaunaColor text_secondary;
    MaunaColor line;
    MaunaColor accent;
    MaunaFont  font_doc;
    MaunaFont  font_ui;
    float      line_height_doc;
    float      line_height_ui;
    int        radius_sm;
    int        radius_lg;
} MaunaTheme;

Движок обращается только к структуре MaunaTheme, без привязки к конкретным пресетам. Пресеты Paper, Ink, Sepia, Midnight: заполненные экземпляры структуры.

Ограничение при валидации конфига: контраст текста к фону не ниже WCAG AA, 4.5 к 1 для обычного текста.

Иконография

Outline-глифы без заливки. Толщина линии 1.5px. Размер от 16 до 20px. Без фотореализма, без двухцветных решений. При отсутствии подходящей иконки используется текстовая подпись.

Голос и тон текста интерфейса

Подписи кнопок: повелительное наклонение, короткая форма. Пример: «Сохранить».

Сообщения об ошибках: указание проблемы и действия, без восклицательных знаков. Пример: «Не удалось открыть файл. Проверьте путь».

Формулировки полей ввода: прямое указание, без вводных конструкций вежливости. Пример: «Введите название документа».

Ограничения системы

Стекломорфизм, неоновые обводки, градиентные фоны с подсветкой по краям: не используются.

Второй акцентный цвет одновременно с первым: не используется.

Лицензия

Документ распространяется под лицензией Creative Commons Attribution-ShareAlike 4.0 International, CC BY-SA 4.0.

Документ можно копировать, изменять и распространять в любых целях, включая коммерческие, при условии указания авторства и распространения производных материалов под той же лицензией.

Полный текст лицензии: https://creativecommons.org/licenses/by-sa/4.0/deed.ru

Шрифты, упомянутые в документе, распространяются под собственными лицензиями и не покрываются лицензией CC BY-SA 4.0, применённой к тексту документа. Courier Prime и Inter: SIL Open Font License 1.1. JetBrains Mono: Apache License 2.0.