1. 基盤

    システムの特徴と制約を定める決定。

    色（英語） ↗

    実装・契約からの見本（技術情報は英語）

    cotton
    Page ground
    ink
    Text, rules, primary button
    teal
    See · the UX Ops lead · the Academy · articles · holding together
  2. トークン

    色、文字、余白、動きに名前を付け、元の値を一か所で管理。

    コンポーネントのトークン（英語） ↗

    実装・契約からの見本（技術情報は英語）

    1. color.palette.greige.900Baseのプリミティブ
    2. color.text.default → --inkセマンティックな役割・ライトモード
    3. --identity-sticker-inkコンポーネントのエイリアス
  3. アトム

    状態、ルール、アクセシビリティを備えた小さな再利用要素。

    ボタン（英語） ↗

    実装・契約からの見本（技術情報は英語）

    ボタンの契約を見る
  4. モレキュール

    一つの目的のために組み合わせた要素。

    アクションの組（英語） ↗

    実装・契約からの見本（技術情報は英語）

    主なアクション もう一つの選択肢
  5. オーガニズム

    小さな要素から構成したインターフェースのまとまり。

    ヘッダー（英語） ↗

    実装・契約からの見本（技術情報は英語）

    実際の描画例を見る

    静的な見本です。操作の詳細は契約を参照してください。

  6. テンプレート

    繰り返し使えるページ構造を定める配置とコンテンツ枠。

    ヒーロー（英語） ↗

    実装・契約からの見本（技術情報は英語）

    実際の描画例を見る

    静的な見本です。操作の詳細は契約を参照してください。

    デザインシステムを、次のレベルへ。

    Loomは、いまあるシステム、あるいはまだないシステムを、チームとAIツールが従える明確でガバナンスの効いた決定へと変えます。プロダクトの見た目はそのままです。主導権は皆さまの手にあり、専門家の支援とエージェントが日常的な作業を担います。

    Book a conversation Start with a free health check
    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.
  7. ページ

    実際のコンテンツと検証した順序でテンプレートを構成。

    ランディングページ（英語） ↗

    実装・契約からの見本（技術情報は英語）

    1. hero必須
    2. problem-section任意
    3. lead-section任意
    4. flow-section任意
    5. job-section任意・繰り返し可
    6. proof-section任意・繰り返し可
    7. roles-section任意
    8. founder-section任意
    9. roadmap-strip任意
    10. cta-section必須

小さな要素を組み合わせて大きな構造を作ります。すべての依存関係が七段階を順番に通る必要はありません。組織やブランドの継承とは別の階層です。

実際の依存関係

別の見方：運用の流れ

元のフィールドガイドにある五つの段階は、仕事を進める流れです。コンポーネントの大きさや継承関係ではありません。

  1. シグナル具体的な必要性やずれを観察する。
  2. パターン観察から繰り返し現れる関係を見つける。
  3. 決定選んだ対応と理由を記録する。
  4. ルール今後の作業が従う制約を定める。
  5. アクション決定を実行し、結果を確認する。