What is Loom's primary brand color?

Loom's brand voltage is Loom Blue (#1868db) — a saturated blue at OKLCH lightness 0.54, surfaced 81 times across the captured page as text (36), border (36), and background fill (9). It maps to `--lns-color-primary`, `--lns-color-highlight`, and `--lns-color-info` in the live CSS variables. Hover steps darker to #1558bc, active to deep navy #123263. Loom Blue is reserved for primary CTAs, links, focus rings, and the highlight chip — never decorative section backgrounds.

Why does the record red (#ff613d) almost never appear?

Record red is the in-product recording-state color — the pulsing dot that indicates a Loom capture is live. It maps to `--lns-color-record` and surfaces only 5 times across the captured marketing page, exclusively inside product mockups where a recording is in progress. The marketing CTA never uses it. This scoping keeps the affordance meaningful: red means a camera is rolling, not buy-now.

What typography does Loom use, and what should I use if Charlie isn't available?

Loom runs two custom families: Charlie Display for headlines (h1, h2 at weight 700) and Charlie Text for body and UI (weight 400 default, 700 for emphasis). The hero h1 sits at 63.27px / 1.029 line-height with zero letter-spacing — no negative tracking, unlike most SaaS display scales. Inter at weight 700 for display and weight 400 for body is the closest free substitute; Geist Sans also works. There is no separate mono family — code blocks defer to the system stack.

Why are CTAs pills instead of rounded rectangles?

Pill geometry (radius 9999px) is Loom's dominant shape — 62 of the captured radius values are full pills against just 4 corner-12px values for cards. The primary CTA is a 48px-tall pill with 7.8px / 15.6px padding. The 12px corner only appears on content cards and embedded video frames; section containers stay square. The result: every interactive control reads as a pill, every content surface reads as a rectangle — the two geometries never compete.

How does Loom signal depth without heavy shadows?

Loom uses very pale blue tints (`{colors.surface-blue-tint}` #e9f2fe, 37 occurrences) as the primary depth cue — a light blue band drops behind feature sections to lift them off the white canvas. The only real shadow is the nav shadow, a 3-layer stack of black at 4 / 6 / 10 percent opacity. Cards inside sections rely on hairline borders (#e4e2e7) rather than drop shadows, keeping the page floor compositionally flat outside of the navigation.

How do I use this DESIGN.md to build a React project?

Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce Loom's pill-first geometry rather than a generic shadcn theme. You can also reference the 19 color tokens, 11 type styles, and 18 components directly: every value is a quoted hex or size you can paste into Tailwind config, CSS variables, or your own component library. Combine the file with shadcn/ui primitives and a Button variant whose `borderRadius` is 9999px to match Loom's CTA discipline.

Loom Design System

Loom's design system as a DESIGN.md file.

About Loom DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source loom.com

Communication & Messaging
Productivity & SaaS

Loom's marketing page is a white canvas with a single saturated voltage — Loom Blue (#1868db) — carrying every primary CTA, link underline, and focus ring across the surface. The body charcoal (#292a2e) does the workhorse text duty at 551 occurrences across paragraphs and nav links. Headlines are Charlie Display at weight 700 with no negative tracking, an unusual choice in a SaaS category where most competitors pull -1px to -2px on display copy. Body type is Charlie Text at weight 400. The page floor is pure white (#ffffff); structural depth comes from very pale blue tints (#e9f2fe) rather than gray ladders. The record-red token (#ff613d) exists in the variables but appears only as the in-product recording affordance — it is deliberately kept out of marketing chrome.

The DESIGN.md file packages 19 color tokens, 11 typography styles, 5 corner radii, 8 spacing values, and 18 components. The 450 CSS custom properties on the live :root resolve to a much smaller perceptual palette — Loom Blue plus a graded blue ladder (#1558bc hover, #123263 active, #cfe1fd light), record red, plus an extended in-product report swatch set covering green, violet, and yellow that lives inside product mockups rather than marketing surfaces. The format is the Google Labs DESIGN.md spec — a machine-readable file with token references like `{colors.loom-blue}` and `{typography.display-xl}` that designers and AI agents can both parse.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Loom's pill-first geometry: 9999px CTAs, white card surfaces, blue accent reserved strictly for action. Reference the tokens directly in Tailwind config or CSS variables, or paste the components block into a design audit. The discipline worth studying is the refusal of two SaaS shortcuts at once — display-weight negative tracking and a rainbow accent palette — in favor of one geometric move (pills) and one voltage (Loom Blue) repeated across every viewport.

What makes it distinct

Pill geometry as signature62 of the captured radius values are 9999px against just 4 rectangle-card values
Single brand voltageLoom Blue (#1868db) reserved for CTAs, links, focus rings, never decorative fills
Record red (#ff613d) scoped to in-product recording dots onlykept out of marketing chrome by design
Charlie Display weight 700 carries the entire heading scale at 63px hero with zero negative tracking
White canvas with very pale blue tints (#e9f2fe) as the only structural surface variation

Live at loom.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

loom.com

Explore Loom

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Loom design system FAQ

Common questions about Loom's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Loom — official site

Loom's marketing site — async video messaging for work, with the design surface this file extracts.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Loom in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→