www.cloudflare.com Styleguide
Design system, performance metrics, and brand guidelines for Cloudflare main website
Usage Guidelines
Best practices and principles for maintaining consistency across www.cloudflare.com
Performance First
Every design decision must consider performance impact. Target scores: Performance 95+, Accessibility 100, Best Practices 100, SEO 100.
- Optimize images with WebP format and lazy loading
- Minimize JavaScript bundle sizes
- Use Cloudflare CDN for all static assets
- Implement critical CSS for above-the-fold content
Accessibility Standards
WCAG 2.1 Level AA compliance is mandatory. All users must have equal access to content and functionality.
- Color contrast minimum 4.5:1 for body text
- Semantic HTML with proper heading hierarchy
- Keyboard navigation for all interactive elements
- ARIA labels for complex UI components
Brand Consistency
Maintain visual consistency across all pages while allowing flexibility for different use cases and audiences.
- Use approved color palette only
- Follow typography scale for all text
- Cloudflare Orange (#F6821F) for primary CTAs
- Consistent spacing using 8px grid system
Responsive Design
Mobile-first approach with seamless experiences across all device sizes and orientations.
- Mobile breakpoint: 320px - 768px
- Tablet breakpoint: 768px - 1024px
- Desktop breakpoint: 1024px+
- Touch targets minimum 44x44px
Content Strategy
Clear, concise messaging that builds trust and explains complex concepts in accessible language.
- Avoid jargon; explain technical terms
- Use active voice and present tense
- Short paragraphs (3-4 sentences max)
- Scannable content with clear headings
Testing Requirements
Comprehensive testing across browsers, devices, and network conditions before deployment.
- Test in Chrome, Firefox, Safari, Edge
- Lighthouse audits on every build
- Manual accessibility testing with screen readers
- A/B testing for major UI changes