厳選・オープン・無料

Loom

明確さとユーザーアクションを重視した、クリーンで信頼性の高いエンタープライズSaaSデザイン。

productivityvideo
Loom のスクリーンショット
↓ デザインシステムをダウンロード (16 MB)OpenDesign で開く

オリジナル: https://www.loom.com

📦 パックの中身を見る →

01

デザイン DNA

ビデオメッセージ生産性非同期コミュニケーションエンタープライズ

明確さとアクションを重視した、クリーンで信頼性の高いエンタープライズダッシュボード。

02

カラー

#1868DBAccent
#292A2EInk
#FFFFFFBG
#E9F2FEBG quiet
#101214Muted
rgba(41,42,46,0.1)Line

プライマリアクションに単一の鮮やかなブルーを使用した、クリーンでハイコントラストなパレット。

03

タイポグラフィ

grotesque-sans · humanist-sans

インパクトのあるディスプレイテキストにはグロテスク・サンズを、親しみやすい本文にはヒューマニスト・サンズを使用する。 · 密度感のあるモダンな印象を与えるために、大きな見出しには tightened なラインハイト（1.0-1.1）を維持する。

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

一貫した4pxベースを採用し、主要セクション間には余裕のある垂直間隔（111px）を確保して息抜きを担保する。

05

サーフェス (角丸 / 影 / 罫線)

sm · 4px
md · 8px
lg · 12px
pill · 9999px

プライマリインクカラーを低不透明度で使用した、細く繊細なボーダー。

0px 2px 6px rgba(0,0,0,0.04) · 0px 5px 18px rgba(0,0,0,0.06) · 0px 24px 83px rgba(0,0,0,0.1)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

ヒーローセクションには中央揃えのシングルカラムレイアウトを、フィーチャーセットにはマルチカラムグリッドへと移行する。

07

モーションとインタラクション

100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

ホバーステートやカラーチェンジなどのマイクロインタラクションには、繊細で速いトランジション。 · モーダルやパネルの表示には、やや長いトランジション。

プライマリボタンやインタラクティブな要素に、滑らかなイージングカーブを使用した即座のカラートランジション。 · タクタイルフィードバックを提供する、繊細なスケールまたは不透明度のシフト。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

Loom — 桌面首屏（hero）
桌面首屏（hero）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Loom — 移动首屏
移动首屏

実ページから取得 · 実 computed styles

11

System Prompt

Loomのデザインは、明確さとアクションを重視した、クリーンで信頼性の高いSaaS美学です。背景には主に白（#FFFFFF）とライトブルー（#E9F2FE）を、プライマリCTAには支配的で鮮やかなブルー（#1868DB）アクセントを使用しています。タイポグラフィは、ディスプレイ見出しに大胆なグロテスク・サンズを、本文テキストにクリーンなヒューマニスト・サンズを採用しています。重要な禁止事項：鋭い角を避ける（ピル形状が使用されている）、複雑なカラースキームを避ける（ミニマルに保つ）、プライマリメッセージに小さなテキストを避ける（大胆で大きなディスプレイフォントを使用する）。レイアウトはゆったりと中央揃えで、繊細なシャドウと、速く滑らかなマイクロインタラクションのトランジションを特徴としています。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

en · zh-CN · zh-TW · ja · ko