Salesforce

Overview

Salesforce embodies Enterprise Clarity—a design philosophy that transforms complex business operations into intuitive, purposeful interactions. The brand serves mid-market to enterprise organizations seeking to unify customer data, AI agents, and team workflows into a single platform. The aesthetic combines bold primary blues (#0176d3) with vibrant accent greens (#2e844a) and cyan accents (#04e1cb), creating a visual language that conveys both technological sophistication and approachable confidence. The UI evokes a sense of control and momentum: users feel empowered to act decisively, supported by clean typography (ITC Avant Garde for headlines, Salesforce Sans for body) and purposeful white space that reduces cognitive load.

The brand voice is direct, optimistic, and action-oriented. Salesforce speaks in the language of business outcomes—not features, but possibilities. Vocabulary patterns emphasize agency ('your agents, your team, your data'), integration ('working together'), and scale ('every customer, every part'). The tone avoids corporate jargon while maintaining enterprise credibility. Example sentence in brand voice: 'Your agents, your team, your data — working together so every customer interaction reflects your business at its best.'

Colors

The Salesforce color system is built on three strategic pillars: Primary Blue (#0176d3) for all primary actions and brand identity, Secondary Green (#2e844a) for success states and secondary CTAs, and Tertiary Cyan (#04e1cb) for highlights and accent elements. Primary Blue (#0176d3) dominates interactive elements—buttons, links, focus states—and appears on the hero background as a deep, energetic field. It pairs with white text (rgb(255, 255, 255)) for maximum contrast and legibility. Secondary Green (#2e844a) is reserved for affirmative actions ('Start for free', 'Get started') and success messaging, creating a visual distinction between primary navigation and conversion moments. The green hover state darkens to #1c3326 (a 40% darken) to maintain tactile feedback without losing brand char

Typography

The Salesforce type system uses a two-family approach: ITC Avant Garde (400 weight, 80px–48px) for display and headline hierarchy, and Salesforce Sans (400–600 weight, 18px–12px) for body and label hierarchy. This pairing creates visual distinction between aspirational messaging (headlines) and functional content (body). Display (80px, 400 weight, -0.02em letter-spacing) anchors hero sections with commanding presence; Headline-lg (48px, 400 weight) supports major section breaks; Headline-md (32px, 600 weight) introduces subsections with added emphasis. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and card content; Body-md (16px, 400 weight, 24px line-height) serves as the default body text. Label-md (14px, 600 weight, 20px line-height) and Label-sm (12px

Layout

Salesforce uses a 12-column fluid grid with a max-width of 1280px, allowing responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The gutter is consistently 24px, providing breathing room between content blocks. Section separation uses lg spacing (40px) for major rhythm breaks (hero to feature section, feature to testimonial), md spacing (24px) for subsection transitions, and sm spacing (12px) for internal card or list item spacing. The container max-width of 1280px ensures content remains scannable on ultra-wide displays without excessive line lengths. Hero sections span full-width with internal padding of 40px–64px (lg to xl spacing) to create a sense of expansiveness. Cards and content blocks use 24px padding (md spacing) internally, with 16p

Elevation & Depth

Salesforce uses a three-tier shadow system to convey depth and interaction states without relying on color shifts. Level 1 (Base/Flat): No shadow; used for primary surfaces, inputs, and flat UI elements. Level 2 (Raised): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); applied to cards, modals, and interactive elements in their default state. Level 3 (Elevated): box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3); reserved for hover states on cards, dropdowns, and floating elements to signal interactivity. Shadows use a consistent blur radius (8px for Level 2, 7px for Level 3) and vertical offset (3px and 5px

Shapes

Salesforce employs a 'Purposeful Roundness' philosophy: radius values are chosen to signal interaction type and hierarchy. Buttons use full radius (9999px) to emphasize their role as primary affordances and to create a friendly, approachable feel that softens the enterprise context. Cards and containers use lg radius (16px) to balance modern aesthetics with professional restraint—rounded enough to feel contemporary, sharp enough to maintain clarity. Form inputs use sm radius (4px) to signal precision and data entry, creating visual distinction from action buttons. Badges and accent elements us

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use {colors.primary} (#0176d3) background with white text, 9999px radius, 12px vertical × 24px horizontal padding, and 48px height. Hover state (button-primary-hover) darkens to #0b5cab with a 200ms transition. Secondary buttons (button-secondary) use {colors.secondary} (#2e844a) for affirmative actions like 'Start for free', with identical sizing and full radius. Tertiary buttons (button-tertiary) use a semi-transparent white background (rgba(255, 255, 255, 0.55)) with a 1px border at rgba(255, 255, 255, 0.3), typically used for secondary CTAs like 'Watch demo' on colored backgrounds. All buttons use {typography.label-md} (14px, 600 weight) and support focus states with a 3px outline at rgba(

Do's and Don'ts

**Do**

• Do use Primary Blue (#0176d3) for all primary CTAs, links, and focus states—it is the brand's signature accent and should dominate interactive moments.
• Do pair Secondary Green (#2e844a) with Primary Blue to create visual distinction between primary navigation and conversion actions ('Start for free' vs. 'Learn more').
• Do maintain 40px (lg spacing) between major sections (hero to features, features to testimonials) to create rhythm and prevent cognitive overload.
• Do use full radius (9999px) on buttons and badges to signal high interactivity; reserve 4px radius for form inputs to convey precision and data entry.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to feel responsive without appearing jarring.
• Do use ITC Avant Garde (400 weight) for headlines and Salesforce Sans (400–600 weight) for body to maintain visual hierarchy and brand distinction.

**Don't**

• Don't use Secondary Green (#2e844a) for primary CTAs or hero backgrounds—it is a supporting accent, not the brand's signature color. Primary Blue (#0176d3) must dominate.
• Don't apply shadows to elements on colored backgrounds (e.g., blue hero sections); use 1px borders at rgba(255, 255, 255, 0.2) instead to maintain clarity and contrast.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 20px, full: 9999px)—this breaks visual consistency.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements; insufficient padding makes buttons and inputs feel cramped and reduces touch targets below 44px minimum.
• Don't mix ITC Avant Garde and Salesforce Sans at the same size or weight level; use Avant Garde exclusively for headlines (48px+) and Salesforce Sans for body (18px and below).
• Don't apply opacity changes to text below 60% (e.g., placeholder text at 40% opacity) on light backgrounds—it reduces readability below WCAG AA standards.