Typography
scale ratio 1.280- Charlie Displaydisplay70056%
- Charlie Textbody400 500 70044%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Charlie Display | 63.27px | 700 | 1.029 | 0em |
| title | Charlie Display | 25.27px | 700 | 1.333 | 0em |
| body | Charlie Text | 18.62px | 400 | 1.647 | 0em |
| body-sm | Charlie Text | 15.62px | 400 | 1.714 | 0em |
Type scale
Aa12.5Aa15.5Aa16Aa18Aa18.5Aa25.5Aa26.5Aa32.5Aa44Aa63.5
- Body size
- 18.5px / 1.647
- Display size
- 63.27px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 18.77:1
- Muted on bg
- 14.34:1
- Accent on bg
- 5.20:1
- Dark mode
- none
Declared accent tokens
- --lns-color-primary#1868DBpainted
Space, shape & depth
Spacing scale (base 4px)
- 8
- 15.5
- 16
- 23.5
- 24
- 32
- 36
- 40
- 56
- 64
- 70.5
- 91
- 111
Corner radii
1641.569pill
Shadows (5)
- Borders
- none, 1px
- Section padding
- 111px
Components
exact computed valuesbutton-primary
Get Loom for free
- backgroundColor
- #1868DB
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 7.8px 15.6px
- height
- 48px
- fontFamily
- Charlie Text
- fontSize
- 15.62px
- fontWeight
- 400
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
Layout & motion
- Container
- 1368px
- Grid columns
- 2
- Hero
- centered+media-below
- Navigation
- top-sticky
- Page height
- 12,517px
- Easing
- ease-in-out
- Durations
- 100ms 150ms 300ms 500ms
- Transitions
- 28
- Keyframes
- 8
- Stack
- next.js, tailwind, sanity, vercel, cloudfront
Page sections (13)
section labels are heuristic
01nav
02heroOne video is worth a thousand words
03logosMillions of people across 400,000 companies choose Loom
04feature detail?Show it in Loom, ship with any agent
05feature detail?Lightning fast screen recording
06features?So much more than a screen recorder
07feature detail?Engage and connect with video
08feature detail?Keep your content safe
09features?Video messaging for all use cases
10logosPowerful features for easy, custom recordings
11features?How to use async video messaging to improve communication
12testimonialsLoom for Enterprise
13footer
How Loom compares
- Body text
- 18.5px: larger than 87% of indexed sites (median 16px).
- Largest heading
- 63.3px: larger than 55% of indexed sites (median 60px).
- Type scale
- 1.28×: flatter than 51% of indexed sites (median 1.28×).
- Container
- 1368px: wider than 94% of indexed sites (median 1242px).
- Text contrast
- 18.8:1: higher than 65% of indexed sites (median 17.6:1).
- Page length
- 12,517px: longer than 85% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Charlie Display
- The only site in the index that loads Charlie Display.
- Charlie Text
- The only site in the index that loads Charlie Text.
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Loom use?
Loom uses Charlie Display for headings. Charlie Text is used for body text.
What are Loom's brand colors?
Loom's website uses a light scheme: background #FFFFFF, surface #E9F2FE, text #101214, muted text #292A2E.
How is Loom's website laid out?
The most common corner radius is fully rounded (pill), body text is 18.5px with 1.647 line height, and the page container is 1368px wide.
