Brand Design Manual
Website Examples
See how all brand guidelines come together in real website designs - black & white photography, proper logo usage, brand colors, and typography.
🌐 Website Requirements
- • Photography of people: MUST be black and white only (0% saturation)
- • Logo: Follow strict color rules (pink on white, grey on beige, white on dark grey)
- • Typography: Work Sans ONLY
- • Colors: Use approved brand palette
- • Spacing: Follow 8px grid system
Smarketing Dashboard Example
This smarketing dashboard demonstrates proper use of brand colors in a website layout:
Smarketing Dashboard
Sales & Marketing Performance Overview
Recent Activity
✓ Key Elements Demonstrated:
- • Sidebar: Beige background (#e5d8cd) with grey logo - follows logo rules
- • Main Content: White/off-white background for primary content area
- • Stat Cards: Mix of Evergreen (#003d2e), Beige (#e5d8cd), and white cards
- • Dark Elements: Dim Grey (#586268) and Slate Grey (#758085) for accent cards
- • Typography: Work Sans font family throughout
- • Spacing: Consistent padding and gaps following 8px grid system
💡 Color Usage Guidelines:
- • Use beige (#e5d8cd) for sidebars and secondary sections with grey logo
- • Use white/off-white for main content areas with pink logo
- • Use dark colors (#003d2e, #586268, #758085) for cards and accents with white text/logo
- • Mix colors purposefully to create visual hierarchy and interest
- • Always follow logo color rules based on background
Landing Page Example
This landing page example shows how to use brand colors for hero sections and content blocks:
Align Your Sales & Marketing Teams for Success
Unite your revenue teams with powerful smarketing tools that drive growth, improve collaboration, and maximize ROI.
Everything You Need to Drive Revenue
Lead Management
Track and nurture leads from first touch to closed deal
Analytics & Reports
Real-time insights into campaign and sales performance
Team Collaboration
Unite sales and marketing with shared goals and workflows
Ready to Transform Your Revenue Team?
Join 500+ companies already using our platform to drive growth
✓ Key Elements Demonstrated:
- • Header: White background with pink logo - follows logo rules
- • Hero Section: Evergreen (#003d2e) background with white text and clear CTAs
- • Stats Bar: Beige background (#e5d8cd) for visual break and emphasis
- • Feature Cards: Mix of Dim Grey (#586268), Slate Grey (#758085), and Evergreen (#003d2e)
- • CTA Section: Beige background for warm, inviting call-to-action
- • Typography: Work Sans font family with clear hierarchy
💡 Landing Page Best Practices:
- • Use Evergreen (#003d2e) for hero sections to create strong first impression
- • Alternate between white and beige backgrounds for visual rhythm
- • Use dark card colors (#586268, #758085, #003d2e) for feature highlights
- • Pink logo on white header, white logo on dark hero
- • Maintain clear visual hierarchy with consistent spacing
Website Design Checklist
Before launching any website page or section, verify:
Photography
All photos of people are 100% black & white (0% saturation)
Logo Usage
Logo color matches background (pink/white, grey/beige, white/dark grey)
Navigation
Use white or off-white background with pink logo
Colors
Only use approved brand colors from the palette
Typography
Work Sans font family for all text elements
Spacing
Follow 8px grid system for all layouts and components