Salesforce Design System

Overview

Salesforce's marketing site does something almost no other enterprise-CRM brand does. Voltage as ink. The deep navy {colors.navy-deep} (#032d60) is both the brand voltage AND the dominant text colour — 168 occurrences across the captured page, 90 of them as color, 78 as borderColor, 0 as backgroundColor. Where HubSpot keeps its orange purely as accent and Pipedrive saturates its green CTAs against a white canvas, Salesforce treats one hex as the load-bearing element of every typographic, link, accordion, and tab system — then never fills with it. The fill role goes to the brighter sky-blue {colors.primary} (#0176d3) on a 4px-cornered pill CTA.

The system's typographic move is the opposite of restraint at scale. The hero h1 "Get started with the #1 Agentic CRM." sits at 70px in ITC Avant Garde at weight 400 — almost airy. There is no 500/600/700 display variant; every ITC Avant Garde sample on the page runs at weight 400 across all sizes from 20px to 70px. The visual weight comes from the typeface's geometric counters, not from a bold cut. Body and CTA labels then switch families entirely to Salesforce Sans at weight 700, a 14-16px workhorse that does the labelling load. The split is binary: display-as-ITC-Avant-Garde-400, body-as-Salesforce-Sans-700.

The chrome layers reinforce the move. The hero is a deep {colors.navy-deep} block — section padding at 64x40, the heading rendered as {component.hero-heading-inverse} in {colors.canvas} rather than navy ink. Below the fold the page inverts to white, runs a 16px-rounded white-card grid, and reintroduces the navy as a {component.section-divider} banner. There is no atmospheric gradient between sections, no glow under the CTA — just a hard switch between navy-on-white and white-on-navy bands.

Key Characteristics:

• Deep navy {colors.navy-deep} (#032d60) carries both the brand voltage AND the dominant text colour — 168 occurrences across the page, wired into 37 CSS variables.
• Sky-blue {colors.primary} (#0176d3) is the only fill colour for the CTA pill. 4px corner radius, not the 12-24px pills HubSpot or Pipedrive use.
• Two-family typographic split: ITC Avant Garde at weight 400 across every display tier (20-70px), Salesforce Sans at weights 400-700 across every body, label, and button tier.
• Voltage-equals-ink: the navy is wired into --pbc-g-text-display-color, --pbc-g-text-link-color-active, --sds-c-button-text-text-color, --pbc-accordion-icon-color, and 33 other roles.
• 1334 CSS variables on :root across --sds-*, --c360-*, --wes-*, --pbc-*, --hgf-* namespaces. The same hex is typically aliased across all five.
• 16px-rounded white dashboard cards below the fold carry the "Agentic Enterprise" feature grid; each card hosts an illustrated icon, a label, and a small body paragraph.
• Architectural diagram section reintroduces the navy as a banner background; node chips inside it use pill-rounded {component.diagram-node} in light electric-blue {colors.surface-electric} with navy borders.

Colors

Brand

• Sky Blue ({colors.primary} — #0176d3): frequency 30. Used as text (8), bg (8), border (14). Wired as --sds-c-button-primary-color-background, --sds-c-button-secondary-color-border, --pbc-tab-text-color-active and 29 other roles. The primary CTA pill fill and the resting state for link colour.
• Electric Blue Hover ({colors.primary-hover} — #0b5cab): frequency 34. Used as text (17), border (17). Wired as --sds-g-link-color, --pbc-g-text-link-color. The link-hover and CTA-active state.
• Deep Blue ({colors.primary-deep} — #014486): wired as --sds-g-link-color-hover and --c360-g-color-palette-blue-30. The link-focus state.
• Navy Deep ({colors.navy-deep} — #032d60): frequency 168. Used as text (90), border (78). The voltage-equals-ink hex. Wired into 37 CSS variables across button border, accordion title, tab text, link active, and display text.
• Navy Darker ({colors.navy-darker} — #001639): wired as --sds-g-color-brand-base-contrast-4. The deepest navy in the system, reserved for the brand-inverse-1 token.
• Brand Cyan ({colors.brand-cyan} — #1b96ff): wired as --pbc-focus-state-color and --c360-g-color-brand-base-contrast-1. The focus-ring colour and a brighter brand accent for the inverse contrast tier.

Structural

• Ink ({colors.ink} — #080707): frequency 844. Used as text (434), border (410). The dominant text-and-border tone across the structural chrome. Wired as --hgf-g-gray-10.
• Ink Near-Black ({colors.ink-near-black} — #171717): frequency 115. Used as text (22), border (43), shadow (50). The default body-paragraph colour; also the shadow tint.
• Ink Muted ({colors.ink-muted} — #444444): wired as --pbc-g-text-legal-color and --pbc-g-text-brandlabel-color. The footnote / legal disclaimer tone.
• Ink Tertiary ({colors.ink-tertiary} — #939393): wired as --pbc-g-gray-60 and --sds-g-color-border-base-2. The hairline-on-white border tone.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 234. Used as text (96 on dark surfaces), bg (54), border (80). Wired as --sds-g-color-neutral-base-1, --c360-g-color-neutral-base-1. The dominant fill for the below-the-fold content bands.
• Surface-1 ({colors.surface-1} — #eaf5fe): frequency 14 as bg. Wired as --sds-c-button-secondary-color-background-active and --hgf-g-blue-natural-95. The pale-blue tint behind the dashboard tiles below the fold.
• Surface Electric ({colors.surface-electric} — #e0e5f8): wired as --sds-g-color-palette-blue-90 and --sds-g-color-brand-base-3. The pale-blue fill on the diagram node chips.
• Divider ({colors.divider} — #c9c9c9): wired as --pbc-g-interactive-text-color-disabled and --sds-g-color-neutral-base-4. The disabled-state / divider line.

Category Accents (diagram only)

• Purple ({colors.accent-purple} — #7526e3): frequency 8 (gradient only). Wired as --c360-g-color-palette-purple-40, --pbc-g-night-gradient-purple, --hgf-g-brand-example1-color. The Marketing Cloud / AI brand-example colour, surfaced only as a gradient on the night-mode hero variant.
• Purple Light ({colors.accent-purple-light} — #c29ef1): frequency 8 (gradient only). Wired as --hgf-g-violet-natural-70. The lighter purple endpoint of the night gradient.
• Hot Orange ({colors.accent-orange} — #d83a00): wired as --sds-g-color-palette-hot-orange-50 and --pbc-g-hot-orange-50. Reserved for the API Hub / Heroku-tier brand-example colour.
• Teal ({colors.accent-teal} — #03b4a7): wired as --hgf-g-teal-vibrant-65. The Data Cloud / Tableau-tier accent.

Shadow

• Shadow ({colors.shadow} — #000000): frequency 12, all as boxShadow. Wired as --sds-g-color-shadow. Pure black used at low opacity for the soft lift on dashboard cards.

Typography

Font Family

The system runs two families in strict separation. ITC Avant Garde is the display family, declared as "ITC Avant Garde", sans-serif with the long system-ui fallback stack. It carries every h1, h2, h3 from 20px to 70px, always at weight 400. Salesforce Sans is the body family, declared as "Salesforce Sans", Arial, sans-serif (sometimes with the longer system fallback). It carries every paragraph, button label, caption, and nav link at weights 400, 500, 600, 700.

Hierarchy

Principles

The display tier is weight 400 everywhere. ITC Avant Garde's geometric counters carry visual weight at the lighter cut — the 70px / 400 hero reads as a deliberate restraint, not as a missed bold. The body tier inverts: Salesforce Sans runs heavy (weight 700 on every button, eyebrow label, and CTA), with weight 400 reserved for paragraph copy. The split lets each family carry the load it is shaped for — the geometric display for typographic personality, the workhorse body for legibility-at-density.

Note on Font Substitutes

ITC Avant Garde is licensed. Inter at the same weights is a passable open-source substitute but reads thinner at the 70px display size — the geometric counters are not as wide. Geist (Vercel's open sans) is closer in proportion at the larger display sizes. For Salesforce Sans, Inter at weight 700 is the cleanest swap; IBM Plex Sans works if you need a more workhorse alternative with slightly looser counters. Keep the display tier at weight 400 when substituting — bumping to 500 or 600 to compensate for the substitute family's lighter cut breaks the airy display tone.

Layout

Spacing System

• Base unit: 4px (with 8px as the dominant module).
• Tokens: {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 32px · {spacing.2xl} 40px · {spacing.3xl} 48px · {spacing.4xl} 64px.
• Section padding (vertical): 64px between bands, increasing to 96px between major editorial sections.
• Hero block padding: 64x40 (vertical x horizontal) on the navy banner sections.
• Card internal padding: 24-32px on dashboard tiles, 40px on the larger feature cards.
• Button padding: 20px vertical / 32px horizontal on the 52px-tall primary CTA — the verticals are unusually generous for an enterprise CTA, contributing to the comfortable click target.

Grid & Container

• Max content width: ~1280px with 40px gutters at desktop.
• Hero: full-bleed navy {colors.navy-deep} block, content stack centred. Heading + sub-paragraph + 2-button stack (primary sky-blue pill + secondary outline pill).
• Dashboard feature grid: 4-column grid of white {component.card-feature} tiles ("Best, AgentForce, Customer 360, Data 360"), each carrying an illustrated icon, a 24-32px h3, a small body paragraph.
• Customer logo wall: 3-column grid of customer-portrait cards ("See why companies trust us to help them grow"), each a near-square photograph with a label band beneath.
• Architectural diagram: full-bleed white band hosting the "Salesforce Agentic Enterprise Architecture" diagram — a navy-bordered grid of pill-rounded node chips in pale electric-blue {colors.surface-electric}.
• Section dividers: navy {component.section-divider} bands break the white editorial flow ("Welcome to the Agentic Enterprise.").

Rhythm

The page alternates between deep navy banner bands (the hero, the agentic-enterprise section divider, the architecture banner) and white editorial bands (the dashboard tile grid, the customer-logo wall, the feature comparison). There is no atmospheric gradient between the two — every band terminates cleanly at the next. The visual rhythm is dictated by the on/off switch between navy-on-white and white-on-navy.

Elevation

The system uses soft layered shadow on cards rather than the flat-tonal-lift approach.

• Shadow tier: {colors.shadow} (#000000) is used 12 times as boxShadow, wired as --sds-g-color-shadow. Cards lift off the canvas with a 4-8px blur at low alpha. The lift is intentional but never dramatic — the navy hero block carries no shadow, only the white content cards below the fold do.
• Tonal lift: {colors.surface-1} (#eaf5fe) tiles sit on {colors.canvas} (#ffffff) for the dashboard tile band — a pale-blue lift used in conjunction with the soft shadow, not instead of it.
• Hairline outlines: {colors.divider} (#c9c9c9) at 1px is the resting border tone on the top-nav divider and the disabled-button outline. White-card outlines on the dashboard grid use the same hairline at full opacity.

Shapes

The radius scale is small-step plus pill, with 16px as the dominant content radius:

• {rounded.none} 0px — section dividers and editorial blocks.
• {rounded.sm} 4px — frequency 33. The primary CTA pill is 4px-cornered, NOT fully rounded. Inputs and small chips share this tier.
• {rounded.md} 12px — frequency 10. Smaller chips and dashboard tile sub-cards.
• {rounded.lg} 16px — frequency 43. The dominant content radius. Dashboard tiles, feature cards.
• {rounded.xl} 22px — frequency 12. Slightly-rounded chips on the architecture diagram.
• {rounded.2xl} 32px — frequency 10. Larger feature cards.
• {rounded.full} 9999px — frequency 4. Diagram node chips, fully-rounded chips for pill labels.

The deliberate move is the 4px-cornered CTA. Most enterprise SaaS competitors run 8-12px pill buttons or fully-rounded chips; Salesforce's 4px corners read as square-cornered restraint — enterprise rather than consumer. The 16px tier carries the softness for content surfaces; the 4px tier carries the rigidity for actions.

Components

button-primary — The sky-blue 4px-cornered CTA pill. {colors.primary} (#0176d3) fill and border, white text in {typography.button-md} (16px / 700), {rounded.sm} (4px) radius, 20x32 padding, 52px height. "Start for free" is the canonical instance, sitting on the navy hero block.

button-primary-hover — Background and border flip from {colors.primary} to {colors.primary-hover} (#0b5cab) — the electric-blue press state.

button-secondary — White fill with the sky-blue {colors.primary} text and border. Same {rounded.sm} 4px radius, 20x32 padding, 52px height. Used as the second CTA on the hero ("Watch demo" or similar). The outline-style match to the primary in shape and height.

button-text — Transparent fill, {colors.navy-deep} text, {typography.label-md} (14px / 700), 12x32 padding. Used for tertiary CTAs and "Learn more" links.

top-nav — White canvas, 64px height, 0x12 padding, {colors.divider} 1px bottom border. Houses the Salesforce wordmark (left), the product-nav cluster (centre, each link as {component.nav-link}), and the right-aligned region/login cluster. The 1px hairline below the nav is the system's strongest divider.

nav-link — Transparent background, {colors.ink} text in {typography.label-md} (14px / 700), 12px padding. Heavy weight on the nav links — unusual for marketing nav, but matches the body family's 700 default on labels.

hero-block — {colors.navy-deep} (#032d60) fill, white text, {typography.display-xl} heading, 64x40 padding. The full-bleed top-of-page block carrying the "Get started with the #1 Agentic CRM." h1 and the sky-blue primary CTA.

hero-heading — Transparent, {colors.navy-deep} text, {typography.display-xl} (70px / 400). Used when the heading appears on a white canvas section.

hero-heading-inverse — Transparent, white text, {typography.display-lg} (60px / 400). Used inside {component.hero-block} so the navy ink shows as white-on-navy.

section-heading — Transparent, {colors.ink-near-black} text, {typography.display-md} (48px / 400). The h2 between editorial bands.

body-paragraph — {colors.ink-near-black} text at {typography.body-lg} (18px / 400). The hero sub-paragraph and section leads.

body-paragraph-inverse — White text at {typography.body-lg} for inverse-context paragraphs inside {component.hero-block} or {component.section-divider}.

card — White canvas, {rounded.lg} 16px radius, 32px padding, soft shadow from {colors.shadow} at low alpha. The default content card on the white editorial bands.

card-feature — White canvas, {rounded.2xl} 32px radius, 40px padding. The four large feature cards ("Best, AgentForce, Customer 360, Data 360") below the fold, each hosting an illustrated icon, h3, and small body paragraph.

dashboard-tile — {colors.surface-1} (#eaf5fe) pale-blue fill, {colors.ink} text, {rounded.md} 12px radius, 24px padding. The smaller statistic tiles in the architecture preview.

diagram-node — {colors.surface-electric} (#e0e5f8) fill, {colors.navy-deep} (#032d60) text and border, {rounded.full} 9999px radius, 6x12 padding. The pill-rounded node chips on the "Salesforce Agentic Enterprise Architecture" diagram.

link — Transparent, {colors.primary-deep} (#014486) text. The default link colour across body paragraphs. Hover steps to {colors.primary-hover}, focus to the deep {colors.primary-deep}.

section-divider — Navy {colors.navy-deep} fill, white text, {typography.display-md} heading, 64x40 padding. The full-bleed "Welcome to the Agentic Enterprise." banner that breaks the white editorial flow.

footer — White canvas, {colors.ink-muted} text, {typography.body-sm} (14px / 400), 48x40 padding. Multi-column link grid plus the legal disclaimer band beneath.

Do's and Don'ts

Do treat the deep navy {colors.navy-deep} (#032d60) as both ink and voltage. It carries display text, link active state, accordion title, tab text, and button border — wiring a separate "text-ink" token to a different grey breaks the voltage-equals-ink discipline that makes the system coherent.

Do keep the primary CTA pill at the 4px corner radius. The square-cornered restraint distinguishes Salesforce from the pill-buttoned HubSpot / Pipedrive / Zoho marketing surfaces; a 12-24px pill on the same blue fill would read as a different category of CRM.

Do render display text at weight 400 across every ITC Avant Garde size. The hero at 70px / 400 is the system's signature airy proportion; ITC Avant Garde's geometric counters carry weight at the lighter cut.

Do keep the two-family split intact. ITC Avant Garde for display tier, Salesforce Sans for body / button / label tier — never a Salesforce Sans h2 or an ITC Avant Garde button label.

Don't use the navy {colors.navy-deep} as a backgroundColor on inline chips or cards. The captured page has 90 text uses and 78 border uses of this hex, and zero background uses outside the full-bleed hero block. A small navy chip pulls the voltage out of its load-bearing typographic role.

Don't swap the 4px corner CTA for a fully-rounded pill. The system has a {rounded.full} 9999px tier, but it is reserved for the architectural diagram node chips. The CTA at 4px is part of the system's enterprise-not-consumer signature; rounding it would erase that signal.

Don't use ITC Avant Garde for body text. At sizes below 20px the geometric counters become illegible at typical reading distance; the system uses Salesforce Sans below 20px for a reason, and the substitution is not transparent.

Don't introduce a 700 display weight to "make the hero pop." The captured page has zero display samples above weight 400; bumping any ITC Avant Garde sample to 500/600/700 violates the display tier's airy discipline and makes the system read as generic enterprise.

Known Gaps

• Hover and focus states: the captured page exposes the button-hover and link-hover blues but not the full state matrix (focus rings, disabled tints, error states) for every component.
• Input components: the captured marketing surface does not render a <input> field on the hero or below the fold. Form styling lives inside the product app (Lightning Experience) and is documented in the Salesforce Lightning Design System rather than here.
• Dark mode: the captured surface is light-only. A night-mode hero variant exists with the purple gradient ({colors.accent-purple} / {colors.accent-purple-light}), but the broader dark-mode token surface is not represented.
• Motion: the hero carries auto-playing customer-portrait clips and a slow architectural-diagram animation. Easing curves and durations are not captured.
• Product surfaces: this DESIGN.md captures the salesforce.com marketing site only. Lightning Experience, Slack inside Salesforce, Tableau, and MuleSoft each carry their own design systems with different typographic and chromatic moves.
• Sub-brand colours: the category accents {colors.accent-purple} (#7526e3), {colors.accent-orange} (#d83a00), {colors.accent-teal} (#03b4a7) are wired into --hgf-* brand-example variables for Marketing Cloud, API Hub, and Data Cloud respectively; their actual sub-brand pages may render with these as load-bearing voltages rather than the structural roles here.
• Multi-namespace token system: the page exposes 1334 CSS variables across --sds-*, --c360-*, --wes-*, --pbc-*, --hgf-* namespaces; this file picks the most stable subset rather than mirroring the full alias surface.