Design System Audit

loom.com
Visual Language

Complete design system extracted from www.loom.com — every token, component, interaction pattern, and accessibility note, all from real values.

7Color tokens
8Type styles
5Breakpoints
CharliePrimary font
01 — Foundations

Color Palette

All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.

white

#ffffff

Dominant — background, text

1.00:1 on page bg #ffffff · fails AA

ink-deepest

#292a2e

Dominant — text

14.34:1 on page bg #ffffff · AAA ✓

black

#000000

Accent — text

21.00:1 on page bg #ffffff · AAA ✓

ink-deepest-2

#101214

Accent — text, background

18.77:1 on page bg #ffffff · AAA ✓

canvas-soft

#e9f2fe

Accent — background

18.60:1 on black · AAA ✓

primary

#1868db

Accent — background

5.20:1 on white · AA ✓

canvas-soft-2

#f8eefe

Accent — background

18.65:1 on black · AAA ✓
02 — Foundations

Typography

Body: Charlie Text · Display: Charlie Display.

RoleSpecsSampleUsed on
Body
Charlie Text
16px / 400
lh 1.50
Sign InGet Loom for freeContact SalesToggle menu close
BODY element · 23 uses · real site copy
Body
Charlie Text
26px / 400
lh 1.54
The quick brown fox jumps over the lazy dog
DIV element · 2 uses
Link
Charlie Text
16px / 700
lh 1.63
See all features
A element · 2 uses · real site copy
Body
Charlie Text
16px / 400
lh 1.50
Sign InGet Loom for freeContact SalesToggle menu close
HTML element · 1 uses · real site copy
Body
Charlie Text
16px / 400
lh 1.50
Sign InGet Loom for freeContact SalesToggle menu close
SPAN element · 1 uses · real site copy
Link
Charlie Text
16px / 400
lh 1.63
Sign InGet Loom for freeContact SalesToggle menu close
A element · 1 uses · real site copy
Display Hero
Charlie Display
60px / 700
lh 1.03
The quick brown fox jumps
H1 element · 1 uses
UI Label
Charlie Text
16px / 700
lh 1.00
See all features
SPAN element · 1 uses · real site copy
03 — Components

Navigation

Nav demo using extracted colors, font, real link labels and the site's real logo.

nav · demo using extracted tokens & real links
loom.com logo loom.com
Sign InGet Loom for freeContact Sales
© 2026, Loom, Inc. All Rights Reserved.
Extracted nav tokens
Background#1a1a1a
Text color#ffffff
Font familyCharlie Text
Links (extracted)Sign In · Get Loom for free · Contact Sales
Copyright (extracted)© 2026, Loom, Inc. All Rights Reserved.

Layout values (height, padding, link states) are demo styling — not extracted from the site.

04 — Components

Button Variants

Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 9999px · fill type: solid · padding density: normal.

btn-primary · token demo

bg #1868db · color #ffffff · radius: 9999px

btn-secondary · outlined demo

Demo variant — outlined treatment of the extracted primary color #1868db.

btn-ghost · text-only demo

Demo variant — text-only treatment of the extracted primary color.

btn-disabled · demo state

Generic disabled-state demo — not extracted from the site.

05 — Components

Cards & Surfaces

Depth communicated through shadows and background contrast.

section surface

bg #ffffff · text #000000

page canvas

bg #ffffff · text #292a2e

07 — Components

Form Elements

Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.

Contact form — site-styled demo

loom.com
Get in Touch

Input states
input · default

radius: not detected · demo border/background styling

input · focus state demo

Demo focus treatment using extracted primary color #1868db.

select · dropdown
08 — Foundations

Spacing Scale

Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.

8px
sm
16px
base
107px
section
09 — Foundations

Border Radius

Corner radius tokens observed across components. All values extracted from live stylesheet.

41px
full
41px
9999px
full
9999px

⚠️ 9999px exceeds any component size — likely from an oversized decorative element (effectively a pill shape), not a reusable radius token.

10 — Foundations

Elevation & Depth

Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.

Observed element shadow

rgba(0, 0, 0, 0) 0px 0px 0px 4.39969px

Observed element shadow

rgba(0, 0, 0, 0.25) 0px 15px 50px 0px

11 — Interactions

Motion

Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.

hover demo · using extracted tokens

Demo transitions use the fastest extracted duration (0.1s ease-in-out).

idle vs hover · frozen demo states

Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.

Motion tokens (extracted)
TokenValueOccurrences
duration-fast0.1s27× in stylesheet
duration-base0.15s11× in stylesheet
duration-slow0.2s24× in stylesheet
duration-slower0.3s20× in stylesheet
duration-slowest1s20× in stylesheet
easing-1ease-in-out37× in stylesheet
easing-2ease-in22× in stylesheet
easing-3ease16× in stylesheet
12 — Responsive

Responsive Behavior

Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.

BreakpointBoundaryUsage
Mobile375px2 @media rules
Mobile-2426px3 @media rules
Mobile-3550px3 @media rules
Mobile-4551px2 @media rules
Tablet601px2 @media rules
375px
426px
550px
551px
601px

Extracted from https://www.loom.com/ stylesheets.

13 — Assets

Iconography & Brand Assets

Assets and links extracted from the scraped pages.

Brand mark — extracted asset
loom.com logo

https://cdn.sanity.io/images/pvn35iyy/production/ed2fbe013284dc7017af8a6b577d6a4134ad14b6-84x25.svg

Brand asset — integrations
integrations

https://cdn.loom.com/assets/marketing/home/integrations.svg

Icon system

No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.