What font does Ramp use?

Ramp’s website uses four typefaces: Lausanne (headings and body text), self-hosted; IBM Plex Mono, self-hosted; IBM Plex Sans, self-hosted; IBM Plex Sans JP, self-hosted.

What are Ramp’s brand colours?

The main colours on ramp.com are Steel Blue (#5683D2), Deep Yellow (#E4F222), Light Yellow (#F5FF78), Deep Midnight Blue (#001B4A), Light Midnight Blue (#112D5B) and Dark Slate Grey (#17332D).

What colour is Ramp’s text and background?

Body text is #0C0A08 on a #FFFFFF background.

Where is Ramp’s logo from?

The logo shown in this guide was found on ramp.com’s homepage. For official logo files and usage rules, check Ramp’s own brand or press page.

Is this Ramp’s official style guide?

No. SiteStyleGuide made it from ramp.com’s public web pages on 27 October 2026, and isn’t affiliated with Ramp. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from ramp.com’s public web pages. Not affiliated with or endorsed by Ramp. The real site is ramp.com ↗

Unofficial style guide

Rampstyle guide

Ramp’s website (ramp.com) uses Lausanne for its headings and body text. Its palette is led by Steel Blue (#5683D2), Deep Yellow (#E4F222) and Light Yellow (#F5FF78), with #0C0A08 text on #FFFFFF. Captured from the live site on 27 October 2026.

Website: ramp.com
Typefaces: Lausanne, IBM Plex Mono, IBM Plex Sans
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 27 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the ramp.com homepage on a desktop screen — Screenshot of ramp.com on a 1440 px desktop screen, 27 Oct 2026.

Screenshot of the ramp.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Spend Management, Corporate Cards & Accounts Payable Solutions | Ramp; ▲ 69 / 60 characters
Meta description: Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, expenses and accounts payable to automate finance operations and improve efficiency.; ▲ 192 / 160 characters
Site name: Ramp
og:title: Spend Management, Corporate Cards & Accounts Payable Solutions | Ramp
og:description: Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, expenses and accounts payable to automate finance operations and improve efficiency.
Language: en-us

In search results

Ramphttps://ramp.com/

Spend Management, Corporate Cards & Accounts Payable Solution…

Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, expenses and accounts payable to automate finance ope…

When shared

ramp.com

Spend Management, Corporate Cards & Accounts Payable Solutions | Ramp

Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, e…

Logo & favicons

Found as: schema.org logo. SVG.

Logo

On white

On black

On Steel Blue

Favicons

4 found

180 px · PNG apple-touch-icon
48 px · ICO icon
32 px · PNG icon
16 px · PNG icon

Spend Management, Corporate Cards & Accounts Payable Solutions | Ramp

Light browser tab

Spend Management, Corporate Cards & Accounts Payable Solutions | Ramp

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#0C0A08) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 37.8%
Near Black 24.8%
Black 9.1%
Steel Blue 6.8%
Light Grey 4.6%
Deep Yellow 2.8%
Light Yellow 2.8%
Deep Midnight Blue 1.8%
Light Midnight Blue 1.6%
Dark Slate Grey 1.4%
Lavender 1.3%
Chocolate 1.2%
Light Steel Blue 1.2%
Royal Blue 0.9%
Sky Blue 0.9%
Deep Steel Blue 0.9%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
19.76:1 AAA

On white
—

Background, text, border · body, .bg-white\/5
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 4 4 90

On text
1.13:1 Fail

On white
17.54:1 AAA

Background, border, text · .bf7S1a_borderTracer:before, .bg-black\/0
Black

HEX

RGB

HSL

OKLCH

CMYK
0 17 33 95

On text
—

On white
19.76:1 AAA

Text, background, graphic · body, .bf7S1a_personalizingWash
Light Grey

HEX

RGB

HSL

OKLCH

CMYK
0 2 3 18

On text
12.64:1 AAA

On white
1.56:1 Fail

Border, background, text · .bg-$--border-primary$, .bg-grayMedium

Colours

Brand colours and accents, most used first

Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
59 38 0 18

On text
5.24:1 AA

On white
3.77:1 AA large

Background, text, border · .bg-spring\/30, .bg-spring
Deep Yellow

HEX

RGB

HSL

OKLCH

CMYK
6 0 86 5

On text
16.02:1 AAA

On white
1.23:1 Fail

Background, border, text · .bg-solar, .bg-solar\/30
Light Yellow

HEX

RGB

HSL

OKLCH

CMYK
4 0 53 0

On text
18.31:1 AAA

On white
1.08:1 Fail

Background, text · .bg-solarLight, .bg-solarLight\/20
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 64 0 71

On text
1.18:1 Fail

On white
16.72:1 AAA

Background · .bg-dusk, .l_OlgW_rectangle
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
81 51 0 64

On text
1.46:1 Fail

On white
13.55:1 AAA

Background · .bg-midnight, .l_OlgW_rectangleDarkBackground:before
Dark Slate Grey

HEX

RGB

HSL

OKLCH

CMYK
55 0 12 80

On text
1.46:1 Fail

On white
13.57:1 AAA

Background · .bg-\[\#17332D\], .bg-smolder
Lavender

HEX

RGB

HSL

OKLCH

CMYK
14 8 0 5

On text
14.67:1 AAA

On white
1.35:1 Fail

Background · .bg-daylight, --tw-gradient-to
Chocolate

HEX

RGB

HSL

OKLCH

CMYK
0 57 91 9

On text
5.96:1 AA

On white
3.31:1 AA large

Text, border · .text-\[\#e96516\], .text-blaze
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
18 12 0 6

On text
13.07:1 AAA

On white
1.51:1 Fail

Background · .bg-dusk, .l_OlgW_rectangle
Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
100 60 0 0

On text
4.09:1 AA large

On white
4.83:1 AA

Graphic · .privacy-blue, .check-mark
Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
100 12 0 6

On text
10.79:1 AAA

On white
1.83:1 Fail

Text, graphic · .text-cyan-400\/80, --color-cyan-400
Deep Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
24 15 0 8

On text
11.54:1 AAA

On white
1.71:1 Fail

Background · .bg-\[\#B2C7EB\], .bg-\[\#b2c7eb\]

Gradients

linear-gradient(initial)
linear-gradient(in oklab to bottom, #000 0%, #112d5b 100%)
linear-gradient(90deg, rgba(33, 33, 33, .05), rgba(33, 33, 33, .1), rgba(33, 33, 33, .05))

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

Lausanne

Aa 300 Aa 700

Lausanne

Self-hosted · weights 300, 350, 400, 700 · body · shown in a stand-in if you don’t have it

Aa 400 Aa 500

IBM Plex Mono

Self-hosted · weights 400, 500 · shown in a stand-in if you don’t have it

Aa 600

IBM Plex Sans

Self-hosted · weights 600 · shown in a stand-in if you don’t have it

Aa 600

IBM Plex Sans JP

Self-hosted · weights 600 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Heading 1 / initial

Ramp

Heading 2 / initial

Spend Management, Corporate Cards & Accounts Pa…

Body — Lausanne

Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, expenses and accounts payable t…

Paragraph 15px / 21px

Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, expenses and accounts payable t…

Small 80%

Make expense management easy with Ramp's spend management platform. Combine global corporate cards, travel, expenses and accounts payable t…

Button 18px / calc(.25rem * 6)

Get started

Sizes in use

Most common across the site

20pxline 26px · 4 rules
18pxline initial · 3 rules
16pxline initial · 4 rules
15pxline 21px · 4 rules
14pxline initial · 5 rules
12pxline initial · 6 rules
11px4 rules
10px3 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

.75rem · 9×
.5rem · 6×
.1875rem · 4×
6px · 3×
.25rem · 3×
3px · 3×

Shadows

0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000
0 0 30px #1111112c
0 8px 30px #00000014
0 0 28px #ffc1007a

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

480

767

768

992

1024

1280

1360

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1440 px

1280 px

992 px

768 px

480 px

320 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

▲ CheckThe title is 69 characters. Google usually cuts titles near 60, so the end may not show in results.
▲ CheckThe description is 192 characters. Search results usually show about 160.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Ramp use?: Ramp’s website uses four typefaces: Lausanne (headings and body text), self-hosted; IBM Plex Mono, self-hosted; IBM Plex Sans, self-hosted; IBM Plex Sans JP, self-hosted.
What are Ramp’s brand colours?: The main colours on ramp.com are Steel Blue (#5683D2), Deep Yellow (#E4F222), Light Yellow (#F5FF78), Deep Midnight Blue (#001B4A), Light Midnight Blue (#112D5B) and Dark Slate Grey (#17332D).
What colour is Ramp’s text and background?: Body text is #0C0A08 on a #FFFFFF background.
Where is Ramp’s logo from?: The logo shown in this guide was found on ramp.com’s homepage. For official logo files and usage rules, check Ramp’s own brand or press page.
Is this Ramp’s official style guide?: No. SiteStyleGuide made it from ramp.com’s public web pages on 27 October 2026, and isn’t affiliated with Ramp. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

ramp-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* ramp.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/ramp.com) */
:root {
  /* Colours */
  --text: #0C0A08;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #1A1919;
  --colour-black: #0C0A08;
  --colour-light-grey: #D2CECB;
  --colour-steel-blue: #5683D2;
  --colour-deep-yellow: #E4F222;
  --colour-light-yellow: #F5FF78;
  --colour-deep-midnight-blue: #001B4A;
  --colour-light-midnight-blue: #112D5B;
  --colour-dark-slate-grey: #17332D;
  --colour-lavender: #D2DFF3;
  --colour-chocolate: #E96516;
  --colour-light-steel-blue: #C3D3EF;
  --colour-royal-blue: #0066FF;
  --colour-sky-blue: #00D2EF;
  --colour-deep-steel-blue: #B2C7EB;
  --gradient-1: linear-gradient(initial);
  --gradient-2: linear-gradient(in oklab to bottom, #000 0%, #112d5b 100%);
  --gradient-3: linear-gradient(90deg, rgba(33, 33, 33, .05), rgba(33, 33, 33, .1), rgba(33, 33, 33, .05));

  /* Typefaces */
  --font-body: 'Lausanne', 'Arial', sans-serif;
  --font-other: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale */
  --text-p: 15px;
  --leading-p: 21px;
  --text-small: 80%;
  --text-button: 18px;

  /* Shape */
  --radius-1: .75rem;
  --radius-2: .5rem;
  --radius-3: .1875rem;
  --radius-4: 6px;
  --radius-5: .25rem;
  --radius-6: 3px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 480px;
  --breakpoint-2: 767px;
  --breakpoint-3: 768px;
  --breakpoint-4: 992px;
  --breakpoint-5: 1024px;
  --breakpoint-6: 1280px;
  --breakpoint-7: 1360px;
  --breakpoint-8: 1440px;
  --max-width-1: 1440px;
  --max-width-2: 1280px;
  --max-width-3: 992px;
  --max-width-4: 768px;
  --max-width-5: 480px;
  --max-width-6: 320px;
}

{
    "site": "ramp.com",
    "source": "https://sitestyleguide.com/ramp.com",
    "text": "#0C0A08",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#1A1919",
            "rgb": [
                26,
                25,
                25
            ]
        },
        {
            "name": "Black",
            "hex": "#0C0A08",
            "rgb": [
                12,
                10,
                8
            ]
        },
        {
            "name": "Light Grey",
            "hex": "#D2CECB",
            "rgb": [
                210,
                206,
                203
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#5683D2",
            "rgb": [
                86,
                131,
                210
            ]
        },
        {
            "name": "Deep Yellow",
            "hex": "#E4F222",
            "rgb": [
                228,
                242,
                34
            ]
        },
        {
            "name": "Light Yellow",
            "hex": "#F5FF78",
            "rgb": [
                245,
                255,
                120
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#001B4A",
            "rgb": [
                0,
                27,
                74
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#112D5B",
            "rgb": [
                17,
                45,
                91
            ]
        },
        {
            "name": "Dark Slate Grey",
            "hex": "#17332D",
            "rgb": [
                23,
                51,
                45
            ]
        },
        {
            "name": "Lavender",
            "hex": "#D2DFF3",
            "rgb": [
                210,
                223,
                243
            ]
        },
        {
            "name": "Chocolate",
            "hex": "#E96516",
            "rgb": [
                233,
                101,
                22
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#C3D3EF",
            "rgb": [
                195,
                211,
                239
            ]
        },
        {
            "name": "Royal Blue",
            "hex": "#0066FF",
            "rgb": [
                0,
                102,
                255
            ]
        },
        {
            "name": "Sky Blue",
            "hex": "#00D2EF",
            "rgb": [
                0,
                210,
                239
            ]
        },
        {
            "name": "Deep Steel Blue",
            "hex": "#B2C7EB",
            "rgb": [
                178,
                199,
                235
            ]
        }
    ],
    "fonts": [
        {
            "name": "Lausanne",
            "stack": "\"Lausanne\", Arial, sans-serif",
            "weights": [
                300,
                350,
                400,
                700
            ],
            "source": "Self-hosted"
        },
        {
            "name": "IBM Plex Mono",
            "stack": "\"IBM Plex Mono\", ui-monospace, monospace",
            "weights": [
                400,
                500
            ],
            "source": "Self-hosted"
        },
        {
            "name": "IBM Plex Sans",
            "stack": "IBM Plex Sans, IBM Plex Sans Fallback",
            "weights": [
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "IBM Plex Sans JP",
            "stack": "IBM Plex Sans JP, IBM Plex Sans JP Fallback",
            "weights": [
                600
            ],
            "source": "Self-hosted"
        }
    ]
}

Other websites using Lausanne as their main typeface

Esquire

esquire.com · set in Lausanne
Save

Websites whose lead colour is closest to Ramp’s

vk.me

vk.me · 4 days ago
Save
Sniply

snip.ly · 9 hours ago
Save
Facebook

messenger.com · 2 days ago
Save
Facebook

m.me · 4 days ago
Save

Captured from ramp.com on 27 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Ramp; this guide describes the public website for reference.

Rampstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Black

Light Grey

Colours

Steel Blue

Deep Yellow

Light Yellow

Deep Midnight Blue

Light Midnight Blue

Dark Slate Grey

Lavender

Chocolate

Light Steel Blue

Royal Blue

Sky Blue

Deep Steel Blue

Gradients

Lausanne

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run ramp.com?

Also set in Lausanne

Esquire

Similar colours

vk.me

Sniply

Facebook

Facebook

Title &
description