A well-designed cookie banner that matches your brand creates a better user experience and can improve consent rates. Studies show branded banners see up to 2.5x higher interaction rates.
Color Customization
Customize every color in your banner: background, text, buttons (primary, secondary, outline), borders, and overlays. Use your brand colors for a seamless integration.
Recommended Text Sizes
| Element | Recommended Size | Notes |
|---|---|---|
| Banner Title | 16-24px | Should be prominent but not overwhelming |
| Body Text | 13-16px | Ensure readability on all devices |
| Button Text | 14-16px | Clear and clickable |
| Category Labels | 14-15px | Match body text or slightly larger |
Layout Options
Bottom Bar
Classic banner fixed to the bottom of the screen
Center Modal
Prominent popup in the center with overlay
Bottom Left
Compact box in the bottom left corner
Bottom Right
Compact box in the bottom right corner
Accessibility Tip
Ensure your color combinations meet WCAG 2.1 contrast requirements. CookieBeam's design tools will warn you if contrast is too low for accessibility.
Design Best Practices
- 1
Match your brand colors
Use your primary and secondary brand colors
- 2
Keep text concise
Users scan, don't read - get to the point
- 3
Make buttons clear
Accept/Reject actions should be equally prominent
- 4
Test on mobile
Over 50% of users are on mobile devices
- 5
Consider dark mode
Offer a dark variant for dark-themed sites