精选 · 开放 · 免费

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 状态和颜色变化）使用微妙、快速的过渡效果。 · 为模态框或面板的显示使用稍长的过渡效果。

主按钮和交互元素使用平滑的缓动曲线进行即时颜色过渡。 · 通过微妙的缩放或不透明度变化提供触觉反馈。

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