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

# Lottielab · Design System

> A calm canvas for expressive motion design

**Theme:** light · **Industry:** design · **Source:** https://www.lottielab.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._

Lottielab presents its animation editor through a spacious, light interface, restrained violet accents, and polished product visuals. The page balances centered product messaging with practical feature explanations, templates, social proof, and a contrasting dark showcase.

## North star

Keep the interface airy and product-led, using violet sparingly to guide attention through a sequence of clear demonstrations.

## Overview

The page uses white as its dominant canvas, giving the product interface and centered hero message room to breathe. Soft gray bands distinguish the editor showcase and footer without turning the page into a stack of heavy cards. Violet is the signature action and emphasis colour: it appears on the primary buttons and selected words in headings, while most copy stays in deep charcoal or muted gray. Plus Jakarta Sans supplies a rounded, contemporary voice; bold, compact headlines contrast with quiet supporting text. Layouts alternate between centered statements, split feature explanations, and broad multi-column demonstrations, with generous vertical intervals between major topics. Product imagery is mostly interface-led: editor frames, animation previews, timelines, and template tiles explain the tool rather than decorative photography. A single deep-plum section creates a deliberate visual pause and frames colorful motion examples. Borders remain pale and subtle, keeping the experience crisp and product-focused.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas for the hero, feature sections, templates, testimonials, and call-to-action. |
| Motion Violet | `#7270ff` | `--color-motion-violet` | brand | Signature primary-button fill and selective heading emphasis. |
| Cloud Gray | `#f6f6f6` | `--color-cloud-gray` | surface | Footer surface and light supporting media or link areas. |
| Quiet Slate | `#6b7280` | `--color-quiet-slate` | neutral | Muted body copy and secondary explanatory text. |
| Hairline Gray | `#e5e7eb` | `--color-hairline-gray` | semantic | Fine outlines around cards, navigation, and interface elements. |
| Deep Ink | `#111827` | `--color-deep-ink` | neutral | Primary heading and body text on light backgrounds. |
| Pale Slate | `#9ca3af` | `--color-pale-slate` | neutral | Low-emphasis testimonial copy and footer text. |
| Soft Graphite | `#4b5563` | `--color-soft-graphite` | neutral | Secondary text, supporting detail, and lower-priority labels. |
| Midnight Plum | `#1c1a2c` | `--color-midnight-plum` | surface | Full-width dark product showcase section. |
| Plum Ink | `#2f2b4a` | `--color-plum-ink` | neutral | Navigation and link text, plus dark-toned headings. |
| Near Black | `#030712` | `--color-near-black` | neutral | Rare dark text occurrence; not a defining page colour. |
| Petal Pink | `#ec4899` | `--color-petal-pink` | accent | Appears in a measured gradient/text treatment; secondary to the core violet identity. |
| Coral Glow | `#f87171` | `--color-coral-glow` | accent | Appears in a measured gradient treatment, not as a primary interface colour. |
| Electric Blue | `#1560fb` | `--color-electric-blue` | accent | Small link or product-detail accent; not a dominant page colour. |
| Warm Sand | `#e6b78b` | `--color-warm-sand` | accent | Minor link or illustration accent, rather than a core brand surface. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f6f6f6` (Cloud Gray) · `--color-surface-2` → `#1c1a2c` (Midnight Plum) · `--color-text` → `#111827` (Deep Ink) · `--color-text-muted` → `#6b7280` (Quiet Slate) · `--color-text-subtle` → `#9ca3af` (Pale Slate) · `--color-border` → `#e5e7eb` (Hairline Gray) · `--color-accent` → `#7270ff` (Motion Violet) · `--color-accent-2` → `#1560fb` (Electric Blue) · `--color-accent-3` → `#e6b78b` (Warm Sand) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111827` | `#ffffff` | 17.74:1 | AAA |
| `#111827` | `#f6f6f6` | 16.41:1 | AAA |
| `#111827` | `#1c1a2c` | 1.04:1 | fail |
| `#6b7280` | `#ffffff` | 4.83:1 | AA |
| `#6b7280` | `#f6f6f6` | 4.47:1 | AA-large |
| `#6b7280` | `#1c1a2c` | 3.52:1 | AA-large |
| `#9ca3af` | `#ffffff` | 2.54:1 | fail |
| `#9ca3af` | `#f6f6f6` | 2.35:1 | fail |
| `#9ca3af` | `#1c1a2c` | 6.71:1 | AA |
| `#7270ff` | `#ffffff` | 3.83:1 | AA-large |

### Gradients

- `linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0))`
- `linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0))`
- `linear-gradient(to right, rgb(236, 72, 153), rgb(248, 113, 113))`
- `linear-gradient(to right, rgb(250, 204, 21), rgb(249, 115, 22))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plus Jakarta Sans | `--font-body` | webfont | 400, 600, 500, 700 | Site-wide interface, navigation, headings, body copy, buttons, and captions. | DM Sans |

- **Plus Jakarta Sans:** Use measured weights 400, 500, 600, and 700; headlines are bold and compact, while navigation and body copy remain sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.554, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1 | -0.025em | — | Plus Jakarta Sans | Large hero or campaign headline when prominent emphasis is needed. |
| h1 | 48px | 600 | 1 | 0 | — | Plus Jakarta Sans | Primary hero headline and major page-level statement. |
| h2 | 36px | 600 | 1.11 | 0 | — | Plus Jakarta Sans | Feature, template, testimonial, and conversion-section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Plus Jakarta Sans | Feature explanations, supporting copy, and standard interface text. |
| caption | 14px | 400 | 1.43 | 0 | — | Plus Jakarta Sans | Small labels, compact notes, and testimonial attribution details. |
| nav | 16px | 500 | 1.5 | 0 | — | Plus Jakarta Sans | Header navigation links. |
| code | 16px | 400 | 1.5 | 0.025em | — | Google Sans Code | Technical or code-like labels inside product demonstrations. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 8, 10, 16, 20, 24, 32, 40, 64, 96, 192 px.
- Section rhythm 96px · element gap 2px · card padding 24px · max content width 1248px.

Use a centered page frame capped at the measured 1248px maximum width, with broad whitespace around the content. The hero and template introduction are centered; feature content alternates between split layouts and multi-column demonstrations. Keep sections spacious, using the measured 96px section gap as the rhythm reference and a 24px card-padding reference. The page is intentionally low-density, with large uninterrupted white areas, occasional light-gray bands, and one full-width dark section.

## Shape & elevation

- Radius: button `12px` · card `8px` · media `50%` · badge `8px` · xs `4px` · sm `8px` · md `9px` · lg `12px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- 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.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(136, 135, 253, 0.2) 0px 20px 25px -5px, rgba(136, 135, 253, 0.2) 0px 8px 10px -6px`
- Motion: standard transition `0.5s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The overall treatment is flat and restrained. Use pale measured hairlines to define cards and interface frames, with modest rounded corners. Layer product mockups clearly over their section backgrounds, but avoid heavy shadows; the measured shadows are subtle and should be reserved for occasional lifted media or emphasis.

## Imagery

Prioritize crisp product-interface imagery: editor canvases, animation frames, timeline details, template previews, and interface cards. Place demonstrations in broad, clean frames and let their varied colorful assets supply visual interest. The dark showcase uses colorful examples against plum. Most visuals are illustrations or rendered UI rather than photography; keep surrounding surfaces quiet so the product remains legible.

## Components

### Primary CTA

Use Motion Violet (#7270ff) with white text, a 12px radius, and clear separation from nearby supporting copy.

### Top navigation

Keep the brand mark at the left and compact text links at the right; finish with a violet Sign up button and a fine lower hairline.

### Product showcase

Present the editor as a wide, pale-gray section with layered preview panels, animation frames, and a visible timeline.

### Feature split

Pair a concise heading and explanatory copy with a product visual; alternate text and media alignment between feature rows.

### Template gallery

Combine a centered introduction and CTA with a tightly arranged, colorful set of visual template previews.

### Testimonial cards

Use restrained white cards with subtle #e5e7eb borders, muted testimonial copy, and compact author details.

### Footer columns

Set grouped product, resource, and company links on a #f6f6f6 surface, with understated text and a small brand mark.

### Measured component styles

- **Primary button** (“Get started for free”): background #7270ff · text #ffffff · border 1px solid #7270ff · radius 12px · padding 8px 20px · 400 18px Plus Jakarta Sans
- **Link** (“Get started for free”): transparent background · text #2f2b4a · radius 0px · padding 0px · 400 16px Plus Jakarta Sans
- **Card** (“"Lottielab is the tool I’ve been waiting”): transparent background · text #9ca3af · border 1px solid #e5e7eb · radius 8px · padding 24px · 400 16px Plus Jakarta Sans
- **Badge** (“1.62”): background #1c1b25 · text #ffffff · radius 8px · padding 4px 10px · 400 12px Plus Jakarta Sans
- **Navigation item** (“Templates Case studies Pricing Login Sig”): transparent background · text #2f2b4a · radius 0px · padding 0px · 500 16px Plus Jakarta Sans

## Do

- Use white as the dominant page canvas.
- Reserve violet for primary actions and selective emphasis.
- Alternate centered messaging with practical product demonstrations.
- Keep explanatory copy short and visually subordinate to headings.
- Use pale borders to define interface frames and cards.
- Give major sections generous breathing room.

## Don't

- Do not flood the page with saturated accent colours.
- Do not add dense, decorative backgrounds behind product UI.
- Do not rely on photography when product visuals explain the feature.
- Do not make every section a boxed card grid.
- Do not use heavy shadows as the default elevation treatment.
- Do not crowd the hero with extra navigation or competing messages.

## Agent prompt

Build a new Lottielab-style page with Plus Jakarta Sans and a spacious, product-led layout. Use Gallery White (#ffffff) as the main canvas, Cloud Gray (#f6f6f6) for quiet supporting bands, and Midnight Plum (#1c1a2c) for one purposeful contrast section. Apply Motion Violet (#7270ff) to the primary CTA and a few highlighted words, not as a broad background. Set headlines in a confident, compact weight; keep supporting copy muted and concise. Alternate centered introductions with split feature rows and wide editor demonstrations. Show interface frames, timelines, animation previews, or template tiles as the main imagery. Use subtle Hairline Gray (#e5e7eb) borders, modest rounded corners, and generous section spacing. Keep the overall page calm, clear, and focused on demonstrating how the product works.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and description, primary CTA, then a compact trust statement and logo row. | primary conversion action, customer trust proof | centered typography, violet CTA, brand logo row |
| 2 | product-showcase | Broad two-column product presentation with multiple animation preview panels and a timeline. | show product in use, preview animation workflow | soft gray band, layered editor panels, timeline strip |
| 3 | feature-split | Alternating two-column feature rows, pairing concise copy with product illustrations. | feature explanation, visual workflow proof | split layout, animation illustration, short heading |
| 4 | integrations | Full-width dark section with left-aligned introduction and three product mockups. | platform compatibility, share and ship | dark plum surface, colorful interface previews, three-column media |
| 5 | other | Short left-aligned introduction on white, followed by a three-column benefits area. | introduce benefits, set up feature list | white canvas, compact heading, spacious lead-in |
| 6 | feature-grid | Three-column feature presentation with product illustrations beneath concise copy. | scan feature benefits, connect copy to product UI | light card outlines, illustrated interface, multi-column grid |
| 7 | gallery | Centered heading and supporting line, followed by a browse CTA. | discover templates, browse collection | centered introduction, violet button, open white layout |
| 8 | product-grid | Wide, compact mosaic of linked template preview tiles. | browse visual options, open template | tile mosaic, mixed artwork, image-led links |
| 9 | testimonials | Left-aligned heading above a multi-column arrangement of testimonial cards. | social proof, review product experience | outlined cards, muted quotes, author portraits |
| 10 | cta | Centered brand mark, heading, supporting copy, and primary CTA inside a spacious area. | repeat primary action, reinforce adoption | centered composition, brand icon, violet CTA |
| 11 | footer | Light-gray footer with brand mark, four link columns, and compact social or legal details. | navigate resources, access product links | four-column link groups, pale gray surface, small text |

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