精選 · 開放 · 免費

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.15s 顏色與背景過渡效果 · 介面狀態變化時細膩的透明度過渡效果

按鈕與連結上細微的背景或顏色變化，以指示其互動性。 · 透過輕微的縮放或透明度變化，提供即時的視覺回饋。

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