一つの境界。さまざまな状態。
状態バッジの見本。監査スコアのバンドとは別の意味です。
ヘルスバンドの基準。測定結果ではありません。
しっかり織り上がっている 90–100
まとまっている 75–89
形になりつつある 60–74
ほつれが多い 0–59
ほころびと修復
8つのフレームで、境界を保ち、糸を集め、ほころびを示し、形をつなぎ直します。一時停止するか、フレームを選んで接合を確認できます。
8 / 8 · 再びまとまる
形の組み立て
分かれた部品の角をそろえ、一つの織られた形につなぎます。
6 / 6 · 組み合わせを完成させる
断片からシステムへ
散らばった要素を、共通の関係と明確な境界の中へ整えます。
4 / 4 · 一つにつながる
ずれを見つける
共通のルールに照らすと、小さなずれが見えます。確認して再び整えます。
4 / 4 · 確認して整える
仕事を担当者へつなぐ
問いはルールに従って確認する担当者へ届き、決定が記録されます。
4 / 4 · 決定を記録する
つながる四つの仕事
見える化する。整える。守る。運用する。
実際の構成階層
各階層からLoom Siteの実際の要素へ移動できます。このウェブサイト自身がシステムを利用しています。
- 基盤
システムの特徴と制約を定める決定。
色（英語） ↗実装・契約からの見本（技術情報は英語）
cotton- Page ground
ink- Text, rules, primary button
teal- See · the UX Ops lead · the Academy · articles · holding together
- トークン
色、文字、余白、動きに名前を付け、元の値を一か所で管理。
コンポーネントのトークン（英語） ↗実装・契約からの見本（技術情報は英語）
color.palette.greige.900Baseのプリミティブcolor.text.default → --inkセマンティックな役割・ライトモード--identity-sticker-inkコンポーネントのエイリアス
- アトム
状態、ルール、アクセシビリティを備えた小さな再利用要素。
ボタン（英語） ↗実装・契約からの見本（技術情報は英語）
ボタンの契約を見る - モレキュール
一つの目的のために組み合わせた要素。
アクションの組（英語） ↗ - オーガニズム
小さな要素から構成したインターフェースのまとまり。
ヘッダー（英語） ↗実装・契約からの見本（技術情報は英語）
- テンプレート
繰り返し使えるページ構造を定める配置とコンテンツ枠。
ヒーロー（英語） ↗実装・契約からの見本（技術情報は英語）
実際の描画例を見る
静的な見本です。操作の詳細は契約を参照してください。
デザインシステムを、
次の レベルへ。 Loomは、いまあるシステム、あるいはまだないシステムを、チームとAIツールが従える明確でガバナンスの効いた決定へと変えます。プロダクトの見た目はそのままです。主導権は皆さまの手にあり、専門家の支援とエージェントが日常的な作業を担います。
jobsTitle- The owner-approved line above the jobs band (See it. Shape it. Govern it. Run it.).
title・必須- The headline (owner-approved).
lede・必須- The promise.
actions・必須- The CtaPair.
live- The Drift hero panel.
jobs・必須- The four jobs band.
- ページ
実際のコンテンツと検証した順序でテンプレートを構成。
ランディングページ（英語） ↗実装・契約からの見本（技術情報は英語）
hero必須problem-section任意lead-section任意flow-section任意job-section任意・繰り返し可proof-section任意・繰り返し可roles-section任意founder-section任意roadmap-strip任意cta-section必須
小さな要素を組み合わせて大きな構造を作ります。すべての依存関係が七段階を順番に通る必要はありません。組織やブランドの継承とは別の階層です。
実際の依存関係
headerlogo·language-switch·button·arrow-link·iconheroheading·text·cta-pair·drift-hero·jobs-strip·tile·dye-field
別の見方：運用の流れ
元のフィールドガイドにある五つの段階は、仕事を進める流れです。コンポーネントの大きさや継承関係ではありません。
- シグナル具体的な必要性やずれを観察する。
- パターン観察から繰り返し現れる関係を見つける。
- 決定選んだ対応と理由を記録する。
- ルール今後の作業が従う制約を定める。
- アクション決定を実行し、結果を確認する。
図は考え方を説明するものです。サイト自身の事例とシステムライブラリ（英語）で、実装の根拠と残る課題を確認できます。