Light interfaceMeasured www.salesforce.com/crm

Salesforce

Confident and corporate, built on strong blue and crisp white.

This page is styled with Salesforce’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#EAF5FE
Cards, panels, menus

Text#001E5B
Headings and body

Muted text#032D60
Secondary info

Line#022AC0
Dividers and outlines

Accent#066AFE
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 15.7:1Muted on background 13.6:1Text on accent 4.7:1

Every colour found on their site

#001E5B#181818#FFFFFF#022AC0#032D60#066AFE#EAF5FE

Typography

Headings use Avant Garde for Salesforce (company-only; shown here with the free look-alike Poppins). Body text uses Salesforce Sans (company-only; shown with Inter).

h1	Avant Garde for Salesforce · 56px · 400 · -0.672px	The world's #1 AI CRM powers the Agentic Enterprise.
h2	Avant Garde for Salesforce · 40px · 400 · -0.32px	Surpass your business goals and exceed customer expectations
h3	Avant Garde for Salesforce · 24px · 400 · -0.096px	What is CRM?
p	Avant Garde for Salesforce · 16px · 400 · -0.08px	Become an agentic enterprise with our refreshed step-by-step
li	Salesforce Sans · 16px · 400	Share the story

Corners & shadows

Corner sizes used

16px

12px

pill

4px

Shadows

Shadow 1

Shadow 2

Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Salesforce’s live website. Click to enlarge.

Buttons · 3

Salesforce button: Watch demo — #066AFE · corners 9999px · 52px

Salesforce button: Start for free — No fill · corners 9999px · 52px

Salesforce button: Learn about CRM — No fill · corners 4px · 28px

Buttons · 3

Salesforce Buttons: Watch demo — fill #066AFE · corners 9999px · Salesforce Sans 16px

Salesforce Buttons: Start for free — no fill · corners 9999px · Salesforce Sans 16px

Salesforce Buttons: Learn about CRM — no fill · corners 4px · Salesforce Sans 16px

Tags and badges · 1

Salesforce Tags and badges: Resource — fill #EAF5FE · corners 12px · Salesforce Sans 12px

Cards and panels · 6

Salesforce Cards and panels: Agentforce — fill #FFFFFF · corners 8px · Salesforce Sans 16px

Salesforce Cards and panels: Sales Cloud — no fill · corners 8px · Salesforce Sans 16px

Salesforce Cards and panels: Service Cloud — no fill · corners 8px · Salesforce Sans 16px

Salesforce Cards and panels: Marketing Cloud — no fill · corners 8px · Salesforce Sans 16px

Salesforce Cards and panels: Commerce Cloud — no fill · corners 8px · Salesforce Sans 16px

Salesforce Cards and panels: CRM for SMB — no fill · corners 8px · Salesforce Sans 16px

Icons

1 icons copied exactly from their site’s code.

Product screens

1 real screens from web image search, each linked to where it was found.

Salesforce product screen: The Top 9 CRMs with Outlook Integrations in 2024 | eWay-CRM — The Top 9 CRMs with Outlook Integrations in 2024 | eWay-CRM

Do & don’t

What makes it Salesforce

Deep navy headline text over bright sky-blue accents
Fully pill-shaped buttons with thick, confident borders
Light blue tinted panels instead of pure white or grey

Pair deep navy text with a bright blue action colour
Use fully rounded pill buttons for primary actions
Use light blue tints for secondary panels

Don’t

Don't use multiple unrelated accent colours
Don't use sharp corners on buttons
Don't make the palette feel playful or casual

For AltLeads: Borrow the navy-and-blue trust palette so the CRM feels enterprise-grade and dependable.

Copy the tokens

Paste into any project to try this look.

/* Salesforce · values measured from https://www.salesforce.com/crm/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #EAF5FE;
  --text: #001E5B;
  --muted: #032D60;
  --line: #022AC0;
  --accent: #066AFE;
  --on-accent: #FFFFFF;
  --radius-button: 999px;
  --radius-card: 8px;
  --radius-small: 4px;
  --button-height: 52px;
  --font-heading: "Avant Garde for Salesforce", "Poppins", system-ui, sans-serif;
  --font-body: "Salesforce Sans", "Inter", system-ui, sans-serif;
  --shadow: rgba(23, 23, 23, 0.08) 0px 2px 8px -2px, rgba(23, 23, 23, 0.16) 0px 8px 12px -2px;
}