W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Salesforce
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.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/salesforce/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/salesforce/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Salesforce
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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_PRIMARYalias 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-errorandcolor-background-destructivetokens 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_PRIMARYalias 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: [email protected] from the encyclopedia.
Components — same template, themed by Salesforce
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Salesforce
A clear hierarchy in Salesforce's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Salesforce
[email protected]font · heading
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Inter
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ blue-50 #0176D3 accent-hover
→ blue-40 #0B5CAB background-dark
→ warm-gray-13 #080707 background-light
→ warm-gray-1 #FFFFFF border-light
→ warm-gray-5 #DDDBDA error
→ red-50 #EA001E identity
→ warm-gray-1 #FFFFFF mark
→ blue-50 #0176D3 on-identity
→ warm-gray-13 #080707 primary
→ blue-50 #0176D3 primary-hover
→ blue-40 #0B5CAB success
→ green-50 #2E844A surface-dark
→ warm-gray-12 #2B2826 surface-light
→ warm-gray-2 #FAFAF9 text-primary-dark
→ warm-gray-2 #FAFAF9 text-primary-light
→ warm-gray-13 #080707 text-secondary-light
→ warm-gray-9 #706E6B text-tertiary-light
→ warm-gray-10 #514F4D warning
→ yellow-50 #A86403 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from salesforce)
Light mode (15 roles)
accent
→ blue-50 accent-hover
→ blue-40 background
→ warm-gray-1 border
→ warm-gray-5 error
→ red-50 primary
→ blue-50 primary-hover
→ blue-40 success
→ green-50 surface
→ warm-gray-2 surface-elevated
→ warm-gray-1 text-primary
→ warm-gray-13 text-secondary
→ warm-gray-9 text-tertiary
→ warm-gray-10 warning
→ yellow-50 warning-hover
→ yellow-40 Dark mode (15 roles)
accent
→ blue-60 accent-hover
→ blue-50 background
→ warm-gray-13 border
→ warm-gray-11 error
→ red-60 primary
→ blue-60 primary-hover
→ blue-50 success
→ green-60 surface
→ warm-gray-12 surface-elevated
→ warm-gray-11 text-primary
→ warm-gray-2 text-secondary
→ warm-gray-6 text-tertiary
→ warm-gray-7 warning
→ yellow-60 warning-hover
→ yellow-50 Rules (10 typed constraints)
error · 8 rules
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 rule
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 rule
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.