What font does Salesforce use?

Salesforce’s website uses two typefaces: ITC Avant Garde (headings), served from a.sfdcstatic.com; Salesforce Sans (body text), served from a.sfdcstatic.com.

What are Salesforce’s brand colours?

The main colours on salesforce.com are Light Midnight Blue (#032D60), Steel Blue (#0176D3), Medium Blue (#022AC0), Light Dodger Blue (#1B96FF), Deep Royal Blue (#0B5CAB) and Deep Dodger Blue (#0D9DDA).

What colour is Salesforce’s text and background?

Body text is #080707 on a #FFFFFF background.

Where is Salesforce’s logo from?

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

Is this Salesforce’s official style guide?

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

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

Unofficial style guide

Salesforcestyle guide

Salesforce’s website (salesforce.com) sets its headings in ITC Avant Garde and its body text in Salesforce Sans. Its palette is led by Light Midnight Blue (#032D60), Steel Blue (#0176D3) and Medium Blue (#022AC0), with #080707 text on #FFFFFF. Captured from the live site on 29 October 2026.

Website: salesforce.com
Typefaces: ITC Avant Garde, Salesforce Sans
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 29 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

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

Screenshot of the salesforce.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: Salesforce: The #1 Agentic AI CRM | Salesforce AU; ● 49 / 60 characters
Meta description: Salesforce is the #1 Agentic AI CRM, helping companies become Agentic Enterprises where humans and agents drive success together through a unified AI, data, and Customer 360 platform.; ▲ 183 / 160 characters
Site name: Salesforce
og:title: Salesforce: The #1 Agentic AI CRM
og:description: Salesforce is the #1 Agentic AI CRM, helping companies become Agentic Enterprises where humans and agents drive success together through a unified AI, data, and Customer 360 platform.
Language: en

In search results

Salesforcehttps://www.salesforce.com/au/?ir=1&bc=DB

Salesforce: The #1 Agentic AI CRM | Salesforce AU

Salesforce is the #1 Agentic AI CRM, helping companies become Agentic Enterprises where humans and agents drive success together through a unified AI, data, and …

When shared

salesforce.com

Salesforce: The #1 Agentic AI CRM

Salesforce is the #1 Agentic AI CRM, helping companies become Agentic Enterprises where humans and agents dri…

Logo & favicons

Found as: schema.org logo. WEBP, 1200 × 630.

Logo

On white

On black

On Light Midnight Blue

Favicons

1 found

32 px · ICO icon

Salesforce: The #1 Agentic AI CRM | Salesforce AU

Light browser tab

Salesforce: The #1 Agentic AI CRM | Salesforce AU

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

Colour

Balance

How much each colour is used

Light Midnight Blue 34.7%
White 17.5%
Near Black 12.2%
Steel Blue 8.3%
Cool Off White 6.8%
Off White 4.8%
Medium Blue 2.5%
Light Dodger Blue 2%
Deep Royal Blue 2%
Deep Dodger Blue 1.8%
Light Sky Blue 1.5%
Blue Violet 1.5%
Midnight Blue 1.2%
Light Royal Blue 1.2%
Deep Midnight Blue 1.2%
Dark Orchid 1%

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
20.12:1 AAA

On white
—

Background, text, border · .background__swoopy:before, html
Near Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 91

On text
1.13:1 Fail

On white
17.76:1 AAA

Text · .tablist a, .pbc-slider__title
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
8 4 0 0

On text
18.19:1 AAA

On white
1.11:1 Fail

Background, border, graphic · inline style on <div>, --sds-c-button-color-background-hover
Off White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 10

On text
15.97:1 AAA

On white
1.26:1 Fail

Background, border · .separator-vert, .offer-loader .asset

Colours

Brand colours and accents, most used first

Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
97 53 0 62

On text
1.48:1 Fail

On white
13.56:1 AAA

Text, background, graphic · .nup--blade .nup__4 .cards.cards--spotlight .card__wrapper:not(.card__1) .card__, .index--blade .index__blade-heading .headline
Steel Blue

HEX

RGB

HSL

OKLCH

CMYK
100 44 0 17

On text
4.34:1 AA large

On white
4.63:1 AA

Text, background, border · .q-jqLUYY, .q1-homepage__wrapper .button-secondary
Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
99 78 0 25

On text
2.01:1 Fail

On white
10.02:1 AAA

Background, text, graphic · .background__gradient.dark_gradient_radial, .q-evWSAW
Light Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
89 41 0 0

On text
6.57:1 AA

On white
3.06:1 AA large

Border, background · a[data-variant=primary]:has(.cta_button__loader:not(.hidden)), --sds-g-color-palette-blue-60
Deep Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
94 46 0 33

On text
3.00:1 AA large

On white
6.70:1 AA

Text, background, graphic · --sds-g-color-brand-inverse-4, --sds-g-link-color
Deep Dodger Blue

HEX

RGB

HSL

OKLCH

CMYK
94 28 0 15

On text
6.56:1 AA

On white
3.06:1 AA large

Text, border, background · --sds-g-color-palette-cloud-blue-60, .card--card_pricingedition.featured:before
Light Sky Blue

HEX

RGB

HSL

OKLCH

CMYK
43 18 0 0

On text
12.11:1 AAA

On white
1.66:1 Fail

Background, text · --sds-g-color-palette-cloud-blue-80, .version--two .background__gradient.light_gradient_2_morning
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
48 83 0 11

On text
3.01:1 AA large

On white
6.68:1 AA

Background, text, graphic · --sds-g-color-palette-purple-40, .background__gradient.dark_gradient_default
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 67 0 64

On text
1.28:1 Fail

On white
15.71:1 AAA

Background · --pbc-g-electric-blue-15, .background__gradient.dark_gradient_default
Light Royal Blue

HEX

RGB

HSL

OKLCH

CMYK
98 58 0 0

On text
4.31:1 AA large

On white
4.67:1 AA

Background, text · .card--card_pricingedition.featured:before, .search[data-search-variant='agentforce']::before
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
100 61 0 78

On text
1.12:1 Fail

On white
17.89:1 AAA

Text, border, graphic · --sds-g-color-brand-inverse-1, --sds-g-color-brand-base-contrast-4
Dark Orchid

HEX

RGB

HSL

OKLCH

CMYK
27 100 0 0

On text
4.35:1 AA large

On white
4.63:1 AA

Background · --sds-g-color-palette-violet-50, .background__gradient.dark_gradient_default

Gradients

linear-gradient(#0070d2e6,#0070d2e6)
linear-gradient(#0070d2,#0070d2)
linear-gradient(#fff,#fff)

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.

ITC Avant Garde

Aa 400 Aa 600

ITC Avant Garde

Served from a.sfdcstatic.com · weights 400, 500, 600 · headings, buttons · shown in a stand-in if you don’t have it

Aa 400 Aa 700

Salesforce Sans

Served from a.sfdcstatic.com · weights 400, 600, 700 · headings, buttons, body · shown in a stand-in if you don’t have it

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

Type scale

From the site’s CSS

Paragraph 1rem · 16 px / 1.5rem weight 400 · ITC Avant Garde

Salesforce is the #1 Agentic AI CRM, helping companies become Agentic Enterprises where humans and agents drive success together through a …

Small 80%

Salesforce is the #1 Agentic AI CRM, helping companies become Agentic Enterprises where humans and agents drive success together through a …

Button 100% / 24px weight 700 · none · ITC Avant Garde

Get started

Link 16px / 24px weight 700 · Salesforce Sans

Sizes in use

Most common across the site

40pxline 48px · 8 rules
32pxline 40px · 30 rules
24pxline 32px · 29 rules
20pxline 28px · 43 rules
18pxline 28px · 17 rules
16pxline 24px · 69 rules
14pxline 20px · 68 rules
12pxline 18px · 22 rules

Elements

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

Elements

Button

Get started

.q1-homepage__wrapper .button-primary · #0176D3

Link

Read our latest news today.

a · #0B5CAB

Corner radius

16px · 43×
50% · 29×
4px · 27×
8px · 22×
100px · 10×
12px · 7×

Shadows

0 2px 8px -2px hsla(0,0%,9%,.08),0 8px 12px -2px hsla(0,0%,9%,.16)
0 0 2px hsla(0,0%,9%,.08),0 2px 4px 1px hsla(0,0%,9%,.16)
0 4px 12px #0000001a

Layout

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

Grid

Breakpoints

767

768

1023

1024

1280

1398

1439

1440

On a scale of 0 to 1440 px.

Content widths (max-width)

1280 px

640 px

540 px

350 px

327 px

320 px

Notes

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

Notes

● FineThe title is 49 characters, short enough to show in full in search results.
▲ CheckThe description is 183 characters. Search results usually show about 160.

Questions

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

Questions

What font does Salesforce use?: Salesforce’s website uses two typefaces: ITC Avant Garde (headings), served from a.sfdcstatic.com; Salesforce Sans (body text), served from a.sfdcstatic.com.
What are Salesforce’s brand colours?: The main colours on salesforce.com are Light Midnight Blue (#032D60), Steel Blue (#0176D3), Medium Blue (#022AC0), Light Dodger Blue (#1B96FF), Deep Royal Blue (#0B5CAB) and Deep Dodger Blue (#0D9DDA).
What colour is Salesforce’s text and background?: Body text is #080707 on a #FFFFFF background.
Where is Salesforce’s logo from?: The logo shown in this guide was found on salesforce.com’s homepage. For official logo files and usage rules, check Salesforce’s own brand or press page.
Is this Salesforce’s official style guide?: No. SiteStyleGuide made it from salesforce.com’s public web pages on 29 October 2026, and isn’t affiliated with Salesforce. 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

salesforce-com-tokens.css

Download

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

/* salesforce.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/salesforce.com) */
:root {
  /* Colours */
  --text: #080707;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-near-black: #181818;
  --colour-cool-off-white: #EAF5FE;
  --colour-off-white: #E5E5E5;
  --colour-light-midnight-blue: #032D60;
  --colour-steel-blue: #0176D3;
  --colour-medium-blue: #022AC0;
  --colour-light-dodger-blue: #1B96FF;
  --colour-deep-royal-blue: #0B5CAB;
  --colour-deep-dodger-blue: #0D9DDA;
  --colour-light-sky-blue: #90D0FE;
  --colour-blue-violet: #7526E3;
  --colour-midnight-blue: #001E5B;
  --colour-light-royal-blue: #066AFE;
  --colour-deep-midnight-blue: #001639;
  --colour-dark-orchid: #BA01FF;
  --gradient-1: linear-gradient(#0070d2e6,#0070d2e6);
  --gradient-2: linear-gradient(#0070d2,#0070d2);
  --gradient-3: linear-gradient(#fff,#fff);

  /* Typefaces */
  --font-headings: 'ITC Avant Garde', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-buttons: 'ITC Avant Garde', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';
  --font-body: 'Salesforce Sans', system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'roboto';

  /* Type scale */
  --text-p: 1rem;
  --leading-p: 1.5rem;
  --text-small: 80%;
  --text-button: 100%;
  --leading-button: 24px;
  --text-a: 16px;
  --leading-a: 24px;

  /* Shape */
  --radius-1: 16px;
  --radius-2: 50%;
  --radius-3: 4px;
  --radius-4: 8px;
  --radius-5: 100px;
  --radius-6: 12px;

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

{
    "site": "salesforce.com",
    "source": "https://sitestyleguide.com/salesforce.com",
    "text": "#080707",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Near Black",
            "hex": "#181818",
            "rgb": [
                24,
                24,
                24
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#EAF5FE",
            "rgb": [
                234,
                245,
                254
            ]
        },
        {
            "name": "Off White",
            "hex": "#E5E5E5",
            "rgb": [
                229,
                229,
                229
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#032D60",
            "rgb": [
                3,
                45,
                96
            ]
        },
        {
            "name": "Steel Blue",
            "hex": "#0176D3",
            "rgb": [
                1,
                118,
                211
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#022AC0",
            "rgb": [
                2,
                42,
                192
            ]
        },
        {
            "name": "Light Dodger Blue",
            "hex": "#1B96FF",
            "rgb": [
                27,
                150,
                255
            ]
        },
        {
            "name": "Deep Royal Blue",
            "hex": "#0B5CAB",
            "rgb": [
                11,
                92,
                171
            ]
        },
        {
            "name": "Deep Dodger Blue",
            "hex": "#0D9DDA",
            "rgb": [
                13,
                157,
                218
            ]
        },
        {
            "name": "Light Sky Blue",
            "hex": "#90D0FE",
            "rgb": [
                144,
                208,
                254
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#7526E3",
            "rgb": [
                117,
                38,
                227
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#001E5B",
            "rgb": [
                0,
                30,
                91
            ]
        },
        {
            "name": "Light Royal Blue",
            "hex": "#066AFE",
            "rgb": [
                6,
                106,
                254
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#001639",
            "rgb": [
                0,
                22,
                57
            ]
        },
        {
            "name": "Dark Orchid",
            "hex": "#BA01FF",
            "rgb": [
                186,
                1,
                255
            ]
        }
    ],
    "fonts": [
        {
            "name": "ITC Avant Garde",
            "stack": "\"ITC Avant Garde\", system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [
                400,
                500,
                600
            ],
            "source": "Served from a.sfdcstatic.com"
        },
        {
            "name": "Salesforce Sans",
            "stack": "\"Salesforce Sans\", system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\", roboto, \"Helvetica Neue\", arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
            "weights": [
                400,
                600,
                700
            ],
            "source": "Served from a.sfdcstatic.com"
        }
    ]
}

Websites whose lead colour is closest to Salesforce’s

Node.js

nodejs.org · 3 days ago
Save
gameforge.com

gameforge.com · 16 hours ago
Save
trello.com

trello.com · 1 day ago
Save
Lightshot

prnt.sc · 5 days ago
Save

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

Salesforcestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Near Black

Cool Off White

Off White

Colours

Light Midnight Blue

Steel Blue

Medium Blue

Light Dodger Blue

Deep Royal Blue

Deep Dodger Blue

Light Sky Blue

Blue Violet

Midnight Blue

Light Royal Blue

Deep Midnight Blue

Dark Orchid

Gradients

ITC Avant Garde

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run salesforce.com?

Similar colours

Node.js

gameforge.com

trello.com

Lightshot

Title &
description