---
version: alpha
name: Loom
description: Light design system extracted from www.loom.com (DOM-true values, Emblematic extractor 0.2.0, 2026-11-12).
colors:
  background: "#FFFFFF"
  on-surface: "#101214"
  primary: "#1868DB"
  surface: "#E9F2FE"
  on-surface-variant: "#292A2E"
  thd-color-blue-80: "#1558BC"
  thd-color-violet-20: "#EED7FC"
  thd-color-yellow-10: "#FFF5D4"
  thd-color-green-10: "#EFFFD6"
  lns-color-upgrade: "#F8EEFE"
  thd-color-violet-90: "#48245D"
  thd-color-green-30: "#B3DF72"
  color-13: "#000000"
  on-primary: "#FFFFFF"
typography:
  display-lg:
    fontFamily: Charlie Display
    fontSize: 63.27px
    fontWeight: 700
    lineHeight: 1.029
  title-md:
    fontFamily: Charlie Display
    fontSize: 25.27px
    fontWeight: 700
    lineHeight: 1.333
  body-md:
    fontFamily: Charlie Text
    fontSize: 18.62px
    fontWeight: 400
    lineHeight: 1.647
  body-sm:
    fontFamily: Charlie Text
    fontSize: 15.62px
    fontWeight: 400
    lineHeight: 1.714
rounded:
  sm: 16px
  md: 41.5px
  lg: 69px
  full: 9999px
spacing:
  xxs: 8px
  xs: 15.5px
  sm: 16px
  md: 23.5px
  lg: 24px
  xl: 32px
  2xl: 36px
  3xl: 40px
  4xl: 56px
  5xl: 64px
  6xl: 70.5px
  7xl: 91px
  8xl: 111px
  base: 4px
  container: 1368px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.background}"
    rounded: "{rounded.full}"
    padding: 7.8px
    height: 48px
  card:
    rounded: 12px
    padding: 0px
---

# Loom

> Extracted from [https://www.loom.com/](https://www.loom.com/) on 2026-11-12 by Emblematic. Every value below was read from the rendered DOM (computed styles, `document.fonts`, and the fonts Chrome actually used to paint text), not estimated from pixels. When the YAML front matter and this prose disagree, the YAML wins. Copy values from this file exactly; don't transcribe them from memory. Don't copy logos, imagery, illustrations or marketing copy.

## Overview

Loom uses a light canvas (#FFFFFF) with a palette led by #1868DB. Type is set in **Charlie Display** (display), **Charlie Text**, with 18.5px body text. Layout: 1368px container, top-sticky navigation, 13 sections. Built with next.js, tailwind, sanity, vercel, cloudfront.

## Colors

Area-weighted from painted backgrounds, text and borders on the 1440px light capture. Roles are inferred from usage (largest background, most text, interactive fills). Every hex is an exact computed value; a role marked *unverified* is a best guess that has not passed review, so its canonical token (e.g. `primary`) is left out of the front matter.

| Token | Hex | OKLCH | Role | Share of paint | CSS variable |
|---|---|---|---|---|---|
| `background` | `#FFFFFF` | 1 0 0 | bg | 58.0% | `--lns-color-background` |
| `on-surface` | `#101214` | 0.181 0.005 248.1 | text | 14.9% | `--thd-color-black` |
| `primary` | `#1868DB` | 0.541 0.191 259 | accent | 11.5% | `--lns-color-primary` |
| `surface` | `#E9F2FE` | 0.958 0.019 255.5 | surface | 9.4% | `--thd-color-blue-10` |
| `on-surface-variant` | `#292A2E` | 0.286 0.007 274.7 | muted | 0.60% | `--lns-color-grey8` |
| `thd-color-blue-80` | `#1558BC` | 0.482 0.171 259.3 | other | 2.4% | `--thd-color-blue-80` |
| `thd-color-violet-20` | `#EED7FC` | 0.909 0.055 312.8 | other | 0.78% | `--thd-color-violet-20` |
| `thd-color-yellow-10` | `#FFF5D4` | 0.97 0.044 93.1 | other | 0.48% | `--thd-color-yellow-10` |
| `thd-color-green-10` | `#EFFFD6` | 0.978 0.056 124.8 | other | 0.45% | `--thd-color-green-10` |
| `lns-color-upgrade` | `#F8EEFE` | 0.962 0.024 313.1 | other | 0.45% | `--lns-color-upgrade` |
| `thd-color-violet-90` | `#48245D` | 0.337 0.102 311.3 | other | 0.26% | `--thd-color-violet-90` |
| `thd-color-green-30` | `#B3DF72` | 0.849 0.146 127.4 | other | 0.22% | `--thd-color-green-30` |
| `color-13` | `#000000` | 0 0 0 | other | 0.21% | — |

Sparse chromatic highlights (not accents): `#BF63F3` (`--thd-color-violet-50`), `#A36700` (`--thd-color-yellow-70`).

Contrast: text on background 18.77:1, muted text 14.34:1, accent 5.2:1.

Gradients in use: `linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 55%, rgb(233, 242, 254) 55%, rgb(233, 242, 254) 100%)`; `linear-gradient(to top, rgb(179, 223, 114), rgba(255, 255, 255, 0))`.

The site does not change under `prefers-color-scheme: dark`.

## Typography

| Family | Role | Weights | Share of text | Source |
|---|---|---|---|---|
| **Charlie Display** | display | 700 | 56.0% | webfont |
| **Charlie Text** | body | 400, 500, 700 | 44.0% | webfont |

Declared in `@font-face` but not used to paint text on this page: Atlassian Mono, Atlassian Sans, Circular. Don't treat these as the page's fonts.

Scale (px): 12.5, 15.5, 16, 18, 18.5, 25.5, 26.5, 32.5, 44, 63.5. Effective ratio ≈ 1.28 (close to a major third). Body 18.5px at line-height 1.647; display 63.27px with tracking 0em. Headings are sentence case. On a 390px viewport the body is 17px and display 35px.

## Layout

Spacing follows a 4px base unit; the most used steps are 8, 15.5, 16, 23.5, 24, 32, 36, 40, 56, 64, 70.5, 91, 111px. Sections open with about 111px of space before their first line of text. Content sits in a 1368px container on a 2-column grid. Text density 0.105 (text area / page area).

Section order (desktop). Kinds below the review threshold are shown as *section*:

1. **nav** (150px, bg #FFFFFF)
2. **hero** — “One video is worth a thousand words” (1164px, bg #FFFFFF)
3. **logos** — “Millions of people across 400,000 companies choose Loom” (888px, bg #FFFFFF)
4. **section** — “Show it in Loom, ship with any agent” (852px, bg #1868DB)
5. **section** — “Lightning fast screen recording” (1051px, bg #FFFFFF)
6. **section** — “So much more than a screen recorder” (1774px, bg #FFFFFF)
7. **section** — “Engage and connect with video” (731px, bg #FFFFFF)
8. **section** — “Keep your content safe” (474px, bg #101214)
9. **section** — “Video messaging for all use cases” (797px, bg #FFFFFF)
10. **logos** — “Powerful features for easy, custom recordings” (701px, bg #FFFFFF)
11. **section** — “How to use async video messaging to improve communication” (964px, bg #1868DB)
12. **testimonials** — “Loom for Enterprise” (2273px, bg #292A2E)
13. **footer** (697px, bg #E9F2FE)

## Elevation & Depth

Style: layered. Most used shadows:

- `rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.06) 0px 5px 18px 0px, rgba(0, 0, 0, 0.1) 0px 24px 83px 0px`
- `rgba(0, 0, 0, 0.03) 0px 4px 6.4px 0px, rgba(0, 0, 0, 0.05) 0px 3px 9.6px 0px, rgba(0, 0, 0, 0.07) 0px 8px 32px 0px, rgba(0, 0, 0, 0.1) 0px 32px 96px 0px`
- `rgba(0, 0, 0, 0.25) 0px 15px 50px 0px`

## Shapes

Dominant corner radius is a full pill; radii in use: 16px, 41.5px, 69px, pill. Borders: none (1px).

## Components

- **button-primary**: backgroundColor `#1868DB`, textColor `#FFFFFF`, rounded `9999px`, padding `7.8px 15.6px`, height `48px`, fontFamily `Charlie Text`, fontSize `15.62px`, fontWeight `400` (e.g. “Get Loom for free”)
- **card**: rounded `12px`, padding `0px`, shadow `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0`

## Do's and Don'ts

- Do reserve `#1868DB` for primary actions and highlights; it covers only 11.5% of the painted page.
- Do set body copy in Charlie Text at 18.5px / 1.647.
- Do use Charlie Display only for display sizes, not for body text.
- Don't introduce font weights beyond 400, 500, 700.
- Do keep corners at pill for most controls, and use the larger radii only for cards and media.
- Do snap spacing to multiples of 4px.
- Don't copy this site's logos, illustrations, photography or copy; use the system, not the brand assets.

## Provenance

Spec v2, extractor 0.2.0. Render quality: **ok**. Vision pass: not run. Fields below confidence 0.7 are hedged or left out above: `color.accent_strategy`, `layout.columns`, `layout.hero`, `layout.section_count`, `sections[].kind`, `space.section_padding_px`. Full per-field provenance is in `spec.json`.