# Salesforce

> `salesforce@1.0.0`

Salesforce is the enterprise CRM company behind the Sales Cloud, Service Cloud, Marketing Cloud, Data Cloud, MuleSoft, Tableau, and Slack product families. Salesforce Lightning Design System (SLDS) is the open-source design system that powers Lightning Experience and the Aloha admin surfaces. The signature brand color is Salesforce Blue (Palette Blue 50, #0176D3) — the canonical SLDS `BRAND_PRIMARY` interactive color across light themes. Warm Gray is the documented default neutral scale; semantic tokens map to Green 50 (success), Red 50 (error), Yellow 50 (warning). The proprietary typeface is Salesforce Sans (and SF Sans Display for marketing); it is not publicly licensed, so this atom references Inter as the open rendering substitute.


**Tags:** `salesforce`, `slds`, `lightning`, `design-system`, `crm`, `enterprise`

## Atoms

### Palette

**Salesforce** · `salesforce@1.0.0` · BSD-3-Clause

> Salesforce's design-token palette, sourced from the public Salesforce Lightning Design System (SLDS) repository (`salesforce-ux/design-system`). Twelve chromatic families (Blue, Cloud Blue, Green, Hot Orange, Indigo, Orange, Pink, Purple, Red, Teal, Violet, Yellow) plus warm-gray and cool-gray neutrals. Each family runs 10 → 95 in non-uniform stops; the 10/15/20-band is the darkest, the 90/95-band is the lightest. The documented Salesforce brand-primary color resolves to Palette Blue 50 (#0176D3) — the canonical SLDS interactive blue that ships in the Aloha and Lightning themes. Warm Gray is Salesforce's default neutral scale; Cool Gray is the alternate. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `warm-gray-1` | Warm Gray 1 | `#FFFFFF` |
| `warm-gray-2` | Warm Gray 2 | `#FAFAF9` |
| `warm-gray-3` | Warm Gray 3 | `#F3F2F2` |
| `warm-gray-4` | Warm Gray 4 | `#ECEBEA` |
| `warm-gray-5` | Warm Gray 5 | `#DDDBDA` |
| `warm-gray-6` | Warm Gray 6 | `#C9C7C5` |
| `warm-gray-7` | Warm Gray 7 | `#B0ADAB` |
| `warm-gray-8` | Warm Gray 8 | `#969492` |
| `warm-gray-9` | Warm Gray 9 | `#706E6B` |
| `warm-gray-10` | Warm Gray 10 | `#514F4D` |
| `warm-gray-11` | Warm Gray 11 | `#3E3E3C` |
| `warm-gray-12` | Warm Gray 12 | `#2B2826` |
| `warm-gray-13` | Warm Gray 13 | `#080707` |
| `cool-gray-2` | Cool Gray 2 | `#F9F9FA` |
| `cool-gray-9` | Cool Gray 9 | `#6B6D70` |
| `cool-gray-13` | Cool Gray 13 | `#070808` |
| `blue-20` | Blue 20 | `#032D60` |
| `blue-30` | Blue 30 | `#014486` |
| `blue-40` | Blue 40 | `#0B5CAB` |
| `blue-50` | Blue 50 | `#0176D3` |
| `blue-60` | Blue 60 | `#1B96FF` |
| `blue-90` | Blue 90 | `#D8E6FE` |
| `blue-95` | Blue 95 | `#EEF4FF` |
| `green-20` | Green 20 | `#1C3326` |
| `green-50` | Green 50 | `#2E844A` |
| `green-60` | Green 60 | `#3BA755` |
| `green-90` | Green 90 | `#CDEFC4` |
| `red-40` | Red 40 | `#BA0517` |
| `red-50` | Red 50 | `#EA001E` |
| `red-60` | Red 60 | `#FE5C4C` |
| `red-90` | Red 90 | `#FFCDC9` |
| `yellow-40` | Yellow 40 | `#8C4B02` |
| `yellow-50` | Yellow 50 | `#A86403` |
| `yellow-60` | Yellow 60 | `#CA8501` |
| `yellow-90` | Yellow 90 | `#FCEAB3` |
| `orange-50` | Orange 50 | `#A96404` |
| `orange-60` | Orange 60 | `#DD7A01` |
| `orange-70` | Orange 70 | `#FE9339` |
| `cloud-blue-50` | Cloud Blue 50 | `#107CAD` |
| `cloud-blue-70` | Cloud Blue 70 | `#1AB9FF` |
| `teal-50` | Teal 50 | `#0B827C` |
| `teal-60` | Teal 60 | `#06A59A` |
| `pink-50` | Pink 50 | `#E3066A` |
| `pink-60` | Pink 60 | `#FF538A` |
| `indigo-50` | Indigo 50 | `#5867E8` |
| `indigo-60` | Indigo 60 | `#7F8CED` |
| `purple-50` | Purple 50 | `#9050E9` |
| `purple-60` | Purple 60 | `#AD7BEE` |
| `violet-50` | Violet 50 | `#BA01FF` |
| `violet-60` | Violet 60 | `#CB65FF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `warm-gray-1` | `#FFFFFF` |
| `surface` | `warm-gray-2` | `#FAFAF9` |
| `surface-elevated` | `warm-gray-1` | `#FFFFFF` |
| `text-primary` | `warm-gray-13` | `#080707` |
| `text-secondary` | `warm-gray-9` | `#706E6B` |
| `text-tertiary` | `warm-gray-10` | `#514F4D` |
| `primary` | `blue-50` | `#0176D3` |
| `primary-hover` | `blue-40` | `#0B5CAB` |
| `accent` | `blue-50` | `#0176D3` |
| `accent-hover` | `blue-40` | `#0B5CAB` |
| `warning` | `yellow-50` | `#A86403` |
| `warning-hover` | `yellow-40` | `#8C4B02` |
| `error` | `red-50` | `#EA001E` |
| `success` | `green-50` | `#2E844A` |
| `border` | `warm-gray-5` | `#DDDBDA` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `warm-gray-13` | `#080707` |
| `surface` | `warm-gray-12` | `#2B2826` |
| `surface-elevated` | `warm-gray-11` | `#3E3E3C` |
| `text-primary` | `warm-gray-2` | `#FAFAF9` |
| `text-secondary` | `warm-gray-6` | `#C9C7C5` |
| `text-tertiary` | `warm-gray-7` | `#B0ADAB` |
| `primary` | `blue-60` | `#1B96FF` |
| `primary-hover` | `blue-50` | `#0176D3` |
| `accent` | `blue-60` | `#1B96FF` |
| `accent-hover` | `blue-50` | `#0176D3` |
| `warning` | `yellow-60` | `#CA8501` |
| `warning-hover` | `yellow-50` | `#A86403` |
| `error` | `red-60` | `#FE5C4C` |
| `success` | `green-60` | `#3BA755` |
| `border` | `warm-gray-11` | `#3E3E3C` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `warm-gray-1` | `#FFFFFF` |
| `on-identity` | `warm-gray-13` | `#080707` |
| `primary` | `blue-50` | `#0176D3` |
| `primary-hover` | `blue-40` | `#0B5CAB` |
| `accent` | `blue-50` | `#0176D3` |
| `accent-hover` | `blue-40` | `#0B5CAB` |
| `mark` | `blue-50` | `#0176D3` |
| `success` | `green-50` | `#2E844A` |
| `warning` | `yellow-50` | `#A86403` |
| `error` | `red-50` | `#EA001E` |
| `text-primary-light` | `warm-gray-13` | `#080707` |
| `text-primary-dark` | `warm-gray-2` | `#FAFAF9` |
| `background-light` | `warm-gray-1` | `#FFFFFF` |
| `background-dark` | `warm-gray-13` | `#080707` |
| `surface-light` | `warm-gray-2` | `#FAFAF9` |
| `surface-dark` | `warm-gray-12` | `#2B2826` |
| `text-secondary-light` | `warm-gray-9` | `#706E6B` |
| `text-tertiary-light` | `warm-gray-10` | `#514F4D` |
| `border-light` | `warm-gray-5` | `#DDDBDA` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (8)

#### `colorChoice` → `roles.colors.primary`

- **allowed:** blue-50, blue-40, blue-60
- **forbidden:** red-50, green-50, yellow-50, orange-60, pink-50, violet-50

> SLDS's `BRAND_PRIMARY` alias resolves to PALETTE_BLUE_50 (#0176D3); Blue 40 (#0B5CAB) is the documented active/pressed state on light, and Blue 60 (#1B96FF) is the dark-mode counterpart. Other chromatic 50-stops are reserved for semantic (red/yellow/green) and data-viz (pink/violet) roles and must not stand in for the primary brand color. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, outlined, on-busy-photo

> Salesforce's brand-use guidance prohibits stretching, rotating, recoloring, outlining, or applying decorative effects to the Salesforce cloud-mark wordmark or to the marks of cloud products (Sales Cloud, Service Cloud, etc.). 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> SLDS publishes WCAG 2.1 AA as its accessibility floor across Lightning surfaces. Warm Gray 13 (#080707) on Warm Gray 1 (#FFFFFF) clears AA at ~20:1, and Warm Gray 2 (#FAFAF9) on Warm Gray 13 clears AA at ~19:1. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Salesforce's trademark guidance forbids using the Salesforce name, the cloud-mark, or the SLDS brand color treatment in third-party company names, domains, merchandise, or any context that implies affiliation or endorsement. 

#### `contextRestriction` → `roles.colors.error`

- **forbiddenContexts:** confirmation, data-viz-positive
- **allowedContexts:** error-state, destructive-action, validation-failure

> SLDS's `color-text-error` and `color-background-destructive` tokens resolve to Red 50 (#EA001E) on light. Reusing it for confirmation or positive data points inverts the established semantic meaning across Lightning surfaces. 

#### `fontPairing` → `typography.display`

- **requires:** `prose`
- **minSizeRatio:** `1.5`

> SLDS's documented type scale maintains at least a 1.5× ratio between heading and body to preserve the hierarchy Lightning components depend on at dense data-table densities. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. SLDS's published accessibility commitment treats AA as the floor for every Lightning component and the design tokens that back them. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use Salesforce's documented light-fill variant of the cloud-mark wordmark; inverting the blue mark on the fly produces an off-brand cyan that does not match Salesforce's published assets. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 600, 700

> Salesforce Sans ships in Regular (400), Medium (500), Semibold (600), and Bold (700) — the weights SLDS's documented type ramp anchors on. Heavier display cuts are not part of the defined system ramp. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** warm-gray-1, warm-gray-2, warm-gray-13, blue-95
- **doesNotPairWith:** pink-50, violet-50, red-50

> Salesforce Blue is calibrated to read against the Warm Gray canvas (Warm Gray 1 / 2) on light surfaces and Warm Gray 13 on dark. Placing Blue 50 adjacent to pink-50, violet-50, or red-50 at equal weight produces chromatic conflict and breaks the calm, enterprise-confident voice SLDS surfaces depend on. 

## Provenance

- **Source:** <https://www.lightningdesignsystem.com/>
- **License:** `Proprietary — All Rights Reserved (design tokens BSD-3-Clause)`
- **Attribution:** Salesforce Lightning Design System design tokens are licensed BSD-3-Clause (see the matching palette atom). The Salesforce cloud-mark wordmark, the Salesforce Sans typeface family, and the Salesforce, Lightning, SLDS, Sales Cloud, Service Cloud, Marketing Cloud, Data Cloud, MuleSoft, Tableau, and Slack trademarks are property of salesforce.com inc. 
- **Imported:** `2026-05-19`
- **Notes:** SLDS's published `BRAND_PRIMARY` alias resolves to PALETTE_BLUE_50 (#0176D3); the older theme exposes that swatch as `--slds-g-color-brand-base-50`. Salesforce Sans is not publicly licensed; Inter is referenced as the rendering substitute for sans on both heading and body. Slack — acquired by Salesforce in 2021 — has its own separate brand atom (`slack@1`) in this catalogue and is NOT reskinned to SLDS. 

---

*Generated by the brand-atoms converter. Source: `salesforce@1.0.0` from the encyclopedia.*