Emblematic
Ramp homepage, desktop
Ramp homepage, mobile
Mobile, 390px

Typography

scale ratio 1.242
  • Lausannedisplay + body400100%
stylefamilysizeweightlinetracking
displayLausanne64px40010em
headlineLausanne28px4001.1430em
titleLausanne24px4001.1670em
bodyLausanne14px4001.4290em
body-smLausanne13px4001.4620em
Type scale
Aa10Aa13Aa14Aa16Aa18Aa24Aa28Aa40Aa48Aa64
Body size
14px / 1.429
Display size
64px
Display tracking
0em
Case
sentence

Color

light scheme
Palette by painted area
Text on bg
19.76:1
Muted on bg
5.24:1
Accent on bg
1.23:1
Dark mode
none

Space, shape & depth

Spacing scale (base 4px)
  • 4
  • 6
  • 8
  • 12
  • 16
  • 20
  • 24
  • 32
  • 64
  • 128
Corner radii
681216pill
Shadows (1)
Borders
hairline, 1px
Section padding
128px

Components

exact computed values
button-primary
Get started
backgroundColor
#1A1919
textColor
#FFFFFF
rounded
6px
padding
12px 16px
height
34.4px
fontFamily
Lausanne
fontSize
14px
fontWeight
400
button-secondary
Get started for free
backgroundColor
#E4F222
textColor
#0C0A08
rounded
8px
padding
0px 20px
height
52px
fontFamily
Lausanne
fontSize
16px
fontWeight
400
card
rounded
16px
padding
20px
backgroundColor
#FFFFFF
border
1px solid #E5E7EB
input
rounded
10px
height
52px
padding
0px 16px

Layout & motion

Container
1312px
Grid columns
2
Hero
left-over-media+media-below
Navigation
top-static+transparent
Page height
13,905px
Easing
cubic-bezier(0.4, 0, 0.2, 1)
Durations
150ms 200ms 300ms 400ms
Transitions
72
Keyframes
0
Stack
next.js, tailwind, radix-ui, hubspot, google-tag-manager, vercel, cloudflare

Page sections (12)

section labels are heuristic
  1. Ramp nav section
    01nav
  2. Ramp hero section
    02hero
  3. Ramp logos section
    03logosJoin 85,000 of the world’s most ambitious companies
  4. Ramp features section
    04features?One platform for all of finance.
  5. Ramp feature-detail section
    05feature detail?See recommendations for your business
  6. Ramp content section
    08content?
  7. Ramp features section
    09features?One platform for all your global spend.
  8. Ramp features section
    10features?We've got the receipts.
  9. Ramp cta section
    11cta?Time is money. Save both.
  10. Ramp footer section
    12footer

How Ramp compares

Body text
14px: smaller than 82% of indexed sites (median 16px).
Largest heading
64px: larger than 56% of indexed sites (median 60px).
Type scale
1.24×: flatter than 66% of indexed sites (median 1.28×).
Container
1312px: wider than 73% of indexed sites (median 1242px).
Text contrast
19.8:1: higher than 73% of indexed sites (median 17.6:1).
Page length
13,905px: longer than 89% of indexed sites (median 8,217px).
Corner radius
Mostly 8px, shared by 21 of 274 indexed sites (8%).
Lausanne
One of 2 indexed sites that load Lausanne (1%).
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 Ramp use?

Ramp uses Lausanne for headings and body text.

What are Ramp's brand colors?

Ramp's website uses a light scheme: background #FFFFFF, text #0C0A08, muted text #0C0A0899 and borders #2121211A.

How is Ramp's website laid out?

The most common corner radius is 8px, body text is 14px with 1.429 line height, and the page container is 1312px wide.

Similar to Ramp

Column homepage
Suisse Int'l / Menlo / Inter#F6F6F8
Columncolumn.com
Displaay homepage
Saans / font-1cffa098-abaa-461c-a3c4-5e421dc49b08 / font-9395b7be-5393-4b58-84e8-b12654b4aee1#FFFFFF
Displaaydisplaay.net
SavvyCal homepage
Inter Variable / GT Alpina Condensed#FCF7ED
SavvyCalsavvycal.com
Works In Progress homepage
Lausanne#FBFAF8
Works In Progressworks-in-progress.co
Abcdinamo homepage
Monument Grotesk / Mxi Rnd Rg A / Ora Vr Rg A#FFFFFF
Abcdinamoabcdinamo.com