Typography
scale ratio 1.268- Interbody400 450 50044%
- SF Pro (system-ui)css: ui-sans-serifother400 450 500 600 65024%
- Newsreaderdisplay50020%
- Menlocss: ui-monospacemono400 5006%
- Georgiacss: ui-serifother4003%
- Didotother4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Newsreader | 44px | 500 | 1.08 | -0.02em |
| headline | Newsreader | 25.28px | 500 | 1.15 | 0em |
| title | Georgia | 30px | 400 | 1.12 | -0.02em |
| body | Inter | 16.8px | 400 | 1.7 | 0em |
| label | Inter | 14px | 400 | 1.5 | -0.02em |
| mono | Menlo | 15.5px | 400 | 1.78 | 0em |
Type scale
Aa11.5Aa12Aa12.5Aa13Aa13.5Aa14Aa15Aa15.5Aa16Aa17Aa20Aa25.5Aa30Aa44
- Body size
- 17px / 1.7
- Display size
- 44px
- Display tracking
- -0.02em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 15.48:1
- Muted on bg
- 5.73:1
- Accent on bg
- 15.48:1
- Dark mode
- follows system
Space, shape & depth
Spacing scale
- 2
- 4
- 6
- 7
- 8
- 9
- 10
- 12
- 13
- 14
- 16
- 18
- 24
Corner radii
46781014pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
- backgroundColor
- #21201C
- textColor
- #0000EE
- rounded
- 9999px
- padding
- 10px 20px
- height
- 44px
- fontFamily
- sans-serif
- fontSize
- 12px
- fontWeight
- 400
- shadow
- rgba(255, 255, 255, 0.05) 0px 1px 2px 0px inset, rgba(28, 25, 23, 0.14) 0px 2px 5px 0px, rgba(28, 25, 23, 0.3) 0px 8px 1
button-secondary
Book a demo
- textColor
- #21201C
- rounded
- 9999px
- padding
- 8px 14px
- height
- 44px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #DAD9D6
Layout & motion
- Container
- 1296px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-static+transparent
- Page height
- 7,347px
- Easing
- ease
- Durations
- 150ms 160ms 180ms 420ms
- Transitions
- 186
- Keyframes
- 8
- Stack
- framer, google-tag-manager, cloudflare
Page sections (2)
01nav
How Loops compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 44px: smaller than 77% of indexed sites (median 60px).
- Type scale
- 1.27×: flatter than 57% of indexed sites (median 1.28×).
- Container
- 1296px: wider than 68% of indexed sites (median 1242px).
- Text contrast
- 15.5:1: lower than 70% of indexed sites (median 17.6:1).
- Page length
- 7,347px: shorter than 59% of indexed sites (median 8,217px).
- Corner radius
- Mostly 10px, shared by 9 of 274 indexed sites (3%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Newsreader
- One of 2 indexed sites that load Newsreader (1%).
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Loops use?
Loops uses Inter for body text. SF Pro (system-ui) (loaded as "ui-sans-serif") is used for other. Newsreader is used for headings.
What are Loops's brand colors?
Loops's website uses a light scheme: background #F9F9F8, surface #F1F0EF, text #21201C, muted text #63635E.
How is Loops's website laid out?
The most common corner radius is 10px, body text is 17px with 1.7 line height, and the page container is 1296px wide.
