# Дизайн-система Monday Vibe ## Предпросмотр интерфейса дизайн-системы Monday Vibe Изменяйте статусы строк и завершайте выбранные задачи; сводные счётчики обновляются локально. ## Справочник по дизайн-системе Monday Vibe Открытый исходный код Vibe 4 и интеграция с @vibe/core. Ниже приведены проверенные значения светлой темы и определения стилей; цвета меток на доске отличаются от семантических ролей успеха и ошибки. В нативном примере используются настоящие элементы управления Vibe Button внутри таблицы HTML, принадлежащей приложению. ### Актуальные переменные отступов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --space-2 | 2px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-4 | 4px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-8 | 8px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-12 | 12px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-16 | 16px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-20 | 20px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-24 | 24px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-32 | 32px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-40 | 40px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-48 | 48px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-64 | 64px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | | --space-80 | 80px | Используйте для отступов в приложении; числовое имя токена приведено так, как оно указано в актуальном исходном коде. | ### Цвета действий и поверхностей | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --primary-color | #0073ea | Основные действия. | | --primary-hover-color | #0060b9 | Основное действие при наведении. | | --primary-selected-color | #cce5ff | Фон выбранного содержимого. | | --primary-text-color | #323338 | Основной цвет текста для комфортного чтения. | | --secondary-text-color | #676879 | Вторичные подписи. | | --primary-background-color | #ffffff | Основная поверхность. | | --allgrey-background-color | #f6f7fb | Фон приложения. | | --ui-border-color | #c3c6d4 | Граница элемента управления. | | --positive-color | #00854d | Семантический цвет положительного действия. | | --negative-color | #d83a52 | Семантический цвет отрицательного действия. | ### Палитра меток доски | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --color-done-green | #00c875 | Категориальная метка «Готово», а не семантический цвет положительного действия. | | --color-working_orange | #fdab3d | Категориальная метка «В работе»; точное имя в исходном коде содержит подчёркивание. | | --color-stuck-red | #df2f4a | Категориальная метка «Заблокировано». | | --color-dark_purple | #784bd1 | Пример идентификации группы. | ### Сокращённые записи типографических стилей | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | Семейство шрифта для основного текста; файлы шрифтов устанавливаются отдельно. | | --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | Семейство шрифта для заголовков. | | --font-h1-medium | 600 32px/40px; title family | Заголовок доски. | | --font-h2-medium | 600 24px/30px; title family | Заголовок группы. | | --font-h3-medium | 600 18px/24px; title family | Компактный подзаголовок. | | --font-text1-normal | 400 16px/22px; body family | Основной текст. | | --font-text2-normal | 400 14px/20px; body family | Текст плотных строк. | | --font-text3-normal | 400 12px/16px; body family | Дополнительная информация. | ### Скругления | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | --border-radius-4 | 4px | Небольшие элементы управления. | | --border-radius-8 | 8px | Контейнеры среднего размера. | | --border-radius-12 | 12px | Доступный числовой шаг скругления. | | --border-radius-16 | 16px | Крупные контейнеры. | | --border-radius-small | var(--border-radius-4) | Именованный малый псевдоним. | | --border-radius-medium | var(--border-radius-8) | Именованный средний псевдоним. | | --border-radius-big | var(--border-radius-16) | Именованный большой псевдоним. | ### Кнопка API | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | kind | Default: primary | Визуальное выделение, включая третичные действия в этом примере. | | size | Default: medium | Используйте малый размер для компактных действий в строках. | | type | Default: button | Явно укажите submit для отправки формы. | | disabled | boolean | Отключает пакетное действие, если строки не выбраны. | | loading | boolean | Показывает индикатор загрузки во время реальной операции. | | active | boolean | Визуальное активное состояние; для переключателя также укажите aria-pressed. | | onClick | React mouse-event callback | Обновите здесь состояние приложения. | | aria-pressed | ARIA pressed state | Если для переключения строк используются кнопки, сообщайте об их состоянии выбора. | ## Полное руководство по дизайн-системе Monday Vibe Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Создавайте интерфейс на основе актуальных точек входа Vibe — дизайн-система Monday Vibe ### Основные компоненты и токены CSS импортируются отдельно > В Vibe 4 именованные компоненты React доступны через @vibe/core, а переменные CSS — через @vibe/core/tokens. Подключите оба пакета в новом клиентском приложении. Компонент может добавлять собственные стили и при этом использовать переменные из файла токенов. В примере доски используются нативная структура таблицы и настоящие элементы управления Vibe Button, а данные строк и выбор управляются приложением. Прочитать вспомогательную спецификацию ### Не смешивайте поколения пакетов Старый пакет monday-ui-react-core относится к Vibe 2. Для Vibe 3 выпускаются критические исправления, но не новые функции. В этом руководстве рассматривается актуальный интерфейс Vibe 4 и пронумерованные переменные отступов. Интеграция не является клиентом monday.com SDK и не подключается к учётным записям, рабочим пространствам или элементам API. Прочитать вспомогательную спецификацию ## Цвета действий и метки доски выполняют разные функции — дизайн-система Monday Vibe ### Используйте семантические роли для элементов управления Для основных действий используйте основную роль и соответствующий ей цвет при наведении. Для выделения используйте фон выбранного элемента, а для обычного текста — основные и вторичные текстовые роли. Используйте значения темы как согласованный набор, а не меняйте цвет фона страницы отдельно от остальных. В этом локальном примере сохранена проверенная светлая тема. Прочитать вспомогательную спецификацию ### Ячейка «Готово» — не кнопка успешного действия В исходных данных есть категориальные цвета доски наряду с семантическими цветами обратной связи. Зелёный цвет статуса «Готово» — #00c875, а семантический цвет положительного действия — #00854d. Для ячеек со статусами используются цвета доски и контрастный, хорошо читаемый текст; статусы «В работе», «Заблокировано» и «Готово» обозначены словами, поэтому цвет никогда не служит единственным признаком состояния. Прочитать вспомогательную спецификацию ## Используйте полную сокращённую запись шрифта — дизайн-система Monday Vibe ### Для заголовков и рабочих строк предусмотрена разная типографика В исходных данных для заголовков указан Poppins, а для основного текста — Figtree с резервными шрифтами для разных письменностей. Текущая сокращённая запись h1-medium — 600 32px/40px, а text2-normal — 400 14px/20px. Применяйте сокращённую запись через свойство шрифта CSS, чтобы начертание, размер, высота строки и семейство оставались связанными. В исходных данных также есть устаревшие псевдонимы заголовков; не подменяйте ими стили с другим масштабом без пояснений. Прочитать вспомогательную спецификацию ### Подключайте файлы шрифтов осознанно Vibe не подключает рекомендованные файлы шрифтов автоматически. Добавьте в приложение HTML документированную ссылку на таблицу стилей Figtree/Poppins или разместите у себя файлы с подходящей лицензией. В автономном примере явно используются системные запасные шрифты, поэтому его отображение — это интерпретация, а не утверждение о точном соответствии типографике monday.com. Прочитать вспомогательную спецификацию ## Компактная доска без уменьшенных элементов управления — дизайн-система Monday Vibe ### Ритм задаётся пронумерованными отступами Используйте --space-8 между соседними действиями на панели инструментов, --space-16 для внутренних отступов панели и --space-24 между разделами доски. Это точные имена из актуального исходного кода. Их расположение — решение, принятое для этого приложения. В шкале также есть шаг в два пикселя для точного выравнивания и более крупные значения — до восьмидесяти пикселей — для композиции. Прочитать вспомогательную спецификацию ### Скругления помогают обозначить границы Малый псевдоним соответствует четырём пикселям, средний — восьми, а большой — шестнадцати. Для внешней рамки доски используйте среднее скругление, а ячейки таблицы оставьте квадратными и выровненными. Если скруглить каждую цветную ячейку, как отдельную метку, станет сложнее быстро просматривать плотные столбцы. Прочитать вспомогательную спецификацию ## Редактируемая таблица с панелью пакетных действий — дизайн-система Monday Vibe ### Явно задавайте структуру данных У каждого элемента задачи есть постоянный id, название, владелец и статус. Заголовки столбцов поясняют эти значения. Флажок в строке добавляет id в Set; при изменении статуса нужный объект заменяется, а массив не изменяется напрямую. Действие «Завершить выбранные» использует тот же Set и обновляет только выбранные строки. Сводка выполненных задач формируется на основе строк. - Основная кнопка пакетных действий отключена, если Set выбора пуст. - Третичное действие в строке циклически меняет локальный статус для демонстрации. - Действие сброса восстанавливает исходные строки и очищает выбор. Прочитать вспомогательную спецификацию ## Передавайте состояние через настоящий Button API — дизайн-система Monday Vibe ### Состояния «Отключено», «Загрузка» и «Нажато» различаются В нативном примере свойство disabled отключает недоступное пакетное действие. Состояния загрузки и успеха не показываются, поскольку удалённой операции нет. При подключении реального слоя сохранения связывайте loading с жизненным циклом запроса и обновляйте состояние успеха только после подтверждения. В исходных данных Button также предусмотрено свойство active для оформления и aria-pressed для семантики переключателя; одно не заменяет другое. Прочитать вспомогательную спецификацию ### Не выдавайте локальные изменения за работу сервиса В актуальном сообщении указано, сколько локальных элементов изменилось. В нём не говорится, что доска monday.com была обновлена. При перезагрузке восстанавливаются исходные демонстрационные данные. Для производственной интеграции потребуется отдельно реализовать разрешения для рабочего пространства, обработку ошибок и синхронизацию за пределами слоя дизайн-системы. Прочитать вспомогательную спецификацию ## Сохраняйте смысл строк при изменении ширины — дизайн-система Monday Vibe ### Тщательно перестройте демонстрационный интерфейс На узком экране автономная доска отображает каждую строку в виде карточки с подписями. Названия столбцов повторяются в виде видимых подписей, чтобы ответственные и статусы оставались понятными. Это решение по компоновке приложения, а не утверждение, что Vibe автоматически преобразует любую таблицу. В стандартном стартовом примере вместо этого используется семантическая таблица в подписанной области с горизонтальной прокруткой — такой вариант подходит для более плотных данных. Прочитать вспомогательную спецификацию ### Глобальная настройка box-sizing — необходимое условие Перед использованием библиотеки задайте border-box для элементов и псевдоэлементов. Без этого ячейка фиксированной ширины с отступами может превысить заданный размер, особенно если внутри плотного столбца расположена кнопка. Сохраняйте гибкость внешнего контейнера и разрешайте перенос элементов панели инструментов. Прочитать вспомогательную спецификацию ## Дизайн-система Monday Vibe: выбор и статус должны иметь независимые названия ### Добавьте подпись каждому элементу управления в строке Флажок выбора включает название рабочего элемента в доступное имя. Каждое действие для изменения статуса содержит название элемента и его текущий статус. Вежливое сообщение о статусе сообщает результат пакетного действия. Пользователи клавиатуры могут выбирать строки, запускать пакетную команду и сбрасывать доску с помощью стандартных элементов управления; страница не имитирует навигацию по таблице стрелками, как в электронных таблицах. 1. Выберите «Передача дизайна» и убедитесь, что пакетное действие стало доступным. 2. Выберите все элементы и проверьте, что текст статуса совпадает с вычисленным количеством. 3. Сбросьте доску и убедитесь, что данные и флажки выбора вернулись к исходному состоянию. Прочитать вспомогательную спецификацию ## Дизайн-система Monday Vibe: полноценная клиентская точка входа ### Установка, импорт, монтирование Приведённая ниже настройка — точка входа main.jsx для клиентского проекта на React с корневым элементом. Установите react, react-dom и @vibe/core@4, один раз загрузите токен CSS и подключите указанные глобальные стили. В текущем пакете используются экспорты ES-модулей. Извлечение стилей на стороне сервера описано как экспериментальная возможность; в этом стартовом примере используется клиентский рендеринг. Прочитать вспомогательную спецификацию ## Monday Vibe Примеры компонентов дизайн-системы ### Полноценный автономный интерактивный пример Сохраните весь документ как index.html и откройте его в браузере. Независимая интерпретация HTML/CSS с палитрой светлой темы Vibe, размерами интервалов и типографики, проверенными по официальным источникам; системный резервный шрифт. ``` Weekly delivery — Vibe study

Weekly delivery

A shared view of the work moving this week.
1 / 3 completed
WorkingStuckDone
0 selected

▼ This week

Select items or click a status to change it locally.

``` Справочник по коду - Панель пакетных действий меняет статусы демонстрационных задач. Цвета меток описывают рабочий процесс этой доски и не заменяют семантические токены действий Vibe. ### Полный пример нативной реализации Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки. ``` // npm install react react-dom @vibe/core@4 // main.jsx in a client React project with
import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Button } from '@vibe/core'; import '@vibe/core/tokens'; import './board.css'; const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'}, {id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'}, {id:3,title:'Release notes',owner:'Sam',status:'Done'}]; const states=['Working','Stuck','Done']; function Board(){ const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState(''); const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next}); const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())}; return

Weekly delivery

{items.filter(x=>x.status==='Done').length} of {items.length} items completed

{items.map(item=>)}
SelectItemOwnerStatus
toggle(item.id)}/> {item.title}{item.owner}

{message}

} createRoot(document.getElementById('root')).render(); ``` Справочник по коду - Полноценная локальная точка входа для доски; добавьте board.css из примера компонента. Шрифты не включаются в комплект автоматически. Нативный пакет API проверен по официальному источнику; в этой среде пример пакета не компилировался. ### Стили доски на основе токенов Используйте экспорт tokens для компоновки и типографики. Внешняя область сохраняет возможность работать с семантической таблицей на узких экранах. ``` *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--allgrey-background-color);color:var(--primary-text-color);font:var(--font-text2-normal)} .board{max-width:960px;margin:auto;padding:var(--space-24)} h1{font:var(--font-h1-medium)} .toolbar{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-16)} .table-scroll{overflow:auto;border:1px solid var(--layout-border-color);border-radius:var(--border-radius-medium)} table{width:100%;min-width:560px;border-collapse:collapse;background:var(--primary-background-color)} th,td{text-align:left;padding:var(--space-12);border-bottom:1px solid var(--layout-border-color)} ``` Справочник по коду - Это приложение на CSS с реальными переменными Vibe. - Встроенный предпросмотр использует независимую адаптивную интерпретацию HTML. ### Загрузка шрифтов в приложении HTML Подключите обе рекомендованные гарнитуры явно: импорт токенов CSS их не загружает. ``` ``` Справочник по коду - Вместо этой внешней таблицы стилей можно настроить лицензированный шрифт с самостоятельным размещением. ## Monday Vibe Настройка AI-агента для дизайн-системы ### Отправная точка для реализации Полноценная локальная точка входа для доски; добавьте board.css из примера компонента. Шрифты не включаются в комплект автоматически. Нативный пакет API проверен по официальному источнику; в этой среде пример пакета не компилировался. ``` // npm install react react-dom @vibe/core@4 // main.jsx in a client React project with
import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Button } from '@vibe/core'; import '@vibe/core/tokens'; import './board.css'; const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'}, {id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'}, {id:3,title:'Release notes',owner:'Sam',status:'Done'}]; const states=['Working','Stuck','Done']; function Board(){ const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState(''); const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next}); const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())}; return

Weekly delivery

{items.filter(x=>x.status==='Done').length} of {items.length} items completed

{items.map(item=>)}
SelectItemOwnerStatus
toggle(item.id)}/> {item.title}{item.owner}

{message}

} createRoot(document.getElementById('root')).render(); ``` ### Запрос для вашего проекта ``` Создайте указанную доску поставки Vibe 4. Импортируйте @vibe/core/tokens, используйте актуальные переменные нумерованных интервалов и полные сокращённые записи шрифтов; не смешивайте семантические цвета обратной связи с цветами меток доски. Реализуйте локальный выбор строк, изменение статусов и вычисление количества выполненных задач. Используйте disabled для кнопки пакетного действия; не имитируйте удалённое сохранение. ``` ## Monday Vibe Источники и границы применимости дизайн-системы Независимый справочник по Vibe 4 и демонстрация локальной доски. Нет подключения к аккаунту monday.com, данным рабочего пространства или SDK. В стандартном стартовом примере используются реальные элементы управления Vibe Button и разметка таблицы, принадлежащая приложению. - Обзор Vibe 4 Текущий пакет, точка входа токенов и границы предыдущих версий. - Интеграция с ядром Импорты в корневом файле, глобальная настройка box-sizing и отдельная загрузка шрифтов. - Источник для светлой темы Семантические цвета, цвета меток доски и тени. - Источник интервалов Актуальные переменные нумерованных интервалов. - Источник типографики Гарнитуры Figtree/Poppins и сокращённые стили. - Источник скруглений Числовые и именованные токены скругления углов. - Источник кнопок Семантика управляемых действий, состояний disabled, загрузки и нажатия. - Экспорты пакета Точка входа ES-модулей и экспорт токенов CSS. ## Monday Vibe Дополнительные ресурсы по дизайн-системе ### Morningstar дизайн-система Создайте исследовательский интерфейс с выровненными числами, осмысленными цветами ресурсов и удобной для чтения типографикой. Изучите константы MDS, переход на Vue 3, переход на Morningstar Intrinsic и сортируемый блокнот распределения активов на вымышленных данных. ### Mozilla Protocol Редакционное руководство по Protocol с настоящими гарнитурами, шкалами отступов и ширины контейнера, адаптивной иллюстрированной страницей для чтения и полноценным примером формы на нативном CSS. ### Nord дизайн-система Изучите токены темы Therapy в Nord и контракты веб-компонентов на примере черновика запроса на бронирование комнаты: реальные цветовые роли, адаптивные размеры полей, явная проверка данных и локально подготовленные результаты. - [Справочник по реализации](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Источник](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Источник](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Источник](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Источник](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Источник](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Прочитать вспомогательную спецификацию](https://github.com/mondaycom/vibe) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Прочитать вспомогательную спецификацию](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Прочитать вспомогательную спецификацию](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Прочитать вспомогательную спецификацию](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json) - [Справочник по коду](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Справочник по коду](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Справочник по коду](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Обзор Vibe 4 Текущий пакет, точка входа токенов и границы предыдущих версий.](https://github.com/mondaycom/vibe) - [Интеграция с ядром Импорты в корневом файле, глобальная настройка box-sizing и отдельная загрузка шрифтов.](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Источник для светлой темы Семантические цвета, цвета меток доски и тени.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Источник интервалов Актуальные переменные нумерованных интервалов.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Источник типографики Гарнитуры Figtree/Poppins и сокращённые стили.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Источник скруглений Числовые и именованные токены скругления углов.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Источник кнопок Семантика управляемых действий, состояний disabled, загрузки и нажатия.](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Экспорты пакета Точка входа ES-модулей и экспорт токенов CSS.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)