---
version: alpha
name: "Salesforce"
website: "https://www.salesforce.com"
description: >-
  An enterprise agentic-CRM brand whose marketing site does something almost no other CRM does — runs a custom display serif-flavored sans (ITC Avant Garde) at 70px in weight 400 for the hero h1, in a deep navy ink #032d60 that doubles as the brand voltage. Body and CTA labels switch to Salesforce Sans, a heavier 700-weight workhorse. The primary CTA is a saturated sky-blue pill at #0176d3 with a 4px corner radius, sitting on the deep-navy hero block. Below the fold the page inverts to white, runs a 6-tile dashboard grid with rounded 16px cards, and reintroduces the navy as a section divider. The system exposes 1334 CSS custom properties across `--sds-*`, `--c360-*`, `--wes-*`, `--pbc-*`, `--hgf-*` namespaces — a token surface broader than any other brand in the directory.

seo:
  title: "Salesforce Design System for React — navy #032d60, ITC Avant Garde, 19 components"
  metaDescription: "Salesforce's marketing system as a DESIGN.md file. Deep navy #032d60 as voltage and ink, ITC Avant Garde at 70px / 400, Salesforce Sans body, 1334 CSS variables. For React, Next.js, and AI tools."
  highlights:
    - "70px display at weight 400 — ITC Avant Garde sets the hero h1 at almost airy proportions, the opposite of the heavy 600-700 most enterprise CRMs use"
    - "Voltage equals ink — deep 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 pill — primary actions render in #0176d3 with a 4px square-cornered radius, against systems that overwhelmingly use 8-12px pill rounding"
    - "Two-family typographic split — ITC Avant Garde for every display tier, Salesforce Sans for every body, button, and label tier; no shared workhorse"
    - "1334 CSS variables — a four-namespace token surface (`--sds-*`, `--c360-*`, `--wes-*`, `--pbc-*`, `--hgf-*`) that catalogues every brand variant Salesforce ships"
  tags:
    - "Marketing & CRM"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    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.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.salesforce.com"
      title: "Salesforce — official site"
      description: "Salesforce's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Salesforce's primary brand color?"
      answer: "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."
    - id: "typography"
      title: "What typeface does Salesforce use, and what should I use as a substitute?"
      answer: "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."
    - id: "namespace-tokens"
      title: "Why does Salesforce have so many CSS variable namespaces?"
      answer: "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."
    - id: "radius-philosophy"
      title: "What corner-radius scale does Salesforce use?"
      answer: "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."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React CRM marketing site?"
      answer: "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."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#0176d3"
  primary-hover: "#0b5cab"
  primary-deep: "#014486"
  navy-deep: "#032d60"
  navy-darker: "#001639"
  brand-cyan: "#1b96ff"
  ink: "#080707"
  ink-near-black: "#171717"
  ink-muted: "#444444"
  ink-tertiary: "#939393"
  canvas: "#ffffff"
  surface-1: "#eaf5fe"
  surface-electric: "#e0e5f8"
  divider: "#c9c9c9"
  accent-purple: "#7526e3"
  accent-purple-light: "#c29ef1"
  accent-orange: "#d83a00"
  accent-teal: "#03b4a7"
  shadow: "#000000"

typography:
  display-xl:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 70px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: 0
  display-md:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: "-0.48px"
  display-sm:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: "-0.32px"
  heading-lg:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: "-0.128px"
  heading-md:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: "-0.096px"
  heading-sm:
    fontFamily: "\"ITC Avant Garde\", sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: "-0.08px"
  body-lg:
    fontFamily: "\"Salesforce Sans\", Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: "-0.0216px"
  body-md:
    fontFamily: "\"Salesforce Sans\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: "-0.0192px"
  body-sm:
    fontFamily: "\"Salesforce Sans\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0
  label-md:
    fontFamily: "\"Salesforce Sans\", Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 20px
    letterSpacing: "-0.028px"
  button-md:
    fontFamily: "\"Salesforce Sans\", Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
    letterSpacing: "0.02px"
  caption:
    fontFamily: "\"Salesforce Sans\", Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 16px
    letterSpacing: 0

rounded:
  none: "0px"
  sm: "4px"
  md: "12px"
  lg: "16px"
  xl: "22px"
  2xl: "32px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  base: "16px"
  lg: "20px"
  xl: "32px"
  2xl: "40px"
  3xl: "48px"
  4xl: "64px"

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "20px 32px"
    height: "52px"
    borderColor: "{colors.primary}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "20px 32px"
    height: "52px"
    borderColor: "{colors.primary-hover}"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.sm}"
    padding: "20px 32px"
    height: "52px"
    borderColor: "{colors.primary}"
  button-text:
    backgroundColor: "transparent"
    textColor: "{colors.navy-deep}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: "12px 32px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    height: "64px"
    padding: "0px 12px"
    borderColor: "{colors.divider}"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-md}"
    padding: "12px"
  hero-block:
    backgroundColor: "{colors.navy-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-xl}"
    padding: "64px 40px"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.navy-deep}"
    typography: "{typography.display-xl}"
    padding: "0"
  hero-heading-inverse:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    padding: "0"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink-near-black}"
    typography: "{typography.display-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink-near-black}"
    typography: "{typography.body-lg}"
  body-paragraph-inverse:
    backgroundColor: "transparent"
    textColor: "{colors.canvas}"
    typography: "{typography.body-lg}"
  card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "32px"
    borderColor: "{colors.divider}"
  card-feature:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.2xl}"
    padding: "40px"
  dashboard-tile:
    backgroundColor: "{colors.surface-1}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "24px"
  diagram-node:
    backgroundColor: "{colors.surface-electric}"
    textColor: "{colors.navy-deep}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "6px 12px"
    borderColor: "{colors.navy-deep}"
  link:
    backgroundColor: "transparent"
    textColor: "{colors.primary-deep}"
    typography: "{typography.body-md}"
  section-divider:
    backgroundColor: "{colors.navy-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-md}"
    padding: "64px 40px"
  footer:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
    padding: "48px 40px"
---

## 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

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | ITC Avant Garde | 70px | 400 | 70px | Hero h1 ("Get started with the #1 Agentic CRM.") |
| `{typography.display-lg}` | ITC Avant Garde | 60px | 400 | 60px | Second hero h2 ("Welcome to the Agentic Enterprise.") on navy banner |
| `{typography.display-md}` | ITC Avant Garde | 48px | 400 | 56px | Section h2 ("Salesforce is the platform for the Agentic Enterprise.") |
| `{typography.display-sm}` | ITC Avant Garde | 40px | 400 | 48px | Sub-section h2 |
| `{typography.heading-lg}` | ITC Avant Garde | 32px | 400 | 40px | Card-feature heading |
| `{typography.heading-md}` | ITC Avant Garde | 24px | 400 | 32px | h3 |
| `{typography.heading-sm}` | ITC Avant Garde | 20px | 400 | 28px | h4 |
| `{typography.body-lg}` | Salesforce Sans | 18px | 400 | 28px | Hero sub-paragraph |
| `{typography.body-md}` | Salesforce Sans | 16px | 400 | 24px | Default running text |
| `{typography.body-sm}` | Salesforce Sans | 14px | 400 | 20px | Caption rows |
| `{typography.label-md}` | Salesforce Sans | 14px | 700 | 20px | Nav-link label, eyebrow text |
| `{typography.button-md}` | Salesforce Sans | 16px | 700 | 24px | Primary CTA pill label |
| `{typography.caption}` | Salesforce Sans | 12px | 700 | 16px | Small uppercase chip / metadata |

### 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.