Agentic Enterprise
Humans and AI agents work together, each on what they do best. Observed
The system
Fixed, everywhere
- 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.
Source: salesforce.com/%20(2026-10-31)
How loud each format gets
Silent
Quiet
CalmLanding page
WarmDeckSocial
Loud
Loudest
Our engine's setting, built from their rules.
Every piece passes two checks
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.
Strategy
The #1 AI CRM: one open, trusted platform bringing people, AI agents, apps and data together (paraphrase). Observed
Trust
Trust is the #1 value: guardrails you control, trust built in, not bolted on. Observed
One platform, open to all
Data, workflows and agents on one platform that works with every AI and app. Observed
Customer success
Customers of every size and industry succeed with Salesforce. Observed
Full spec
- For Observed
- Businesses of every size and industry: SMB, mid-market and enterprise (paraphrase of the G2 copy).
- Problem Observed
- AI that is fragmented and ungoverned: plenty of AI options, not enough coherence (paraphrase of the quoted IDC analyst).
- Promise Observed
- Agents take the repetitive work inside guardrails you control, so people focus on decisions (paraphrase of the section lead).
- Mission Published
- Bring out the best in one another, deliver success to customers, and inspire the industry through actions (paraphrase).
Proof behind each pillar
- Agentic Enterprise. Recognized as a Leader across 397 G2 Grid® Reports (homepage, 2026-10-31).
- Trust. Five core values: Trust, Customer Success, Innovation, Equality, Sustainability.
- One platform, open to all. Works with Claude, ChatGPT, Cursor, Gemini, Perplexity, Windsurf, Notion and Amazon Bedrock (homepage logo row).
- Customer success. Named stories: Pandora, Williams-Sonoma, Pacers, Good360, Siemens, SharkNinja, Pearson.
- Customer success. Since 1999, pioneering CRM in the cloud (SaaS).
Story Published
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).
Values
Trust
The #1 value: ethics and the integrity of the technology.
PublishedCustomer Success
Help customers succeed and become a valued partner.
PublishedInnovation
Easy-to-use, integrated, scalable products with fast time to value.
PublishedEquality
A more inclusive, equitable workplace and world.
PublishedSustainability
Use the platform to help customers reach environmental goals.
PublishedCategory. AI CRM (customer relationship management) Observed
Why them
- Business logic, workflows and data already in the platform (Customer 360, Data 360) ground every agent. Observed
- Trust built in, not bolted on. Observed
- Headless and open: works inside any AI, app or channel. Observed
- An ecosystem marketplace (AgentExchange) for agents, apps and partners. Observed
Instead of
Fragmented AI experimentation across point tools (paraphrase of the IDC quote on the homepage).
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
They never claim
- Print the published count exactly (397 G2 Grid® Reports on 2026-10-31); never a rounded or animated value. Our reading
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.
Source: salesforce.com/%20(2026-10-31)salesforce.com/company/our-story
Personality and voice
Tighterbut not SprawlingPublished
Brighterbut not Corporate grayObserved
Bolderbut not TimidObserved
Nimblebut not ShowyPublished
Charismaticbut not MechanicalPublished
Plain words keep a very large product range understandable.
Full spec
- 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
ConfidentOptimisticPlain-spokenCustomer-first
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.
- Sentence case
- Second person
- Verb-first buttons
- Spaced dashes
- Contractions
- 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.
Source: brand.salesforce.comv1.lightningdesignsystem.com/kinetics/personalitysalesforce.com/%20(2026-10-31)
Not published: a web version of the current voice and tone guide (download only).
Source: brand.salesforce.comv1.lightningdesignsystem.com/guidelines/voice-and-tonesalesforce.com/%20(2026-10-31)
Logo
Official artwork is published at brand.salesforce.com (download link to salesforce.widen.net). The files here are the ones the homepage itself serves.
The cloud is the brand's best-known asset, so it always leads.
Full spec
- 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
| 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 |
Two logos, used in order: the cloud logo (primary, most recognizable) and the horizontal logo for layouts where the cloud can't read.
Source: brand.salesforce.com
Color
Salesforce powers the Agentic Enterprise
Salesforce powers the Agentic Enterprise
Numbered steps make contrast automatic: 50 points apart passes 4.5:1, 40 points passes 3:1.
Full spec
- 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
| 50-point rule | 4.5:1+ |
|---|---|
| 40-point rule | 3:1+ |
| Button | Blue 50, hover Blue 40 |
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.
Source: v1.lightningdesignsystem.com/guidelines/color/color-palettesv1.lightningdesignsystem.com/guidelines/color/our-color-systemv1.lightningdesignsystem.com/accessibility/global-color-styling-hookssalesforce.com/%20(2026-10-31)
Typography
The #1 AI CRM
A round geometric display face echoes the cloud and the pills; a humanist sans keeps body copy readable.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| ITC Avant Garde Gothic | Headlines, leads in the hero, buttons, eyebrows, chips | Commercial (ITC / Monotype); not open | Poppins Closest x-height (55 vs 56 per 100) and ink at weight 500; 4.9% wider, closed with -0.023em tracking. Calibrated on the live page. |
| Salesforce Sans | Body copy, nav, footer | Proprietary Salesforce face | Open Sans Line width within 1% at 18px; similar humanist forms. |
- One display weight
- Headlines 72-80px on desktop, tight leading (1.0-1.1)
- Body 16-20px at 1.5
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.
Not published: typography guidance (the SLDS typography page says new guidelines are coming); licensing terms for Salesforce Sans.
Source: v1.lightningdesignsystem.com/guidelines/typographysalesforce.com/%20(2026-10-31)
Graphic elements
Salesforce powers the Agentic Enterprise
The dome divider · every ground change
Salesforce powers the Agentic Enterprise
Salesforce powers the Agentic Enterprise
Two-tone headline · big light-ground H2s and the hero
Start for free
All-pill buttons · every button
Deploy trusted agents that act with purpose
Deep gradient product cards and 3D characters · product cards, panels, stickers
Specimens use sample copy, not Salesforce’s.
Rounded containers and friendly 3D props make a dense product story feel light.
Full spec
- One dome per ground change
- Corners 16-32px on containers, pills on buttons
- 3D accents overlap container edges
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.
Source: salesforce.com/%20(2026-10-31)
Iconography
Consistent grids and strokes keep thousands of icons coherent.
Full spec
- 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
| Grid | 8pt |
|---|---|
| Utility 24 | 2px stroke, 2px radius |
SLDS defines five icon families: utility, object, action, doctype and product. Professional and playful: simple, approachable, legible, with negative space and large rounded corners.
Illustration
Illustration adds energy and the Ohana spirit without overwhelming (paraphrase).
Full spec
- 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
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).
Source: v1.lightningdesignsystem.com/guidelines/empty-statesalesforce.com/%20(2026-10-31)
Photography
Real customers carry the proof.
Full spec
- Always a dark scrim under white type
- Rounded frames, never full-bleed photos
Real customers and real stores in video form (Pandora, Williams-Sonoma), under a dark scrim, inside 27px-rounded cards; community photography in the bento.
Not published: a photography guideline.
Source: salesforce.com/%20(2026-10-31)
Motion
elements moving within the view
elements entering
elements leaving
overshoot for charismatic moments
anticipate and overshoot
Motion should speed users up and orient them, and charm only when it helps.
Full spec
- 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
| Durations | 75 / 150 / 250 / 400 / 600ms |
|---|---|
| Ease in-out | cubic-bezier(0.3, 0, 0.15, 1) |
Kinetics: motion is functional, structural and expressive, with four qualities: nimble, sensible, considerate, charismatic. Published duration and easing hooks.
Source: v1.lightningdesignsystem.com/kinetics/implementing-kineticsv1.lightningdesignsystem.com/kinetics/personalityv1.lightningdesignsystem.com/kinetics/choreography/making-things-movev1.lightningdesignsystem.com/kinetics/accessible-kinetics
Interface & layout
The page, band by band
Hero
Demo frame
Logo marquee
Dome divider
Product card stack
Open platform panels
Customer stories
G2 card
Resources
Closing CTA
FAQ
Buttons
Full spec
1152px content column, 144px margins at 1440; centred section headlines; text-left/media-right inside big rounded cards; 64px between stacked cards.
Measured from salesforce.com's 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..
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 144px | 16px |
| Section padding | 96px | 64px |
| Hero text width | max 1024px, centered | full width |
| Card gap | 64px | 64px |
| Navigation | 96px | 96px |
Type, at size
Hero H1 / closing H2
Salesforce Sans · 80px (phone 40) · line 1.1 · tracking -3px · weight 500
Section H2 on light / resources
Salesforce Sans · 72px (phone 32) · line 1 · tracking -0.9px · weight 500
Card / panel H2, logo-band H2
Salesforce Sans · 42px (phone 24) · line 1.25 · tracking -0.5px · weight 500
Narrow bento title / demo H2
Salesforce Sans · 32px (phone 24) · line 1.25 · tracking -0.6px · weight 500
Story H3 / quote / sub-H3
Salesforce Sans · 24px (phone 18) · line 1.375 · tracking -0.3px · weight 500
Hero lead
Salesforce Sans · 20px (phone 18) · line 1.5 · tracking -0.24px · weight 500
Column H3 / product label
Salesforce Sans · 18px · line 1.25 · tracking -0.2px · weight 500
Buttons, eyebrows, chips
Salesforce Sans · 16px · line 1.5 · tracking -0.4px · weight 500
Light-section lead
Salesforce Sans · 20px (phone 18) · line 1.5 · weight 400
Card / panel body
Salesforce Sans · 18px (phone 16) · line 1.5 · weight 400
Column body
Salesforce Sans · 16px · line 1.625 · weight 400
Nav links
Salesforce Sans · 16px · line 1.75 · weight 700
Footer links / legal
Salesforce Sans · 12px · line 1.5 · weight 400
FAQ heading
Salesforce Sans · 40px (phone 32) · line 1.2 · tracking -0.32px · weight 700
FAQ question
Salesforce Sans · 20px (phone 16) · line 1.4 · tracking -0.08px · weight 700
- Motion
- Kinetics: nimble, sensible, considerate, charismatic; 75-600ms durations; the homepage adds sticky stacking and autoplay loops, each with pause
- Buttons
- pill
Page anatomy
How Salesforce’s own landing pages are built, observed on salesforce.com, 2026-10-31. The full measurements are in spec.md.
- Navigation
- 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.
- Hero
- 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).
- Demo frame: See what's possible
- 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.
- Customer logo marquee
- Two-line 42px white H2 centred, then a single row of white customer logos scrolling left (marquee) with a small pause button at right.
- Dome divider into the light section
- 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.
- Agentic Enterprise: stacked product cards
- 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.
- Open platform: three dark panels
- 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.
- Customer stories carousel
- 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.
- G2 recognition card
- 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.
- Resources bento with tabs
- 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.
- Closing CTA
- 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.
- FAQ
- White band: centred 40px bold navy heading, an 840px accordion with violet questions, the first open.
- Footer
- 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.
Source: v1.lightningdesignsystem.com/guidelines/layoutsalesforce.com/%20(2026-10-31)
In use
Tighter, brighter, bolder refresh · 2026
One clear idea (Agentic Enterprise) told in a lighter, friendlier visual system. Our reading
Full spec
How our engine applies Salesforce's system to each format: our recipe from their rules and homepage, not something Salesforce publishes.
- Tighter, brighter, bolder refresh. Brand Central introduces a refreshed expression for the agentic enterprise era. brand.salesforce.com
| Format | What they did | Source |
|---|---|---|
| product UI | The Lightning Design System: the same numbered palette, icon families and Kinetics in the Salesforce app. | v1.lightningdesignsystem.com/guidelines/overview |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Landing page | 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 | 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 | One big two-tone headline, a white pill, one 3D accent. | Ground: hero blue or sky blue. |
Ads
Rules
Do
- 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
Don’t
Source: brand.salesforce.comv1.lightningdesignsystem.com/guidelines/color/color-palettesv1.lightningdesignsystem.com/guidelines/iconographyv1.lightningdesignsystem.com/kinetics/accessible-kineticssalesforce.com/%20(2026-10-31)
Steal this kit
Your name and logo, Salesforce’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Salesforce doesn’t publish
- 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.
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-31. Not affiliated with Salesforce.