精選 · 開放 · 免費

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

標題文字使用 grotesque-sans 字型，正文則採用親和力較高的 humanist-sans。 · 大型標題保持緊湊的行高（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

微互動（如 hover 狀態、色彩變化）採用細微、快速的過渡效果。 · 彈窗或面板顯示採用稍長的過渡效果。

主要按鈕與互動元素在 hover 時立即進行色彩過渡，使用流暢的緩動曲線。 · 透過細微的縮放或透明度變化提供觸覺反饋。

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）為主，主要行動呼籲則採用鮮明的藍色（#1868DB）強調色。字型方面，標題使用加粗的 grotesque-sans，正文則採用乾淨的 humanist-sans。重要禁忌：避免尖銳邊角（應使用膠囊形狀）、避免複雜配色（保持簡約）、避免使用小型文字作為主要訊息（應採用加粗、大型的展示字型）。佈局寬敞且居中，搭配細微的陰影與快速、流暢的微互動過渡效果。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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