What is Salesforce's primary brand color?

Salesforce's brand voltage is deep navy #032d60, wired into the page CSS as --sds-g-color-brand-inverse-2, --pbc-g-text-display-color, --pbc-g-text-link-color-active, and 34 other CSS custom properties. Across the captured page it appears 168 times — 90 as text, 78 as border, 0 as background fill. The sky-blue #0176d3 carries the primary CTA pill and acts as the button-border / link-rest colour. A deeper electric-blue #0b5cab handles link-hover and active states. The captured page therefore runs three navy/blue tiers — deep ink-navy for type and borders, sky-blue for CTAs and links, electric-blue for interaction states.

What typeface does Salesforce use, and what should I use as a substitute?

Salesforce runs two families: ITC Avant Garde for every display, h1, h2, h3 tier (sizes 20-70px, all at weight 400), and Salesforce Sans for every body, button, and label tier (sizes 12-18px, weights 400-700). The hero h1 'Get started with the #1 Agentic CRM' sits at 70px in weight 400 in deep navy #032d60. The display weight is always 400 — no 500/600/700 display variant. Body and label switch to Salesforce Sans at weight 700 for the button label, 400 for paragraph copy. The closest open-source substitute for ITC Avant Garde is Inter at 95% line-height or Geist at the same weights; for Salesforce Sans use Inter or IBM Plex Sans. Keep the 70px / 400 hero weight when substituting — bumping to 600 breaks the airy display tone.

Why does Salesforce have so many CSS variable namespaces?

The marketing site exposes 1334 CSS custom properties on :root, organized into five namespaces: `--sds-*` (the open-source Salesforce Design System, formerly Lightning), `--c360-*` (Customer 360), `--wes-*` (Web Experience System), `--pbc-*` (Personalized Brand Components), and `--hgf-*` (the Heroku/Genie/Foundation token tier). Most hex values are aliased into all five namespaces — the deep navy #032d60 appears in 37 variables across them. This is a documentation move rather than a duplication: a Lightning consumer reads `--sds-g-color-brand-inverse-2` and a Customer 360 consumer reads `--c360-g-color-brand-inverse-2`, both resolving to the same hex. Pick one namespace per project and ignore the rest.

What corner-radius scale does Salesforce use?

The scale is small-step plus pill, with 16px as the dominant content radius. 16px appears 43 times on cards and content tiles, 4px 33 times on buttons and inputs (the primary CTA pill is 4px-cornered, not fully rounded), 22px 12 times on rounded chips, 50% 12 times for circular avatars, 32px 10 times on larger cards, 12px 10 times on smaller chips. A full pill 9999px appears 4 times on the architectural diagram's node chips. The hero CTA at 4px is square-cornered enough to read as enterprise rather than consumer — a deliberate restraint against the 12-24px pill rounding HubSpot and Pipedrive use. The 16px card tier is the system's dominant softness moment.

Can I use this DESIGN.md to build my own React CRM marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Salesforce's specific moves: deep-navy hero block in #032d60, 70px / 400 ITC-Avant-Garde-equivalent display, sky-blue 4px-corner CTA pill, two-family display-versus-body split, 16px-rounded white dashboard cards, and architectural diagram with coloured node chips. The token references resolve without invention. The one move worth borrowing only if you have a custom display family is the airy 70px / 400 hero — at free-substitute weights the same h1 can read as anemic. The two-family typographic split is the most copyable signature.

Salesforce Design System

Salesforce's marketing system as a DESIGN.md file.

About Salesforce DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source salesforce.com

Marketing & CRM
Productivity & SaaS

Salesforce's marketing site does something almost no other enterprise-CRM brand does: it pairs a custom display sans (ITC Avant Garde) at 70px in weight 400 with a workhorse body sans (Salesforce Sans) at 14-16px in weight 700. The hero h1 is "Get started with the #1 Agentic CRM." set in a deep navy ink #032d60 that doubles as the brand voltage — the same hex carries link colour, accordion title, tab text-active, button border, and 33 other roles across the captured CSS. The primary CTA pill sits in a saturated sky-blue #0176d3 with a tight 4px square-cornered radius — the opposite of the 12-24px soft-pill rounding HubSpot and Pipedrive lean on. Below the fold the page inverts to white, runs a 6-tile dashboard grid in 16px-rounded cards, and reintroduces the navy as a section banner.

The DESIGN.md file packages the system into a machine-readable spec for React tools. Inside: 18 colour tokens chosen from the 197 clustered colors the page renders (out of 1334 CSS custom properties Salesforce ships on `:root`), organized into a brand-voltage tier of two blues plus the deep navy, a structural tier of black / white / grayscale, and a small set of category accents (purple #7526e3, hot-orange #d83a00, teal #03b4a7) that appear in the diagram section below the fold. 11 typography tokens span ITC Avant Garde in five display sizes plus Salesforce Sans in heading, body, label, and button tiers. 19 components cover the deep-navy hero block, the sky-blue 4px-corner pill CTA, the white 16px-rounded dashboard card, the architectural diagram with its coloured node chips, and the top-nav with its 1-pixel hairline divider.

Feed this file to Claude or Cursor and it will reproduce Salesforce's specific moves: deep-navy hero block instead of a gradient, voltage-equals-ink discipline, 70px / 400 display rather than 56px / 700, 4px corner CTAs instead of pill rounding, and the two-family display-versus-body split. The token references resolve cleanly — `{colors.navy-deep}` for the voltage, `{colors.brand-blue}` for the CTA, `{typography.display-xl}` for the hero. The one move worth borrowing only if you have a custom display family: the 70px / 400 hero. Salesforce gets away with the airy proportions because ITC Avant Garde's geometric counters carry visual weight at low weights; substituting a free Inter or Geist at 400 weight makes the same h1 read as anemic instead of considered.

What makes it distinct

70px display at weight 400ITC Avant Garde sets the hero h1 at almost airy proportions, the opposite of the heavy 600-700 most enterprise CRMs use
Voltage equals inkdeep navy #032d60 is both the brand colour and the dominant text colour (frequency 168), wired into 37 CSS variables across button, link, accordion and tab tokens
Sky-blue 4px CTA pillprimary actions render in #0176d3 with a 4px square-cornered radius, against systems that overwhelmingly use 8-12px pill rounding
Two-family typographic splitITC Avant Garde for every display tier, Salesforce Sans for every body, button, and label tier; no shared workhorse
1334 CSS variablesa four-namespace token surface (`--sds-*`, `--c360-*`, `--wes-*`, `--pbc-*`, `--hgf-*`) that catalogues every brand variant Salesforce ships

Live at salesforce.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

salesforce.com

Explore Salesforce

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Salesforce design system FAQ

Common questions about Salesforce's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Salesforce — official site

Salesforce's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.