Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Salesforce
EnterpriseSalesforce employs a bold, enterprise-grade aesthetic built around deep blue gradients that transition from bright cyan to midnight navy, creating a sense of professional depth and technological sophistication. The dual-font system pairs the clean, utilitarian Salesforce Sans for interface elements with the distinctive geometric ITC Avant Garde for content, establishing a unique tension between accessibility and design authority.
Design Identity
Signature Color
Salesforce Blue
#1B96FF
Enterprise trust meets innovation - the color of dependable technology that scales with ambition
Visual Identity
The dramatic blue gradient backdrop that spans the entire viewport, creating an immersive color field that feels both technological and approachable - no other enterprise brand commits this boldly to environmental color.
Component Style
Clean, rounded corners with moderate 6-8px radius on buttons and components. Subtle multi-layered shadows (0 2px 8px -2px) create gentle depth without heaviness. Buttons feel substantial with generous 16px vertical padding, while maintaining crisp edges and confident presence.
Spacing Philosophy
Generous 64px container padding creates breathing room for enterprise-scale content, while 40px grid gaps establish clear content relationships. The rhythm scales down gracefully to 16px on mobile, maintaining proportional hierarchy across breakpoints.
Design Principles
- Blue gradient backgrounds span full viewport for immersive brand presence
- Dual typography system: Salesforce Sans for UI, ITC Avant Garde for content
- Shadows use consistent layered approach: 0 2px 8px -2px base with secondary depth
- Container padding follows 64px desktop / 48px mobile rhythm
- Button radius consistently 6-8px - never sharp, never pill-shaped
Target Audience
Enterprise decision-makers and IT professionals who need sophisticated tools that don't sacrifice usability for power - leaders who value both innovation and reliability.
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | 24px | |
| h1 | 14px | 700 | 20px | |
| h2 | 32px | 400 | 40px | |
| h3 | 16px | 400 | 24px | |
| p | 16px | 400 | 24px | |
| a | 16px | 400 | 24px | |
| button | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| main | 16px | 400 | 24px | |
| body | 16px | 400 | 24px |
Color Palette
#2e2e2e#5f3e02#3ba755#7e2600#181818#2e2204#3e2b02#a0a0a0#2e844a#541d01#201600#22683e
