Loom design system

Loom's website (loom.com) uses a light interface with #1868db as its primary color and Charlie Text as the main typeface, with Charlie Display alongside it. designlang measured 15 font sizes from 13.6px to 56.5385px, 15 spacing values, 9 corner radii.

Captured 25 June 2026Light UI1,283 elements read

Download tokens Read it yourself

Loom colors

The brand roles and neutrals loom.com renders, with how many elements use each one.

Brand colors

Primary#1868db125 uses
Secondary#ffab009 uses
Accent#e9f2fe43 uses

Neutrals

#292a2e1,119 uses
#000000407 uses
#ffffff161 uses
#69696963 uses
#55555529 uses
#f8f8f87 uses
#7d818a2 uses
#d8d8d82 uses
#bbbbbb1 uses

Backgrounds

#ffffff
#101214
#1868db
#eed7fc
#efffd6
#f8eefe
#e9f2fe
#fff5d4

Text colors

#00000021:1 on #ffffff
#292a2e14.34:1 on #ffffff
#7d818a3.9:1 on #ffffff
#10121418.77:1 on #ffffff
#ffffff1:1 on #ffffff
#ff613d2.99:1 on #ffffff
#1868db5.2:1 on #ffffff
#bf63f33.34:1 on #ffffff

Contrast checks (WCAG 2.1)

Text and background pairs found together on the page; 94% of them pass.

Text	Background	Ratio	Result
`#7d818a`	`#f8eefe`	3.47:1	Fails AA
`#ffffff`	`#1868db`	5.2:1	AA
`#172b4d`	`#ffab00`	7.44:1	AAA
`#000000`	`#e9f2fe`	18.6:1	AAA
`#ffffff`	`#101214`	18.77:1	AAA
`#292a2e`	`#e9f2fe`	12.69:1	AAA
`#172b4d`	`#ffffff`	14.1:1	AAA

Loom fonts and type scale

Every font family and size in use, read from computed styles rather than the CSS source.

Font families

Charlie Text: sans, most text (1,057 elements)
Charlie Display: sans, most text (30 elements)

Body text: 16px at weight 400, line height 24px.

Weights in use: 400, 700, 500, 600.

Type scale

Size	Weight	Line height	Tracking	Used on
56.5385px	700	58.1781px	normal	h1, h2
40.3077px	700	46.0717px	normal	h2, p
30px	700	38.19px	normal	h2, h3
25.3077px	400	38.5689px	normal	div, p
24px	400	normal	normal	div, span
23.5385px	700	31.3768px	normal	p, h3, blockquote
18.4px	400	27.6px	normal	text, tspan
18.2462px	400	30.0514px	normal	div, p, a, br
18px	500	27px	normal	svg, rect, path, line
16px	400	24px	normal	html, head, meta, script
15.2308px	400	26.1055px	normal	a, span, svg, path
15px	400	22.5px	normal	a, span

Spacing and radii

Spacing scale

1px
15px
23px
30px
35px
40px
48px
56px
64px
80px
84px
103px
154px
192px

Corner radii

1px
6px
12px
16px
24px
39px
50px
66px
pill

Pill-shaped controls are a large share of the rounded elements. 11 distinct box shadows.

Motion

The motion reads as smooth.

Durations

xs: 100ms
sm: 200ms
md: 300ms
lg: 500ms
xl: 1000ms

Easing

custom (8 uses): cubic-bezier(0.4, 0, 0.2, 1)
ease-in-out (16 uses): ease
ease-in (6 uses): cubic-bezier(0.4, 0, 1, 1)

Design system audit

designlang scores how consistently a site uses its own values. How the audit works.

Overall

80/100, grade B

Components found: buttons (31), cards (6), inputs (5), links (86), navigation (11), footer (4).

By category

Color Discipline	80/100
Typography Consistency	80/100
Spacing System	85/100
Shadow Consistency	78/100
Border Radius Consistency	80/100
Accessibility	94/100
CSS Tokenization	100/100

1 WCAG contrast failures
228 !important rules — prefer specificity over overrides
92% of CSS is unused — consider purging
8167 duplicate CSS declarations

Download the tokens

The files designlang wrote for loom.com. Run it yourself for a fresh read: npx designlang loom.com.

The core values as CSS variables

:root {
  --color-primary: #1868db;
  --color-secondary: #ffab00;
  --color-accent: #e9f2fe;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #292a2e;
  --color-neutral-2: #000000;
  --color-neutral-3: #ffffff;
  --color-neutral-4: #696969;
  --font-primary: "Charlie Text", sans-serif;
  --font-secondary: "Charlie Display", sans-serif;
  --radius-sm: 1px;
  --radius-md: 6px;
  --radius-lg: 12px;
}

Read loom.com yourself

Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.

Get started CLI reference

Brands with a similar design

All design systems

Vercel design system

Light UI, Geist, #0068d6

Notion design system

Light UI, NotionInter, #455dd3

Cal.com design system

Light UI, Inter, #0000ee

Arc design system

Light UI, Marlin, #2702c2

Quick answers

What font does Loom use?

loom.com sets most of its text in Charlie Text (1,057 elements), with Charlie Display alongside it. designlang read this from the computed styles of the live page on 25 June 2026.

What are Loom's brand colors?

The brand roles on loom.com are primary #1868db, secondary #ffab00 and accent #e9f2fe, on a #ffffff background. The neutrals used most are #292a2e, #000000 and #ffffff.

How do I use the Loom design system in my own app?

Download the DTCG tokens, Tailwind config or CSS variables on this page, or run npx designlang loom.com for a fresh read. To apply the look to an existing repo, Retheme maps the tokens onto your Tailwind or shadcn theme and opens a pull request.

Is this the official design system?

No. It is measured from loom.com's public pages on 25 June 2026, so it shows what the site renders, not Loom's internal source files. Loom is a trademark of its owner and is not affiliated with designlang.

Measured from the public pages of loom.com on 25 June 2026. Loom is a trademark of its owner; designlang is not affiliated with it. More: the full Loom brand kit, the token extraction guide and the markdown version of this page.