Дизайн-система MTRNTV

Бренды системы

Шесть брендов. У каждого — свой знак, свой фирменный цвет и свой набор файлов; всё остальное общее. Кнопка в карточке показывает страницу в этом бренде: перекрашивается вся система, включая примеры элементов ниже. То же самое делает выбор бренда в боковой панели.

Aiatos

командная работа и база знаний

Показать систему в этом бренде

Знак

Лигатура «ai»: хвост «a» переходит в «i», точка живёт отдельным кругом. Перерисована в кривые с фирменного растра, присланного владельцем.

Надписи

Знак без надписи. Растр-первоисточник лежит ниже последним файлом — он единственный не SVG.

Цвет

Бирюзовый взят из самого растра. Второго цвета у бренда нет.

Надпись на главной кнопке

Чёрная — на этом цвете она читается лучше всего.

Основной#00d0f0

Под курсором#00afca

При нажатии#008da3

Рамка#a8f3ff

Подложка#d6faff

Лёгкая подложка#ebfcff

Второго цвета нет—

Важно. Единственный знак, полученный трассировкой картинки. Внешний контур и просветы между штрихами лежат в одном пути с fill-rule="evenodd" — разными путями просветы просто закрашиваются поверх.

Файлы4

В плашкекак в интерфейсе

СкачатьКопировать

Знакчёрный, прозрачный фон

СкачатьКопировать

Знак в цветефирменным цветом

СкачатьКопировать

Оригинал от брендарастр, с которого перерисован знак

Скачать

Как добавить бренд

Новому бренду нужны только два набора значений — семь оттенков фирменного цвета и свой знак. Размеры, отступы, скругления, элементы и правила остаются общими, поэтому интерфейс собирается тот же, а выглядит по-своему.

Серая шкала

Тринадцать ступеней от белого до почти чёрного. Из них строятся фоны, границы и текст. В тёмном оформлении шкала разворачивается целиком, поэтому все назначения переводятся сами.

Назначения — то, что пишут в элементах

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

Поля и кнопки: заливка вместо рамки

Кнопки, поля и списки — это серые прямоугольники, а не белые в тонкой обводке. Под них выделены отдельные назначения, потому что цвет настоящих границ трогать нельзя: он же держит рамки окон, линейку над письмом и разделители панелей.

Сигнальные цвета

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

Размеры текста

У каждого размера своя работа. Размера «просто побольше» в системе нет: если подходящий не нашёлся, значит элемент делает что-то новое.

Высоты кнопок и полей

Четыре значения на весь продукт. Соседние элементы в одном ряду обязаны быть одной высоты.

Кнопка

Четыре вида: главная, обычная, контурная и опасная. Обычная держится на серой заливке, контурная — на рамке. Под курсором все четыре ведут себя одинаково: заливка становится контрастной — в светлом оформлении чёрной, в тёмном белой, — а у опасной красной.

<!-- Vue -->
<UiButton variant="primary" icon="plus" @click="create">Создать</UiButton>
<UiButton variant="outline" size="sm" :loading="saving">Сохранить</UiButton>

<!-- Чистый HTML при переносе -->
<button class="ui-btn primary" type="button">
  <svg width="15" height="15">…</svg>
  <span>Создать</span>
</button>

Поле ввода

Глазок для показа пароля встроен внутрь. Подпись, подсказка и текст ошибки связаны с полем по-настоящему: по клику на подпись курсор встаёт в поле, а программа чтения с экрана называет поле по имени.

<UiFormField label="Email" :error="errors.email" required v-slot="{ id, describedBy, invalid }">
  <UiInput :id="id" v-model="email" type="email" icon="mail"
           :described-by="describedBy" :invalid="invalid" />
</UiFormField>

Выпадающий список, число и строка свойства

Три элемента панели свойств. У списка своя стрелка, а не браузерная — иначе он остаётся светлым в тёмном оформлении. В числовом поле буква слева и единица справа стоят рядом с цифрами, а не поверх них, поэтому число не обрезается на узкой панели.

Отступы по сторонам

Отступы задаются крестом: сторону показывает положение поля, поэтому подписи не нужны и всё помещается на узкой панели. Скрепка в середине включает связывание — правишь левый отступ, правый меняется следом.

Переключатель режимов

Один переключатель на весь продукт: и выравнивание текста, и вкладки панели, и режимы просмотра. Внутри настоящие радиокнопки, поэтому по группе можно ходить стрелками с клавиатуры.

Окно поверх экрана

Закрывается по Escape, не выпускает курсор клавиатуры наружу, возвращает его на место при закрытии и не даёт странице прокручиваться под собой. Своих окон в продукте не заводят — берут это.

Общий каркас

Слева боковая панель фиксированной ширины, справа рабочая область. Панель прижата к верху и низу окна и прокручивается отдельно от содержимого.

Что в боковой панели

Сверху вниз, всегда в этом порядке.

Ширина боковой панели

Одна на все экраны — 280 пикселей. Столько нужно картинкам раскладок в редакторе, и столько же хватает панели свойств, чтобы числа в полях не обрезались.

/* Глобальные стили и дизайн-токены оболочки.
   Порт <style> из макета Claude Design (design/), значения сверены с design/README.md.
   ПРАВИЛО: новый код пишет var(--…), хардкод цветов и размеров не добавляем. */
:root {
  /* --- нейтральная шкала (zinc) --- */
  --c-n-0: #ffffff;
  --c-n-25: #fafafb;
  --c-n-50: #fafafa;
  --c-n-100: #f4f4f5;
  --c-n-150: #ececef;
  --c-n-200: #e4e4e7;
  --c-n-300: #d4d4d8;
  --c-n-400: #a1a1aa;
  --c-n-500: #71717a;
  --c-n-600: #52525b;
  --c-n-700: #3f3f46;
  --c-n-800: #27272a;
  --c-n-900: #18181b;

  /* --- акцент --- */
  --c-a-50: #ebf6ff;
  --c-a-100: #d6ecff;
  --c-a-200: #a8d7ff;
  --c-a-500: #33adff;
  --c-a-600: #0099ff;
  --c-a-700: #007ed6;
  --c-a-800: #0066ad; /* нажатие: на ступень темнее ховера */

  /* --- статусы --- */
  --c-danger: #dc2626;
  --c-danger-bg: #fef2f2;
  --c-danger-border: #fecaca;
  --c-warn: #b45309;
  --c-warn-bg: #fef3c7;
  --c-warn-border: #fde68a;
  --c-success: #16a34a;
  --c-success-bg: #f0fdf4;
  --c-success-border: #bbf7d0;

  /* --- семантические роли --- */
  --c-bg-app: #eceef1;
  --c-bg-surface: var(--c-n-0);
  --c-bg-subtle: var(--c-n-25);
  --c-bg-hover: var(--c-n-100);
  --c-border: var(--c-n-150);
  --c-border-strong: var(--c-n-200);
  --c-text: var(--c-n-900);
  --c-text-muted: var(--c-n-500);
  --c-text-subtle: var(--c-n-400);
  --c-text-inverse: var(--c-n-0);
  --c-focus-ring: rgba(0, 153, 255, 0.16);

  /* --- контролы: залитые, без рамки ---
     Кнопки, поля, селекты и чипы держатся на СЕРОЙ ЗАЛИВКЕ, а не на обводке
     белого прямоугольника. Роль отдельная, потому что `--c-border-strong`
     нужен и настоящим границам — рамкам модалок, линейке холста, разделителям
     панелей; если поменять его, поедут и они.

     Рамка не убирается, а становится прозрачной: 1px по-прежнему занимает
     место, поэтому фокус и состояние ошибки перекрашивают её, ничего не
     сдвигая. */
  --c-control-bg: var(--c-n-100);
  --c-control-bg-hover: var(--c-n-150);
  --c-control-bg-active: var(--c-n-200);
  --c-control-border: transparent;

  /* Кнопка-иконка живёт по другому правилу: в покое ПРОЗРАЧНАЯ, заливка
     появляется только под курсором. Постоянная заливка превращала её в плашку,
     и в шапке файл-менеджера рядом со знаком вставали два бокса подряд —
     серый и чёрный. Ховер берётся сразу с `-hover`, а не с `--c-control-bg`:
     из прозрачного в едва заметный #f4f4f5 переход не читается. */
  --c-ghost-bg-hover: var(--c-control-bg-hover);
  --c-ghost-bg-active: var(--c-control-bg-active);

  /* Рамка контурной кнопки. Обычная граница для неё слишком бледная: на сером
     фоне рабочей области даёт контраст 1.0, и кнопки просто не видно. Здесь
     нужен серый, который читается: в светлой теме n-500, в тёмной n-400 —
     та же ступень в тёмной выглядела бы ярче собственной надписи. */
  --c-control-outline: var(--c-n-500);

  /* Наведение на кнопку. Заливка контрастная, а не соседний оттенок серого:
     в светлой теме чёрная, в тёмной белая — обе из одной переменной, потому
     что нейтральная шкала уже развёрнута. Соседний оттенок сливается с фоном
     страницы, и человек не понимает, наведено или нет.
     У опасной кнопки заливка красная, надпись на ней белая в обеих темах. */
  --c-hover-fill: var(--c-n-900);
  --c-hover-fill-active: var(--c-n-800);
  --c-hover-ink: var(--c-text-inverse);
  --c-danger-ink: #ffffff;

  /* Выбранный сегмент переключателя. Всегда СВЕТЛЕЕ подложки контрола:
     в светлой теме это белый, в тёмной — серый на ступень выше подложки.
     Белая плашка на тёмном фоне бьёт по глазам и читается как ошибка. */
  --c-control-raised: var(--c-n-0);

  /* --- скругления по РОЛИ ---
     Шкала `--r-sm…--r-xl` осталась размерной и используется по месту; эти три
     говорят, ЧТО скругляется, и потому меняются осмысленно и разом. Раньше
     радиус выбирался у каждого контрола свой (9px, 11px, --r-md, --r-sm),
     и один ряд кнопок собирал три разных скругления. */
  --r-control: 12px; /* кнопки, поля, чипы, пункты навигации */
  --r-card: 16px; /* карточки, дропдауны, модалки, панели */
  --r-chip: 8px; /* мелкие бейджи внутри контролов */

  /* --- типографика --- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.25;
  --lh-normal: 1.5;

  /* --- ритм (шаг 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* --- скругления --- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* --- высоты контролов --- */
  --h-control-sm: 28px;
  --h-control: 32px;
  --h-control-md: 38px;
  --h-control-lg: 44px;

  /* --- тени --- */
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.06);
  --shadow-md: 0 4px 14px rgba(24, 24, 27, 0.1);
  --shadow-lg: 0 12px 40px rgba(24, 24, 27, 0.16);
  /* «приподнятый» сегмент/ручка тумблера — раньше литерал по месту в четырёх правилах */
  --shadow-raised: 0 1px 2px rgba(24, 24, 27, 0.12), 0 0 0 1px rgba(24, 24, 27, 0.04);

  /* --- анимация --- */
  --dur-fast: 0.12s;
  --dur-base: 0.2s;

  /* --- слои: единственный источник z-index, магические числа запрещены --- */
  --z-canvas-affordance: 5;
  --z-panel: 20;
  --z-topbar: 50;
  --z-dropdown: 400;
  --z-modal: 600;
  --z-toast: 800;

  /* --- брейкпоинты (справочно; @media их не читает, значения дублируются в правилах) --- */
  --bp-md: 900px;
  --bp-lg: 1024px;

  /* --- роли, которых не хватало: раньше эти цвета были литералами по месту --- */
  /* подложка модалок — было четыре копии rgba(24,24,27,.35…55) в разных файлах */
  --c-overlay: rgba(24, 24, 27, 0.45);
  /* штриховка зон отступов на холсте; зелёный вообще не имел токена */
  --c-hatch-margin: rgba(0, 153, 255, 0.5);
  --c-hatch-pad: rgba(59, 183, 132, 0.55);
  /* пунктирные рамки «добавить» и заглушки */
  --c-border-dashed: var(--c-n-300);
  /* тёмная плашка поверх контента (панель форматирования текста) */
  --c-inverse-surface: #27272a;
  --c-inverse-text: #e4e4e7;
  --c-inverse-hover: rgba(255, 255, 255, 0.13);

  /* обратная совместимость: раньше был единственный токен */
  --accent: var(--c-a-600);
}

/**
 * Тёмная тема ИНТЕРФЕЙСА. Не путать с тёмной темой письма — та живёт
 * в `settings.darkMode` документа и красит только холст.
 *
 * Переопределяется нейтральная шкала целиком: она используется как «0 — фон,
 * 900 — текст», поэтому её разворот сам переводит все производные роли.
 * Акцент осветляется: indigo-600 на тёмном фоне не набирает контраст.
 */
[data-ui-theme='dark'] {
  --c-n-0: #17171a;
  --c-n-25: #1b1b1f;
  --c-n-50: #1f1f24;
  --c-n-100: #26262c;
  --c-n-150: #2f2f36;
  --c-n-200: #3a3a43;
  --c-n-300: #4c4c57;
  --c-n-400: #8b8b98;
  --c-n-500: #a3a3b0;
  --c-n-600: #bcbcc7;
  --c-n-700: #d2d2da;
  --c-n-800: #e6e6eb;
  --c-n-900: #f5f5f8;

  /* На тёмном #0099ff читается плохо: контраст с фоном чуть выше 3:1, а на
     заливках подписи в нём тонут. Поэтому в тёмной теме акцент светлее — это
     тот же цвет, поднятый по яркости, а не другой. */
  --c-a-50: #0e2a3d;
  --c-a-100: #123b57;
  --c-a-200: #1b5580;
  --c-a-500: #4db6ff;
  --c-a-600: #4db6ff;
  --c-a-700: #7ccbff;
  --c-a-800: #a5dcff;

  --c-bg-app: #121215;
  --c-text-inverse: #17171a;
  --c-focus-ring: rgba(77, 182, 255, 0.25);

  --c-danger-bg: #2a1a1c;
  --c-danger-border: #4d2427;
  --c-success-bg: #16241b;
  --c-success-border: #234d33;
  --c-warn-bg: #2a2312;
  --c-warn-border: #4d4020;

  --c-overlay: rgba(0, 0, 0, 0.6);
  --c-inverse-surface: #33333a;
  --c-inverse-text: #f0f0f4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --c-control-raised: var(--c-n-200);
  --c-control-outline: var(--c-n-400);

  color-scheme: dark;
}