# Salesforce: brand book and build spec

Salesforce's homepage runs on deep blue and light sky blue, navy two-tone headlines in a round geometric face, white pill buttons, big rounded gradient cards and glossy 3D characters, all joined by one dome-shaped divider.

From unfairly.ai/brand-guidelines/salesforce, checked 2026-10-31. Unofficial study; not affiliated with Salesforce.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** Friendly enterprise. Salesforce wraps a serious platform story in round shapes (the cloud, pills, domes, 30px cards), a round geometric display face and playful 3D characters, so a CRM for the largest companies feels approachable. Based on: Everything on the page is rounded, from logo to buttons to dividers; the SLDS icon principles ask for "professional and playful" with large rounded corners.

## Purpose

Mission: Bring out the best in one another, deliver success to customers, and inspire the industry through actions (paraphrase). (published; https://www.salesforce.com/company/our-story/)

Story: Opened in 1999 to bring CRM to the cloud as software-as-a-service; founded on the 1-1-1 model (1% of equity, technology and people's time); now positions itself as the platform for the Agentic Enterprise (paraphrase). (published)

| Value | What it means in the work | Source |
|---|---|---|
| Trust | The #1 value: ethics and the integrity of the technology. | published: https://www.salesforce.com/company/our-story/ |
| Customer Success | Help customers succeed and become a valued partner. | published: https://www.salesforce.com/company/our-story/ |
| Innovation | Easy-to-use, integrated, scalable products with fast time to value. | published: https://www.salesforce.com/company/our-story/ |
| Equality | A more inclusive, equitable workplace and world. | published: https://www.salesforce.com/company/our-story/ |
| Sustainability | Use the platform to help customers reach environmental goals. | published: https://www.salesforce.com/company/our-story/ |

## Fixed and flexible

Never changes:
- The cloud logo, never altered
- Pill buttons
- Navy text on light, white on blue
- The dome divider

The one thing that varies: How much 3D decoration, which product gradients, and whether a band is sky blue or deep blue.

## Positioning

- **Statement**: The #1 AI CRM: one open, trusted platform bringing people, AI agents, apps and data together (paraphrase). (observed)
- **Category**: AI CRM (customer relationship management) (observed)
- **Audience**: Businesses of every size and industry: SMB, mid-market and enterprise (paraphrase of the G2 copy). (observed)
- **Problem**: AI that is fragmented and ungoverned: plenty of AI options, not enough coherence (paraphrase of the quoted IDC analyst). (observed)
- **Promise**: Agents take the repetitive work inside guardrails you control, so people focus on decisions (paraphrase of the section lead). (observed)
- **Differentiators**: Business logic, workflows and data already in the platform (Customer 360, Data 360) ground every agent.; Trust built in, not bolted on.; Headless and open: works inside any AI, app or channel.; An ecosystem marketplace (AgentExchange) for agents, apps and partners.
- **Alternatives**: Fragmented AI experimentation across point tools (paraphrase of the IDC quote on the homepage).

## Messaging

Boilerplate (observed): Salesforce is the AI CRM that brings people, AI agents, apps and data together on one open, trusted platform, helping every organization become an Agentic Enterprise (paraphrase).

Taglines:
- The #1 AI CRM (page title and hero)
- Business is the greatest platform for change (values panel; a long-running Benioff line)

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Agentic Enterprise | Humans and AI agents work together, each on what they do best. | Recognized as a Leader across 397 G2 Grid® Reports (homepage, 2026-10-31). | observed |
| Trust | Trust is the #1 value: guardrails you control, trust built in, not bolted on. | Five core values: Trust, Customer Success, Innovation, Equality, Sustainability. | observed |
| One platform, open to all | Data, workflows and agents on one platform that works with every AI and app. | Works with Claude, ChatGPT, Cursor, Gemini, Perplexity, Windsurf, Notion and Amazon Bedrock (homepage logo row). | observed |
| Customer success | Customers of every size and industry succeed with Salesforce. | Named stories: Pandora, Williams-Sonoma, Pacers, Good360, Siemens, SharkNinja, Pearson.; Since 1999, pioneering CRM in the cloud (SaaS). | observed |

They never claim:
- Print the published count exactly (397 G2 Grid® Reports on 2026-10-31); never a rounded or animated value.

## Voice

Tone words: Confident, Optimistic, Plain-spoken, Customer-first.

Traits:
- Tighter, but not Sprawling (published)
- Brighter, but not Corporate gray (observed)
- Bolder, but not Timid (observed)
- Nimble, but not Showy (published)
- Charismatic, but not Mechanical (published)

- Brand Central calls the current expression "tighter, brighter, and bolder" (published, brand.salesforce.com).
- The homepage speaks in second person about the customer's business: "your agents, your team, your data".
- Claims are big and specific ("#1 AI CRM", "397 G2 Grid® Reports") and always attributable.
- SLDS asks custom apps to sound like the Salesforce app; its full voice guide is a download, not a web page.

Rules a copy check enforces:
- Sentence case headlines
- Address the reader as "you/your"; Salesforce speaks as "we" only in values copy
- Use a spaced em dash ("your data — working together", "work — all within")
- Use contractions (you're, don't, we're)
- Buttons start with a verb: Explore, Start, Watch, See, Read, Take, Learn
- Write the claim as "#1 AI CRM" with the numeral and hash
- Product names keep their exact form: Agentforce, Data 360, Customer 360, AIforce, Slack, Tableau, AgentExchange, Trailhead
- Headlines carry no closing period, except the bento card lines written as two short sentences
- UI text is concise, conversational and direct; use plain English and active voice

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Blue 20 | #032D60 | ink | Headlines and body on light grounds |
| Hero blue | #022AC0 | accent | Hero ground; accent phrase in headlines (observed, not in SLDS 1) |
| Bright blue | #066AFE | accent | Gradient highlight, bright buttons (observed) |
| Teal 80 | #04E1CB | accent_secondary | Accent line on blue, eyebrows |
| Cloud Blue 95 | #EAF5FE | surface | Light sections |
| Cloud Blue 80 | #90D0FE | surface | Sky-blue sections |
| Deep navy | #001E5B | night | Dark end of gradients (observed) |
| Blue 50 | #0176D3 | accent | SLDS brand/action blue in product UI |
| Green 50 | #2E844A | accent | Nav Get started; success |
| Yellow 80 | #FCC003 | accent | Trailhead card |
| Neutral 10 | #181818 | ink | SLDS primary text |
| Neutral 30 | #444444 | ink_muted | Secondary text |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | ITC Avant Garde | Commercial (ITC / Monotype); not open | Poppins | Poppins, "Century Gothic", "Helvetica Neue", Arial, sans-serif |
| body | Salesforce Sans | Proprietary Salesforce face | Open Sans | "Open Sans", "Segoe UI", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero H1 / closing H2 | --text-display-xxl-* | ITC Avant Garde (stand-in Poppins 500) | 80px | 40px | 1.1 | -3px | 500 |
| Section H2 on light / resources | --text-display-xl-* | ITC Avant Garde (stand-in Poppins 500) | 72px | 32px | 1 | -0.9px | 500 |
| Card / panel H2, logo-band H2 | --text-display-l-* | ITC Avant Garde (stand-in Poppins 500) | 42px | 24px | 1.25 | -0.5px | 500 |
| Narrow bento title / demo H2 | --text-display-m-* | ITC Avant Garde (stand-in Poppins 500) | 32px | 24px | 1.25 | -0.6px | 500 |
| Story H3 / quote / sub-H3 | --text-display-s-* | ITC Avant Garde (stand-in Poppins 500) | 24px | 18px | 1.375 | -0.3px | 500 |
| Hero lead | --text-display-lead-* | ITC Avant Garde (stand-in Poppins 500) | 20px | 18px | 1.5 | -0.24px | 500 |
| Column H3 / product label | --text-display-xs-* | ITC Avant Garde (stand-in Poppins 500) | 18px | 18px | 1.25 | -0.2px | 500 |
| Buttons, eyebrows, chips | --text-label-* | ITC Avant Garde (stand-in Poppins 500) | 16px | 16px | 1.5 | -0.4px | 500 |
| Light-section lead | --text-body-lead-* | Salesforce Sans (stand-in Open Sans 400) | 20px | 18px | 1.5 | 0px | 400 |
| Card / panel body | --text-body-l-* | Salesforce Sans (stand-in Open Sans 400) | 18px | 16px | 1.5 | 0px | 400 |
| Column body | --text-body-m-* | Salesforce Sans (stand-in Open Sans 400) | 16px | 16px | 1.625 | 0px | 400 |
| Nav links | --text-nav-* | Salesforce Sans Bold (stand-in Open Sans 700) | 16px | 16px | 1.75 | 0px | 700 |
| Footer links / legal | --text-body-xs-* | Salesforce Sans (stand-in Open Sans 400) | 12px | 12px | 1.5 | 0px | 400 |
| FAQ heading | --text-faq-h-* | Avant Garde for Salesforce Bold (stand-in Poppins 700) | 40px | 32px | 1.2 | -0.32px | 700 |
| FAQ question | --text-faq-q-* | Avant Garde for Salesforce Bold (stand-in Poppins 700) | 20px | 16px | 1.4 | -0.08px | 700 |

## Layout

Measured on https://www.salesforce.com/: Measured with Playwright (headless Chrome, normal user agent) from computed styles at 1440 and 390, 2026-10-31; brand rules from brand.salesforce.com and the Lightning Design System (v1) guidelines..

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 144px | 16px |
| Section padding | 96px | 64px |
| Container max width | 1152px | full |
| Hero text width | max 1024px | full |
| Grid columns | 2 | 1 |
| Gutter | 24px | 16px |
| Card gap | 64px | 64px |
| Navigation height | 96px | 96px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Salesforce's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 96px sticky
   - Phone: 56px: hamburger, logo, person, Get started
   - Green #2E844A pill is the only green on the page
2. Hero
   - Desktop: y 96-582 centred
   - Phone: centred, stacked full-width pills
   - Lead uses the display face
3. Demo frame
   - Desktop: y 582-1462, frame 1152x728 r24
   - Phone: tabs + video + violet caption card
   - Glass, not white
4. Logo marquee
   - Desktop: y 1462-1871
   - Phone: 3 logos visible
5. Dome divider
   - Desktop: y 1871
   - Phone: same
6. Product card stack
   - Desktop: y 1950-6658
   - Phone: cards without images
7. Open platform panels
   - Desktop: y 6658-11172
   - Phone: single column
8. Customer stories
   - Desktop: y 11171-12177
   - Phone: narrow cards
9. G2 card
   - Desktop: y 12177-12991
   - Phone: stacked
10. Resources
   - Desktop: y 12992-14420
   - Phone: one column
11. Closing CTA
   - Desktop: y 14420-15264
   - Phone: full-width pill
12. FAQ
   - Desktop: y 15263-15906
   - Phone: same, 16px questions
13. Footer
   - Desktop: y 15906-16489
   - Phone: legal bar only

## Page anatomy

How Salesforce's own landing pages are built, part by part (observed; https://www.salesforce.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White 96px bar, sticky: Salesforce cloud logo at left, seven top-level menus in bold navy, then Contact Us link, globe, person icon + Login, and a green pill "Get started" at right.
- ground: #FFFFFF, no border, no shadow at rest
- height: 96px desktop; 56px phone
- logo: variant Cloud logo: white "salesforce" wordmark inside the #00B3FF cloud; px 68x48; position x 40, vertically centred (y 24); file https://wp.sfdcdigital.com/en-us/wp-content/uploads/sites/4/2024/11/logo-salesforce.svg
- links: count 7; labels Products, Industries, Customers, Events, Learning, Support, Company; size 16px/28px; weight 700; face body (Salesforce Sans Bold; stand-in Open Sans 700); color #032D60; alignment left group: label x 148, 248, 358, 472, 554, 653, 747 (32px gaps); no chevrons
- actions:
  - Contact Us: 14px/20px 400 #032D60, underlined, x 1030
  - Globe icon 18px #032D60 at x 1129 (language)
  - Person icon 18px + "Login" 16px 700 #032D60, x 1171
  - Get started: pill #2E844A, white 16px 700 text, 138x44, padding 8px 24px, radius 9999px, x 1262 (40px from the right edge)
- sticky: position sticky at top; stays white on every band
- phone: shows hamburger 24px #032D60 at x 16, cloud logo 45x31 at x 66, person icon at about x 225, "Get started" green pill 103x28 (14px 700, padding 4px 12px) right at x 263; menu hamburger opens the full menu (animation only); cta Get started stays in the bar

**Hero**
- summary: Centred hero on deep hero blue: a two-line 80px headline (second line teal), a two-line lead, and two pill buttons (white solid, glass).
- ground: Flat #022AC0 for the hero, demo and logo bands. (The live wrapper gradient #022AC0 5% -> #066AFE 29% is spread over 15168px, so it only starts to show far below these bands, where other sections paint their own grounds.)
- desktop: section y 96-582 (486px), padding 64px 24px; content column 1024px centred (x 208-1232); vertical anchors H1 top y 160 (2 lines, 176px tall); lead y 368 (2 lines, 60px); buttons y 460 (56px tall); text max width H1 715px (forced break after "the"); lead 760px; cta size Start for free 151x56; Watch demo 161x58; 16px gap; the pair is centred (x 556-884)
- phone: order H1, lead, Start for free, Watch demo; alignment centred, 16px gutters; sizes H1 40px/42px -1px (2 lines: "Get started with the" / "#1 AI CRM"), y 104; lead ITC 18px/27px white, 4 lines, y 220; buttons full width 358px, 56px and 58px tall, stacked with 16px gap (y 360, 432); lead measure 4 lines, broken as on the live page: "Your agents, your team, your" / "data — working together so" / "every customer interaction" / "reflects your business at its best."
- type: H1 display 80px/88px, tracking per the type table (real face -2px; Poppins -3px desktop, -2px phone), #FFFFFF; line 2 "#1 AI CRM" #04E1CB. Lead set in the DISPLAY face (ITC Avant Garde) 20px/30px #FFFFFF
- cta: Start for free = button_white_on_blue; Watch demo = button_glass_on_blue
- at rest: motion no hero animation; buttons static
- copy:
  - H1: "Get started with the" / "#1 AI CRM"
  - Lead: "Your agents, your team, your data — working together so every customer interaction reflects your business at its best."
  - Buttons: "Start for free", "Watch demo"

**Demo frame: See what's possible**
- summary: A 32px white centred H2, then one big frosted-glass frame (1152x728, radius 24px) holding a row of product tabs and a playing product-demo video; yellow 3D sparkles break out of the frame at left and right.
- ground: #022AC0 (same wrapper)
- desktop: band y 582-1462, padding 16px 40px 64px; h2 "See what's possible when every part of your business works together" 32px/40px -0.2px #FFFFFF, one line, centred, y 598; frame 1152x728 at x 144, y 670. background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), linear-gradient(125deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.5) 100%); border: 1px solid rgba(255,255,255,0.4); border-radius: 24px; padding: 4px 16px 16px; backdrop-filter: blur(24px); box-shadow: 0 26px 26px rgba(6,106,254,0.3), 0 50px 64px rgba(6,106,254,0.16), inset 0 1px 0 rgba(255,255,255,0.6); plus an inner gloss layer (inset 0, radius 16px): linear-gradient(rgba(255,255,255,0.35), transparent 16%); tabs row at y 687 inside the frame, 48px tall pills, radius 9999px, padding 12px 20px 12px 16px, 8px gaps: 24px product icon + 16px label #001E5B. Inactive fill rgba(255,255,255,0.55) with shadow 0 4px 12px rgba(6,106,254,0.2). Active (Slack) fill rgba(255,255,255,0.94) with a 2px #BA01FF ring and 0 4px 8px rgba(186,2,255,0.3). Labels in order: Slack, Sales, Service, Marketing, Commerce, Small Business (cut off by the frame edge at about x 940; the rest of Agentforce, Customer 360, Data 360, Tableau, Salesforce Platform scroll horizontally out of view); controls three 48px circles at x 946, 1002, 1058 (previous, next, pause): fill rgba(255,255,255,0.6), 1px rgba(255,255,255,0.5) border, #001E5B glyphs; then "Watch all demos" pill #066AFE, white 16px text, 165x48, padding 16px 20px, x 1114; stage well 1118x634 at x 161, y 747 (rgba(255,255,255,0.5), radius 16px, padding 6px); video 1106x622 at x 167, y 753, radius 12px, PLACE hero-demo-slack-tour-still.png (object-fit contain). "Details" chip 78x42 rgba(0,0,0,0.8) at x 179, y 1321; sparkles PLACE spark-yellow.webp 128x137 at x 1, y 692 and spark-yellow-right.webp 80x86 at x 81, y 793 (both overlapping the frame's left edge); spark-yellow-left.webp 112x120 at x 1263, y 1249 (overlapping the bottom-right corner); frame renders as PALE LUMINOUS GLASS, not blue plastic: rendered rim colours read from the reference are #AEBBEB near the top-left, #8FA1E4 at the left edge, #BEC8EF at the right edge and #DFE5F8 along the bottom; the stage inside is #F8F3FE. If your frame reads darker than #8FA1E4 anywhere, add more white.; inner positions tab row top 17px below the frame top; stage inset 23px from the frame sides (x 167, 1106 wide); these positions win over the padding value; tab icons PLACE the real 24px product icons (radius 6px): tab-slack.svg, tab-sales.svg, tab-service.svg, tab-marketing.svg, tab-commerce.svg, tab-small-business.svg, tab-agentforce.svg. Never colored squares.
- phone: h2 24px/30px, 3 lines centred, y 570; frame frame x 16-374, y 692, 358x540, same glass CSS. Tabs row (Slack active, Sales, then prev/next circles) 69px; well 324x449 at x 33 (same 50% white, radius 16, padding 6): video 312x176 radius 12px, then 8px below it the caption card 312x254: linear-gradient(155deg, rgba(115,1,158,0.85) 0%, rgba(82,1,112,0.85) 100%), radius 12px, padding 32px 24px: Slack icon + "Slack" 20px white, H3 "People and agents, working as one." 24px/26.88px -0.5px rgba(255,255,255,0.8), full-width white pill "Watch full demo" (56px); after "Watch all demos" full-width 58px glass pill below the frame (y 1256); sparkles no sparkles inside or beside the tab row on phone; anchors H2 y 570, frame top y 692, Watch all demos y 1256; caption badge the Slack icon in the caption card sits on a white circle badge
- anatomy:
  - Frame is glass, not white: keep the blue showing through
  - Every control is a pill or circle; no square corners anywhere in this band
- components:
  - glass frame
  - demo tab pill
  - circle icon button
  - bright blue pill

**Customer logo marquee**
- summary: Two-line 42px white H2 centred, then a single row of white customer logos scrolling left (marquee) with a small pause button at right.
- ground: #022AC0
- desktop: band y 1462-1871, padding 32px 0 64px; h2 "Customers of every size, business, and industry succeed with Salesforce" 42px/52.5px #FFFFFF, 2 lines, 896px wide centred, y 1494; logos row y 1671, every logo 32px tall, white, about 80px apart. At rest: a cut Formula-1-style mark and the "salesforce" partner lockup at the far left edge, then Vivint (x 127), SharkNinja (x 344), Engie (x 578), Bouygues Telecom (x 746), LY Corporation (x 986), Adecco cut at the right edge. Files: logo-vivint.webp, logo-sharkninja.png, logo-engie.webp, logo-bouygues.webp, logo-lycorp.webp, logo-adecco.webp; pause 32x32 circle rgba(255,255,255,0.2) with white pause glyph at x 1384, y 1711
- phone: h2 24px/30px, 3 lines, y 1410; logos same row, 3 logos visible, cut at both edges
- anatomy:
  - Logos are flat white on blue; never full color here
  - Marquee scroll is animation only
- components:
  - logo marquee

**Dome divider into the light section**
- summary: Three 80px curved dividers, all from one path. Two are domes that rise up into the band above (light into blue at y 1871; white into violet at y 15184). The third, at y 11093 below the values panel, is the opposite: the NAVY panel hangs down into the sky-blue customers band, deepest at the centre.
- ground: blue above, #EAF5FE below
- desktop: dome up svg 1440x80, viewBox 0 0 1440 80, preserveAspectRatio none, path "M720 0C985.756 0 1233.11 29.4157 1440 80H0C206.886 29.4157 454.244 0 720 0Z", fill = the band BELOW (#EAF5FE at y 1871, #FFFFFF at y 15184), placed in the last 80px of the band above; sag down at y 11093 (last 80px of the values panel): same viewBox, path "M0 0H1440V80H0Z M720 0C985.756 0 1233.11 29.4157 1440 80H0C206.886 29.4157 454.244 0 720 0Z" with fill-rule evenodd, fill #90D0FE, rotated 180deg (transform: rotate(180deg)). Result: light-blue fills the two lower corners and the navy bows DOWN in the middle
- phone: all same paths, width 390, height 22-23px (the SVG scales with the width: 80 * 390/1440); measured y 1764, 11416, 15421
- anatomy:
  - Never a wave or diagonal
  - Never all three the same direction: the one under the values panel sags down
- components:
  - dome divider

**Agentic Enterprise: stacked product cards**
- summary: Light section: a 72px two-tone headline and a lead, then five big gradient product cards (1152px, radius 30px), each with a headline, body, white pill, product label + icon top right and a product image right. Cards are sticky and stack on scroll; draw them as a simple vertical list with 64px gaps.
- ground: #EAF5FE (y 1950-2186), then linear-gradient(180deg, #EAF5FE, #90D0FE) down to y 6658
- desktop: h2 "Salesforce powers the" #032D60 / "Agentic Enterprise" #022AC0, 72px/72px, 2 lines, centred, top y 1950; lead body face 20px/30px #032D60, 768px wide centred, 2 lines, y 2126 — lead is verbatim and may need 800px to stay at 2 lines in Open Sans; cards 1152 wide at x 144; heights 589, 589, 627, 623, 659; tops y 2219, 2873, 3527, 4219, 4907 (64px gaps); radius 30px; soft blue glow shadow under each (about 0 20px 40px rgba(6,106,254,0.25), read from the screenshot); gradients all linear-gradient(270deg, <right> , <left>): 1 Platform #066AFE -> #001E5B; 2 AIforce #3451DE -> #001E4A; 3 Agentforce #066AFE -> #001E5B; 4 Customer 360 #1F827C -> #023434; 5 Data 360 #5867E8 -> #321D71 (the left edge is the dark end); card layout text column x 209 (65px inside the card), 576px wide for the H2, 495px for the body; H2 top at card top + 65; body at +194; button at +299. Right: product label block right-aligned ending at x 1135 at card top + 92 (name 18px/27px display white, subtitle 16px/24px body white), 80x80 product icon at x 1151, card top + 78. Product image 495px wide at x 736, top at card top + 194 (height 330-400, object-fit contain) Button top = body bottom + 24px (card 2 body is 5 lines, so its button is at +353; card 3 at +326; the others +299).; h2 card 42px/52.5px #FFFFFF, 2 lines; body card body face 18px/27px rgba(255,255,255,0.9); rail REQUIRED, do not omit: fixed vertical pill rail, 58px wide x 282px tall, left edge at x 32, vertically centred in the viewport; fill rgba(255,255,255,0.2), radius 9999px, padding 4px; five 40px product icons (icon-salesforce-cloud.svg, icon-aiforce.webp, icon-agentforce-astro.png, icon-customer360.png, icon-data360.png); the active one sits on a white 48px circle. CSS: position fixed (or sticky inside the card list), left 32px, top 50%, translateY(-50%); shown only while the cards are on screen.; spacer after the last card (ends y 5566): 64px card margin + a 900px empty block (h-screen) + 128px section bottom padding = 1092px of plain light gradient before y 6658. Keep it.
- phone: h2 32px/40px, 2 lines centred (y 1849); lead body 18px/27px 5 lines; cards full width minus 16px (x 16-374), radius 24px, padding 25px; order: product label + icon top right, H2 24px/30px (2-3 lines), body 16px/24px, full-width white pill (55px tall, 14px text); NO product image on phone; about 64px between cards; rail no rail on phone; lead measure 5 lines, text-wrap: balance
- anatomy:
  - Card 1: label "Salesforce / Platform", icon icon-salesforce-cloud.svg, image card-platform.webp
  - Card 2: "AIforce / Live Interface", icon icon-aiforce.webp, image card-aiforce.webp
  - Card 3: "Agentforce / Digital Workforce", icon icon-agentforce-astro.png, image card-agentforce.png
  - Card 4: "Customer 360 / Apps, Semantics & Workflow Intelligence", icon icon-customer360.png, image card-customer360.png
  - Card 5: "Data 360 / Integration, Federation, and Harmonization", icon icon-data360.png, image card-data360.webp
  - Each button: white pill, 58px tall, padding 16px 20px, 1px rgba(255,255,255,0.3) border, #032D60 16px display text + a 16px external-link glyph
- components:
  - gradient product card
  - product label
  - white pill with external-link glyph
  - left product rail
- copy:
  - Lead: "Agents handle the research, the validation, and the repetitive work — all within guardrails you control — so your people can focus on decisions only they can make."
  - Card H2s in order: "Enterprise intelligence runs on core systems", "An agentic coworker anywhere you work", "Deploy trusted agents that act with purpose", "Ground agents with built-in rules, workflows, and data", "Give every agent complete business context"
  - Buttons: "Explore the Agentic Platform", "Explore AIforce", "Explore Agentforce", "Explore Customer 360", "Explore Data 360"
  - Card 1 body: "Everything your business runs on, your data, models, and workflows, are connected from the start with trust that is built-in, not bolted on."
  - Card 2 body: "Powered by Headless Toolkit, AIforce brings Salesforce to any interface, with the trusted context, semantics, and workflows that run your business — whatever AI you use, wherever you work, whether Claude, Coworker, Slack, or Teams." (Headless Toolkit, Claude, Coworker, Slack are inline links, same color)
  - Card 3 body: "Deploy an infinitely scalable workforce that reasons, acts, and improves processes across every corner of your business, 24/7. One that's trained on your data. Built for your industry. And governed by your rules."
  - Card 4 body: "Customer 360 knows how your business runs. Its proven business logic, workflows, and processes mean every action an agent takes is one your business already trusts."
  - Card 5 body: "Data 360 connects your systems, manages your data, and unifies customer context — creating trusted business context for every human and every AI agent."
- copy prov: observed, verbatim, https://www.salesforce.com/ (2026-10-31)

**Open platform: three dark panels**
- summary: Still on the light gradient: a 72px navy H2 and lead, then three full-bleed deep-blue panels (Headless Toolkit, AgentExchange, Values), each 32px-rounded, with teal eyebrows, white headlines, glass quote cards and pill rows.
- ground: linear-gradient(180deg, #90D0FE, #EAF5FE) behind; panels linear-gradient(0.19deg, #001E5B 0.17%, #022AC0 82.83%, #066AFE 110.46%, #00B3FF 150.63%): navy at the bottom, hero blue at the top
- desktop: h2 "Salesforce is open to every human, agent, and platform" 72px/72px #032D60, 2 lines, centred, y 6658; lead body 20px/30px #032D60, 768px, 3 lines, y 6834; panels three full-bleed panels (1440 wide), stacked with NO overlap when settled: panel 1 y 6988-8485 (1497), panel 2 y 8485-9849 (1364), panel 3 y 9849-11172 (1323). Clip radius 32px on all corners for panels 1 and 2; panel 3 rounds only its top corners (30px). Padding 96px 64px, and the content column adds 64px more at the top, so the eyebrow sits 160px below the panel top. (While a panel scrolls in, it is clipped inset 32px 64px and translated up to 360px: animation only.) STATIC BUILD: draw each panel as it is first seen, inset 64px left and right (x 64-1376, 1312 wide) with 32px rounded corners, floating on the light gradient; the reference capture shows this inset composition.; panel split text left 552px (x 144), media right 552px (x 744); eyebrow display 16px/24px +0.32px #04E1CB; h2 panel 42px/52.5px #FFFFFF; body panel body 18px/27px rgba(255,255,255,0.8); panel 1 eyebrow "Salesforce Headless Toolkit" y 7148; H2 "Bring Salesforce to every agent, app, and experience" (3 lines) y 7188; body y 7362; white pill "Explore Headless Toolkit" y 7440. Right: video 552x304 at y 7170, radius 16px (PLACE headless-video-poster.jpg). Then centred H3 "Integrate with your AI of choice" 24px/36px white y 7576; a centred row of 8 outlined logo pills y 7637 (50px tall, padding 8px 16px, 1px rgba(255,255,255,0.4) border, radius 9999px, white logos 32px tall: Claude, ChatGPT, Cursor, Gemini, Perplexity, Windsurf, Notion, Amazon Bedrock; files ai-*.webp/png); then 3 columns at x 144/536/928 (368 wide, 24px gaps) y 7758: eyebrow display 14px/21px +0.28px rgba(255,255,255,0.8) UPPERCASE ("/BUILD", "<DEPLOY>", "{GOVERN}"), H3 18px/22.5px white, body 16px/26px rgba(255,255,255,0.8); then a quote card (see quote_card) with the BACA Systems quote and a glass "Learn more" pill; panel 2 eyebrow "AgentExchange Marketplace"; H2 "Everything your agents need in one place" (2 lines) at panel top + 200; body 5 lines; white pill "Explore AgentExchange" at panel top + 480. Right: agentexchange-banner.webp 552x282 (cover) at panel top + 207. Then centred H3 "Connect and integrate the apps you already use with Salesforce" 24px/36px at panel top + 616; row of 7 outlined logo pills at panel top + 684 (Google Workspace, Docusign, QuickBooks, Jira, LinkedIn, Slack, Dropbox; files app-*.webp); then the IDC quote card with a glass "Explore AgentExchange" pill; panel 3 eyebrow "Driven by our values"; H2 "We believe values create value" 2 lines at panel top + 213; body 4 lines; white pill "See what drives us" at panel top + 466. Right: values.webp 552x376 (cover) at panel top + 160. Then 5 value columns at x 144, 379, 614, 850, 1085 (211 wide, 24px gaps) at panel top + 600: H3 18px/22.5px white, body 16px/26px rgba(255,255,255,0.8), underlined display 14px/21px white link. Then centred H3 "Business is the greatest platform for change" 42px/52.5px 768px 2 lines at panel top + 853, body 18px/27px rgba(255,255,255,0.8) centred 4 lines, centred white pill "Take the pledge" at panel top + 1106; quote card 1152 wide (x 144), radius 24px, 1px rgba(255,255,255,0.15) border, fill rgba(255,255,255,0.05), padding 40px: the quote mark is this exact 43x32 SVG, white, never a font glyph: <svg width="43" height="32" viewBox="0 0 43 32" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"><path d="M16.5832 32V16.4672H9.22675C9.22675 10.2774 10.8477 8.87591 16.4585 7.82481V0C5.61086 0.116787 0 6.65693 0 15.1825V32H16.5832ZM42.3932 32V16.4672H35.0367C35.0367 10.2774 36.6576 8.87591 42.2685 7.82481V0C31.4208 0.116787 25.81 6.65693 25.81 15.1825V32H42.3932Z"/></svg> (24px gap below it), quote display 24px/33px rgba(255,255,255,0.9) 1070px wide, name display 16px/22px white, title display 14px/19.25px rgba(255,255,255,0.6), then a glass pill (rgba(255,255,255,0.2), 1px rgba(255,255,255,0.15), 58px tall); closing dome the sag_down divider (see Dome divider): navy hangs down into #90D0FE at y 11093
- phone: h2 32px/40px 3 lines; lead body 18px/27px; panels each panel box is 390 wide with padding 32px 48px and is clipped inset 16px with 24px corners, so it shows as a 358px rounded panel with a 294px content column. Heights about 2032, 1718 and 2058px; panels overlap while entering, so the phone anchors (H2 at 5701, 7395, 9114) win over the heights.
- anatomy:
  - Teal eyebrow, white headline, 80% white body: the only text colors on the dark panels
  - Logo pills are outlined (transparent fill), never filled
- components:
  - dark panel
  - teal eyebrow
  - outlined logo pill
  - glass quote card
  - underlined text link
- copy:
  - Lead: "When you build on Salesforce, you're connected to the apps your business depends on, the infrastructure you've invested in, and the partners who know how to bring it all together."
  - Quote 1: "With headless capabilities, our teams, our teams get the work done directly inside the tools they use everyday, while Salesforce powers the entire business seamlessly in the background." Andrew Russo, VP of Business Systems, BACA Systems
  - Quote 2 (IDC): begins "Most enterprises don't suffer from a lack of AI options; they suffer from a lack of coherence." Frank Della Rosa, Research VP of SaaS, Business Platforms, and Industry Cloud, IDC
  - Values: Trust / Start building trust; Customer Success / Read success stories; Innovation / See latest innovations; Equality / Follow our journey; Sustainability / Go net zero now
  - Panel 1 body: "Salesforce becomes available wherever users build and work, grounded in your business logic and governed everywhere."
  - Columns: /BUILD "Build with any coding agent" — "Connect tools like Cursor and Claude Code directly to Salesforce with native MCPs, APIs, Skills, and CLI commands." | <DEPLOY> "Deploy anywhere users work" — "Deploy experiences across every surface. Build once and deliver to Slack, web, mobile, and third-party apps and agents without rebuilding for every channel." | {GOVERN} "Govern with inherited trust and security" — "Extend Salesforce with enterprise-grade trust built in. Every experience inherits identity, permissions, compliance, observability, and secure real-time data access."
  - Panel 2 body: "AgentExchange is your unified marketplace to discover, buy, and deploy agents, apps, and capabilities from any surface. Bring first-party Salesforce skills and plugins into Claude, Codex, or Cursor. Or, connect third-party MCP servers directly into Agentforce or Slack."
  - IDC quote in full: "Most enterprises don't suffer from a lack of AI options; they suffer from a lack of coherence. AgentExchange brings that coherence to the vast Salesforce ecosystem by unifying apps, agents, and integrations in a single, enterprise-grade marketplace. That shift from fragmented experimentation to fully governed, ecosystem-wide deployment is what will separate AI leaders from laggards." (5 lines at 1070px)
  - Panel 3 body: "Our core values guide everything we do as a company and as people. Our mission is to bring out the best in one another, deliver success to our customers, and inspire the entire industry through our actions."
  - Value bodies: Trust "Trust is our #1 value. We build trust by leading with ethics and through the integrity of our technology." | Customer Success "We focus on helping our customers achieve success, to earn their trust and become a valued partner." | Innovation "We make products that are easy-to-use, integrated, scalable, and deliver fast time to value." | Equality "We're better together. We aim to create a more inclusive workplace, and equitable world." | Sustainability "We are committed to sustainability and use the full power of Salesforce to help our customers achieve their environmental goals."
  - Platform-for-change body: "Grounded in trust, customer success, innovation, equality, and sustainability, we're committed to doing well in business and doing good in the world, investing 1% of our equity, technology, and time to create lasting change. We're also a founder and champion of Pledge 1%, a global movement to ensure giving back is part of companies of all sizes."
- copy prov: observed, verbatim, https://www.salesforce.com/ (2026-10-31)

**Customer stories carousel**
- summary: Light-blue band: a 72px two-tone headline, then a full-bleed row of large rounded video cards (960x540) with a logo, a white headline and a "See how" pill, and a small centred control pill below.
- ground: #90D0FE
- desktop: band y 11171-12177, padding 40px 0; h2 "Meet the customers who are" / "building their Agentic Enterprise" 72px/72px, centred, #032D60 with "Agentic Enterprise" #022AC0, top y 1130 + section padding (y 11307); cards 960x540, radius 27px, 32px apart; first card starts at the left edge (x 0, autoplay shifts it up to 34px left), second at x 992 and cut by the right edge. Each card: full-bleed video poster (PLACE customer-pandora-poster.jpg and customer-williams-sonoma-poster.jpg, cover) under a dark overlay rgba(24,24,24,0.4) that deepens toward the bottom-left; at x+40 near the bottom: customer logo 32px tall white (logo-pandora.webp, logo-williams-sonoma.webp), H3 display 24px/30px -0.24px white 360px wide (2-3 lines), white pill "See how" 132x58 with the external-link glyph, 40px from the card bottom; controls centred under the row at y 12088: three 40px white circles (pause, previous, next; #032D60 glyphs) inside a translucent white pill track
- phone: h2 32px/40px 3 lines; cards about 340px wide, H3 18px/22.5px; controls same centred pill
- anatomy:
  - Cards are video, always with a dark scrim so white type reads
  - Seven stories loop: Pandora, Williams-Sonoma, Pacers Sports & Entertainment, Good360, Siemens, SharkNinja, Pearson
- components:
  - video story card
  - carousel control pill
- copy:
  - Pandora: "Pandora makes every online shopper feel like a gem with Agentforce"
  - Williams-Sonoma: "Williams-Sonoma nurtures lifelong relationships with data"
- copy prov: observed, verbatim, https://www.salesforce.com/ (2026-10-31)

**G2 recognition card**
- summary: A light-blue card with wavy (domed) top and bottom edges floating on the blue that starts below it; two-tone 42px headline, the G2 badges image left and text + pill right; 3D heart and fist-bump stickers at the corners.
- ground: radial-gradient(100% 44.76% at 50% 5.24%, #90D0FE 99.6%, #022AC0 100%): light blue on top, the hero blue below the card
- desktop: card 1296 wide at x 72, y 12273-12987, fill linear-gradient(180deg, #EAF5FE, #90D0FE). The top and bottom edges are ASYMMETRIC swoops cut by CSS masks (copy them exactly): mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1312 92'%3E%3Cpath fill='black' d='M0 71.7542C0.000197396 56.7678 13.5812 45.452 28.3477 48.01C185.872 75.299 347.607 90.3039 512.531 91.9993H0V71.7542ZM1281.83 0.752197C1297.1 -3.10785 1312 8.37118 1312 24.1155V91.9993H575.516C819.002 89.4932 1055.54 57.9806 1281.83 0.752197Z'/%3E%3C/svg%3E"), linear-gradient(transparent 89.88px, #000 0, #000 calc(100% - 83.95px), transparent calc(100% - 83.95px)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1312 86'%3E%3Cpath fill='black' d='M1312 62.085C1312 74.6452 1302.51 84.5031 1290.9 86H1284.75C1283.84 85.8841 1282.94 85.7177 1282.03 85.4961C1053.18 29.6234 814.054 0 568 0C383.833 0 203.542 16.5948 28.541 48.3711C13.7173 51.0625 0.000148199 39.7272 0 24.6611V0H1312V62.085Z'/%3E%3C/svg%3E"); mask-size: 100% 91.88px, 100% 100%, 100% 85.95px; mask-position: 50% 0, 50% 0, 50% 100%; mask-repeat: no-repeat. Result: the top edge is low at the left and swoops up to the top-right corner; the bottom edge dips at the right, both with rounded ends. Padding 90px 0 84px.; h2 "Salesforce recognized as a Leader across" #032D60 / "397 G2 Grid® Reports" #066AFE, 42px/47.25px, 768px centred, y 12427; left g2-badges.webp 220x294 at x 336, y 12546; right body 18px/27px rgba(3,45,96,0.8) 484px at x 620, y 12581 (5 lines); white pill "Read the reports" with an external-window glyph at y 12748; stickers the heart (g2-heart-still.png, transparent PNG, 288x288) sits at x 98, y 12259: ABOVE the card's top-left edge, overlapping it by about half; the fist bump (g2-fistbump-still.png, transparent, 288x240) at x 886, y 12769 overlaps the bottom edge. Both are the full 288px size. The heart PNG is transparent around the art: place its 288px BOX at x 98, y 12259 while the card top is y 12273, so the art straddles the top-left edge. Check placement against the visible art, not the box.
- phone: card no masks on phone: plain rectangle with 24px radius, 40px text inset; h2 32px/36px 4 lines; order heading, badges image, body, pill
- anatomy:
  - Print the published count "397 G2 Grid® Reports" as on the page (2026-10-31)
- components:
  - domed card
  - 3D sticker
- copy:
  - Body: "Salesforce leads the categories that define enterprise AI, from AI agent builders to customer support agents to AI SDRs. Independent analyst recognition reflects what enterprises rely on every day: a platform proven across SMB, mid-market, and enterprise."
- copy prov: observed, verbatim, https://www.salesforce.com/ (2026-10-31)

**Resources bento with tabs**
- summary: Blue-to-violet band: a 72px white centred H2, a segmented pill control with three tabs, then a 2x2 bento of colored cards (yellow, bright blue, photo, teal) with chips, big headlines, round arrow buttons and white pills.
- ground: linear-gradient(180deg, #022AC0 0%, #D17DFE 100%) from y 12992 to 15264 (it also carries the closing CTA)
- desktop: container max 1280 (x 80), padding 96px 40px; grid 1200 wide at x 120; h2 "Your Agentic Enterprise deep dive starts here" 72px/72px #FFFFFF, 2 lines, y 13088; tabs segmented control centred at y 13296: track = pill with rgba(255,255,255,0.2) fill and 1px rgba(255,255,255,0.3) border, 8px inner padding; three 50px pills (padding 12px 20px, display 16px -0.2px): active "Learn new skills" fill #032D60 white text; "Attend an event", "See what's new" fill #FFFFFF #032D60 text; bento row 1 y 13404: A 792x480 fill #FCC003; B 384x480 fill #066AFE (24px gap). Row 2 y 13907: C 384x449 photo card (res-community.png cover, over #7C3AED, dark scrim at bottom); D 792x449 fill #04E1CB. All radius 16px, padding 32px; card parts top-left chip (display 16px/24px +0.16px, 32px tall pill, darker tint of the card: rgba(0,0,0,0.1) on yellow/teal, #0B5CAB-ish on blue: our reading); top-right 56px white circle with a 24px #032D60 north-east arrow; headline 42px/52.5px on the wide cards (#032D60 on yellow/teal), 32px/40px white on the narrow cards; white pill CTA bottom-left on A ("Start learning for free") and D ("Learn more"); art bottom-right: A res-trailhead.png 200x200, B res-agentblazer.png 320x224 (radius 8px), D res-agentblazer-slack.png 286x200; chips chips are 32px pills, padding 4px 12px, display 16px +0.16px: on yellow and teal fill rgba(3,45,96,0.1) text #032D60; on blue fill rgba(0,26,81,0.2) text #FFFFFF; on the photo fill rgba(0,0,0,0.5) text #FFFFFF. Phone: 22px tall, padding 2px 8px, 14px; titles wide-card titles are 728px wide and set in EXACTLY 2 lines: "Skill up for the Agentforce era" / "with Trailhead" and "Join the #Agentblazer movement" / "today in Slack." Narrow-card titles 320px: "Earn Agentblazer" / "Status. Build the" / "future." (3 lines) and the community card 5 lines. Never 3 lines on a wide card.
- phone: h2 32px/40px 2 lines; tabs stacked full-width pills 47px tall, 14px text; bento one column, cards 358 wide, headlines 20px/25px
- anatomy:
  - Card colors come straight from the SLDS palette (Yellow 80, Teal 80) plus the bright blue
- components:
  - segmented tabs
  - bento card
  - chip
  - round arrow button
- copy:
  - A: chip "Learning on Trailhead", "Skill up for the Agentforce era with Trailhead"
  - B: chip "Trailhead", "Earn Agentblazer Status. Build the future."
  - C: chip "Trailblazer Community", "Collaborate with Salesforce customers, partners, and product experts."
  - D: chip "Trailblazer Community", "Join the #Agentblazer movement today in Slack."
- copy prov: observed, verbatim, https://www.salesforce.com/ (2026-10-31)

**Closing CTA**
- summary: Repeat of the hero promise on the violet end of the gradient: 80px white two-line headline, one white pill, a 24px reassurance line; sparkles and a big 3D blue cursor float around it.
- ground: violet lower part of the resources gradient (ending #D17DFE)
- desktop: band y 14420-15024, padding 128px 0; h2 "Get started with the" / "#1 AI CRM" 80px/88px -2px #FFFFFF (both lines white here), y 14548; button white pill "Start a free trial" 173x56, padding 16px 32px, centred, y 14780; note "No credit card needed · No software to install." body 24px/36px #FFFFFF, y 14860; decor spark-yellow.webp ~56px at x 160 y 14570 and x 1072 y 14953; spark-pink.webp ~40-44px at x 1200 y 14740 and x 280 y 14907; cta-cursor.webp 280x299 at x 1142 y 14460; closing dome white dome (fill #FFFFFF) at y 15184 into the FAQ
- phone: h2 40px/42px -1px; button full width 358x56; note 18px/27px 2 lines
- anatomy:
  - Exactly one button here
- components:
  - white pill
  - 3D cursor

**FAQ**
- summary: White band: centred 40px bold navy heading, an 840px accordion with violet questions, the first open.
- ground: #FFFFFF
- desktop: band y 15263-15906; column 840px at x 300; h2 "Frequently Asked Questions" display BOLD 40px/48px -0.32px #001E5B (the site uses a separate cut, "Avant Garde for Salesforce", weight 700), y 15327; items question display 700 20px/28px -0.08px #730394, a 24px circle toggle at the right (#EAF5FE fill, #032D60 plus/minus); 1px #E5E5E5 divider between items; row pitch 81px for closed items; answer body 16px/24px #181818, bold weight (the block is wrapped in <strong> on the live page), links #022AC0 underlined
- phone: h2 32px/40px 2 lines; items questions 16px/24px 2 lines, toggles right
- anatomy:
  - Questions: What is Salesforce? (open) / What is CRM and why do I need one? / What is agentic AI and how is it used in Salesforce? / How does Salesforce CRM help my small business grow?
- components:
  - accordion
- copy:
  - Open answer: "Salesforce is the #1 AI CRM (customer relationship management) platform. We bring companies and customers together by providing a unified set of applications — powered by agentic AI and data — that help every department, including sales, service, marketing, commerce, and IT, work as one. You can learn more about what Salesforce is and what Salesforce does by visiting our official resources." Links: "#1 AI CRM", "agentic AI", "what Salesforce is", "what Salesforce does", "our official resources"
- copy prov: observed, verbatim, https://www.salesforce.com/ (2026-10-31)

**Footer**
- summary: White footer: logo, socials and phone line at left, three link columns, then a navy legal bar with Worldwide, legal links and the copyright + address.
- ground: #FFFFFF, then the bottom bar #032E61
- anatomy:
  - Logo: logo-salesforce-footer.svg (cloud logo) 92x64 at x 64, y +70 from the footer top
  - Social icons: the real files, 30px, at x 64 with 46px pitch, y +184: social-facebook-day.svg, social-twitter-day.svg (X), social-linkedin-day.svg, social-instagram-day.svg, social-youtube-day.svg, social-tik-tok.svg (glyphs #59575C)
  - "Call us at 1-800-664-9073" display 700 14px/20px #444444 at y +246; "See all ways to contact us" body 14px/20px #032D60 underlined at y +292
  - Columns at x 468, 770, 1073: heading display 700 14px/21px #444444 at y +72; links body 12px/18px #0B5CAB at WEIGHT 700 (computed; Open Sans 700) with 32.5px pitch from y +127. "Call us" and "See all ways to contact us" are 700 too. Only the legal links in the navy bar are 400.
  - New to Salesforce?: What is CRM?, Agentic Enterprise, Digital Marketing, Customer Service Software, Email Marketing, Ecommerce, Artificial Intelligence, AI Agents, SaaS
  - About Salesforce: What is Salesforce?, Newsroom, Customer Success, Blog, Careers, Trust, Sustainability, Investors
  - Popular Links: Salesforce Login, New Release Features, Find or Become a Partner, Dreamforce, Salesforce+, CRM Software, All Cloud Products, Product Pricing, Newsletter Sign-Up (with an external-window glyph)
  - Bottom bar: #032E61, 112px tall, full width. Left at x 117: globe + "Worldwide" body 700 16px white + chevron. Legal links body 12px/18px white from x 268: Legal, Terms of Service, Privacy Information, Responsible Disclosure, Trust, Contact, Cookie Preferences, Your Privacy Choices (with the privacy-options toggle icon), 20px apart
  - Copyright (12px/18px white, 2 lines, x 268): "© Copyright 2026 Salesforce, Inc. All rights reserved. Various trademarks held by their respective owners. Salesforce, Inc. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States" ("All rights reserved" is an underlined link)
- phone: Link columns, logo and socials are hidden: the FAQ is followed directly by the #032E61 bar (295px tall: Worldwide row centred, then the legal links wrapping in three rows, then the copyright and address in 12px/18px): centred globe + Worldwide + chevron, legal links wrapping in 3 rows at x 32, then the copyright and address. A floating round blue call button (about 56px, white phone glyph, bottom-right, fixed) shows on phone only (read from the screenshot).

**On dark grounds**
- secondary button: glass pill: rgba(255,255,255,0.2) fill, 1px rgba(255,255,255,0.15) border, white display 16px text, 56-58px tall
- primary button: white pill, #023248 or #032D60 display 16px text
- link: white, underlined (value-column links)
- muted text: rgba(255,255,255,0.8) body; rgba(255,255,255,0.6) quote titles
- eyebrow: #04E1CB
- hairline: 1px rgba(255,255,255,0.15) (quote card) or rgba(255,255,255,0.4) (logo pills)
- logo variant: cloud logo always on white in the nav and footer; customer and partner logos render white on dark grounds

## Components

- **button white on blue** (observed): radius 9999, face display, fill #FFFFFF, text #023248, border none (cards: 1px solid rgba(255,255,255,0.3)), padding 16px 32px (hero, closing) / 16px 20px (everywhere else), height 56, padding x 20, font size 16, weight 500, text style 16px/24px display, -0.4px, example Start for free (151x56), Explore Headless Toolkit (215x56)
  - hover (our reading): background-color #EAF5FE
- **button glass on blue** (observed): radius 9999, face display, fill #FFFFFF33, text #FFFFFF, border 1px solid rgba(255,255,255,0.15), padding 16px 32px, height 58, padding x 32, font size 16, weight 500, ring px 1, ring #FFFFFF26, example Watch demo (161x58), Learn more in quote cards. #FFFFFF33 = rgba(255,255,255,0.2); ring #FFFFFF26 = rgba(255,255,255,0.15)
- **button bright** (observed): radius 9999, face display, fill #066AFE, text #FFFFFF, border 1px solid rgba(255,255,255,0.15), padding 16px 20px, height 48, padding x 20, font size 16, weight 500, example Watch all demos (165x48), ring px 1, ring #FFFFFF26
- **button nav green** (observed): radius 9999, face body, fill #2E844A, text #FFFFFF, padding 8px 24px, height 44, padding x 24, font size 16, weight 700, example Get started (138x44)
- **demo tab** (observed): fill rgba(255,255,255,0.55), active fill rgba(255,255,255,0.94), active ring 2px #BA01FF + 0 4px 8px rgba(186,2,255,0.3), shadow 0 4px 12px rgba(6,106,254,0.2), radius 9999, height 48, padding 12px 20px 12px 16px, icon 24px product icon, radius 6px, label 16px #001E5B
- **circle control** (observed): size 48px (demo) / 40px (carousel), fill rgba(255,255,255,0.6) (demo) / #FFFFFF (carousel), border 1px rgba(255,255,255,0.5), glyph #001E5B / #032D60, radius 9999
- **product card** (observed): radius 30, size 1152 x 589-659, fill linear-gradient(270deg, bright, dark) per product, padding 65px
- **dark panel** (observed): radius 32, fill linear-gradient(0.19deg, #001E5B 0.17%, #022AC0 82.83%, #066AFE 110.46%, #00B3FF 150.63%), padding 96px 64px
- **quote card** (observed): radius 24, fill rgba(255,255,255,0.05), border 1px solid rgba(255,255,255,0.15), padding 40px, mark <svg width="43" height="32" viewBox="0 0 43 32" fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg"><path d="M16.5832 32V16.4672H9.22675C9.22675 10.2774 10.8477 8.87591 16.4585 7.82481V0C5.61086 0.116787 0 6.65693 0 15.1825V32H16.5832ZM42.3932 32V16.4672H35.0367C35.0367 10.2774 36.6576 8.87591 42.2685 7.82481V0C31.4208 0.116787 25.81 6.65693 25.81 15.1825V32H42.3932Z"/></svg>
- **logo pill** (observed): radius 9999, height 50, padding 8px 16px, border 1px solid rgba(255,255,255,0.4), fill transparent, logo 32px tall white
- **story card** (observed): radius 27, size 960x540, overlay rgba(24,24,24,0.4) + bottom-left darkening
- **bento card** (observed): radius 16, padding 32px, fills #FCC003, #066AFE, photo over #7C3AED, #04E1CB, arrow 56px white circle, #032D60 north-east arrow
- **segmented tabs** (observed): track rgba(255,255,255,0.2) + 1px rgba(255,255,255,0.3), radius 9999, padding 8px, active #032D60 fill, white text, inactive #FFFFFF fill, #032D60 text, height 50, radius 9999
- **glass frame** (observed): css background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.2)), linear-gradient(125deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.5) 100%); border: 1px solid rgba(255,255,255,0.4); border-radius: 24px; padding: 4px 16px 16px; backdrop-filter: blur(24px); box-shadow: 0 26px 26px rgba(6,106,254,0.3), 0 50px 64px rgba(6,106,254,0.16), inset 0 1px 0 rgba(255,255,255,0.6); plus an inner gloss layer (inset 0, radius 16px): linear-gradient(rgba(255,255,255,0.35), transparent 16%), radius 24, stage well tabs row 72px tall (padding 12px 0 12px 4px), then a well: rgba(255,255,255,0.5) fill, radius 16px, padding 6px; the video sits inside it at radius 12px. The 125deg ramp peaks at 95% white at 45% across: the middle of the frame is almost white, the left edge periwinkle. This is what makes it read as luminous glass.
- **dome divider** (observed): height 80, path M720 0C985.756 0 1233.11 29.4157 1440 80H0C206.886 29.4157 454.244 0 720 0Z

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| kx-duration-xshort |  | 75ms | smallest elements (icons, toggles) | published |
| kx-duration-short |  | 150ms | small elements; hover and focus | published |
| kx-duration-normal |  | 250ms | medium elements | published |
| kx-duration-long |  | 400ms | large elements | published |
| kx-duration-xlong |  | 600ms | largest elements and view changes | published |
| kx-ease-in-out | cubic-bezier(0.3, 0, 0.15, 1) |  | elements moving within the view | published |
| kx-ease-out | cubic-bezier(0, 0.3, 0.15, 1) |  | elements entering | published |
| kx-ease-in | cubic-bezier(0.3, 0, 1, 0.3) |  | elements leaving | published |
| kx-ease-over | cubic-bezier(0.3, 1.75, 0.3, 1) |  | overshoot for charismatic moments | published |
| kx-ease-under-over | cubic-bezier(0.7, -0.4, 0.4, 1.4) |  | anticipate and overshoot | published |
| homepage-sticky-stack |  |  | product cards stick and stack while scrolling, a left icon rail tracks the active card; panels widen from an inset clip (32px 64px) to full bleed. Static state: cards in a list, panels full bleed | observed |
| homepage-loops |  |  | logo marquee scrolls left; story carousel and demo video autoplay, each with a visible pause button | observed |

## Icon tokens

Grid 8pt grid; four keyline shapes (circle, square, vertical and horizontal rectangle), stroke 1px at 16, 2px at 24 and 32, 4px at 48, 6px at 60 (published).
| Name | Size | Use |
|---|---|---|
| utility-16 | 16px |  |
| utility-24 | 24px |  |
| action-48 | 48px |  |
| object-60 | 60px |  |

## Signature moves

### The dome divider

Where: every ground change.
Do: 80px convex arch path M720 0C985.756 0 1233.11 29.4157 1440 80H0C206.886 29.4157 454.244 0 720 0Z filled with the next band's color. One per ground change.
Don't: use a wave, zigzag or diagonal.
Example: "Salesforce powers the Agentic Enterprise".

### Two-tone headline

Where: big light-ground H2s and the hero.
Do: navy #032D60 first line, the branded phrase in hero blue #022AC0 (on blue: white then teal #04E1CB). One accent phrase per headline.
Don't: highlight a random word, or use green or a gradient for the accent.
Example: "Salesforce powers the Agentic Enterprise", with "Agentic Enterprise" set as color.

### All-pill buttons

Where: every button.
Do: radius 9999px; white solid, 20% white glass or bright blue on blue grounds. No more than two buttons side by side.
Don't: square or slightly rounded buttons on the marketing page.
Example: "Start for free".

### Deep gradient product cards and 3D characters

Where: product cards, panels, stickers.
Do: navy-to-bright horizontal gradients with radius 30px, product UI on the right; glossy 3D sparkles, Astro, hearts and cursors break the frame edges. One or two 3D accents per band.
Don't: flat clip-art icons or stock photos inside the product cards.
Example: "Deploy trusted agents that act with purpose".

## Messaging: rules

The homepage repeats one promise (the #1 AI CRM for the Agentic Enterprise) and backs it with product cards, an open-ecosystem panel, values, customer stories and analyst recognition.

Why it works: Each band proves one pillar in order: platform, openness, trust/values, customers, recognition.

- Lead with the promise, then prove it band by band
- Name products exactly

Sources: https://www.salesforce.com/ (2026-10-31), https://www.salesforce.com/company/our-story/

## Voice: rules

Brand Central publishes only a direction ("tighter, brighter, and bolder"); SLDS links its voice guide as a download. The homepage voice: second person, short sentences, confident claims, spaced dashes, contractions.

Why it works: Plain words keep a very large product range understandable.

- Sentence case
- Second person
- Verb-first buttons
- Spaced dashes
- Contractions

Not published: a web version of the current voice and tone guide (download only).

Real examples, to look at on Salesforce's own pages (not for reuse):
- SLDS Voice and Tone page: https://v1.lightningdesignsystem.com/guidelines/voice-and-tone/

Sources: https://brand.salesforce.com/, https://v1.lightningdesignsystem.com/guidelines/voice-and-tone/, https://www.salesforce.com/ (2026-10-31)

## Logo: rules

Two logos, used in order: the cloud logo (primary, most recognizable) and the horizontal logo for layouts where the cloud can't read.

Why it works: The cloud is the brand's best-known asset, so it always leads.

|  |  |
|---|---|
| Cloud clear space | "sales" height and width |
| Cloud minimum | 40px / 0.75 in |
| Horizontal clear space | cloud shape |
| Horizontal minimum | 96px / 1 in |
| Placements | 8 approved |

- Cloud logo clear space = height and width of "sales" on all sides
- Cloud logo minimum 40px digital, 0.75 in (2 cm) print
- Horizontal logo clear space = the cloud shape on all sides
- Horizontal logo minimum 96px digital, 1 in (2.5 cm) print
- Below minimum size use the cloud symbol alone, without the wordmark
- Eight approved placement positions; let the key information lead
- Don't alter the logo
- Don't go below the minimum sizes with the wordmark

Real examples, to look at on Salesforce's own pages (not for reuse):
- Salesforce Brand Central: https://brand.salesforce.com/

Sources: https://brand.salesforce.com/

## Color: rules

SLDS publishes a numeric color system: 13 hues (blue, cloud blue, green, hot orange, indigo, orange, pink, purple, red, teal, violet, yellow, neutral), each a lane from 10 (dark) to 95, plus white. Primary palette: red, orange, green, blue, cloud blue; secondary adds hot orange, yellow, teal, indigo, purple, violet, pink. The homepage leans on Blue 20 navy, Cloud Blue 95/80 sky grounds, Teal 80 and two brighter blues not in SLDS 1.

Why it works: Numbered steps make contrast automatic: 50 points apart passes 4.5:1, 40 points passes 3:1.

|  |  |
|---|---|
| 50-point rule | 4.5:1+ |
| 40-point rule | 3:1+ |
| Button | Blue 50, hover Blue 40 |

- Text: Neutral 10 and Neutral 30; placeholder Neutral 50
- Primary background white (Neutral 100); Neutral 95 sparingly
- Messaging: green success, orange warning, red error, light gray info, dark gray offline
- Hover: one color step (10 points) darker on light UI, lighter on dark UI; never a different hue
- Focus: one global blue outline halo
- Use one icon color across an experience
- Transparencies only for decorative UI
- Don't use different hues for hover
- Don't rely on color alone for an interaction
- Don't use low-contrast colors for functional items

Do and don't:
- Do: "Salesforce powers the Agentic Enterprise". Navy Blue 20 on Cloud Blue 95.
- Don't: "Salesforce powers the Agentic Enterprise". Blue on sky blue: too few points apart to pass contrast.

Real examples, to look at on Salesforce's own pages (not for reuse):
- SLDS color palettes: https://v1.lightningdesignsystem.com/guidelines/color/color-palettes/
- The numerical color system: https://v1.lightningdesignsystem.com/guidelines/color/our-color-system/

Sources: https://v1.lightningdesignsystem.com/guidelines/color/color-palettes/, https://v1.lightningdesignsystem.com/guidelines/color/our-color-system/, https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/, https://www.salesforce.com/ (2026-10-31)

## Typography: rules

The marketing site pairs ITC Avant Garde (headlines, buttons, even the hero lead) with Salesforce Sans (body, nav, footer); the FAQ uses a bold "Avant Garde for Salesforce" cut. The display face is used at a single weight.

Why it works: A round geometric display face echoes the cloud and the pills; a humanist sans keeps body copy readable.

- One display weight
- Headlines 72-80px on desktop, tight leading (1.0-1.1)
- Body 16-20px at 1.5

Not published: typography guidance (the SLDS typography page says new guidelines are coming); licensing terms for Salesforce Sans.

Real examples, to look at on Salesforce's own pages (not for reuse):
- SLDS typography page (guidelines pending): https://v1.lightningdesignsystem.com/guidelines/typography/

Sources: https://v1.lightningdesignsystem.com/guidelines/typography/, https://www.salesforce.com/ (2026-10-31)

## Graphic elements: rules

Dome dividers between every ground change, glass frames, deep gradient product cards with 30px corners, outlined logo pills, and glossy 3D sparkles, Astro and cursor characters.

Why it works: Rounded containers and friendly 3D props make a dense product story feel light.

- One dome per ground change
- Corners 16-32px on containers, pills on buttons
- 3D accents overlap container edges

Do and don't:
- Do: "Start for free". White pill on hero blue.
- Don't: "Start for free". Green is for the nav Get started only.

Sources: https://www.salesforce.com/ (2026-10-31)

## Iconography: rules

SLDS defines five icon families: utility, object, action, doctype and product. Professional and playful: simple, approachable, legible, with negative space and large rounded corners.

Why it works: Consistent grids and strokes keep thousands of icons coherent.

|  |  |
|---|---|
| Grid | 8pt |
| Utility 24 | 2px stroke, 2px radius |

- 8pt grid; four keyline shapes
- Utility 16px/1px stroke, 24px/2px; 48px/4px; 60px/6px
- Object icons: white glyph on a 4px-rounded colored square
- Action icons: white glyph on a colored circle
- Mobile tap targets 48px Android, 44px iOS, 8px between icons
- Write alt text for what an icon does, not what it shows

Real examples, to look at on Salesforce's own pages (not for reuse):
- SLDS iconography: https://v1.lightningdesignsystem.com/guidelines/iconography/

Sources: https://v1.lightningdesignsystem.com/guidelines/iconography/

## Illustration: rules

SLDS empty-state illustrations are friendly scenes used with a short headline and body; the homepage uses glossy 3D renders (sparkles, Astro, hearts, cursors, badges).

Why it works: Illustration adds energy and the Ohana spirit without overwhelming (paraphrase).

- Empty state: a message is required; illustration and call to action optional
- Keep message lines under 66 characters
- Fun lives in the writing too, not only the art

Sources: https://v1.lightningdesignsystem.com/guidelines/empty-state/, https://www.salesforce.com/ (2026-10-31)

## Photography: rules

Real customers and real stores in video form (Pandora, Williams-Sonoma), under a dark scrim, inside 27px-rounded cards; community photography in the bento.

Why it works: Real customers carry the proof.

- Always a dark scrim under white type
- Rounded frames, never full-bleed photos

Not published: a photography guideline.

Sources: https://www.salesforce.com/ (2026-10-31)

## Motion: rules

Kinetics: motion is functional, structural and expressive, with four qualities: nimble, sensible, considerate, charismatic. Published duration and easing hooks.

Why it works: Motion should speed users up and orient them, and charm only when it helps.

|  |  |
|---|---|
| Durations | 75 / 150 / 250 / 400 / 600ms |
| Ease in-out | cubic-bezier(0.3, 0, 0.15, 1) |

- Smaller elements move faster (75-150ms), larger slower (400-600ms)
- Respect prefers-reduced-motion: turn animation off
- Give autoplaying content a pause control
- Use color and shadow changes sparingly

Real examples, to look at on Salesforce's own pages (not for reuse):
- SLDS Kinetics: https://v1.lightningdesignsystem.com/kinetics/overview/

Sources: https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/, https://v1.lightningdesignsystem.com/kinetics/personality/, https://v1.lightningdesignsystem.com/kinetics/choreography/making-things-move/, https://v1.lightningdesignsystem.com/kinetics/accessible-kinetics/

## Interface and layout: rules

1152px content column, 144px margins at 1440; centred section headlines; text-left/media-right inside big rounded cards; 64px between stacked cards.

Why it works: Big centred statements, then proof in contained cards.

- Container 1152
- Centre section H2s
- Cards hold a two-column split

Real examples, to look at on Salesforce's own pages (not for reuse):
- SLDS layout: https://v1.lightningdesignsystem.com/guidelines/layout/

Sources: https://v1.lightningdesignsystem.com/guidelines/layout/, https://www.salesforce.com/ (2026-10-31)

## Rules: rules

Logo, color, icon and motion rules come from Brand Central and SLDS; page rules are observed.

- Cloud logo first, horizontal only when needed
- Hover = one step darker
- One icon color per experience
- Pause control on every loop
- Pill buttons only
- Dome dividers between grounds

Sources: https://brand.salesforce.com/, https://v1.lightningdesignsystem.com/guidelines/color/color-palettes/, https://v1.lightningdesignsystem.com/guidelines/iconography/, https://v1.lightningdesignsystem.com/kinetics/accessible-kinetics/, https://www.salesforce.com/ (2026-10-31)

## Campaigns

### Tighter, brighter, bolder refresh (2026)

Brand Central introduces a refreshed expression for the agentic enterprise era.

How the system shows: Brighter blues, two-tone headlines, 3D characters and the dome divider on the homepage.
Why it works: One clear idea (Agentic Enterprise) told in a lighter, friendlier visual system.
Channels: identity, web. Source: https://brand.salesforce.com/

## Applications

| Format | What | Source |
|---|---|---|
| product UI | The Lightning Design System: the same numbered palette, icon families and Kinetics in the Salesforce app. | https://v1.lightningdesignsystem.com/guidelines/overview/ |

## By format

How our engine applies Salesforce's system to each format: our recipe from their rules and homepage, not something Salesforce publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way salesforce.com is built (kit.spec.page): white sticky nav, hero blue #022AC0 hero with an 80px white headline whose second line is teal, white and glass pill buttons, a dome divider into Cloud Blue 95, navy two-tone 72px headlines, big rounded gradient cards, a white FAQ and footer. | Which product cards and panels, how many 3D accents, sky-blue or deep-blue middle bands. |
| Deck | 3 | Cloud logo in a corner, navy two-tone headlines on Cloud Blue 95, or white on hero blue; pill-shaped labels. | Gradient card slides for products. |
| Social | 3 | One big two-tone headline, a white pill, one 3D accent. | Ground: hero blue or sky blue. |

## Checks before anything ships

- **Logo hidden**: Cover the cloud: it should still read as Salesforce from the round geometric headlines, navy-and-blue two-tone, pills and dome dividers.
- **Swap test**: Put another CRM's logo on it. If the domes, Cloud Blue grounds and 3D characters still say Salesforce, the system is carrying it.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Salesforce's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Typography guidelines: not published (SLDS typography page says new guidelines are coming).
- Detailed brand guidelines, color and type rules for marketing: behind the Brand Central login, not public.
- Hero blue #022AC0, bright blue #066AFE and deep navy #001E5B: observed on the site, not in the published SLDS 1 palette.
- Voice and tone: a downloadable guide only; the web voice rules here are observed from the homepage.
- Photography guidance: not published.
- Color proportions: not published.
- Breakpoints: not measured.

Logos and reference images belong to Salesforce. Look at them on Salesforce's own pages; don't reuse them.