What font does Flexport use?

Flexport’s website uses three typefaces: Helvetica Neue (headings and body text), a system font; Zalando Sans-c8107d83ff0d568d, self-hosted; Roboto Mono-e30379de7a9a321f, self-hosted.

What are Flexport’s brand colours?

The main colours on flexport.com are Deep Midnight Blue (#052439), Cornflower Blue (#7D8CE4), Light Slate Blue (#344D9B), Deep Slate Blue (#223369), Fire Brick (#B9000C) and Tomato (#FF3543).

What colour is Flexport’s text and background?

Body text is #000000 on a #FFFFFF background.

Where is Flexport’s logo from?

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

Is this Flexport’s official style guide?

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

Flexport Style Guide: Colours, Fonts & Logo

Identity & metadata

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

Title &
description

Page title: Freight Forwarding & Supply Chain Platform | Flexport; ● 53 / 60 characters
Meta description: Ship smarter with Flexport's AI-powered freight forwarding platform. Ocean, air, and trucking logistics with end-to-end supply chain visibility.; ● 144 / 160 characters
Site name: Flexport
og:title: Freight Forwarding & Supply Chain Platform | Flexport
og:description: Ship smarter with Flexport's AI-powered freight forwarding platform. Ocean, air, and trucking logistics with end-to-end supply chain visibility.
Language: en
Theme colour: #ffffff

In search results

Flexporthttps://www.flexport.com/

Freight Forwarding & Supply Chain Platform | Flexport

Ship smarter with Flexport's AI-powered freight forwarding platform. Ocean, air, and trucking logistics with end-to-end supply chain visibility.

When shared

flexport.com

Freight Forwarding & Supply Chain Platform | Flexport

Ship smarter with Flexport's AI-powered freight forwarding platform. Ocean, air, and trucking logistics with …

Back to top ↑

Logo & favicons

Found as: schema.org logo. SVG, 481 × 112.

Logo

On white

On black

On Deep Midnight Blue

Favicons

3 found

180 px · PNG apple-touch-icon
120 px · SVG icon
32 px · ICO icon

Freight Forwarding & Supply Chain Platform | Flexport

Light browser tab

Freight Forwarding & Supply Chain Platform | Flexport

Dark browser tab

Back to top ↑

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 (#000000) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

Deep Midnight Blue 22.2%
Cornflower Blue 9.1%
Light Slate Blue 9.1%
Deep Slate Blue 9.1%
Light White 9%
Fire Brick 8.1%
Tomato 8.1%
Slate Blue 7.8%
Light Steel Blue 6.5%
Light Midnight Blue 4%
Deep White 2.6%
Cool Off White 2.6%
Cool Near Black 1.8%

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

Light White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
21.00:1 AAA

On white
—

Theme, text · theme-color meta tag, .app-facade__avatar
Deep White

HEX

RGB

HSL

OKLCH

CMYK
0 2 8 0

On text
20.25:1 AAA

On white
1.04:1 Fail

Background · [data-section-empty]
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
5 2 0 4

On text
18.41:1 AAA

On white
1.14:1 Fail

Background · .app-facade__map
Cool Near Black

HEX

RGB

HSL

OKLCH

CMYK
40 16 0 82

On text
1.36:1 Fail

On white
15.42:1 AAA

Used · --color-module-hover-bg

Colours

Brand colours and accents, most used first

Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
91 37 0 78

On text
1.32:1 Fail

On white
15.93:1 AAA

Background · .nav-card__media--empty, .footer__gradient
Cornflower Blue

HEX

RGB

HSL

OKLCH

CMYK
45 39 0 11

On text
6.74:1 AA

On white
3.11:1 AA large

Background · .nav-card__media--empty, .footer__gradient
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
66 50 0 39

On text
2.68:1 Fail

On white
7.83:1 AAA

Background · .nav-card__media--empty, .footer__gradient
Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
68 51 0 59

On text
1.75:1 Fail

On white
12.03:1 AAA

Background · .nav-card__media--empty, .footer__gradient
Fire Brick

HEX

RGB

HSL

OKLCH

CMYK
0 100 94 27

On text
3.07:1 AA large

On white
6.84:1 AA

Text, border · .form-embed__submit-error .icon, .form-error-summary__icon
Tomato

HEX

RGB

HSL

OKLCH

CMYK
0 79 74 0

On text
5.84:1 AA

On white
3.59:1 AA large

Text, border · .form-embed__submit-error .icon, .form-error-summary__icon
Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
76 33 0 57

On text
2.25:1 Fail

On white
9.34:1 AAA

Background · .container-stack__dpad-btn, .container-stack__ctrl-btn
Light Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
28 23 0 7

On text
10.53:1 AAA

On white
1.99:1 Fail

Background · .footer-glow, .footer__gradient
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
82 32 0 72

On text
1.55:1 Fail

On white
13.55:1 AAA

Background · .container-stack__dpad-btn:active, .container-stack__ctrl-btn:active

Gradients

linear-gradient(-30deg, 0%, 40%, 100%)
linear-gradient(#7d8ce4 0%,#344d9b 25%,#223369 50%,#0a2842 75%,#052439 100%)

Back to top ↑

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.

Helvetica Neue

Aa 300

Helvetica Neue

System font, or not loaded on this page · weights 300 · body · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Courier New

System font, or not loaded on this page · weights 400, 600, 700 · shown in a stand-in if you don’t have it

Aa 200 Aa 600

Zalando Sans-c8107d83ff0d568d

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

Aa 400

Roboto Mono-e30379de7a9a321f

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

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

Type scale

From the site’s CSS

Heading 2 1.875rem · 30 px / 1.15

Freight Forwarding & Supply Chain Platform | Fl…

Heading 3 1.75rem · 28 px / 1.2

Freight Forwarding & Supply Chain Platform | Fl…

Heading 4 1.5rem · 24 px / 1.2

Freight Forwarding & Supply Chain Platform | Fl…

Body 1rem · 16 px / 1.2 weight 300 · Helvetica Neue

Ship smarter with Flexport's AI-powered freight forwarding platform. Ocean, air, and trucking logistics with end-to-end supply chain visibi…

Sizes in use

Most common across the site

30pxline 1.15 · 3 rules
28pxline 1.2 · 3 rules
20pxline 1.2 · 3 rules
18pxline 1.25 · 6 rules
16pxline 1.2 · 16 rules
14pxline 1.2 · 24 rules
11px6 rules
10px4 rules

Back to top ↑

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

50% · 7×
.5rem · 6×
999px · 1×
.5rem .5rem 0 0 · 1×
0 0 .5rem .5rem · 1×

Shadows

0 0 .571em
0 #0006
0 .286em .571em #00000026
0 .214em .643em #00000080

Back to top ↑

Layout

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

Grid

No breakpoints or content widths could be read.

Back to top ↑

Notes

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

Notes

● FineThe title is 53 characters, short enough to show in full in search results.

Back to top ↑

Questions

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

Questions

What font does Flexport use?: Flexport’s website uses three typefaces: Helvetica Neue (headings and body text), a system font; Zalando Sans-c8107d83ff0d568d, self-hosted; Roboto Mono-e30379de7a9a321f, self-hosted.
What are Flexport’s brand colours?: The main colours on flexport.com are Deep Midnight Blue (#052439), Cornflower Blue (#7D8CE4), Light Slate Blue (#344D9B), Deep Slate Blue (#223369), Fire Brick (#B9000C) and Tomato (#FF3543).
What colour is Flexport’s text and background?: Body text is #000000 on a #FFFFFF background.
Where is Flexport’s logo from?: The logo shown in this guide was found on flexport.com’s homepage. For official logo files and usage rules, check Flexport’s own brand or press page.
Is this Flexport’s official style guide?: No. SiteStyleGuide made it from flexport.com’s public web pages on 26 October 2026, and isn’t affiliated with Flexport. Members can refresh a guide after 90 days to pick up changes.

Back to top ↑

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

flexport-com-tokens.css

Download

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

/* flexport.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/flexport.com) */
:root {
  /* Colours */
  --text: #000000;
  --background: #FFFFFF;
  --colour-light-white: #FFFFFF;
  --colour-deep-white: #FFFBEB;
  --colour-cool-off-white: #EAF1F6;
  --colour-cool-near-black: #1B262D;
  --colour-deep-midnight-blue: #052439;
  --colour-cornflower-blue: #7D8CE4;
  --colour-light-slate-blue: #344D9B;
  --colour-deep-slate-blue: #223369;
  --colour-fire-brick: #B9000C;
  --colour-tomato: #FF3543;
  --colour-slate-blue: #1A4A6E;
  --colour-light-steel-blue: #AAB5EC;
  --colour-light-midnight-blue: #0D3148;
  --gradient-1: linear-gradient(-30deg, 0%, 40%, 100%);
  --gradient-2: linear-gradient(#7d8ce4 0%,#344d9b 25%,#223369 50%,#0a2842 75%,#052439 100%);

  /* Typefaces */
  --font-body: system-ui, 'Helvetica Neue', 'helvetica', 'arial', sans-serif;
  --font-other: ui-monospace, 'Courier New', 'courier', monospace;

  /* Type scale */
  --text-h2: 1.875rem;
  --leading-h2: 1.15;
  --text-h3: 1.75rem;
  --leading-h3: 1.2;
  --text-h4: 1.5rem;
  --leading-h4: 1.2;
  --text-body: 1rem;
  --leading-body: 1.2;

  /* Shape */
  --radius-1: 50%;
  --radius-2: .5rem;
  --radius-3: 999px;
  --radius-4: .5rem .5rem 0 0;
  --radius-5: 0 0 .5rem .5rem;
}

{
    "site": "flexport.com",
    "source": "https://sitestyleguide.com/flexport.com",
    "text": "#000000",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "Light White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Deep White",
            "hex": "#FFFBEB",
            "rgb": [
                255,
                251,
                235
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#EAF1F6",
            "rgb": [
                234,
                241,
                246
            ]
        },
        {
            "name": "Cool Near Black",
            "hex": "#1B262D",
            "rgb": [
                27,
                38,
                45
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#052439",
            "rgb": [
                5,
                36,
                57
            ]
        },
        {
            "name": "Cornflower Blue",
            "hex": "#7D8CE4",
            "rgb": [
                125,
                140,
                228
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#344D9B",
            "rgb": [
                52,
                77,
                155
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#223369",
            "rgb": [
                34,
                51,
                105
            ]
        },
        {
            "name": "Fire Brick",
            "hex": "#B9000C",
            "rgb": [
                185,
                0,
                12
            ]
        },
        {
            "name": "Tomato",
            "hex": "#FF3543",
            "rgb": [
                255,
                53,
                67
            ]
        },
        {
            "name": "Slate Blue",
            "hex": "#1A4A6E",
            "rgb": [
                26,
                74,
                110
            ]
        },
        {
            "name": "Light Steel Blue",
            "hex": "#AAB5EC",
            "rgb": [
                170,
                181,
                236
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#0D3148",
            "rgb": [
                13,
                49,
                72
            ]
        }
    ],
    "fonts": [
        {
            "name": "Helvetica Neue",
            "stack": "system-ui, \"Helvetica Neue\", helvetica, arial, sans-serif",
            "weights": [
                300
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Courier New",
            "stack": "ui-monospace, \"Courier New\", courier, monospace",
            "weights": [
                400,
                600,
                700
            ],
            "source": "System font, or not loaded on this page"
        },
        {
            "name": "Zalando Sans-c8107d83ff0d568d",
            "stack": "\"Zalando Sans-c8107d83ff0d568d\", \"Zalando Sans-c8107d83ff0d568d fallback: Arial\", \"Helvetica Neue\", helvetica, arial, sans-serif",
            "weights": [
                200,
                600
            ],
            "source": "Self-hosted"
        },
        {
            "name": "Roboto Mono-e30379de7a9a321f",
            "stack": "\"Roboto Mono-e30379de7a9a321f\", \"Roboto Mono-e30379de7a9a321f fallback: Courier New\", \"Courier New\", courier, monospace",
            "weights": [
                400
            ],
            "source": "Self-hosted"
        }
    ]
}

Back to top ↑

Share

Links open each service’s own share page. Nothing from them loads here.

Share

X LinkedIn Facebook Pinterest Reddit Email

Run flexport.com?

Add the badge to your site

Link to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.

<a href="https://sitestyleguide.com/flexport.com" title="Flexport style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>

Back to top ↑

Flexportstyle guide

Title &
description

Logo

Favicons

Colour

Balance

Neutrals

Light White

Deep White

Cool Off White

Cool Near Black

Colours

Deep Midnight Blue

Cornflower Blue

Light Slate Blue

Deep Slate Blue

Fire Brick

Tomato

Slate Blue

Light Steel Blue

Light Midnight Blue

Gradients

Helvetica Neue

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

agoda.com

YouGlish

NME

The Design Office of David McGillivray

definicion.de

amzn.com

amazon.de

amazon.es

Flexportstyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

Light White

Deep White

Cool Off White

Cool Near Black

Colours

Deep Midnight Blue

Cornflower Blue

Light Slate Blue

Deep Slate Blue

Fire Brick

Tomato

Slate Blue

Light Steel Blue

Light Midnight Blue

Gradients

Helvetica Neue

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run flexport.com?

Also set in Helvetica Neue

agoda.com

YouGlish

NME

The Design Office of David McGillivray

Similar colours

definicion.de

amzn.com

amazon.de

amazon.es

Title &
description