---
title: "Tella design system"
variant: extended
source: https://www.tella.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/tella-tv)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Tella · Design System

> A calm canvas for vivid product stories

**Theme:** light · **Industry:** saas · **Source:** https://www.tella.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Tella’s homepage pairs a quiet white canvas and restrained violet calls to action with large, colorful product demonstrations. Editorial headings and alternating feature layouts make the screen-recording workflow feel approachable and easy to scan.

## North star

Keep the page itself quiet and editorial; let violet actions and vivid product demonstrations provide the visual emphasis.

## Overview

The page is built on a near-white canvas, with charcoal headings and muted gray supporting copy; violet is reserved for primary actions, links, and small interface accents. Oracle gives the page its distinctive editorial voice: headings are regular-weight, compactly tracked, and generously sized, while Inter appears in selected interface controls. The first viewport is deliberately open, with a concise left-aligned hero above a large product demonstration. Below, feature sections alternate copy and media positions, then move into multi-column feature cards, a comparison-style panel, video examples, FAQ, CTA, and footer. Section spacing keeps the long page breathable rather than dense. Product media carries most of the saturated color—glitch-like gradients, screen UI, and camera footage—so those vivid tones should remain inside demonstrations instead of becoming general page decoration. Rounded buttons, softly rounded media frames, and fine gray borders create a friendly, low-friction interface without heavy ornament.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and clean card backgrounds; the dominant backdrop. |
| Tella Violet | `#5e51f8` | `--color-tella-violet` | brand | Primary Get started and Sign up buttons, plus violet interface accents. |
| Soft Violet | `#8278fa` | `--color-soft-violet` | accent | Learn more link text and restrained secondary violet accents. |
| Quiet Gray | `#878787` | `--color-quiet-gray` | neutral | Muted body copy and secondary text against the light canvas. |
| Near Black | `#111111` | `--color-near-black` | neutral | Strong headings and high-contrast interface text. |
| Hairline Gray | `#eaeaea` | `--color-hairline-gray` | neutral | Fine borders around cards, media frames, and interface elements. |
| Warm Porcelain | `#fafaf9` | `--color-warm-porcelain` | surface | Subtle pale surfaces and low-contrast badge or card backgrounds. |
| Deep Umber | `#1c1917` | `--color-deep-umber` | neutral | Dark inverse surfaces and text in select interface areas. |
| Interface Blue | `#1a56c4` | `--color-interface-blue` | semantic | Minor blue badge or text detail; not a defining page brand color. |
| Mid Gray | `#a0a0a0` | `--color-mid-gray` | neutral | Secondary muted text within interface and supporting content. |
| Bright Violet | `#6d60ff` | `--color-bright-violet` | accent | Violet variation detected on button artwork; keep subordinate to the primary CTA color. |
| Status Green | `#188038` | `--color-status-green` | semantic | Small status or badge detail inside product interface imagery. |
| Lilac Detail | `#d49dfb` | `--color-lilac-detail` | semantic | Minor badge-like product UI detail, not a general page accent. |
| Stone Gray | `#78716c` | `--color-stone-gray` | neutral | Secondary interface and footer text in a warm neutral tone. |
| Screen Black | `#0c0c0c` | `--color-screen-black` | neutral | Near-black text and controls, including sampled interface content. |
| Warm Charcoal | `#44403c` | `--color-warm-charcoal` | neutral | Secondary dark text and small supporting interface details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fafaf9` (Warm Porcelain) · `--color-surface-2` → `#1c1917` (Deep Umber) · `--color-surface-3` → `#111111` (Near Black) · `--color-text` → `#111111` (Near Black) · `--color-text-muted` → `#878787` (Quiet Gray) · `--color-text-subtle` → `#a0a0a0` (Mid Gray) · `--color-border` → `#eaeaea` (Hairline Gray) · `--color-accent` → `#8278fa` (Soft Violet) · `--color-accent-2` → `#5e51f8` (Tella Violet) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#fafaf9` | 18.08:1 | AAA |
| `#111111` | `#1c1917` | 1.08:1 | fail |
| `#878787` | `#ffffff` | 3.59:1 | AA-large |
| `#878787` | `#fafaf9` | 3.44:1 | AA-large |
| `#878787` | `#1c1917` | 4.87:1 | AA |
| `#878787` | `#111111` | 5.26:1 | AA |
| `#a0a0a0` | `#ffffff` | 2.61:1 | fail |
| `#a0a0a0` | `#fafaf9` | 2.5:1 | fail |
| `#a0a0a0` | `#1c1917` | 6.69:1 | AA |

### Gradients

- `linear-gradient(lab(5.06335 -0.00000745058 -0.00000298023 / 0.01) 0%, lab(5.06335 -0.00000745058 -0.00000298023 / 0.035) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 2.37%, rgba(0, 0, 0, 0.15) 5.83%, rgba(0, 0, 0, 0) 19.93%, rgba(0, 0, 0, 0) 81.17%, rgba(0, 0, 0, 0.15) 92.44%, rgba(0, 0, 0, 0.3) 96.32%, rgba(0, 0, 0, 0.6) 100%`
- `linear-gradient(rgba(255, 255, 255, 0.78) 0%, rgba(238, 242, 255, 0.58) 30%, rgba(232, 237, 255, 0.48) 68%, rgba(224, 231, 255, 0.62) 100%)`
- `linear-gradient(rgb(255, 255, 255) 0%, rgb(245, 245, 244) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| oracle | `--font-body` | webfont | 400, 500 | Primary brand type for hero and section headings, body copy, links, navigation, and most page text. | Inter |
| Inter | `--font-inter` | webfont | 500, 600, 400 | Selected interface controls, buttons, captions, and compact product UI labels. | Inter |

- **oracle:** Regular weights dominate; headings use tight negative tracking and sentence case. Preserve the calm editorial feel.
- **Inter:** Use measured regular to semibold weights for controls; keep labels concise and avoid all-caps styling.

### Type scale — Perfect Fourth (ratio ≈ 1.343, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 400 | 1.08 | -0.02em | — | oracle | Hero headline and prominent page-level statement. |
| h2 | 32px | 400 | 1.2 | -0.02em | — | oracle | Major feature section headings and closing CTA. |
| h3 | 24px | 400 | 1.2 | -0.02em | — | oracle | Feature-card titles and secondary content headings. |
| h4 | 20px | 400 | 1.5 | -0.02em | — | oracle | Small subheadings within feature or explanatory content. |
| body | 16px | 400 | 1.5 | -0.02em | — | oracle | Feature descriptions and standard explanatory copy. |
| caption | 13px | 500 | 1.33 | -0.02em | — | oracle | Compact labels and supporting interface details. |
| button | 18px | 400 | 1.56 | 0 | — | Inter | Primary and secondary action labels. |
| link | 16px | 400 | 1.5 | -0.02em | — | oracle | Inline Learn more links and navigation links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 10, 12, 16, 18, 20, 24, 32, 48, 64 px.
- Section rhythm 64px · element gap 10px · card padding — · max content width 1300px.

Use a centered content area capped at the measured 1300px maximum, with a comfortable density and consistent section rhythm. The navigation spans the top; the hero and most feature sections are left-aligned, while the closing CTA is centered. Alternate two-column copy-and-media feature splits, then use three- and four-column arrangements for feature summaries and video examples. Maintain generous whitespace around media and headings, with the measured section gap of 64px and compact element spacing of 10px as the underlying rhythm.

## Shape & elevation

- Radius: button `9999px` · card `28px` · media `50%` · badge `50%` · nav `4px` · link `4px` · xs `3px` · sm `4px` · md `6px` · lg `8px` · xl `9px` · 2xl `12px` · pill `9999px`
- Shadow `sm` (button, other, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 0.5`
- Shadow `inset` (section): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(255, 255, 255) 0px 0px 0px 1px inset`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 8px 32px 4px`
- Shadow `md` (card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 6px 12px 0px, rgba(0, 0, 0, 0.04) 0px 3p`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0p`
- Shadow `md-2` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 4.5px 6px 0px, rgba(0, 0, 0, 0.03) 0px 2`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page relies on flat white surfaces and delicate #eaeaea hairlines rather than pronounced card elevation. Product demonstrations may layer interface windows, webcam tiles, and controls to show workflow depth. Keep shadows soft and localized, especially around floating UI panels; buttons remain pill-shaped and visually clear without heavy depth effects.

## Imagery

Product demonstrations are the main visual content: screen captures of the editor, sharing, export, and recording interfaces sit alongside webcam footage. Frame media in large rounded panels with subtle borders and occasional soft shadows. Glitch-like color fields and bright gradients appear within the showcased product visuals, while the page canvas stays restrained. Use authentic-looking video and interface imagery rather than generic stock photography or decorative illustration.

## Components

### Top navigation

Clean horizontal wordmark and links on white; navigation uses oracle at 16px, with a compact outlined Log in action and violet pill Sign up CTA.

### Primary CTA

Violet #5e51f8 pill with white text; Get started is measured at 16px oracle with generous horizontal padding.

### Feature split

Alternating left-right copy and large product media, with a concise heading, muted explanatory text, and a violet Learn more link.

### Product showcase

Layered screen-recording UI and webcam footage inside a large rounded frame, with product colors kept within the media.

### Feature cards

Three-column feature summaries with short headings, explanatory copy, and Learn more links; avoid heavy card chrome.

### FAQ accordion

Two-column FAQ area with a section heading and stacked questions, plus/minus controls, and fine separators.

### Footer

Pale, spacious multi-column link directory with grouped headings, compact links, brand mark, and legal links.

### Measured component styles

- **Primary button** (“Share”): background #5e51f8 · text #ffffff · border 1px solid #5e51f8 · radius 6px · padding 2px 8px · 500 15px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Learn more”): transparent background · text #8278fa · radius 4px · padding 0px · 400 16px oracle
- **Card** (“gridbook.app Q2 video metrics File Edit ”): background #ffffff · text #0c0a09 · border 1px solid #eaeaea · radius 16px · padding 0px · 400 16px oracle
- **Badge** (“1”): background #f8f9fa · text #78716c · radius 0px · padding 0px · 500 9px Inter
- **Navigation item** (“Features Teams Pricing Log in Sign up”): transparent background · text #0c0a09 · radius 0px · padding 0px · 400 16px oracle

## Do

- Keep the canvas predominantly white and visually quiet.
- Use violet for primary actions and restrained link accents.
- Let product screenshots and video provide the saturated color.
- Alternate media and copy positions across feature sections.
- Use editorial, left-aligned headings with compact tracking.
- Separate sections with generous whitespace and fine hairlines.

## Don't

- Do not turn the full page into a dark interface.
- Do not use vivid product-art colors as broad background fills.
- Do not crowd the hero with extra copy or controls.
- Do not add heavy shadows to every card or media panel.
- Do not replace product demonstrations with generic stock imagery.
- Do not overuse violet outside actions and small accents.

## Agent prompt

Build a new Tella-style SaaS page with a calm, near-white canvas and editorial product-led layout. Use Gallery White (#ffffff) for the main surface, Near Black (#111111) for strong headings, Quiet Gray (#878787) for supporting copy, Hairline Gray (#eaeaea) for subtle borders, and Tella Violet (#5e51f8) for primary pill CTAs; reserve Soft Violet (#8278fa) for text links. Use the measured Oracle-like editorial font for most content and Inter for selected controls. Create a concise left-aligned hero above a prominent recording-product demonstration. Follow with alternating copy/media feature splits, compact multi-column summaries, video examples, FAQ, centered closing CTA, and a grouped footer. Keep spacing comfortable, media rounded, shadows soft, and vivid gradients confined to product imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Navigation above a left-aligned headline, supporting line, CTA, and wide product demo. | Primary signup action, Product preview tabs | Minimal top navigation, Violet pill CTA, Large media frame |
| 2 | feature-split | Two columns: explanatory copy alongside a recording interface preview. | Learn more link, Demonstrate capture workflow | Split layout, Layered product screenshot |
| 3 | feature-split | Two-column feature band with product media opposite explanatory copy. | Learn more link, Explain automatic enhancements | Media-led panel, Soft violet product imagery |
| 4 | product-showcase | Copy beside a broad editor interface showcase with layered editing controls. | Learn more link, Show editing controls | Multi-panel editor UI, Timeline and tool list |
| 5 | feature-grid | Heading above three compact feature columns with video examples. | Feature discovery, Inline Learn more links | Three-column grid, Video thumbnails |
| 6 | feature-split | Copy and link on one side, a sharing interface demonstration on the other. | Learn more link, Show link-sharing outcome | Split feature layout, Layered share controls |
| 7 | feature-split | Export dialog media beside a short explanatory text block. | Learn more link, Expose resolution and FPS choices | Download dialog, Resolution selector |
| 8 | feature-grid | Section heading followed by three feature columns. | Explore follow-on features, Learn more links | Three-column summaries, Compact text blocks |
| 9 | comparison | Copy and checklist balanced against a large product icon visual. | Checklist comparison, Consolidate workflow message | Two-column panel, Oversized product artwork |
| 10 | video | Short introduction alongside a four-column video gallery. | Browse real examples, Video-led proof | Video thumbnail grid, Multi-person collage |
| 11 | faq | Section heading beside a vertically stacked accordion. | Expandable answers, Quick product questions | Two-column FAQ, Fine row separators |
| 12 | cta | Centered statement and CTA over a wide, pale product-art backdrop. | Single conversion action, Repeat signup invitation | Centered headline, Violet pill button, Soft colorful media backdrop |
| 13 | footer | Five grouped link columns above brand, copyright, and legal links. | Grouped site navigation, Legal and company links | Multi-column directory, Subtle pale background |

## Source CSS custom properties (selected)

```css
--smooth-ring-color: #0000000d;
--floating-surface-ink: 30 32 37;
--color-theme-neutral-50: #fff;
--color-theme-neutral-100: #fafaf9;
--color-theme-neutral-200: #f5f5f4;
--color-theme-neutral-300: #e7e5e4;
--color-theme-neutral-400: #e7e5e4;
--color-theme-neutral-500: #a8a29e;
--color-theme-neutral-600: #78716c;
--color-theme-neutral-700: #78716c;
--color-theme-neutral-800: #57534e;
--color-theme-neutral-900: #44403c;
--color-theme-neutral-950: #1c1917;
--color-theme-pill: #3a3c41;
--color-theme-scrollbar: #fff6;
--color-theme-selection: #e0defe;
--color-theme-selection-fg: #1c1917;
--background: #fff;
--foreground: #1c1917;
--muted-foreground: #78716c;
--accent: #e7e5e4;
--primary: #4f46e5;
--primary-foreground: #fff;
--secondary: #f5f5f4;
--secondary-foreground: #1c1917;
--border: #e7e5e4;
--card-foreground: #1c1917;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/tella-tv