Loom Design System

Overview

Loom's marketing canvas is a white ground ({colors.canvas} #ffffff) with a single saturated voltage — Loom Blue ({colors.loom-blue} #1868db) — carrying every primary CTA, inline link, focus ring, and highlight chip. The body charcoal ({colors.ink-body} #292a2e) is the workhorse text color across paragraphs and nav. Headlines step up to a darker near-black ({colors.ink} #101214) and run Charlie Display at weight 700.

Pill geometry as signature: where most SaaS systems lean on 8–12px rounded rectangles for every interactive element, Loom commits to pills ({rounded.pill} 9999px) for every button, chip, and tag — 62 captured pill values against just 4 corner-12px card values. The 12px radius is reserved for content surfaces (video frames, feature cards), so the two geometries never compete: pills are interactive, rectangles are content.

Display type is Charlie Display at weight 700 with zero negative letter-spacing — a deliberate counter-move to the SaaS category default. Stripe, Linear, and Vercel all pull tracking aggressively negative on display copy; Loom keeps it at 0 and lets the type breathe. Body type is Charlie Text at weight 400, with weight 700 for emphasis. There is no separate mono family.

The record red ({colors.record-red} #ff613d) is the system's most disciplined token. It surfaces only on the in-product recording dot — never on a CTA, never as a section background, never as decorative emphasis. This is intentional: red on a video product means a camera is rolling, and Loom protects that semantic.

Key Characteristics:

• Pill-first geometry — {rounded.pill} carries every interactive control; {rounded.md} is content-card-only.
• Single voltage — Loom Blue {colors.loom-blue} (#1868db) is the only chromatic accent; record red is scoped to in-product use.
• Zero negative tracking on display copy — Charlie Display 63px hero runs at letter-spacing 0, contrary to the category default.
• White canvas with blue tint depth — {colors.surface-blue-tint} #e9f2fe replaces the gray ladder most SaaS pages use.
• Hairline borders over shadows — only the top nav carries a real shadow; cards depend on {colors.hairline} #e4e2e7.
• Two-tier ink stack — {colors.ink} #101214 for headlines, {colors.ink-body} #292a2e for body, separated by ~7% lightness.

Colors

• Loom Blue (#1868db) — frequency 81. Used as text (36), border (36), background (9). The brand voltage; mapped to --lns-color-primary, --lns-color-highlight, and --lns-color-info. Reserved for primary pill CTAs, inline links, focus chips.
• Ink (#101214) — frequency 518. Used as text (257), border (257), background (4). Near-black ink for h1 / h2 headlines; mapped to --thd-color-black and --lns-color-disabledBackground.
• Ink Body (#292a2e) — frequency 551. Used as text (275), border (275), background (1). The workhorse body color across paragraphs and nav links; mapped to --lns-color-body.
• Canvas (#ffffff) — frequency 109. Used as background (16), text (45), border (45). The page floor and card surface — Loom does not use a tinted canvas.
• Surface Blue Tint (#e9f2fe) — frequency 37. Used as background (27), text (4), border (4). The depth cue — a pale blue band that lifts feature sections off the white canvas.
• Loom Blue Hover (#1558bc) — frequency 2. The CTA hover step; mapped to --lns-color-primaryHover.
• Loom Blue Active (#123263) — frequency 2. The CTA pressed step; mapped to --lns-color-primaryActive and --lns-color-blurpleStrong.
• Loom Blue Light (#cfe1fd) — frequency 0 on captured page; declared as --thd-color-blue-20 / --lns-color-blueLight for light-tinted blue surfaces.
• Ink Muted (#6c6f77) — frequency 0 declared; mapped to --lns-color-bodyDimmed and --thd-color-grey-70 for dimmed body copy.
• Ink Subtle (#8c8f97) — frequency 0 declared; the form-field border token (--lns-color-formFieldBorder).
• Ink Disabled (#b7b9be) — frequency 0 declared; mapped to --lns-color-disabledContent for greyed-out controls.
• Hairline (#e4e2e7) — frequency 0 declared; mapped to --thd-color-grey-30 and --lns-themeDark-color-border for card / divider hairlines.
• Record Red (#ff613d) — frequency 5. Used as text (2), background (1), border (2). The in-product recording state — mapped to --lns-color-record and never used on marketing chrome.
• Report Green (#82b536) — frequency 3. Background-only. Lives inside in-product analytics swatches; mapped to --thd-color-green-50.
• Report Violet (#bf63f3) — frequency 2. Text and border use; mapped to --thd-color-violet-50. Appears in product-mockup data tags.
• Report Violet Deep (#48245d) — frequency 1. Background use; the upgrade-CTA hover background (--lns-color-upgradeHover dark variant).
• Report Yellow (#ffc716) — frequency 0 declared; the warning state token (--lns-color-warning).
• Focus Ring (#4d8ced) — frequency 0 declared; mapped to --lns-color-focusRing for keyboard-focus outlines.
• Surface Elevated (#1e1f21) — frequency 0 declared; the dark-mode card background (--lns-themeDark-color-backgroundSecondary).

Typography

Loom runs two proprietary families: Charlie Display for headlines and Charlie Text for body copy and UI. Charlie Display appears only on h1, h2, h3 and large display blockquotes; everything else is Charlie Text. The display tier sits at weight 700 across all sizes — Loom does not vary display weight, only size and line-height.

Light weight as absence: where most SaaS systems offer a weight-300 or weight-500 display option, Loom does not. Every headline is weight 700. The variation across the hierarchy is achieved through size (63px → 44px → 32px → 25px) and line-height (1.03 → 1.14 → 1.27 → 1.33), never through weight modulation.

The hero h1 is 63.27px Charlie Display at weight 700, line-height 65.1px (so 1.029), letter-spacing 0. No tracking adjustment is applied at any tier — display through caption all sit at letter-spacing 0. This is the most distinctive typographic decision in the system and runs contrary to the category default of negative tracking on display copy.

Body type splits into four tiers: body-xl (26.65px / 1.52, for marketing paragraph copy), body-lg (18.62px / 1.65), body-md (16px / 1.5, the workhorse UI body), and body-sm (15.62px / 1.71). The eyebrow style is Charlie Text 12.62px at weight 700, uppercase — the only uppercase text-transform in the system, scoped to section labels (h4) and small uppercase eyebrows.

Layout

Loom's marketing surface uses a centered single-column layout with generous vertical rhythm — the captured page spans 4500px tall against a 1440px viewport, so the page is roughly 3.1 viewports of scroll. Section spacing leans on {spacing.section} 111px between major bands and {spacing.xxl} 72px between blocks within a section.

Horizontal padding on hero and feature copy sits at {spacing.xl} 40px on the outer container with 0px 36px on the nav. Cards inside a section bound at 24px ({spacing.lg}) internal padding for feature cards and 40px ({spacing.xl}) for the prominent blue feature band that hosts product screenshots.

The grid is content-led rather than 12-column rigid — long-form sections sit centered at roughly 720px max-width, while product-mockup bands extend to a wider 1100px frame to let the screenshot read.

Elevation & Depth

The page is compositionally flat outside of the top nav. The only declared shadow is --thd-shadow-nav, a 3-layer black stack at 4 / 6 / 10 percent opacity (0 0.125rem 0.375rem rgba(0,0,0,.04), 0 0.3125rem 1.125rem rgba(0,0,0,.06), 0 1.5rem 5.1875rem rgba(0,0,0,.1)). Cards inside sections do not carry shadows.

Depth instead comes from two moves: hairline borders ({colors.hairline} #e4e2e7) that draw a thin perimeter around content cards, and blue-tint surface lifts ({colors.surface-blue-tint} #e9f2fe) where an entire section band switches from white to pale blue to signal a new content block. The blue feature band is the most prominent example — a full-width 16px-radius card filled with Loom Blue ({colors.loom-blue} #1868db) that hosts a feature pitch and product screenshot.

Shapes

The radius scale is extreme by SaaS standards: 62 occurrences of 9999px against just 4 occurrences of 12px. Pills dominate, rectangles are scarce. The split is semantic — interactive controls (buttons, chips, tags, the search input) are pills; content surfaces (video frames, feature cards, the blue feature band at 16px) are rounded rectangles; section containers are square.

The five-step scale: {rounded.none} 0px for section containers, {rounded.sm} 6px for form inputs, {rounded.md} 12px for feature cards and video frames, {rounded.lg} 16px for the prominent blue feature band, {rounded.pill} 9999px for every interactive control.

Components

• button-primary — Loom Blue pill, 48px tall, 8/16px padding, Charlie Text 16px weight 400.
• button-primary-hover — steps to {colors.loom-blue-hover} #1558bc; everything else holds.
• button-primary-active — steps to {colors.loom-blue-active} #123263 deep navy.
• button-secondary — white pill with {colors.hairline} 1px border, ink-body label.
• button-dark — near-black pill ({colors.ink} #101214) for inverted contexts.
• link — Loom Blue text on Charlie Text 16px, used for inline anchors.
• highlight-chip — surface-blue-tint pill with Loom Blue label, 4/12px padding, the section-eyebrow pattern.
• feature-card — white surface, 12px radius, hairline border, 24px padding.
• feature-band — Loom Blue background, 16px radius, 40px padding — the prominent blue product band.
• video-frame — white surface with hairline border at 12px radius, the embedded Loom recording frame.
• text-input — white field, 6px radius, ink-subtle 1px border, 8/12px padding.
• text-input-focused — swaps border to a 2px focus-ring (#4d8ced).
• top-nav — 72px tall, white, 0/36px padding, carries the only real shadow in the system.
• nav-link — ink-body text, 48px hit-target.
• recording-dot — record-red 8px circle; the in-product recording affordance.
• logo-row — white band with muted-ink labels, 40px vertical padding — the "trusted by" customer-logo strip.
• cta-section — surface-blue-tint band, 16px radius, 72/40px padding, display-md headline.
• footer — white surface, muted-ink labels, 72/36px padding.

Do's and Don'ts

Do use {rounded.pill} for every interactive control — buttons, chips, tags. Pill geometry is the system's load-bearing identity move; switching a CTA to a 12px rounded rectangle breaks the silhouette.

Do keep {colors.loom-blue} (#1868db) for CTAs and links. Pair it with white canvas and ink-body text; do not introduce a second chromatic accent on the same viewport.

Do set display letter-spacing to 0. Charlie Display at 63px is designed to sit at neutral tracking — pulling it to -1px or -2px collapses the breathing room the system relies on.

Don't use {colors.record-red} (#ff613d) for marketing CTAs, error states, or decorative emphasis. It is scoped to the in-product recording affordance and --lns-color-record only — surfacing it elsewhere breaks the camera-is-rolling semantic.

Don't use {colors.surface-blue-tint} (#e9f2fe) for body text or borders — it is a background-only token (27 of 37 occurrences are bg). For tinted-blue text on a light surface, use {colors.loom-blue} itself.

Don't shadow cards inside sections. The only declared shadow is the nav shadow; adding box-shadows to feature cards or the blue feature band flattens the contrast between nav (floating) and content (flat) that the system relies on.

Don't use Charlie Display for body copy. The family is scoped to h1, h2, h3, and large blockquotes — at 16px or 18px it sits oddly tight. Use Charlie Text for everything at 18px and below.

Don't introduce a 8px or 10px corner radius. The declared scale is 0 / 6 / 12 / 16 / 9999; intermediate values dilute the rectangle-vs-pill split that gives the system its geometric clarity.

Known Gaps

• The report palette (green, violet, yellow, deep violet) lives inside in-product analytics swatches rendered in marketing mockups; they are documented for completeness but are not brand surface colors.
• The focus-ring token (#4d8ced) is declared in --lns-color-focusRing but did not surface as a captured count on the marketing page — it is enforced via the focus state stylesheet rather than rendered statically.
• Dark mode is documented through --lns-themeDark-* variables (a near-black {colors.surface-elevated} #1e1f21 floor) but is not toggled on the public marketing surface.
• Form-field error and validation styling is not visible on the inspected pages.
• Motion — Loom is a video product; the marketing surface includes auto-playing in-frame video and hover transitions on cards that are out of scope for a static token file.
• Charlie Display and Charlie Text are proprietary; Inter, Geist Sans, or Söhne are acceptable open substitutes.