The visual approach
Loom's interface is anchored by Graphik, a geometric sans-serif that shows up at weight 900 for display text (48–72px) and weight 700 for headings (24–36px). The type scale is steep enough to establish hierarchy but stops short of the extremes you see in editorial-heavy products. Body text sits at 16–20px with weight 400, leaving room for the occasional weight 500 label to act as a waypoint.
The color palette is narrow. #2D6FF7 is the primary blue—a saturated, middle-value hue that reads as energetic without tipping into electric. Supporting colors are mostly neutrals: #1B1B1B for text, #D1D5DB and #4B5563 for grays, and light washes of blue (#E8F0FE) and purple (#F5F3FF) for surface treatments. There's no secondary brand color competing for attention, which means the primary blue does double duty as both brand signal and interactive affordance.
Border radius values follow a smooth progression: 6px, 8px, 12px, 16px, 24px. The larger radii (16px and up) show up on cards and CTAs, softening the geometry enough that the UI feels approachable without looking toy-like. Shadows are restrained—0 1px 3px rgba(0,0,0,0.1) for subtle elevation, 0 10px 15px rgba(0,0,0,0.1) when a component needs to float above the page.
The motion system is minimal. Links animate on hover with a transform that scales to matrix(1.01, 0, 0, 1.01, 0, -1.56154)—a 1% scale-up paired with a fractional Y-shift—over 100ms with ease-in-out timing. It's just enough movement to confirm interactivity without drawing attention to the animation itself.
The tech stack is React and Next.js with Tailwind CSS, TypeScript, and a custom video infrastructure. Hosting appears to be Vercel or AWS CloudFront for edge delivery.
What works
The heavy type weights give the product a physical presence. Weight 900 is territory usually reserved for posters or athletic branding, but here it anchors a tool whose core value is communication. That choice signals confidence—Loom isn't whispering about what it does. The steep drop from 900 to 400 creates contrast without requiring additional colors or ornament, which keeps the interface uncluttered even as feature density increases.
The single-primary-color strategy works because the product is structurally simple. Async video has fewer interaction states than a project management tool or a design editor, so #2D6FF7 can handle both "this is Loom" and "click here" without ambiguity. The light blue and purple washes add variety to background surfaces without introducing a second decision layer for interactive elements.
The border radius scale is tuned for approachability. 24px radii on large buttons and hero cards soften the interface enough to feel friendly, but the smaller values (6px, 8px) keep form controls and inline elements crisp. The progression is geometric enough to feel systematic but not so rigid that it creates visual friction when components nest.
The hover transform is subtle to the point of being subliminal. A 1% scale and a ~1.5px upward shift won't register as "animation" to most users, but the combination is enough to confirm that an element is live. The 100ms duration keeps it from feeling sluggish, and the ease-in-out curve prevents the snap-back from drawing attention. It's the kind of micro-interaction that earns trust by never calling attention to itself.
What a builder can borrow
If you're building a product with a narrow interaction model—single-purpose tools, guided workflows, content platforms—consider a single primary color and let type weight carry the hierarchy. Loom's #2D6FF7 and Graphik at weight 900 do more compositional work than a five-color palette and medium-weight headings ever could.
The border radius progression (6, 8, 12, 16, 24) is worth copying wholesale if you're working in Tailwind or a design token system. It's broad enough to differentiate button sizes, card types, and nested containers without requiring per-component radius decisions. If you're using Tailwind v4, the @theme block in Loom's system would map cleanly to custom radius tokens.
For hover states, the matrix(1.01, 0, 0, 1.01, 0, -1.56154) transform is a good starting point for any link-heavy interface. The scale-plus-shift pattern works better than scale alone because the Y-movement gives the eye a direction to follow, which makes the interaction feel responsive rather than bouncy. Keep the duration under 150ms and use ease-in-out to avoid the rubber-band effect.
If you're using Next.js and TypeScript, Loom's stack is a reasonable blueprint for a video-forward product. The SSR/SSG setup handles SEO and initial load performance, Tailwind keeps the CSS manageable as the component library grows, and TypeScript catches the kind of prop-passing errors that multiply in a large React codebase. The edge-optimized hosting (Vercel or CloudFront) is non-negotiable for video delivery, but the rest of the stack is portable to other domains.
The takeaway is restraint. Loom's design system has fewer variables than most SaaS products, and that constraint is what lets the interface scale without fracturing. One primary color, one type family, a short radius scale, and motion that never upstages the content. That discipline is harder to maintain than a kitchen-sink component library, but it's what keeps the product feeling coherent as features compound.