Lottielab
A bright, designer-friendly motion-tooling marketing site built on a white canvas with a single electric-indigo primary action (#7270ff). The system reads as clean modern SaaS — Plus Jakarta Sans throughout, generous vertical rhythm, soft-rounded cards holding real product UI and animation fragments, and one deep near-black band that anchors the "ship to iOS, Android, Web" story. Brand voltage comes from the indigo CTA and from live Lottie animation artifacts shown directly inside cards rather than from a wide accent palette.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
60px · 600 · 1.0
The quick brown fox jumps
display-lg
48px · 600 · 1.0
The quick brown fox jumps
display-md
36px · 600 · 1.111
The quick brown fox jumps
label
16px · 500 · 1.5
The quick brown fox jumps
body-lg
18px · 400 · 1.556
The quick brown fox jumps
button
16px · 400 · 1.5
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 40px | |
| xxxl | 48px | |
| section | 64px | |
| section-lg | 96px | |
| mega | 128px | |
| ultra | 192px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 6px | |
| md | 8px | |
| base | 9px | |
| lg | 12px | |
| xl | 24px | |
| full | 9999px |
FAQ
- What colors does Lottielab use?
- Lottielab's core palette includes #7270ff, #8887fd, #6366f1, #2f2b4a, #111827. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Lottielab DESIGN.md.
- What font does Lottielab use?
- Lottielab's primary typeface is Plus Jakarta Sans. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Lottielab design system?
- A bright, designer-friendly motion-tooling marketing site built on a white canvas with a single electric-indigo primary action (#7270ff). The system reads as clean modern SaaS — Plus Jakarta Sans thr…