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
version: alpha name: Loom description: "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."
colors: primary: "#625DF5" on-primary: "#ffffff" primary-hover: "#514EE0" secondary: "#FF6B35" ink: "#16191D" ink-muted: "#6B7280" canvas: "#ffffff" surface-1: "#F9F9FF" surface-2: "#F0EFFF" border: "#E2E0FF" recording-red: "#FF3B30" thumbnail-bg: "#1C1C2E"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 52px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.025em body: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 6px md: 10px lg: 16px xl: 24px pill: 9999px
shadows: card: "0 2px 8px rgba(0,0,0,0.08)" elevated: "0 8px 24px rgba(0,0,0,0.12)" recording-hud: "0 4px 24px rgba(0,0,0,0.3)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
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.