Monday Vibe 设计系统.

名称 / 规则	值 / 配置	用途
`--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`	分类性的 Done 标签，不是语义化的正向颜色。
`--color-working_orange`	`#fdab3d`	分类性的 Working 标签；源码名称中包含下划线。
`--color-stuck-red`	`#df2f4a`	分类性的 Stuck 标签。
`--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 设计系统完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

DESIGN-monday-vibe.md

完整指导、实现起点和源代码链接。

下载指南

Monday Vibe 设计系统：基于当前 Vibe 入口进行构建

核心组件与设计令牌 CSS 分别导入

Vibe 4 通过 @vibe/core 提供具名的 React 组件，并通过 @vibe/core/tokens 提供 CSS 变量。在新的客户端应用中同时导入两者。组件可以注入自身样式，同时依赖令牌文件提供的变量。看板示例使用原生表格结构和真正的 Vibe Button 控件，行数据和选择状态由应用管理。
摘自本 OpenDesign 指南

避免混用早期版本的程序包

较早的 monday-ui-react-core 程序包属于 Vibe 2。Vibe 3 仅维护关键问题修复，不再开发新功能。本指南使用当前的 Vibe 4 接口和编号间距变量。此集成不是 monday.com SDK 客户端，也未连接任何账户、工作区或项目 API。

Monday Vibe 设计系统：操作颜色与看板标签用途不同

控件使用语义化角色

主要操作使用主色角色及其对应的悬停颜色。选中状态使用选中背景，常规文本则使用主要和次要文本角色。应将主题值作为相互关联的一组来使用，而不是单独更改正文背景。本地示例保持使用经核实的浅色主题。

Done 单元格不是成功按钮

源码中既包含分类性的看板颜色，也包含语义化的反馈颜色。Done 绿色为 #00c875，而语义化的正向颜色为 #00854d。行状态单元格使用看板颜色并搭配对比度足够、易于阅读的文本，保留 Working、Stuck 和 Done 字样，绝不单靠颜色表达状态。

Monday Vibe 设计系统：使用完整的字体简写属性

标题和工作行采用不同的字体风格

源码为标题指定 Poppins，为正文内容指定 Figtree，并提供适配文字脚本的后备字体。当前的 h1-medium 简写属性为 600 32px/40px，而 text2-normal 为 400 14px/20px。使用 CSS font 属性应用简写值，使字重、字号、行高和字体系列保持关联。源码还包含较早的标题别名；不要在不说明的情况下替换为尺寸不同的样式。

有计划地加载字体文件

Vibe 不会自动导入推荐的字体文件。请在应用 HTML 中添加文档所述的 Figtree/Poppins 样式表链接，或自行托管已获适当许可的字体文件。离线示例明确使用系统后备字体，因此其呈现是一种诠释，并不代表与 monday.com 的字体排印完全一致。

Monday Vibe 设计系统：紧凑看板，不压缩控件

使用编号间距构建节奏

相邻工具栏操作之间使用 --space-8，面板内边距使用 --space-16，看板区域之间使用 --space-24。这些都是当前源码中的确切名称。这些具体用法是本应用的选择。间距比例中还包含用于精细对齐的 2px 档位，以及最高达 80px、适用于整体布局的更大数值。

圆角用于建立容器边界

Monday Vibe 设计系统：带批量工具栏的可编辑表格

明确数据结构

每个工作项都有稳定的 id、标题、负责人和状态。原生列标题说明这些值的含义。行复选框会将 id 添加到 Set；更改状态时，会替换匹配的对象，而不是直接修改数组。“完成所选项”操作会读取同一个 Set，并仅更新选中的行。完成情况摘要根据各行数据计算得出。

当选择 Set 为空时，批量主按钮处于禁用状态。
每行的三级操作会循环切换本地状态，仅用于演示。
重置操作会恢复初始行数据并清空选择。

Monday Vibe 设计系统：通过实际的 Button 暴露状态 API

禁用、加载和按下是不同状态

原生示例会在批量操作不可用时使用 disabled。由于没有远程操作，因此不会显示加载或成功状态。如果要接入真实的持久化层，应将 loading 绑定到请求生命周期，并仅在确认后更新成功状态。Button 源码还提供用于控制外观的 active 属性，以及用于切换语义的 aria-pressed；两者不能互相替代。

不要将本地编辑说成已同步到服务

实时消息会说明有多少个本地项目发生了更改，不会声称 monday.com 看板已更新。重新加载后，会恢复初始示例数据。生产环境集成还需要在设计系统层之外明确处理工作区权限、错误和数据同步。

Monday Vibe 设计系统：不同宽度下保持行的语义

合理调整演示布局

在窄屏上，离线看板会将每行重新排布为带标签的项目卡片。列名会作为可见标签重复显示，以便理解负责人和状态。此处展示的是一种应用布局方案，并不表示 Vibe 会自动转换所有表格。作为另一种适合较密集数据的方案，原生起始模板会在带标签的水平溢出区域中保留语义化表格。

全局盒模型设置是前提

使用该库之前，请先为元素和伪元素应用 border-box。否则，固定宽度的单元格加上内边距后可能超出预期尺寸，尤其是在密集列中嵌套按钮时。外层容器应保持灵活，并允许工具栏操作换行。

Monday Vibe 设计系统：为选择控件和状态分别设置名称

为每行的控件添加标签

选择复选框的可访问名称中包含工作项标题。每个状态操作都包含项目名称和当前状态。礼貌提示消息会播报批量操作结果。键盘用户可以使用原生控件选择行、执行批量命令并重置看板；页面不会自行添加电子表格式的方向键行为。

选择“设计交接”，并确认批量操作已启用。
完成所选项目，并检查状态文本与计算得出的数量是否一致。
重置并确认数据和复选框选择都已恢复到初始状态。

Monday Vibe 设计系统：完整的客户端入口

安装、导入、挂载

以下设置是 main.jsx 入口文件，适用于包含根元素的 React 客户端项目。安装 react、react-dom 和 @vibe/core@4，只加载一次 token CSS，并应用所列的全局样式表。当前软件包使用 ES 模块导出。服务端样式提取仍作为实验功能记录在文档中；此起始模板有意采用客户端渲染。

Monday Vibe 设计系统组件示例

完整的独立交互示例

将完整文档保存为 index.html 并在浏览器中打开。独立的 HTML/CSS 实现采用经核实的 Vibe 浅色主题配色、间距和字体排印尺寸；字体使用系统回退方案。

html

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Weekly delivery — Vibe study</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#323338;font:14px/20px Arial,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:4px;padding:8px 16px;background:white;color:#323338}button:hover{background:#e7e9ef}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:3px solid #0073ea;outline-offset:2px}.shell{display:grid;grid-template-columns:180px minmax(0,1fr);min-height:600px}aside{padding:24px 16px;border-right:1px solid #d0d4e4;background:#fff}.brand{font-size:20px;font-weight:bold;margin-bottom:40px}.brand span{color:#0073ea}aside p{font-size:12px;color:#676879}aside strong{display:block;background:#cce5ff;padding:12px;border-radius:4px;color:#323338}main{padding:32px;min-width:0}h1{font-size:32px;line-height:40px;font-weight:600;margin:0 0 8px}.sub{color:#676879}.overview{margin:24px 0;display:grid;grid-template-columns:1fr 2fr;gap:24px;align-items:center}.count{font-size:32px;line-height:40px}.count small{font-size:14px;color:#676879}.bar{display:flex;border-radius:8px;overflow:hidden;height:16px;background:#e7e9ef}.bar span{transition:width .15s}.legend{display:flex;gap:16px;font-size:12px;margin-top:8px}.legend span:before{content:'●';color:var(--c);margin-right:4px}.tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.primary{background:#0073ea;color:white}.primary:hover{background:#0060b9}h2{font-size:18px;line-height:24px;color:#784bd1;font-weight:600}.board{border-left:6px solid #784bd1;border-radius:8px;background:white;overflow:hidden}.row,.head{display:grid;grid-template-columns:36px minmax(180px,1fr) 90px 130px;align-items:center;min-height:52px;border-bottom:1px solid #d0d4e4}.head{color:#676879;min-height:36px;font-size:12px}.row>*{padding:12px}.head>*{padding:8px}.row label{display:flex;align-items:center;justify-content:center}.row input{accent-color:#0073ea}.row .status{border-radius:0;height:100%;font-weight:500}.status[data-status=Working]{background:#fdab3d}.status[data-status=Stuck]{background:#df2f4a;color:white}.status[data-status=Done]{background:#00c875}.person{display:inline-flex;align-items:center;gap:8px}.avatar{width:24px;height:24px;border-radius:50%;background:#eceff8;display:inline-grid;place-items:center;font-size:11px}.row.selected{background:#f0f7ff}#message{min-height:24px;margin-top:16px;color:#676879}.mobile-label{display:none}footer{padding:16px 24px;color:#676879;font-size:11px;border-top:1px solid #d0d4e4}@media(max-width:800px){.shell{grid-template-columns:1fr}aside{display:none}main{padding:24px}}@media(max-width:560px){main{padding:16px}.overview{grid-template-columns:1fr;gap:12px}.head{display:none}.row{grid-template-columns:36px 1fr}.row .person,.row .status{grid-column:2}.row .status{margin:0 12px 12px;width:calc(100% - 24px);border-radius:4px}.mobile-label{display:inline;color:#676879;margin-right:8px}.row{padding:8px 0}.legend{flex-wrap:wrap}}</style><div class="shell"><aside><div class="brand"><span>▰</span> workroom</div><p>TEAM WORKSPACE</p><strong>Weekly delivery</strong><p>Sample project<br>No external account</p></aside><main><h1>Weekly delivery</h1><div class="sub">A shared view of the work moving this week.</div><section class="overview" aria-label="Completion summary"><div class="count"><span id="done">1</span><small> / 3 completed</small></div><div><div class="bar" aria-hidden="true"><span id="working-bar" style="background:#fdab3d"></span><span id="stuck-bar" style="background:#df2f4a"></span><span id="done-bar" style="background:#00c875"></span></div><div class="legend"><span style="--c:#fdab3d">Working</span><span style="--c:#df2f4a">Stuck</span><span style="--c:#00c875">Done</span></div></div></section><div class="tools"><button class="primary" id="complete" disabled>Complete selected</button><button id="reset">Reset board</button><span id="selection" style="padding:8px;color:#676879">0 selected</span></div><h2>▼ This week</h2><div class="board"><div class="head" aria-hidden="true"><span></span><span>Item</span><span>Owner</span><span>Status</span></div><div id="rows"></div></div><p id="message" role="status">Select items or click a status to change it locally.</p></main></div><footer>Independent Vibe 4 HTML/CSS study. Published light-theme and board-label colors; system fallback fonts. No monday.com workspace connection.</footer><script>
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'}],states=['Working','Stuck','Done'];let items=structuredClone(initial),selection=new Set();const $=id=>document.getElementById(id);function totals(){$('done').textContent=items.filter(x=>x.status==='Done').length;for(const state of states)$(state.toLowerCase()+'-bar').style.width=items.filter(x=>x.status===state).length/items.length*100+'%';$('complete').disabled=!selection.size;$('selection').textContent=selection.size+' selected'}function render(){$('rows').replaceChildren();for(const item of items){const row=document.createElement('div');row.className='row'+(selection.has(item.id)?' selected':'');const label=document.createElement('label'),check=document.createElement('input');check.type='checkbox';check.checked=selection.has(item.id);check.setAttribute('aria-label','Select '+item.title);check.onchange=()=>{check.checked?selection.add(item.id):selection.delete(item.id);row.classList.toggle('selected',check.checked);totals()};label.append(check);const name=document.createElement('span');name.textContent=item.title;const person=document.createElement('span');person.className='person';const av=document.createElement('span');av.className='avatar';av.setAttribute('aria-hidden','true');av.textContent=item.owner[0];const pl=document.createElement('span');pl.className='mobile-label';pl.textContent='Owner';person.append(pl,av,document.createTextNode(item.owner));const status=document.createElement('button');status.className='status';status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');status.onclick=()=>{item.status=states[(states.indexOf(item.status)+1)%states.length];status.dataset.status=item.status;status.textContent=item.status;status.setAttribute('aria-label',item.title+': '+item.status+'. Change status');totals();$('message').textContent=item.title+' is now '+item.status+' locally.'};row.append(label,name,person,status);$('rows').append(row)}totals()}
$('complete').onclick=()=>{let n=selection.size;items.forEach(x=>{if(selection.has(x.id))x.status='Done'});selection.clear();render();$('message').textContent=n+' local items completed.'};$('reset').onclick=()=>{items=structuredClone(initial);selection.clear();render();$('message').textContent='Board reset.'};render();
</script></html>

批量工具栏会更改示例任务的状态。标签颜色用于说明此看板的工作流，不能替代 Vibe 语义操作令牌。

完整的原生实现入口

此处汇总了从设置到完整实现的内容，并附有重点说明 API。请按照设置中的文档说明，满足软件包和构建前置条件。

jsx

// npm install react react-dom @vibe/core@4
// main.jsx in a client React project with <div id="root"></div>
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 <main className="board"><h1>Weekly delivery</h1>
 <p>{items.filter(x=>x.status==='Done').length} of {items.length} items completed</p>
 <div className="toolbar"><Button disabled={!selected.size} onClick={complete}>Complete selected</Button>
 <Button kind="tertiary" onClick={()=>{setItems(initial);setSelected(new Set());setMessage('Board reset')}}>Reset</Button></div>
 <div className="table-scroll" role="region" aria-label="Delivery items" tabIndex={0}>
 <table><thead><tr><th>Select</th><th>Item</th><th>Owner</th><th>Status</th></tr></thead><tbody>
 {items.map(item=><tr key={item.id}><td><input type="checkbox" aria-label={'Select '+item.title} checked={selected.has(item.id)} onChange={()=>toggle(item.id)}/></td>
 <th scope="row">{item.title}</th><td>{item.owner}</td><td><Button kind="tertiary" size="small" aria-label={item.title+': '+item.status+'. Change status'} onClick={()=>setItems(old=>old.map(x=>x.id===item.id?{...x,status:states[(states.indexOf(x.status)+1)%states.length]}:x))}>{item.status}</Button></td></tr>)}
 </tbody></table></div><p role="status">{message}</p></main>
}
createRoot(document.getElementById('root')).render(<Board/>);

完整的本地看板入口；请从组件示例中添加 board.css。字体不会自动打包。已依据官方源码检查原生软件包 API；此环境尚未编译软件包示例。

基于令牌的看板样式表

使用 tokens 导出项设置布局和字体排印。外层区域可确保语义化表格在窄屏上仍然可用。

css

*,*::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)}

这是使用实际 Vibe 变量的应用 CSS。
内嵌预览采用独立的响应式 HTML 实现。

应用 HTML 中的字体加载

明确加载建议使用的两种字体；导入 CSS 令牌不会下载字体文件。

html

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap">