{ "schema": "brand-kit@2", "palette": { "paper": "#FFFFFF", "surface": "#EAF5FE", "ink": "#032D60", "ink_muted": "#444444", "accent": "#022AC0", "on_accent": "#FFFFFF", "accent_secondary": "#04E1CB", "night": "#001E5B", "on_night": "#FFFFFF", "extras": [ { "name": "Blue 20 (SLDS)", "hex": "#032D60", "role": "Headline and body ink on light grounds; the text color inside white buttons and on the yellow/teal resource cards", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/", "site_use": "Light-section H2s, leads, card text, nav links (observed https://www.salesforce.com/ (2026-10-31))" }, { "name": "Hero blue", "hex": "#022AC0", "role": "The page ground of the hero, demo and logo bands; the second-line accent color in two-tone light-ground headlines (\"Agentic Enterprise\")", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "site_use": "Not in the published SLDS 1 palette; read from computed styles" }, { "name": "Bright blue", "hex": "#066AFE", "role": "Bright end of the product-card gradients; \"Watch all demos\" fill; Trailhead card fill; G2 accent number", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Teal 80 (SLDS)", "hex": "#04E1CB", "role": "Hero accent line \"#1 AI CRM\", eyebrows on dark panels, community card fill", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Cloud Blue 20 (SLDS)", "hex": "#023248", "role": "Text inside white pill buttons on blue grounds", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Deep navy", "hex": "#001E5B", "role": "Dark end of the product-card and panel gradients; demo tab labels; FAQ heading", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Cloud Blue 95 (SLDS)", "hex": "#EAF5FE", "role": "Light section ground (top of the light gradient); first dome divider fill", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Cloud Blue 80 (SLDS)", "hex": "#90D0FE", "role": "Light-blue section ground (bottom of the light gradient; customers band; second dome divider)", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Green 50 (SLDS)", "hex": "#2E844A", "role": "The one green: nav \"Get started\" pill", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Blue 40 (SLDS)", "hex": "#0B5CAB", "role": "Footer link text; skip link", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Blue 50 (SLDS)", "hex": "#0176D3", "role": "SLDS brand/action blue (primary button default); hover steps to Blue 40", "prov": "published", "source": "https://v1.lightningdesignsystem.com/guidelines/color/our-color-system/" }, { "name": "Violet 30 (SLDS)", "hex": "#730394", "role": "FAQ question text", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Violet 50 (SLDS)", "hex": "#BA01FF", "role": "Active demo-tab ring", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Neutral 10 (SLDS)", "hex": "#181818", "role": "FAQ answer text; card video overlay base", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Neutral 30 (SLDS)", "hex": "#444444", "role": "Footer column headings and phone line", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Neutral 90 (SLDS)", "hex": "#E5E5E5", "role": "FAQ divider hairlines", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Neutral 95 (SLDS)", "hex": "#F3F3F3", "role": "Secondary background in product UI", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Body default", "hex": "#080707", "role": "The page root text color (body)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Footer bar navy", "hex": "#032E61", "role": "Bottom legal bar of the footer", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Yellow 80 (SLDS)", "hex": "#FCC003", "role": "Trailhead learning card fill", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Teal 20 (SLDS)", "hex": "#023434", "role": "Dark end of the Customer 360 card gradient", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Customer 360 teal", "hex": "#1F827C", "role": "Bright end of the Customer 360 card gradient", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Indigo 50 (SLDS)", "hex": "#5867E8", "role": "Bright end of the Data 360 card gradient", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Indigo 20 (SLDS)", "hex": "#321D71", "role": "Dark end of the Data 360 card gradient", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "AIforce blue", "hex": "#3451DE", "role": "Bright end of the AIforce card gradient", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "AIforce navy", "hex": "#001E4A", "role": "Dark end of the AIforce card gradient", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Cloud logo blue", "hex": "#00B3FF", "role": "The cloud in the Salesforce logo; top stop of the dark-panel gradient", "prov": "observed", "source": "https://wp.sfdcdigital.com/en-us/wp-content/uploads/sites/4/2024/11/logo-salesforce.svg (2026-10-31)" }, { "name": "Resources violet", "hex": "#D17DFE", "role": "Bottom of the resources band gradient (from Hero blue)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Community violet", "hex": "#7C3AED", "role": "Ground behind the community photo card", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Red 50 (SLDS)", "hex": "#EA001E", "role": "Messaging: error", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Orange 60 (SLDS)", "hex": "#DD7A01", "role": "Messaging: warning", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Green 60 (SLDS)", "hex": "#3BA755", "role": "Messaging: success", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Cloud Blue 60 (SLDS)", "hex": "#0D9DDA", "role": "Primary palette pattern 5 (Cloud blue)", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Hot Orange 60 (SLDS)", "hex": "#FF5D2D", "role": "Secondary palette: hot orange", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Purple 50 (SLDS)", "hex": "#9050E9", "role": "Secondary palette: purple", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Pink 50 (SLDS)", "hex": "#E3066A", "role": "Secondary palette: pink", "prov": "published", "source": "https://v1.lightningdesignsystem.com/accessibility/global-color-styling-hooks/" }, { "name": "Glass rim, left (rendered)", "hex": "#8FA1E4", "role": "How the demo frame renders over the blue at its left edge (pixel read from the reference capture)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Glass rim, right (rendered)", "hex": "#BEC8EF", "role": "Demo frame right edge as rendered", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Glass rim, bottom (rendered)", "hex": "#DFE5F8", "role": "Demo frame bottom edge as rendered: near white", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Glass stage (rendered)", "hex": "#F8F3FE", "role": "The light lavender inside the demo stage", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Caption violet top", "hex": "#8324AA", "role": "Phone demo caption card, top-left (rendered)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Caption violet bottom", "hex": "#692289", "role": "Phone demo caption card, bottom-right (rendered)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Social glyph gray", "hex": "#59575C", "role": "Footer social icons (fill in the supplied SVGs)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "Glass rim, top-left (rendered)", "hex": "#AEBBEB", "role": "Demo frame top-left as rendered (pixel read from the reference capture)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } ] }, "typography": { "display": { "family": "Poppins", "steal_family": "Poppins", "weight": 500, "tracking": -0.012, "line_height": 1.1, "fallback_stack": "Poppins, \"Century Gothic\", \"Helvetica Neue\", Arial, sans-serif", "real": "ITC Avant Garde Gothic (the site loads it as \"ITC Avant Garde\", one face declared at weight 500 and used at CSS weight 400); commercial license (ITC / Monotype)", "stand_in": true, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "site": { "weight": "400 in CSS (the loaded face is the 500 Medium/Demi cut)", "size_px": "80/40 hero, 72/32 section, 42/24 card, 32, 24, 20, 18, 16", "line_height": "1.1 at 80, 1.0 at 72, 1.25 at 42 and 32, 1.5 at 16-20", "tracking": "-2px at 80 (hero), -0.4px on buttons, otherwise normal", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } }, "body": { "family": "Open Sans", "steal_family": "Open Sans", "weight": 400, "tracking": 0, "line_height": 1.5, "scale": 1, "fallback_stack": "\"Open Sans\", \"Segoe UI\", Arial, sans-serif", "real": "Salesforce Sans (Salesforce's own face; proprietary)", "stand_in": true, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "site": { "weights": "400 body, 700 nav and footer", "sizes_px": "20, 18, 16, 14, 12", "line_height": "1.5 (1.625 at 16 in columns)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } }, "calibration": "Rendered on the live page (2026-10-31, headless Chrome) at 80px with -2px tracking, line \"Get started with the Agentic Enterprise\": ITC Avant Garde 1401px wide, x-height 56, cap 74 (per 100px). Poppins 500: 1470px (+4.9%), x-height 55, cap 70, closest x-height and ink; Poppins 400 1455 is too light; Outfit 500 1308, Urbanist 600 1320, Jost 500 1288, Questrial 1296 are narrower with smaller x-heights; Montserrat 500 1517 too wide. So Poppins 500 with tracking = real tracking minus 0.023em (-3.8px at 80, -1.6px at 72, -1px at 42). Body at 18px, line \"Everything your business runs on, your data, models, and workflows, are connected\": Salesforce Sans 694px, x-height 51; Open Sans 700px (+0.9%), x-height 54; Fira Sans 679; Istok Web 673; Lato 647. Open Sans 400 at normal tracking. ROUND 1 RESULT: subtracting the full 0.023em read as cramped next to the real face, so the book now uses half of it, -0.012em, and fixes line shapes with explicit line breaks instead. The tracking_px values in the type table ARE the stand-in values: apply them as written, never add a further correction. ROUND 2: weight is 500 for Poppins everywhere the display face is used (the type table's weight column already says 500); phone hero tracking -2px." }, "style": { "button_shape": "pill", "button_note": "Every button on the homepage is a full pill (radius 9999px): white solid, glass (20% white) or bright blue on dark; one green pill in the nav. SLDS product buttons are a different, small-radius system and are not used on the marketing page.", "corners": "large: 30px product cards, 32px panels, 24px glass frames and quote cards, 27px story cards, 16px bento cards", "linework": "almost none: 1px translucent white borders on glass and outlined pills", "motion": "Kinetics: nimble, sensible, considerate, charismatic; 75-600ms durations; the homepage adds sticky stacking and autoplay loops, each with pause", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "voice": { "tone": [ "Confident", "Optimistic", "Plain-spoken", "Customer-first" ], "notes": [ "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": [ { "id": "headline-case", "kind": "headline_case", "value": "sentence", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "note": "Sentence case; product names and the branded phrase \"Agentic Enterprise\" keep capitals" }, { "id": "second-person", "kind": "guidance", "text": "Address the reader as \"you/your\"; Salesforce speaks as \"we\" only in values copy", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "spaced-dash", "kind": "guidance", "text": "Use a spaced em dash (\"your data — working together\", \"work — all within\")", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "contractions", "kind": "guidance", "text": "Use contractions (you're, don't, we're)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "button-verbs", "kind": "guidance", "text": "Buttons start with a verb: Explore, Start, Watch, See, Read, Take, Learn", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "number-one", "kind": "guidance", "text": "Write the claim as \"#1 AI CRM\" with the numeral and hash", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "product-names", "kind": "guidance", "text": "Product names keep their exact form: Agentforce, Data 360, Customer 360, AIforce, Slack, Tableau, AgentExchange, Trailhead", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "no-terminal-period", "kind": "guidance", "text": "Headlines carry no closing period, except the bento card lines written as two short sentences", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "ui-text-direct", "kind": "guidance", "text": "UI text is concise, conversational and direct; use plain English and active voice", "prov": "published", "source": "https://resources.docs.salesforce.com/198/latest/en-us/sfdc/pdf/salesforce_pubs_style_guide.pdf", "note": "Salesforce Style Guide for Documentation and UI Text, Winter '16 PDF (old edition)" } ], "approved": { "phrases": [ "Agentic Enterprise", "#1 AI CRM", "humans and agents", "trusted", "grounded in your data" ], "words": [] }, "banned": [], "is_not": [ [ "Confident", "Boastful without proof" ], [ "Optimistic", "Hype without a product" ], [ "Plain-spoken", "Jargon-heavy" ], [ "Bold", "Loud" ] ], "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "spec": { "source": "https://www.salesforce.com/", "how": "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.", "provenance": "observed", "motion": [ { "name": "kx-duration-xshort", "duration_ms": 75, "use": "smallest elements (icons, toggles)", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-duration-short", "duration_ms": 150, "use": "small elements; hover and focus", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-duration-normal", "duration_ms": 250, "use": "medium elements", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-duration-long", "duration_ms": 400, "use": "large elements", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-duration-xlong", "duration_ms": 600, "use": "largest elements and view changes", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-ease-in-out", "easing": "cubic-bezier(0.3, 0, 0.15, 1)", "use": "elements moving within the view", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-ease-out", "easing": "cubic-bezier(0, 0.3, 0.15, 1)", "use": "elements entering", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-ease-in", "easing": "cubic-bezier(0.3, 0, 1, 0.3)", "use": "elements leaving", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-ease-over", "easing": "cubic-bezier(0.3, 1.75, 0.3, 1)", "use": "overshoot for charismatic moments", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "kx-ease-under-over", "easing": "cubic-bezier(0.7, -0.4, 0.4, 1.4)", "use": "anticipate and overshoot", "prov": "published", "source": "https://v1.lightningdesignsystem.com/kinetics/implementing-kinetics/" }, { "name": "homepage-sticky-stack", "use": "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", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "name": "homepage-loops", "use": "logo marquee scrolls left; story carousel and demo video autoplay, each with a visible pause button", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } ], "icons": { "grid": "8pt grid; four keyline shapes (circle, square, vertical and horizontal rectangle)", "sizes": [ { "name": "utility-16", "px": 16, "stroke_px": 1, "corner_radius_px": 1 }, { "name": "utility-24", "px": 24, "stroke_px": 2, "corner_radius_px": 2 }, { "name": "action-48", "px": 48, "stroke_px": 4, "corner_radius_px": 4 }, { "name": "object-60", "px": 60, "stroke_px": 6, "corner_radius_px": 6 } ], "stroke": "1px at 16, 2px at 24 and 32, 4px at 48, 6px at 60", "color": "utility icons any accessible color, no background; object icons white glyphs on 4px-rounded colored squares; action icons white glyphs on colored circles", "rule": "simple, approachable, legible; distinguished by negative space and large rounded corners", "prov": "published", "source": "https://v1.lightningdesignsystem.com/guidelines/iconography/" }, "signature": [ { "id": "dome", "name": "The dome divider", "where": "every ground change", "spec": "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", "once": "one per ground change", "example": { "ground": "#022AC0", "text": "Salesforce powers the Agentic Enterprise", "edge": "curve", "edge_to": "#EAF5FE" }, "dont": "use a wave, zigzag or diagonal", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "two-tone-headline", "name": "Two-tone headline", "where": "big light-ground H2s and the hero", "spec": "navy #032D60 first line, the branded phrase in hero blue #022AC0 (on blue: white then teal #04E1CB)", "once": "one accent phrase per headline", "example": { "ground": "#EAF5FE", "text": "Salesforce powers the Agentic Enterprise", "mark": "Agentic Enterprise", "mark_style": "color", "mark_color": "#022AC0", "ink": "#032D60" }, "dont_example": { "ground": "#EAF5FE", "text": "Salesforce powers the Agentic Enterprise", "mark": "powers", "mark_style": "underline", "mark_color": "#2E844A" }, "dont": "highlight a random word, or use green or a gradient for the accent", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "pill-buttons", "name": "All-pill buttons", "where": "every button", "spec": "radius 9999px; white solid, 20% white glass or bright blue on blue grounds", "once": "no more than two buttons side by side", "example": { "ground": "#022AC0", "text": "Start for free", "button": true, "button_fill": "#FFFFFF" }, "dont": "square or slightly rounded buttons on the marketing page", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "id": "gradient-cards", "name": "Deep gradient product cards and 3D characters", "where": "product cards, panels, stickers", "spec": "navy-to-bright horizontal gradients with radius 30px, product UI on the right; glossy 3D sparkles, Astro, hearts and cursors break the frame edges", "once": "one or two 3D accents per band", "example": { "ground": "#001E5B", "text": "Deploy trusted agents that act with purpose", "edge": "gradient", "edge_to": "#066AFE" }, "dont": "flat clip-art icons or stock photos inside the product cards", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } ], "page": { "source": "https://www.salesforce.com/", "date": "2026-10-31", "prov": "observed", "voices": "One voice on this page: short, confident marketing English in second person (\"your agents, your team, your data\"), sentence case, product names and \"Agentic Enterprise\" capitalized. A landing page follows this homepage voice.", "how_captured": "Headless Chrome at 1440x900 and 390x844, scrolled through so every scroll-revealed element is in its revealed state. The reference images are stitched viewport captures, so sticky elements (nav, left product rail) can repeat; build them once.", "nav": { "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\"" ] }, "sections": [ { "name": "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" ] }, { "name": "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" ] }, { "name": "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" ] }, { "name": "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, , ): 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)" }, { "name": "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\", \"\", \"{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: (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 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)" }, { "name": "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)" }, { "name": "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)" }, { "name": "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)" }, { "name": "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" ] }, { "name": "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 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)." }, "dark_ground": { "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" }, "line_breaks": { "note": "Force these breaks with
(desktop) and let phone wrap to the stated line count; if the stand-in overflows, reduce the measure, never the font size.", "hero H1": "desktop: \"Get started with the\" / \"#1 AI CRM\"; phone 2 lines, same break", "demo H2": "desktop 1 line; phone 3 lines", "logos H2": "desktop: \"Customers of every size, business, and\" / \"industry succeed with Salesforce\"; phone 3 lines", "cards H2": "desktop: \"Salesforce powers the\" / \"Agentic Enterprise\"; phone 2 lines", "open H2": "desktop: \"Salesforce is open to every\" / \"human, agent, and platform\"; phone 3 lines", "customers H2": "desktop: \"Meet the customers who are\" / \"building their Agentic Enterprise\"; phone 3 lines", "G2 H2": "desktop: \"Salesforce recognized as a Leader across\" / \"397 G2 Grid® Reports\" (the accent phrase is the whole second line); phone 4-5 lines", "resources H2": "desktop: \"Your Agentic Enterprise deep\" / \"dive starts here\"; phone 2 lines", "closing H2": "desktop: \"Get started with the\" / \"#1 AI CRM\"; phone 2 lines", "FAQ H2": "desktop 1 line; phone 2 lines", "leads": "every light-section lead at 768px sets in 2-3 lines as measured; if Open Sans makes one line more, widen the measure to 800px" }, "phone_anchors": { "note": "Phone y positions measured at 390x844 (2026-10-31); keep these gaps, they are generous on purpose.", "hero H1": 104, "hero lead": 220, "Start for free": 360, "Watch demo": 432, "demo H2": 570, "demo frame": 692, "Watch all demos": 1256, "logos H2": 1410, "first dome": 1764, "cards H2": 1849, "cards lead": 1945, "card 1 H2": 2186, "card 2 H2": 2608, "card 3 H2": 3102, "card 4 H2": 3582, "card 5 H2": 4048, "open H2": 5326, "open lead": 5462, "panel 1 H2": 5701, "panel 2 H2": 7395, "values H2": 9114, "second divider": 11416, "customers H2": 11476, "G2 H2": 12326, "resources H2": 13168, "closing H2": 15019, "white dome": 15421, "FAQ H2": 15490, "page height": 16584 }, "two_tone": { "rule": "Only the words listed take the accent color; everything else in the headline stays the base color, even on the same line.", "hero / closing": "hero: \"#1 AI CRM\" in #04E1CB, the rest #FFFFFF; closing H2: all #FFFFFF", "cards H2": "\"Agentic Enterprise\" #022AC0; \"Salesforce powers the\" #032D60", "customers H2": "only \"Agentic Enterprise\" #022AC0; \"Meet the customers who are building their\" all #032D60 (line 2 starts navy \"building their\", then blue)", "G2 H2": "only \"397 G2 Grid® Reports\" #066AFE; \"Salesforce recognized as a Leader across\" #032D60 (\"across\" stays navy)", "open H2 / resources H2 / logos H2 / demo H2": "one color, no accent" } }, "bands": [ { "label": "Navigation", "ground": "#FFFFFF", "content": "logo, 7 menus, Contact Us, globe, Login, Get started", "desktop": "96px sticky", "phone": "56px: hamburger, logo, person, Get started", "anatomy": [ "Green #2E844A pill is the only green on the page" ] }, { "label": "Hero", "ground": "#022AC0", "content": "80px two-line H1 (2nd line teal), lead, 2 pills", "desktop": "y 96-582 centred", "phone": "centred, stacked full-width pills", "anatomy": [ "Lead uses the display face" ] }, { "label": "Demo frame", "ground": "#022AC0", "content": "32px H2, glass frame with tabs + demo video, sparkles", "desktop": "y 582-1462, frame 1152x728 r24", "phone": "tabs + video + violet caption card", "anatomy": [ "Glass, not white" ] }, { "label": "Logo marquee", "ground": "#022AC0", "content": "42px H2, white logo row", "desktop": "y 1462-1871", "phone": "3 logos visible", "anatomy": [] }, { "label": "Dome divider", "ground": "#EAF5FE", "content": "80px convex arch", "desktop": "y 1871", "phone": "same", "anatomy": [] }, { "label": "Product card stack", "ground": "gradient #EAF5FE to #90D0FE", "content": "72px two-tone H2, lead, 5 gradient cards, left rail, 900px spacer", "desktop": "y 1950-6658", "phone": "cards without images", "anatomy": [] }, { "label": "Open platform panels", "ground": "gradient #90D0FE to #EAF5FE, panels navy-to-blue", "content": "72px H2, lead, 3 dark full-bleed panels", "desktop": "y 6658-11172", "phone": "single column", "anatomy": [] }, { "label": "Customer stories", "ground": "#90D0FE", "content": "72px two-tone H2, 960x540 video cards, control pill", "desktop": "y 11171-12177", "phone": "narrow cards", "anatomy": [] }, { "label": "G2 card", "ground": "#90D0FE over #022AC0", "content": "domed light card, badges, stickers", "desktop": "y 12177-12991", "phone": "stacked", "anatomy": [] }, { "label": "Resources", "ground": "gradient #022AC0 to #D17DFE", "content": "72px H2, segmented tabs, 2x2 bento", "desktop": "y 12992-14420", "phone": "one column", "anatomy": [] }, { "label": "Closing CTA", "ground": "violet end of the same gradient", "content": "80px H2, white pill, note, sparkles, cursor", "desktop": "y 14420-15264", "phone": "full-width pill", "anatomy": [] }, { "label": "FAQ", "ground": "#FFFFFF", "content": "40px bold heading, accordion", "desktop": "y 15263-15906", "phone": "same, 16px questions", "anatomy": [] }, { "label": "Footer", "ground": "#FFFFFF then #032E61", "content": "logo, socials, 3 columns, legal bar", "desktop": "y 15906-16489", "phone": "legal bar only", "anatomy": [] } ], "layout": { "page_margin": { "desktop": 144, "phone": 16 }, "section_padding": { "desktop": 96, "phone": 64 }, "container_max": 1152, "hero_text_max": 1024, "columns": 2, "columns_phone": 1, "gutter": 24, "gutter_phone": 16, "card_gap": 64, "nav_height": 96, "note": "Content column max-w 1152 (x 144-1296) at 1440; hero 1024; resources grid 1200 (x 120). Big rounded cards and panels; centred headlines on most bands; two-column text-left/media-right inside cards and panels.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "type": [ { "role": "Hero H1 / closing H2", "id": "display-xxl", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 80, "phone": 40 }, "line_height": 1.1, "tracking_px": -3, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "tracking_phone_px": -2, "real_tracking_px": -2, "note": "Poppins 500, weight 500 (the real face is ITC Avant Garde at CSS 400). Desktop -3px; phone -2px so \"Get started with the\" fits 358px. Final values: add nothing.", "real_weight": 400 }, { "role": "Section H2 on light / resources", "id": "display-xl", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 72, "phone": 32 }, "line_height": 1, "tracking_px": -0.9, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "line_height_phone": 1.25, "real_tracking_px": 0, "tracking_phone_px": -0.4, "note": "Tracking given for Poppins 500 (the stand-in), final.", "real_weight": 400 }, { "role": "Card / panel H2, logo-band H2", "id": "display-l", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 42, "phone": 24 }, "line_height": 1.25, "tracking_px": -0.5, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "real_tracking_px": 0, "tracking_phone_px": -0.3, "note": "Tracking given for Poppins 500 (the stand-in), final.", "real_weight": 400 }, { "role": "Narrow bento title / demo H2", "id": "display-m", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 32, "phone": 24 }, "line_height": 1.25, "tracking_px": -0.6, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "real_tracking_px": -0.2, "tracking_phone_px": -0.5, "note": "Tracking given for Poppins 500 (the stand-in), final.", "real_weight": 400 }, { "role": "Story H3 / quote / sub-H3", "id": "display-s", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 24, "phone": 18 }, "line_height": 1.375, "tracking_px": -0.3, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "real_tracking_px": 0, "tracking_phone_px": -0.2, "note": "Tracking given for Poppins 500 (the stand-in), final.", "real_weight": 400 }, { "role": "Hero lead", "id": "display-lead", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 20, "phone": 18 }, "line_height": 1.5, "tracking_px": -0.24, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "real_tracking_px": 0, "tracking_phone_px": -0.2, "note": "Tracking given for Poppins 500 (the stand-in), final.", "real_weight": 400 }, { "role": "Column H3 / product label", "id": "display-xs", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 18, "phone": 18 }, "line_height": 1.25, "tracking_px": -0.2, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "real_tracking_px": 0, "tracking_phone_px": -0.2, "note": "Tracking given for Poppins 500 (the stand-in), final.", "real_weight": 400 }, { "role": "Buttons, eyebrows, chips", "id": "label", "face": "ITC Avant Garde (stand-in Poppins 500)", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.5, "tracking_px": -0.4, "weight": 500, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "note": "eyebrows +0.32px; chips +0.16px; tab pills -0.2px; small eyebrows 14px +0.28px uppercase Tracking given for Poppins 500 (the stand-in), final.", "real_tracking_px": -0.4, "tracking_phone_px": -0.4, "real_weight": 400 }, { "role": "Light-section lead", "id": "body-lead", "face": "Salesforce Sans (stand-in Open Sans 400)", "size": { "desktop": 20, "phone": 18 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "role": "Card / panel body", "id": "body-l", "face": "Salesforce Sans (stand-in Open Sans 400)", "size": { "desktop": 18, "phone": 16 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "role": "Column body", "id": "body-m", "face": "Salesforce Sans (stand-in Open Sans 400)", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.625, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "role": "Nav links", "id": "nav", "face": "Salesforce Sans Bold (stand-in Open Sans 700)", "size": { "desktop": 16, "phone": 16 }, "line_height": 1.75, "tracking_px": 0, "weight": 700, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "role": "Footer links / legal", "id": "body-xs", "face": "Salesforce Sans (stand-in Open Sans 400)", "size": { "desktop": 12, "phone": 12 }, "line_height": 1.5, "tracking_px": 0, "weight": 400, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "note": "footer column links are weight 700; legal links 400" }, { "role": "FAQ heading", "id": "faq-h", "face": "Avant Garde for Salesforce Bold (stand-in Poppins 700)", "size": { "desktop": 40, "phone": 32 }, "line_height": 1.2, "tracking_px": -0.32, "weight": 700, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "role": "FAQ question", "id": "faq-q", "face": "Avant Garde for Salesforce Bold (stand-in Poppins 700)", "size": { "desktop": 20, "phone": 16 }, "line_height": 1.4, "tracking_px": -0.08, "weight": 700, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } ], "components": { "button_white_on_blue": { "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "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)", "states": { "hover": { "prov": "inferred", "why": "SLDS: hover steps 10 points darker on light UI", "css": { "background-color": "#EAF5FE" } } } }, "button_glass_on_blue": { "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "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", "note": "#FFFFFF33 = rgba(255,255,255,0.2); ring #FFFFFF26 = rgba(255,255,255,0.15)" }, "button_bright": { "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "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": { "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "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": { "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", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "circle_control": { "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, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "product_card": { "radius": 30, "size": "1152 x 589-659", "fill": "linear-gradient(270deg, bright, dark) per product", "padding": "65px", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "dark_panel": { "radius": 32, "fill": "linear-gradient(0.19deg, #001E5B 0.17%, #022AC0 82.83%, #066AFE 110.46%, #00B3FF 150.63%)", "padding": "96px 64px", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "quote_card": { "radius": 24, "fill": "rgba(255,255,255,0.05)", "border": "1px solid rgba(255,255,255,0.15)", "padding": "40px", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "mark": "" }, "logo_pill": { "radius": 9999, "height": 50, "padding": "8px 16px", "border": "1px solid rgba(255,255,255,0.4)", "fill": "transparent", "logo": "32px tall white", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "story_card": { "radius": 27, "size": "960x540", "overlay": "rgba(24,24,24,0.4) + bottom-left darkening", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "bento_card": { "radius": 16, "padding": "32px", "fills": "#FCC003, #066AFE, photo over #7C3AED, #04E1CB", "arrow": "56px white circle, #032D60 north-east arrow", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "segmented_tabs": { "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, "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "glass_frame": { "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", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "note": "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": { "height": 80, "path": "M720 0C985.756 0 1233.11 29.4157 1440 80H0C206.886 29.4157 454.244 0 720 0Z", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } } }, "system": { "fixed": [ "The cloud logo, never altered", "Pill buttons", "Navy text on light, white on blue", "The dome divider" ], "flex": "How much 3D decoration, which product gradients, and whether a band is sky blue or deep blue.", "traits": [ { "is": "Tighter", "not": "Sprawling", "text": "The refreshed brand is described as tighter, brighter and bolder (paraphrase).", "source": "https://brand.salesforce.com/", "prov": "published" }, { "is": "Brighter", "not": "Corporate gray", "text": "Saturated blues, teal and yellow on light sky grounds.", "source": "https://www.salesforce.com/ (2026-10-31)", "prov": "observed" }, { "is": "Bolder", "not": "Timid", "text": "72-80px headlines and big claims (#1 AI CRM).", "source": "https://www.salesforce.com/ (2026-10-31)", "prov": "observed" }, { "is": "Nimble", "not": "Showy", "text": "Kinetics: motion keeps flow and makes tasks feel faster (paraphrase).", "source": "https://v1.lightningdesignsystem.com/kinetics/personality/", "prov": "published" }, { "is": "Charismatic", "not": "Mechanical", "text": "Kinetics turns up the charm for fun moments (paraphrase); 3D characters on the homepage.", "source": "https://v1.lightningdesignsystem.com/kinetics/personality/", "prov": "published" } ] }, "formats": [ { "format": "Landing page", "level": 2, "must": "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.", "flex": "Which product cards and panels, how many 3D accents, sky-blue or deep-blue middle bands." }, { "format": "Deck", "level": 3, "must": "Cloud logo in a corner, navy two-tone headlines on Cloud Blue 95, or white on hero blue; pill-shaped labels.", "flex": "Gradient card slides for products." }, { "format": "Social", "level": 3, "must": "One big two-tone headline, a white pill, one 3D accent.", "flex": "Ground: hero blue or sky blue." } ], "checks": [ { "name": "Logo hidden", "text": "Cover the cloud: it should still read as Salesforce from the round geometric headlines, navy-and-blue two-tone, pills and dome dividers." }, { "name": "Swap test", "text": "Put another CRM's logo on it. If the domes, Cloud Blue grounds and 3D characters still say Salesforce, the system is carrying it." } ], "examples": [ { "chapter": "color", "do": { "ground": "#EAF5FE", "text": "Salesforce powers the Agentic Enterprise", "ink": "#032D60" }, "do_caption": "Navy Blue 20 on Cloud Blue 95.", "dont": { "ground": "#90D0FE", "text": "Salesforce powers the Agentic Enterprise", "ink": "#0176D3" }, "dont_caption": "Blue on sky blue: too few points apart to pass contrast." }, { "chapter": "elements", "do": { "ground": "#022AC0", "text": "Start for free", "button": true, "button_fill": "#FFFFFF" }, "do_caption": "White pill on hero blue.", "dont": { "ground": "#022AC0", "text": "Start for free", "button": true, "button_fill": "#2E844A" }, "dont_caption": "Green is for the nav Get started only." } ], "make_it_yours": { "note": "Everything above transfers. These are Salesforce's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.", "replace": [ "identity", "purpose", "positioning", "messaging.pillars", "messaging.proof_points", "messaging.taglines", "messaging.boilerplate" ], "reference": { "purpose": { "mission": { "text": "Bring out the best in one another, deliver success to customers, and inspire the industry through actions (paraphrase).", "prov": "published", "source": "https://www.salesforce.com/company/our-story/" }, "story": { "text": "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).", "prov": "published", "source": "https://www.salesforce.com/company/our-story/", "paraphrase": true }, "values": [ { "name": "Trust", "means": "The #1 value: ethics and the integrity of the technology.", "prov": "published", "source": "https://www.salesforce.com/company/our-story/" }, { "name": "Customer Success", "means": "Help customers succeed and become a valued partner.", "prov": "published", "source": "https://www.salesforce.com/company/our-story/" }, { "name": "Innovation", "means": "Easy-to-use, integrated, scalable products with fast time to value.", "prov": "published", "source": "https://www.salesforce.com/company/our-story/" }, { "name": "Equality", "means": "A more inclusive, equitable workplace and world.", "prov": "published", "source": "https://www.salesforce.com/company/our-story/" }, { "name": "Sustainability", "means": "Use the platform to help customers reach environmental goals.", "prov": "published", "source": "https://www.salesforce.com/company/our-story/" } ] }, "positioning": { "statement": { "text": "The #1 AI CRM: one open, trusted platform bringing people, AI agents, apps and data together (paraphrase).", "prov": "observed", "source": "https://www.salesforce.com/company/our-story/" }, "category": { "text": "AI CRM (customer relationship management)", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "audience": { "text": "Businesses of every size and industry: SMB, mid-market and enterprise (paraphrase of the G2 copy).", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "problem": { "text": "AI that is fragmented and ungoverned: plenty of AI options, not enough coherence (paraphrase of the quoted IDC analyst).", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "promise": { "text": "Agents take the repetitive work inside guardrails you control, so people focus on decisions (paraphrase of the section lead).", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, "differentiators": [ { "text": "Business logic, workflows and data already in the platform (Customer 360, Data 360) ground every agent.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "text": "Trust built in, not bolted on.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "text": "Headless and open: works inside any AI, app or channel.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" }, { "text": "An ecosystem marketplace (AgentExchange) for agents, apps and partners.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } ], "alternatives": [ { "text": "Fragmented AI experimentation across point tools (paraphrase of the IDC quote on the homepage).", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)" } ] }, "messaging": { "taglines": [ { "text": "The #1 AI CRM", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "where": "page title and hero" }, { "text": "Business is the greatest platform for change", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "where": "values panel; a long-running Benioff line" } ], "attributes": [ "trusted", "agentic", "open" ], "key_messages": [], "boilerplate": { "text": "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).", "prov": "observed", "source": "https://www.salesforce.com/company/our-story/", "paraphrase": true }, "pillars": [ { "name": "Agentic Enterprise", "claim": "Humans and AI agents work together, each on what they do best.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "proof": [ "p-g2" ] }, { "name": "Trust", "claim": "Trust is the #1 value: guardrails you control, trust built in, not bolted on.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "proof": [ "p-values" ] }, { "name": "One platform, open to all", "claim": "Data, workflows and agents on one platform that works with every AI and app.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "proof": [ "p-ecosystem" ] }, { "name": "Customer success", "claim": "Customers of every size and industry succeed with Salesforce.", "prov": "observed", "source": "https://www.salesforce.com/ (2026-10-31)", "proof": [ "p-stories", "p-since" ] } ], "proof_points": [ { "id": "p-g2", "kind": "stat", "text": "Recognized as a Leader across 397 G2 Grid® Reports (homepage, 2026-10-31).", "source": "https://www.salesforce.com/ (2026-10-31)", "prov": "observed" }, { "id": "p-values", "kind": "fact", "text": "Five core values: Trust, Customer Success, Innovation, Equality, Sustainability.", "source": "https://www.salesforce.com/company/our-story/", "prov": "published" }, { "id": "p-pledge", "kind": "stat", "text": "More than 18,000 companies have joined Pledge 1%.", "source": "https://www.salesforce.com/company/our-story/", "prov": "published" }, { "id": "p-since", "kind": "fact", "text": "Since 1999, pioneering CRM in the cloud (SaaS).", "source": "https://www.salesforce.com/company/our-story/", "prov": "published" }, { "id": "p-stories", "kind": "customer", "text": "Named stories: Pandora, Williams-Sonoma, Pacers, Good360, Siemens, SharkNinja, Pearson.", "source": "https://www.salesforce.com/ (2026-10-31)", "prov": "observed" }, { "id": "p-ecosystem", "kind": "fact", "text": "Works with Claude, ChatGPT, Cursor, Gemini, Perplexity, Windsurf, Notion and Amazon Bedrock (homepage logo row).", "source": "https://www.salesforce.com/ (2026-10-31)", "prov": "observed" } ], "claim_boundaries": [ { "text": "Print the published count exactly (397 G2 Grid® Reports on 2026-10-31); never a rounded or animated value.", "prov": "inferred", "source": "https://www.salesforce.com/ (2026-10-31)" } ] } } } }