Loom

---
name: loom-com-design-system
source: https://www.loom.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#292a2e"
  text-muted: "#8c8f97"
  surface: "#dddee1"
  hairline: "#b7b9be"
  accent: "#111019"  # deep-blue
  accent-2: "#eff0ff"  # pale-blue
  accent-3: "#1868db"  # blue
fonts:
  primary: "Charlie Display"  # medium-confidence: usage counts are close
---

# Free screen recorder for Mac and PC | Loom — Design System

Extracted from **https://www.loom.com/** on 2026-07-03.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 16 light against 14 dark. The palette is chromatic: 12 saturated values against 10 neutrals, led by deep-blue (`#111019`). **Charlie Display** leads the font stack, though usage counts are close — verify against rendered pages before committing. Geometry mixes sharp corners (.125rem) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 61% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 16:14). Don't flip individual sections to the opposite mode.
- `624.9375rem` is the workhorse radius (x18); treat the other radii as exceptions, not options.
- Shadows stay tight (max 0.3125px blur) — keep elevation subtle if you extend the scale.
- One family does the work — build hierarchy with size and weight (100/200/400/500/700/800), not by adding typefaces.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 14 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-100` | `#dddee1` | 2 | **surface** — neutral closest to canvas luminance |
| `neutral-300` | `#b7b9be` | 1 | **hairline** — next neutral near canvas, hairline-border weight |
| `neutral-400` | `#9ca3af` | 1 | — |
| `neutral-500` | `#8c8f97` | 3 | **text-muted** — most-used mid-luminance neutral |
| `neutral-600` | `#7d818a` | 1 | — |
| `neutral-700` | `#6c6f77` | 2 | — |
| `neutral-800` | `#505258` | 1 | — |
| `neutral-900` | `#3b3d42` | 1 | — |
| `neutral-950` | `#292a2e` | 1 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `deep-blue` | `#111019` | 10 | **accent** — most-used chromatic color |
| `pale-blue` | `#eff0ff` | 6 | **accent-2** — supporting chromatic color |
| `blue` | `#1868db` | 5 | **accent-3** — supporting chromatic color |
| `purple` | `#bf63f3` | 3 | — |
| `lime` | `#82b536` | 3 | — |
| `blue-2` | `#3b82f6` | 3 | — |
| `cyan` | `#9fcdfe` | 3 | — |
| `purple-2` | `#d8a0f7` | 2 | — |
| `purple-3` | `#af59e1` | 2 | — |
| `purple-4` | `#803fa5` | 2 | — |
| `purple-5` | `#48245d` | 2 | — |
| `deep-purple` | `#35243f` | 2 | — |

## Typography

**Charlie Display** has the most `font-family` declarations, but the margin over the rest is thin — treat the primary-face call as provisional and verify on rendered pages. Full list by usage:

| Family | Usage |
| --- | --- |
| Charlie Display | 21 |
| Charlie Text | 12 |

**Size scale (px):** `11`, `12`, `14`, `15`, `16`, `18`, `21`, `24`, `32`, `36`, `48`, `72`

**Weights in use:** `100` (x4), `200` (x4), `400` (x9), `500` (x7), `700` (x13), `800` (x4)

**Line-heights (unitless):** `1`, `1.1`, `1.2`, `1.3`, `1.4`, `1.5`, `1.6`, `1.7`

**Letter-spacing values:** `-.03em`, `-.01em`, `.03em`

## Spacing

Most-used values (px): `20`, `22`, `24`, `28`, `32`, `33`, `39`, `48`, `64`, `80`, `112`, `144`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `.125rem` | 5 |
| `radius-md` | `.375rem` | 7 |
| `radius-lg` | `8px` | 8 |
| `radius-xl` | `.75rem` | 6 |
| `radius-2xl` | `1.5rem` | 2 |
| `radius-3xl` | `2rem` | 5 |
| `radius-4xl` | `624.9375rem` | 18 |
| `radius-full` | `50%` | 5 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 .9375rem 3.125rem 0 rgba(0,0,0,.25)` (x1)
- `shadow-md` — `.3125rem .3125rem .3125rem rgba(0,0,0,.25)` (x1)

## Breakpoints

`360px`, `375px`, `640px`, `767px`, `768px`, `820px`, `1023px`, `1024px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #111019 */
  color: var(--color-canvas); /* #ffffff — contrast 18.9:1 */
  border-radius: 9999px; /* pill — mined as 50% */
  font-weight: 500;
}

.card {
  background: var(--color-surface); /* #dddee1 */
  border: 1px solid var(--color-hairline); /* #b7b9be */
  border-radius: 624.9375rem; /* most-used finite radius */
  box-shadow: var(--shadow-sm);
}

.input {
  background: var(--color-canvas); /* #ffffff */
  color: var(--color-ink); /* #292a2e — contrast 14.3:1 */
  border: 1px solid var(--color-hairline); /* #b7b9be */
  border-radius: .125rem;
  /* placeholder color: var(--color-text-muted) #8c8f97 */
}

.nav {
  background: var(--color-canvas); /* #ffffff */
  border-bottom: 1px solid var(--color-hairline); /* #b7b9be */
  color: var(--color-ink); /* #292a2e */
  /* inactive links: var(--color-text-muted) #8c8f97 */
  /* active link: var(--color-accent) #111019 — contrast vs canvas 18.9:1 */
}

.modal {
  background: var(--color-surface); /* #dddee1 */
  border-radius: 624.9375rem;
  box-shadow: var(--shadow-md); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #292a2e */
}

.input-error {
  /* no red exists in the mined palette — this site does not expose an error color in its CSS. */
  /* Introduce one deliberately rather than borrowing a random red; keep saturation near the accent's. */
}
```

## Observations

- 10 of 22 extracted colors are neutrals.
- 2 distinct shadows; the softest reaches 0.3125px blur.
- 8 breakpoints, from 360px to 1024px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --reach-tabs: 1;
  --lns-color-body: var(--lns-themeLight-color-body);
  --lns-color-bodyDimmed: var(--lns-themeLight-color-bodyDimmed);
  --lns-color-background: var(--lns-themeLight-color-background);
  --lns-color-backgroundHover: var(--lns-themeLight-color-backgroundHover);
  --lns-color-backgroundActive: var(--lns-themeLight-color-backgroundActive);
  --lns-color-overlay: var(--lns-themeLight-color-overlay);
  --lns-color-primary: var(--lns-themeLight-color-primary);
  --lns-color-primaryHover: var(--lns-themeLight-color-primaryHover);
  --lns-color-primaryActive: var(--lns-themeLight-color-primaryActive);
  --lns-color-focusRing: var(--lns-themeLight-color-focusRing);
  --lns-color-record: var(--lns-themeLight-color-record);
  --lns-color-recordHover: var(--lns-themeLight-color-recordHover);
  --lns-color-recordActive: var(--lns-themeLight-color-recordActive);
  --lns-color-border: var(--lns-themeLight-color-border);
  --lns-color-disabledContent: var(--lns-themeLight-color-disabledContent);
  --lns-color-disabledBackground: var(
    --lns-themeLight-color-disabledBackground
  );
  --lns-color-backdrop: var(--lns-themeLight-color-backdrop);
  --lns-color-formFieldBorder: var(--lns-themeLight-color-formFieldBorder);
  --lns-color-formFieldBackground: var(
    --lns-themeLight-color-formFieldBackground
  );
  --thd-nav-h: 5.625rem;
  --thd-nav-sm-h-logged-in: 37.5rem;
  --thd-nav-sm-h-logged-out: 10rem;
  --thd-screen-xs: 23.4375rem;
  --thd-screen-sm: 40rem;
  --thd-screen-md: 48rem;
  --thd-screen-lg: 64rem;
  --thd-screen-xl: 80rem;
  --thd-screen-2xl: 84.875rem;
  --thd-screen-3xl: 100rem;
  --thd-screen-4xl: 120rem;
  --thd-screen-5xl: 142.75rem;
  --thd-fluid-vw-start: 48;
  --thd-fluid-vw-end: 100;
  --thd-color-grey-10: #f8f8f8;
  --thd-color-grey-20: #f0f1f2;
  --thd-color-grey-30: #dddee1;
  --thd-color-grey-40: #b7b9be;
  --thd-color-grey-50: #8c8f97;
  --thd-color-grey-50-50: #8c8f9780;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-deep-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.