# Tella · Design system migration spec

> Source: https://www.tella.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of modern SaaS design that balances professional utility with a clean, approachable aesthetic through disciplined typography and color usage.

## 1. Identity DNA

Tella's design system is built on the analogy of a polished, modern video production tool—a clean slate that lets the user's content take center stage. The system balances professional utility with approachable design through a disciplined palette and deliberate whitespace.

**One-liner:** An all-in-one screen recorder and video editor designed for professional team and creator workflows.
**Keywords:** screen recorder · video editing · team communication · professional · all-in-one
**Analogy:** A polished, modern video production tool that balances professional utility with approachable design.

## 2. Color

The color system is a refined and clean palette consisting primarily of white, light slate grays, and deep navy blue. A single vibrant purple accent is used sparingly to guide attention and actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F1F5F9` | card background |
| `--bg-quiet` | `#F8FAFC` | quiet area |
| `--ink` | `#0F172A` | body text |
| `--ink-soft` | `#64748B` | secondary text |
| `--muted` | `#94A3B8` | placeholder |
| `--muted-soft` | `#CBD5E1` | weak hint |
| `--accent` | `#5E51F8` | single accent |
| `--line` | `rgba(226, 232, 240, 1)` | divider |

**Color principle:** Clean slate palette with a single vibrant purple accent to guide attention and actions.

The principle is restraint: a neutral foundation allows the single action color to command focus without visual competition.

## 3. Typography

Typography employs clean, modern humanist and grotesque sans-serif families for high legibility and a professional voice. Clear typographic hierarchy separates features and benefits, with tight tracking on display sizes for a polished finish.

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.8px | Main hero headline |
| display-sm | 32px | 1.2 | 500 | -0.5px | Section headings |
| body | 16px | 1.5 | 450 | -0.3px | General body text |
| caption | 14px | 1.4 | 450 | 0px | Labels and descriptions |

**Type rules:**
- 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

## 4. Spacing

A consistent 4px grid establishes the system's rhythm, creating tight and predictable spacing for components and padding.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid system for tight, predictable component spacing and padding.

## 5. Surfaces

Depth is communicated through a series of subtle, soft elevation shadows that lift surfaces from the background. Borders are minimal and refined, using a light, semi-transparent slate to define edges without harshness.

- **Radius:** sm 4px · md 12px · lg 20px · pill 999px
- **Shadows:**
  - 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)
- **Borders:** 1px solid rgba(226, 232, 240, 1)

## 6. Layout

The layout skeleton is a centered, single-column structure for the hero section, emphasizing the primary message with generous whitespace. This transitions into a structured grid for feature demonstrations, maintaining order and clarity.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is used subtly and functionally, primarily through quick, smooth transitions for interactive state changes. The philosophy ensures the interface feels responsive and polished without becoming distracting or overwhelming.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth 0.15s color and background transitions on interactive elements
  - Subtle opacity transitions for UI state changes

- **Hover:** Subtle background or color shifts on buttons and links to indicate interactivity.
- **Click:** Immediate visual feedback with slight scale or opacity changes.
- **Transition:** Smooth 150ms transitions for color, background, and transform properties.
- **Keyboard:** Standard focus outlines and accessible tab navigation through interactive elements.

## 8. Voice & Don'ts

The editorial voice is professional, direct, and benefit-oriented, highlighting the tool's dual utility for creators and teams. Copy is concise and action-focused, avoiding technical jargon and long-winded explanations.

- **Tone:** Professional, direct, and benefit-oriented.
- **Headline style:** Concise and action-focused, highlighting the dual utility of the tool for different use cases.
- **CTA style:** Simple and welcoming, using 'Start for free' to lower the barrier to entry.
- **Avoid:** Technical jargon / Overly playful language / Long-winded explanations

### Don'ts
- ❌ Don't use a busy, multi-colored palette — screenshot shows a restrained slate and purple scheme.
- ❌ Don't use decorative or highly stylized fonts — screenshot shows clean, legible sans-serif families.
- ❌ Don't clutter the layout with too many elements — screenshot shows generous whitespace and a clear focal point.
- ❌ Don't use sharp, square corners — screenshot shows consistent use of rounded corners and pill shapes.
- ❌ Don't use heavy, multi-layered shadows — screenshot shows subtle, soft elevation shadows.
- ❌ Don't use overly small touch targets — screenshot shows large, easily clickable buttons and navigation.

The system deliberately avoids decorative fonts, cluttered layouts, and overly playful language, committing instead to clarity and functional utility.

## System Prompt (paste into AI tool)

```
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.
```