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`	カテゴリ用の「完了」ラベル。セマンティックなポジティブカラーではありません。
`--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)`	small の名称付きエイリアス。
`--border-radius-medium`	`var(--border-radius-8)`	medium の名称付きエイリアス。
`--border-radius-big`	`var(--border-radius-16)`	large の名称付きエイリアス。

ボタン API

名前 / ルール	値 / 設定	用途
`kind`	`Default: primary`	この例で使用する第3アクションを含む、視覚的な強調。
`size`	`Default: medium`	コンパクトな行アクションには small を使用します。
`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 デザインシステム — アクションカラーとボードラベルは、それぞれ異なる役割を担います

コントロールにはセマンティックなロールを使用する

プライマリアクションにはプライマリロールと対応するホバーカラーを使用します。選択状態には選択時の背景を、通常のテキストにはプライマリおよびセカンダリのテキストロールを使用します。本文の背景だけを単独で変更するのではなく、テーマの値を一貫したセットとして使ってください。このローカルの検証では、確認済みのライトテーマを使用しています。

「完了」のセルは、成功ボタンではありません

ソースには、セマンティックなフィードバックカラーと並んで、カテゴリ用のボードカラーも含まれています。「完了」を示す緑は #00c875 ですが、セマンティックなポジティブカラーは #00854d です。行のステータスセルにはボードカラーとコントラストのある読みやすいテキストを使用し、「作業中」「停滞」「完了」のラベルを残します。状態を色だけで表すことはありません。

Monday Vibe デザインシステム — フォントのショートハンドを完全な形で使用する

タイトルと作業行では異なる書体を使用する

ソースでは、タイトルに Poppins、本文に Figtree を指定し、スクリプトに応じたフォールバックも設定しています。現行の h1-medium ショートハンドは 600 32px/40px、text2-normal は 400 14px/20px です。CSS の font プロパティにショートハンドを指定し、ウェイト、サイズ、行の高さ、ファミリーをまとめて適用してください。ソースには旧式の見出しエイリアスも含まれます。スケールの異なる値に、説明なく置き換えないでください。

フォントファイルを適切に読み込む

Vibe は推奨フォントファイルを自動ではインポートしません。ドキュメントに記載された Figtree/Poppins のスタイルシートリンクをアプリケーションの HTML に追加するか、適切なライセンスを取得したファイルを自分でホストしてください。オフラインのサンプルではシステムフォールバックフォントを明示的に使用しているため、その表示は解釈に基づくものであり、monday.com のタイポグラフィを正確に再現するものではありません。

Monday Vibe デザインシステム — コントロールを詰め込みすぎないコンパクトなボード

番号付きスペーシングでリズムを整える

隣接するツールバーアクションには --space-8、パネル内のパディングには --space-16、ボードの各領域間には --space-24 を使用します。いずれも現行ソースに記載された正確な名前です。これらの配置は、このアプリケーションに合わせて選んだものです。スケールには、細かな位置合わせに使う 2 ピクセル刻みや、レイアウトに使う最大 80 ピクセルの値も含まれます。

角丸でまとまりを表現する

Monday Vibe デザインシステム：編集可能なテーブルと一括操作ツールバー

データの構造を明確にする

各作業項目には、変更されないid、タイトル、担当者、ステータスがあります。ネイティブの列見出しで、それぞれの値を説明します。行のチェックボックスを選択すると、idがSetに追加されます。ステータスを変更する際は、配列を直接変更せず、該当するオブジェクトを置き換えます。「選択した項目を完了」操作では同じSetを参照し、選択した行だけを更新します。完了数の概要は行データから算出します。

選択を含むSetが空の場合、一括操作のプライマリボタンは無効になります。
各行のターシャリアクションでは、デモ用にステータスを順番に切り替えます。
リセット操作で初期状態の行に戻し、選択を解除します。

Monday Vibe デザインシステム：実際のButtonで状態を表現する API

無効、読み込み中、押下状態はそれぞれ異なる

ネイティブの例では、一括操作を実行できない場合にdisabledを使います。リモート操作がないため、読み込み中や成功の状態は表示しません。実際の永続化レイヤーに接続する場合は、リクエストのライフサイクルにloadingを連動させ、確認後にのみ成功状態へ更新します。Buttonのソースには、外観を示すactiveと、トグルのセマンティクスを示すaria-pressedもあります。一方を他方の代わりに使うことはできません。

ローカルの編集をサービス上での更新と誤認させない

ライブメッセージでは、ローカルで変更された項目数を伝えます。monday.comのボードが更新されたとは表示しません。再読み込みすると、サンプルデータが初期状態に戻ります。本番環境で連携するには、デザインシステムの範囲外で、明示的なワークスペース権限、エラー処理、同期の仕組みが必要です。

Monday Vibe デザインシステム：画面幅が変わっても行の意味を保つ

デモを適切にリフローする

オフラインのボードでは、画面の狭い端末で各行をラベル付きの項目カードとして縦に並べます。担当者とステータスがわかるよう、列名をラベルとして表示します。これはアプリケーションのレイアウト上の選択であり、Vibeがすべてのテーブルを自動で変換するという意味ではありません。データ量の多い場合の代替案として、ネイティブのスターターではラベル付きの横スクロール領域にセマンティックなテーブルを配置します。

全要素へのbox-sizingの適用が前提

ライブラリを使う前に、要素と疑似要素へborder-boxを適用してください。適用しない場合、固定幅のセルにパディングを加えると、特に密度の高い列内にボタンがあるとき、意図したサイズを超えることがあります。外側のコンテナは柔軟に保ち、ツールバーの操作項目は折り返せるようにします。

Monday Vibe デザインシステム：選択状態とステータスにはそれぞれ独立した名前を付ける

すべての行コントロールにラベルを付ける

選択チェックボックスのアクセシブルな名前には、作業項目のタイトルが含まれます。各ステータス操作には、項目名と現在のステータスが含まれます。丁寧な通知メッセージで一括操作の結果を伝えます。キーボードを使うユーザーは、標準のコントロールで行を選択し、一括操作を実行してボードをリセットできます。表計算ソフトのような矢印キー操作を独自に追加していません。

Design handoffを選択し、一括操作が可能になることを確認します。
選択した項目を完了し、ステータスのテキストと算出された件数が一致することを確認します。
リセットして、データとチェックボックスの選択がどちらも初期状態に戻ることを確認します。

Monday Vibe デザインシステム：クライアントサイドのエントリー一式

インストール、インポート、マウント

以下は、ルート要素を含むReactクライアントプロジェクト向けのmain.jsxエントリーです。react、react-dom、@vibe/core@4をインストールし、トークンCSSを一度読み込み、指定のグローバルスタイルシートを適用します。現行パッケージはESモジュール形式でエクスポートします。サーバーサイドでのスタイル抽出は実験的機能として説明されているため、このスターターではクライアントレンダリングを使用します。

Monday Vibe デザインシステムのコンポーネント例

完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。検証済みのVibeライトテーマのカラーパレット、スペーシング、タイポグラフィの寸法を使った独立したHTML/CSSの解釈です。フォントにはシステムフォールバックを使用します。

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でのフォント読み込み

推奨される2種類のフォントファミリーを明示的に読み込みます。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">