Light interfaceMeasured www.lightningdesignsystem.com

Salesforce Lightning

A trusted, corporate CRM workspace organized around a familiar blue sidebar and clean record pages

This page is styled with Salesforce Lightning’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#FFFFFF
Cards, panels, menus

Text#2E2E2E
Headings and body

Muted text#5C5C5C
Secondary info

Line#E5E5E5
Dividers and outlines

Accent#C51D54
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 13.6:1Muted on background 6.7:1Text on accent 5.7:1

Every colour found on their site

#2E2E2E#444444#FFFFFF#03234D#5C5C5C#262626#C51D54#E5E5E5

Typography

Headings use AvantGardeForSalesforce (company-only; shown here with the free look-alike Poppins). Body text uses Inter (free).

h1	AvantGardeForSalesforce · 56px · 400	Lightning Design System 2
h2	AvantGardeForSalesforce · 32px · 400	Welcome to SLDS 2
h3	AvantGardeForSalesforce · 24px · 400	Pro-code control, no-code design
h4	AvantGardeForSalesforce · 16px · 400	Discover what's new with SLDS 2
p	Inter · 18px · 300	Bring your brand to life.
li	DM sans · 13px · 400	Get Started

Corners & shadows

Corner sizes used

3px

4px

2px

20px

16px

Shadows

Shadow 1

Shadow 2

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 Lightning’s live website. Click to enlarge.

Buttons · 1

Salesforce Lightning button: Skip to content — #C51D54 · corners 3px · 40px

Buttons · 1

Salesforce Lightning Buttons: Skip to content — fill #C51D54 · corners 3px · DM sans 13px

Icons

9 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 Lightning 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 Lightning

Dark navy/blue vertical icon sidebar paired with a clean white content area
Clear record header with stage progress pills (path bar) showing deal status
Small, structured info panels (Contacts, Notes) stacked on the right side

Use a fixed icon sidebar for primary navigation
Show pipeline or deal stage as a horizontal progress bar
Group related info into clearly labeled side panels

Don’t

Don't hide key record info behind extra clicks
Don't use decorative or playful visuals in core work screens
Don't let colour accents overwhelm the mostly neutral palette

For AltLeads: A calling CRM should directly borrow the stage progress bar and side contact/notes panels since they map closely onto deal and call tracking.

Copy the tokens

Paste into any project to try this look.

/* Salesforce Lightning · values measured from https://www.lightningdesignsystem.com/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --text: #2E2E2E;
  --muted: #5C5C5C;
  --line: #E5E5E5;
  --accent: #C51D54;
  --on-accent: #FFFFFF;
  --radius-button: 3px;
  --radius-card: 16px;
  --radius-small: 2px;
  --button-height: 40px;
  --font-heading: "AvantGardeForSalesforce", "Poppins", system-ui, sans-serif;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px;
}