Electric Violet
#7270ffPrimary CTA buttons, active nav items, accent keywords in headlines, focus rings — the only chromatic element allowed to break the monochrome canvas, making every action feel switched on
Lottielab
lottielab.comWebsite preview
The design language
Lottielab's visual language is a quiet, generous workspace built for creators: a near-white canvas, hairline borders, and a single vivid violet accent that appears only where attention is needed. The interface favors restraint over decoration — deep indigo-tinted text reads as authoritative without shouting, and components sit flat on the surface with almost no shadow, letting the product UI itself carry visual weight. Typography is geometric and contemporary, with tight negative tracking on large headlines and slightly open tracking on small labels, creating a confident vertical rhythm. Color is used surgically: brand violet highlights a keyword in headlines, fills the primary CTA, and marks active states; everything else stays neutral. The overall feel is an animation studio's digital sketchpad — spacious, tool-first, and engineered for flow.
Color palette
brand
Signal Blue
#1560fbSecondary accent for interactive highlights, selected states in tool surfaces, and inline brand emphasis where a cooler note is needed
accent
Sunset Gradient
#facc15Decorative gradient endpoint for marketing visuals and showcase cards
Bloom Gradient
#ec4899Decorative gradient endpoint for showcase cards and hero illustration accents
neutral
Deep Indigo
#2f2b4aPrimary text and headings — a near-black with a violet undertone that warms the monochrome palette and distinguishes the brand from flat-charcoal SaaS defaults
Midnight Ink
#1c1a2cHeaviest text weight, section titles, and surface-dark contexts — a deeper step than Deep Indigo for maximum contrast moments
Slate
#4b5563Secondary body text, descriptions, metadata — sits between Deep Indigo and Silver for layered reading hierarchy
Silver
#9ca3afMuted helper text, placeholder copy, disabled labels, and icon secondary tones
Fog
#d9dbdaIcon strokes at rest, subtle surface borders, low-emphasis dividers
Mist
#e5e7ebPrimary hairline borders across cards, inputs, dividers, and component edges — the dominant structural neutral
Paper
#ffffffCard surfaces, elevated panels, button text on violet fills, inverted icon strokes
Bone
#f9fafbAlternate surface for nested panels, input fills, quiet sections within white pages
Pebble
#f3f4f6Page canvas, section bands between white blocks, product mockup backgrounds, footer wash
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
60px · 600 · 1 · -1.5px trackingThe quick brown fox jumps
heading
48px · 600 · 1.11 · -1.2px trackingThe quick brown fox jumps
heading-sm
36px · 600 · 1.11 · -0.9px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.43 · 0px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · 0.4px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.56 · 0.35px trackingThe quick brown fox jumps
caption
12px · 400 · 1.71 · 0.3px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Plus Jakarta Sans
- Weights
- 400, 500, 600, 700
- Sizes
- 12px, 14px, 16px, 18px, 36px, 48px, 60px
- Line height
- 1.00 (60px), 1.11 (36px, 48px), 1.43 (18px), 1.50 (16px), 1.56 (14px), 1.71 (12px)
- Letter spacing
- -0.025em at 36px, 48px, 60px; 0.025em at 12px, 14px, 16px; normal at 18px
- Fallback
- Inter, Manrope
- Features
- "ss01" on, "cv11" on
Sole typeface across the product. Geometric humanist sans with subtly squared terminals — contemporary but not cold. Weight 700 carries display and headings for confident vertical presence; weight 500 serves UI controls and labels; weight 400 handles body and descriptions. The slight openness in counters at small sizes keeps labels legible on dense tool surfaces.
Additional typeface
Google Sans Code
- Weights
- 400
- Sizes
- 16px
- Line height
- 1.5
- Letter spacing
- 0.025
Google Sans Code — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 24px
Border radius
tags
4pxcards
8pxicons
9999pxpills
9999pxinputs
8pxbuttons
12pxSpacing scale
1px2px4px6px8px10px12px16px20px24px32px40px48px64px96px128px167px192px224px240px263pxGuidelines
Do
- Use #7270ff as the only chromatic fill on the page — every other surface stays in the neutral scale from #f3f4f6 to #2f2b4a.
- Set display text at 60px and headings at 48px with letter-spacing -1.5px and -1.2px respectively to match the contemporary tight-tracking rhythm.
- Apply 8px radius to all cards and panels, 12px to buttons, 9999px to tags and icon containers — the three-tier system is non-negotiable.
- Use Mist (#e5e7eb) 1px borders instead of shadows to separate layers; elevation comes from background stepping, not blur.
- Highlight one keyword per headline in Electric Violet (#7270ff) — the rest of the sentence stays Deep Indigo to create a single beat of color.
- Pair Plus Jakarta Sans weight 700 with 1.00–1.11 line-height for headlines; reserve weight 500 for UI labels and weight 400 for body copy.
- Alternate between #ffffff and #f3f4f6 section bands to create rhythm without using color or shadows.
Don’t
- Don't introduce additional brand hues — the palette is intentionally violet-only; resist adding teals, greens, or pinks to core UI.
- Don't use shadows, glows, or blur effects for elevation; rely on surface color stepping and 1px hairline borders instead.
- Don't set body text below 14px or use weights under 400 — the type system is calibrated for comfortable reading at 16px+.
- Don't apply gradient fills to buttons, inputs, or navigation — gradients are reserved for showcase and marketing visuals only.
- Don't use pure #000000 for text on light backgrounds; use Deep Indigo (#2f2b4a) to preserve the warm violet undertone of the brand.
- Don't break the 8px spacing grid — all padding, gaps, and margins should land on multiples of 8 (with 4px and 2px allowed only for micro-adjustments inside components).
- Don't stack multiple violet elements on a single screen — one chromatic moment per viewport keeps the accent meaningful.
Components
Primary CTA Button
Single decisive conversion action on every pageFilled Electric Violet (#7270ff) background, Paper (#ffffff) text, Plus Jakarta Sans 16px weight 600, 12px border radius, 12px 24px padding, no border. The only button allowed to use full chromatic fill.
Outlined Nav Button
Secondary action in the headerElectric Violet (#7270ff) 1px border, Paper (#ffffff) fill, Electric Violet text, 12px radius, 8px 20px padding. Used for Sign up in the nav bar — the quieter sibling of the primary CTA.
Ghost Text Link
Inline navigation and tertiary actionsNo background, Deep Indigo (#2f2b4a) text 14px weight 500, underline on hover, 4px vertical padding for hit area. Appears in nav items, footer, inline content references.
Product Mockup Frame
Browser-style container around the editor previewPaper (#ffffff) background, Mist (#e5e7eb) 1px border, 8px radius, 24px internal padding. Top chrome bar with three traffic-light dots (Fog #d9dbda) and a thin border-bottom separator. Renders the timeline editor and animation cards inside.
Animation Preview Card
Showcase tile in the product galleryPaper (#ffffff) surface, 8px radius, Mist (#e5e7eb) border, 16px padding. Contains a centered animation preview on Bone (#f9fafb) inner background with a 4px label strip below the preview.
Timeline Track Row
Animation keyframe row inside the editorHorizontal row, 24px row gap, Fog (#d9dbda) keyframe block with 4px radius. Active track uses a filled Slate (#9ca3af) block, inactive tracks use a Bone (#f9fafb) block. Playhead is a 1px Midnight Ink (#1c1a2c) vertical line with a circular handle.
Trust Logo Strip
Social proof bar below the heroFull-width Pebble (#f3f4f6) band, logos rendered in Silver (#9ca3af) at uniform height, 40px horizontal padding per logo, evenly distributed via flex justify-between. No dividers.
Section Heading Block
Centered text intro before content sectionsCentered stack, 24px element gap. Eyebrow text at 14px weight 600 in Electric Violet (#7270ff) with 0.025em tracking. Heading at 48px weight 700 Deep Indigo with -1.2px tracking. Subtext at 18px weight 400 Slate (#4b5563).
Input Field
Text entry in forms and editorPaper (#ffffff) fill, Mist (#e5e7eb) 1px border, 8px radius, 12px 16px padding. Placeholder text in Silver (#9ca3af). Focus state swaps border to Electric Violet (#7270ff) with no shadow ring.
Nav Bar
Top-level site navigationPaper (#ffffff) background, 64px height, 40px horizontal padding, bottom border 1px Mist (#e5e7eb). Logo left, nav links center-right (Deep Indigo 14px weight 500), CTA pair right-aligned. Sticky on scroll.
Brand Logo Mark
Lottielab identityRounded square 32×32 with 8px radius, Electric Violet (#7270ff) fill, white serif 'L' glyph centered. Paired with 'Lottielab' wordmark in Deep Indigo (#2f2b4a) 16px weight 600.
Gradient Showcase Card
Decorative card in feature sectionsUses one of the two brand gradients (Sunset #facc15→#f97316 or Bloom #ec4899→#f87171) as background, Paper (#ffffff) text overlay, 24px radius, 32px padding. Reserved for marketing showcase, never for UI controls.
Surfaces & elevation
Level 0
Canvas
#f3f4f6Page background between content bands
Level 1
Panel
#ffffffCard and component surfaces
Level 2
Nested
#f9fafbInner panels, inputs, quiet wells
The design deliberately avoids box-shadows and blur effects. Elevation is communicated entirely through surface color stepping — moving from Pebble (#f3f4f6) canvas to Paper (#ffffff) panels to Bone (#f9fafb) nested wells — and through 1px Mist (#e5e7eb) hairline borders. This keeps the interface feeling flat, fast, and tool-oriented, like a design canvas rather than a card-stack app.
Layout & imagery
Layout
Centered max-width 1200px container with 40px horizontal padding on desktop. Hero is a single centered text stack with headline, subtext, and CTA stacked vertically with 24px gaps, no hero image. Below the hero, a full-bleed Pebble (#f3f4f6) band hosts the trust logo strip, then transitions to white for the product mockup section. Sections alternate between white and #f3f4f6 backgrounds in a consistent rhythm with 80px vertical gaps. Content blocks use 2-column text-plus-mockup splits for feature explanations and 4-column grids for template galleries. Navigation is a single sticky top bar at 64px height — no sidebar, no mega-menu. The page reads top-to-bottom as a vertical scroll: headline → trust → product preview → features → templates → CTA.
Imagery
Product-led imagery dominates: large browser-frame mockups containing the actual editor interface, with timeline tracks, animation preview cards, and keyframe blocks visible. Marketing illustrations are abstract and kinetic — colorful gradient washes (sunset yellow→orange, pink→red) and floating shape compositions evoke motion. No photography of people or workplaces. Icons are minimal, rendered as 1.5px stroke line work in Fog (#d9dbda) or Silver (#9ca3af), with circular pill backgrounds in Bone (#f9fafb) for icon containers. The visual density sits in the product UI itself — the marketing site shows rather than tells.
Design notes
Agent Guide
## Quick Color Reference - text: #2f2b4a - background: #f3f4f6 - panel: #ffffff - border: #e5e7eb - accent: #7270ff - primary action: #7270ff (filled action) ## Example Component Prompts 1. **Hero Section** — Centered max-width 800px stack on #ffffff. Display headline at 60px Plus Jakarta Sans weight 700, #2f2b4a, letter-spacing -1.5px, with the phrase 'for product teams' set in #7270ff. Subtext at 18px weight 400, #4b5563. Primary action button: #7270ff fill, white text 16px weight 600, 12px radius, 12px 24px padding. 2. **Product Mockup Frame** — Browser-style container, #ffffff background, #e5e7eb 1px border, 8px radius, 24px padding. Top chrome bar 32px tall with three #d9dbda dots and a 1px #e5e7eb bottom border. Inside: a 2-row timeline with #9ca3af keyframe blocks on #f9fafb tracks and a 1px #1c1a2c playhead line. 3. **Trust Logo Strip** — Full-width #f3f4f6 band, 80px vertical padding. Eight logos in #9ca3af, evenly distributed across max-width 1200px with 40px gaps, no dividers. 4. **Section Heading Block** — Centered stack with 24px gaps. Eyebrow: 14px weight 600 #7270ff with 0.025em tracking. Heading: 48px weight 700 #2f2b4a, letter-spacing -1.2px. Subtext: 18px weight 400 #4b5563. 5. **Animation Preview Card** — #ffffff surface, 8px radius, 1px #e5e7eb border, 16px padding. Centered preview on #f9fafb inner background (200px square), with a 4px #e5e7eb label strip below.
Gradient System
Two decorative gradients are available for marketing visuals and showcase cards only — never for UI controls or navigation. Sunset: linear-gradient(to right, #facc15, #f97316) for warm energy compositions. Bloom: linear-gradient(to right, #ec4899, #f87171) for softer, playful compositions. Both should appear at 24px radius on cards with white text overlays, always inside a #f3f4f6 section to keep them contained.
Similar brands
Linear
Same single-accent strategy with a vivid violet/indigo on a near-white canvas, identical tight-tracking display headlines, and flat surface stepping without shadows.
Framer
Clean light SaaS with generous whitespace, product mockups as hero visuals, and a single brand hue used for keyword emphasis in headlines.
Pitch
Geometric sans typography, monochrome surface palette, and one chromatic accent that appears only on CTAs and active states.
Vercel
Hairline border-driven layering, no-shadow elevation philosophy, and a deep-tinted near-black for primary text instead of pure black.
Raycast
Comfortable-density spacing on an 8px grid, restrained palette with one functional accent, and components that sit flat on the canvas.
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
