精选 · 开放 · 免费

Tella

一款专为专业团队和创作者工作流设计的一体化屏幕录制和视频编辑器。

productivityvideo
Tella 网站截图
↓ 下载设计系统包 (25 MB)在 OpenDesign 中打开

原站: https://www.tella.com

📦 浏览包内文件 →

01

设计气质 DNA

屏幕录制视频编辑团队沟通专业一体化

一个精致、现代的视频制作工具，平衡了专业实用性与亲和的设计。

02

色彩

#5E51F8Accent
#0F172AInk
#64748BInk soft
#FFFFFFBG
#F1F5F9BG soft
#F8FAFCBG quiet
#94A3B8Muted
rgba(226, 232, 240, 1)Line

干净的石板色调色板，辅以单一的鲜明紫色点缀，以引导注意力和行动。

03

字体

grotesque-sans · humanist-sans · monospace

在大尺寸显示时使用紧凑的负字距 · 为正文保持一致的 450 字重以确保可读性 · 使用清晰的排版层级来区分功能和优势

04

间距

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

采用一致的 4px 网格系统，实现紧凑、可预测的组件间距和内边距。

05

表面 (圆角 / 阴影 / 边线)

sm · 4px
md · 12px
lg · 20px
pill · 999px

1px solid rgba(226, 232, 240, 1)

0px 1px 2px 0px rgba(0, 0, 0, 0.05) · 0px 4px 16px 0px rgba(0, 0, 0, 0.06) · 0px 8px 32px 4px rgba(0, 0, 0, 0.15)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

居中的栏式布局，辅以充足的留白以突出英雄区域。

07

动效与交互

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

交互元素上平滑的 0.15 秒颜色和背景过渡 · 用于 UI 状态变化的微妙透明度过渡

按钮和链接上微妙的背景或颜色变化，以指示可交互性。 · 通过轻微的缩放或透明度变化提供即时视觉反馈。

08

组件

09

文案语气与禁用清单

10

包内真实截图

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

抓自真实页面 · 真 computed styles

11

System Prompt

Tella 是一款专业的 SaaS 产品，用于屏幕录制和视频编辑，面向团队和内容创作者。设计采用干净的白色和石板灰色调（#FFFFFF, #F1F5F9, #0F172A），并辅以单一的鲜明紫色点缀（#5E51F8）用于关键的行动号召。排版依赖于干净、现代的无衬线字体类别以实现高可读性。关键禁忌：避免杂乱的布局，不要使用过于装饰性的字体，并始终重视充足的留白以维持高端、工具导向的感觉。整体语调专业而直接，强调易用性。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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