Loom

Loom sets large Charlie Display headlines in a heavy weight on a dark cobalt canvas. Cobalt (#1868db) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 9999px, with 68.9231px and 41.6923px on smaller elements.

loom.com ↗

Colors

Cobalt

#1868db

Primary actions and links

Deep Cobalt

#123263

Secondary accent and highlights

Soft Cobalt

#1868db

Page canvas

Graphite

#292a2e

Headlines and body copy

Bone White

#ffffff

Surface or divider

Deep Bone White

#e9f2fe

Surface or divider

Void

#101214

Surface or divider

Cobalt 2

#1558bc

Supporting colour

Pale Iris

#eed7fc

Surface or divider

Type scale

DisplayOne video is worth a thousand wordsCharlie Display · 63px · 700

HeadingMillions of people across 400,000 companies choose LoomCharlie Display · 44px · 700

SubheadingEdit your videos like a proCharlie Display · 33px · 700

BodyTurn visual walkthroughs into working code in minutes. Sign up to try today ->Charlie Text · 16px · 400

NavNEW: Show it with Loom. Ship it in Cursor.Turn visual walkthroughs into working code in miCharlie Text · 16px · 400

Buttons

Contact SalesInstall Chrome ExtensionOpen iDownload nowSee all use cases

Style reference measured from the public page at loom.com on 2026-10-12 for design education. Loom and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Loom — Style Reference
> Loom sets large Charlie Display headlines in a heavy weight on a dark cobalt canvas. Cobalt (#1868db) is reserved for actions, on fully rounded pill buttons, while the rest of the page stays with graphite text and neutral surfaces. The most common corner radius is 9999px, with 68.9231px and 41.6923px on smaller elements.

**Theme:** dark · **Source:** https://www.loom.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cobalt | `#1868db` | `--color-accent` | Primary actions and links |
| Deep Cobalt | `#123263` | `--color-secondary` | Secondary accent and highlights |
| Soft Cobalt | `#1868db` | `--color-canvas` | Page canvas |
| Graphite | `#292a2e` | `--color-ink` | Headlines and body copy |
| Bone White | `#ffffff` | `--color-surface-1` | Surface or divider |
| Deep Bone White | `#e9f2fe` | `--color-surface-2` | Surface or divider |
| Void | `#101214` | `--color-surface-3` | Surface or divider |
| Cobalt 2 | `#1558bc` | `--color-surface-4` | Supporting colour |
| Pale Iris | `#eed7fc` | `--color-surface-5` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Charlie Display | 63px | 700 | 1.03 | 0 |
| Heading | Charlie Display | 44px | 700 | 1.14 | 0 |
| Subheading | Charlie Display | 33px | 700 | 1.27 | 0 |
| Body | Charlie Text | 16px | 400 | 1.50 | 0 |
| Nav | Charlie Text | 16px | 400 | 1.50 | 0 |

Font families on the page: Charlie Text, Charlie Display. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 9999px, 68.9231px, 41.6923px, 12px, 8px
- Primary button: background `#e9f2fe`, text `#000000`, radius 9999px, padding 7.80769px 15.6154px, 16px / 400

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer