---
site: "Free screen recorder for Mac and PC | Loom"
url: "https://loom.com"
generated_at: "2026-06-25T08:28:20.982Z"
generator: "designlang@13.0.0"
intent: landing
material: material-you
library: tailwindcss
tokens:
  colors:
    primary: "#1868db"
    secondary: "#ffab00"
    accent: "#e9f2fe"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: Charlie Text
    base: 16
  spacing:
    base: 2
    scale: "[1, 15, 23, 30, 35, 40, 48, 56, 64, 80]"
  radii:
    xs: 1
    md: 6
    lg: 16
    xl: 24
    full: 39
  shadows:
    sm: "rgba(0, 0, 0, 0.25) 0px 3.24px 3.24px 0px"
---

# Overview

A **landing** page (heuristic confidence 0.31), dressed in **material-you** material (0.45).

Component library appears to be **tailwindcss** (0.723).

> "One video is worth a thousand words"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `cta → nav → content → content → content → content → pricing → logo-wall → nav → pricing → cta → nav → testimonials → nav → nav → content → nav → nav → nav → nav → cta → nav → testimonials → nav → testimonials → nav → nav → nav → nav → feature-grid → nav → comparison → nav → comparison → nav → nav → cta → nav → gallery → sidebar → footer`.

Source: <https://loom.com>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#1868db` | 125 |
| secondary | `#ffab00` | 9 |
| accent | `#e9f2fe` | 43 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#292a2e` · `#000000` · `#ffffff` · `#696969` · `#555555`

**Total unique colors detected:** 28.

# Typography

**Families**
- `Charlie Text` · 1057 uses
- `Charlie Display` · 30 uses
- `Times` · 4 uses

**Body size:** `16px` / line-height `24px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `56.5385px` | `700` | `58.1781px` |
| h2 | `40.3077px` | `700` | `46.0717px` |
| h3 | `30px` | `700` | `38.19px` |
| h4 | `23.5385px` | `700` | `31.3768px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `1px` · `15px` · `23px` · `30px` · `35px` · `40px` · `48px` · `56px` · `64px` · `80px`

**Layout primitives:** 19 grid containers · 171 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(0, 0, 0, 0) 0px 0px 0px 4.34077px`
- `sm` — `rgba(255, 255, 255, 0.4) 0px 0px 0px 5px, rgba(0, 0, 0, 0.17) 0px 45.612px 86.879px 0px, rgba(0, 0, 0, 0.11) 0px 13.751px 26.192px 0px, rgba(0, 0, 0, 0.09) 0px 5.71104px 10.879px 0px, rgba(0, 0, 0, 0.06) 0px 2.06592px 3.93504px 0px`
- `sm` — `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.06) 0px 5px 18px 0px, rgba(0, 0, 0, 0.1) 0px 24px 83px 0px`
- `sm` — `rgba(0, 0, 0, 0.25) 0px 3.24px 3.24px 0px`
- `sm` — `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`
- `md` — `rgb(199, 197, 199) -3px -3px 5px -2px`

**Z-index layers:** 7 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `1px`
- `md` — `6px`
- `lg` — `12px`
- `lg` — `16px`
- `xl` — `24px`
- `full` — `39px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `avatars` · `accordions` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | secondary, primary | xs, md, lg | 18 |

# Do's and Don'ts

**Do's**
- Use `get`, `learn`, `sign` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 1 wcag contrast failures.
- Don't 228 !important rules — prefer specificity over overrides.
- Don't 92% of css is unused — consider purging.
- Don't 8167 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v13.0.0 from <https://loom.com>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._