CURATED · OPEN · FREE

Tella

An all-in-one screen recorder and video editor designed for professional team and creator workflows.

productivityvideo
Tella screenshot
↓ Download design system (25 MB)Open in OpenDesign

Visit: https://www.tella.com

📦 Browse pack contents →

01

Identity DNA

screen recordervideo editingteam communicationprofessionalall-in-one

A polished, modern video production tool that balances professional utility with approachable design.

02

Color

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

Clean slate palette with a single vibrant purple accent to guide attention and actions.

03

Typography

grotesque-sans · humanist-sans · monospace

Use tight negative tracking on large display sizes · Maintain consistent 450 weight for body text to ensure readability · Use clear typographic hierarchy to separate features and benefits

04

Spacing

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

Consistent 4px grid system for tight, predictable component spacing and padding.

05

Surfaces

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

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

Centered column layout with generous whitespace to emphasize the hero section.

07

Motion & Interaction

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

Smooth 0.15s color and background transitions on interactive elements · Subtle opacity transitions for UI state changes

Subtle background or color shifts on buttons and links to indicate interactivity. · Immediate visual feedback with slight scale or opacity changes.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

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 — 移动首屏
移动首屏

Captured from the live site · real computed styles

11

System prompt

Tella is a professional SaaS product for screen recording and video editing, targeting teams and content creators. The design uses a clean white and slate palette (#FFFFFF, #F1F5F9, #0F172A) with a single vibrant purple accent (#5E51F8) for key calls-to-action. Typography relies on clean, modern humanist and grotesque sans-serif categories for high legibility. Key critical donts: avoid a cluttered layout, don't use overly decorative fonts, and never ignore the importance of generous whitespace to maintain the premium, tool-focused feel. The overall voice is professional and direct, emphasizing ease of use.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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