Loom
A video-communication platform with a warm, human canvas built around Loom's signature violet-purple (#625DF5) and predominantly white surfaces. The interface is designed to reduce friction around recording and sharing — large thumbnail previews, welcoming empty states with character illustration, and a recording toolbar that appears as a floating camera HUD. Marketing uses a bold, confident sans-serif (Inter or custom) at display weights with vibrant gradient moments on hero imagery. The overall feel is professional but human: async-first communication that wants you to hit record now, not later.
Color Tokens
1. Visual Theme & Atmosphere
Loom's design thesis is that async video should feel as easy as sending a Slack message. The product surfaces are organized around video thumbnails — large, dark-surfaced preview cards with play overlays that make the content the hero. The recording experience uses a minimal floating HUD (camera bubble + mic indicator + timer) that sits atop whatever you're recording. Purple is used confidently for the brand and primary CTAs, contrasting against white workspaces.
2. Color System
- Primary violet: #625DF5 — brand color, CTAs, active states
- Canvas: #ffffff — clean workspace for video library and viewer
- Surface tints: #F9F9FF / #F0EFFF — very subtle purple-tinted surfaces for panels
- Border: #E2E0FF — purple-tinted separators that reinforce brand without shouting
- Thumbnail background: #1C1C2E — dark surface for video previews, never competes with content
- Recording red: #FF3B30 — the dot that means "you're live"
3. Typography
Inter across the board — clean, highly legible, and at home in both product and marketing contexts. Display weights at 700 with -0.025em tracking. The brand voice is direct and friendly, so type choices support confident body copy rather than expressive display moments.
4. Components & Patterns
- Video cards: Dark thumbnail (16:9), play button overlay on hover, title + creator + duration below
- Recording HUD: Floating bubble with camera feed, record button, timer, screen/cam toggle
- Viewer page: Full-width video player, comment timestamps on timeline, share/embed CTAs
- Library sidebar: Workspace/folder tree, search bar at top
- CTA buttons: Violet fill, white text, 10px radius — medium weight feel
5. Spacing & Layout
Video grid: 3-column at desktop with 16px gap. Viewer: full-width video, max content below 800px. Library max-width 1280px. Generous top padding (64px) on marketing hero sections.
6. Motion & Interaction
Recording start has a 3-2-1 countdown animation. Play button on video cards fades in on hover. Video scrubbing shows thumbnail previews. Comment markers animate onto the timeline as they load.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for