Typography
scale ratio 1.208- Instrument Sansbody400 500 60058%
- Sharp Groteskdisplay400 50042%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Sharp Grotesk | 60px | 400 | 1.25 | 0em |
| headline | Sharp Grotesk | 50px | 400 | 1.25 | 0em |
| title | Instrument Sans | 24px | 500 | 1.25 | 0em |
| body | Instrument Sans | 16px | 400 | 1.55 | 0.01em |
| body-sm | Instrument Sans | 14px | 400 | 1.55 | 0.011em |
Type scale
Aa8Aa10Aa11Aa12Aa14Aa16Aa18Aa20Aa24Aa30Aa50Aa56Aa60
- Body size
- 16px / 1.55
- Display size
- 60px
- Display tracking
- 0em
- Case
- sentence
Color
dark schemePalette by painted area
- Text on bg
- 18.88:1
- Muted on bg
- 12.49:1
- Accent on bg
- 5.49:1
- Dark mode
- none
Declared accent tokens
- --primary-purple#9671FFpainted
Space, shape & depth
Spacing scale
- 4
- 6
- 7
- 8
- 10
- 12
- 16
- 17
- 18
- 20
- 23
- 24
- 26
- 30
Corner radii
4860pill
Shadows (1)
- Borders
- hairline, 1px
- Section padding
- 124px
Components
exact computed valuesbutton-primary
Start for Free
- backgroundColor
- #1D1D1D
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 11px 11px
- height
- 40px
- fontFamily
- Instrument Sans
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #1D1D1D
button-secondary
- backgroundColor
- #9671FF
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 0px 0px
- height
- 52px
- fontFamily
- Instrument Sans
- fontSize
- 16px
- fontWeight
- 500
card
- rounded
- 8px
- padding
- 34px
- backgroundColor
- #1D1D1D
Layout & motion
- Container
- 1280px
- Grid columns
- 6
- Hero
- centered-over-media+media-below
- Navigation
- top-fixed+transparent
- Page height
- 17,411px
- Easing
- cubic-bezier(0.68, -0.55, 0.265, 1.55)
- Durations
- 200ms 250ms 300ms 400ms
- Transitions
- 143
- Keyframes
- 1
- Stack
- webflow, jquery, hubspot, segment, google-tag-manager, cloudflare, cloudfront
Page sections (10)
section labels are heuristic
01nav
02hero
03features?End to end content creation. All in one flow.
04gallery?Made with Riverside
05features?Studio-level quality. No studio required.
07features?Podcast hosting built right in
08features?Run all your webinars & live events like a pro.
How Riverside compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 60px: larger than 48% of indexed sites (median 60px).
- Type scale
- 1.21×: flatter than 77% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 18.9:1: higher than 66% of indexed sites (median 17.6:1).
- Page length
- 17,411px: longer than 95% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Instrument Sans
- One of 4 indexed sites that load Instrument Sans (1%).
- Sharp Grotesk
- One of 2 indexed sites that load Sharp Grotesk (1%).
- Color scheme
- Dark by default, like 25% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Riverside use?
Riverside uses Instrument Sans for body text. Sharp Grotesk is used for headings.
What are Riverside's brand colors?
Riverside's website uses a dark scheme: background #111111, surface #1D1D1D, text #FFFFFF, muted text #D2D2D2 and borders #FFFFFF4D.
How is Riverside's website laid out?
The most common corner radius is fully rounded (pill), body text is 16px with 1.55 line height, and the page container is 1280px wide.
Similar to Riverside
Instrument Sans / Instrument Serif#070708
Instrumentinstrument.com
Sora / Ttroundsneuecond Md#FAF5F5
Fathomfathom.video
Helvetica Now Text / Helvetica Now Display#0B0C14
Better Stackbetterstack.com
Cooper Hewitt Display / Cooper Hewitt#000000
Cooperhewittcooperhewitt.org
SF Pro (system-ui)#0F0F0F
Obsidianobsidian.md