Cloudflare

Overview

Cloudflare's error and access-control interface embodies 'Institutional Clarity'—a design philosophy that prioritizes legibility, technical precision, and user confidence in security contexts. The brand serves enterprises and end-users navigating access restrictions, delivering information with the calm authority of a trusted infrastructure provider. The aesthetic is deliberately austere: a light, neutral canvas (white #ffffff, grays #404040–#ebebeb) with surgical accent colors—a professional blue (#2f7bbf) for primary actions, a warning orange (#f68b1f) for alerts, and a system red (#bd2426) for errors. The UI evokes the clarity of a technical dashboard, not a consumer app: every element has a functional purpose, every color carries semantic weight.

The brand voice is direct, non-alarmist, and solution-oriented. Sentences are short and active: 'You are unable to access idlixku.com' rather than 'Access has been denied to you.' The tone never patronizes; it assumes the user understands security concepts. Vocabulary is technical but accessible—'blocked,' 'security service,' 'resolve'—avoiding both jargon and oversimplification. Example sentence in brand voice: 'This website is using a security service to protect itself from online attacks; you were blocked because your request matched our security rules.'

Colors

The color system operates on a principle of semantic clarity: each hue signals a specific user action or system state. Primary (#2f7bbf, a professional cobalt) anchors interactive elements—buttons, links, focus states—and appears at 100% opacity on white backgrounds for maximum contrast (WCAG AA compliant at 8.59:1 ratio). Secondary (#f68b1f, a warm orange) is reserved for warnings and non-critical alerts, creating visual distinction from errors without alarm fatigue. Error (#bd2426, a deep red) is used exclusively for blocking states, denials, and critical messages—it appears in the error banner border (3px solid #f68b1f at the top, creating a visual frame), the error icon background, and error-state buttons. Success (#9bca3e, a muted green) confirms positive outcomes and resolution paths

Typography

The type system prioritizes legibility over personality, reflecting the institutional context. Display (60px, fontWeight 300, lineHeight 68px) is reserved for primary error messages ('Sorry, you have been blocked') and uses a light weight to soften the severity while maintaining dominance. Headline-lg (36px, fontWeight 400) and headline-md (30px, fontWeight 400) structure secondary information ('Why have I been blocked?', 'What can I do to resolve this?'), with consistent 400 weight across all headings to avoid visual hierarchy confusion. Body-md (15px, fontWeight 400, lineHeight 22px) is the workhorse for explanatory text and form labels, optimized for screen reading at arm's length. Label-md (14px, fontWeight 400) is applied to button text and form inputs, with 0em letter-spacing to main

Layout

The layout uses a fluid 90% container width (margin-left: auto; margin-right: auto; width: 90%) that adapts to viewport size, with a maximum effective width of 1280px. The grid is 12-column on desktop (66em+), 2-column on tablet (49.2em+), and single-column on mobile. Spacing follows a strict 8px unit system: section margins are 2em (32px), column padding is 22.5px (derived from 90% container ÷ 4 columns), and vertical rhythm between heading and body is 1.5em (24px for body-md). The error banner uses 15px horizontal padding and 15px vertical padding (top and bottom) to create breathing room around the message. Card components use {spacing.md} (24px) padding. The page rhythm emphasizes white space: sections are separated by {spacing.lg} (40px) to reduce cognitive load in error contexts. Inp

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layering. The base level (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, input fields, alerts) uses box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), creating a soft separation from the background without visual heaviness. Level 3 (modals, error banners, hover states) uses box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), increasing the blur radius and opacity to signal elevation. The error banner specifically uses a 3px solid bottom border in #f68b1f (orange) to create visual weight and draw attention without

Shapes

The shape philosophy is 'Technical Minimalism'—border-radius values are kept minimal (2px default, 4px for secondary elements) to evoke precision and institutional authority. Buttons use border-radius: 2px, creating sharp corners that signal functional clarity rather than friendliness. Input fields use border-radius: 2px to match button styling and create visual cohesion. Cards and alert containers use border-radius: 4px for a subtle softening without compromising the technical aesthetic. The error icon (a white X on a red circle) uses border-radius: 50% (full circle) to create a universal 'st

Components

Action Elements Buttons follow a three-tier system: primary (solid background, high emphasis), secondary (transparent with border, medium emphasis), and danger (solid red background, critical emphasis). Primary buttons use backgroundColor: {colors.primary} (#2f7bbf), textColor: {colors.on-primary} (#ffffff), padding: 10px 32px, height: 40px, border-radius: 2px, and transition: all 0.2s ease. On hover, backgroundColor shifts to {colors.primary-container} (#62a1d8) and border becomes 1px solid {colors.primary} (#2f7bbf). On focus, box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3) signals keyboard navigation. On active, backgroundColor remains {colors.primary-container} and border becomes 1px solid {colors.on-primary-container} (#163959). Secondary buttons use backgroundColor: transparent, tex

Do's and Don'ts

**Do**

• Do use {colors.primary} (#2f7bbf) exclusively for primary CTAs and focus states—never for decorative elements or backgrounds.
• Do apply box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) to cards and containers to create subtle depth without visual noise.
• Do maintain 1px solid borders at {colors.outline} (#999999) on all input fields and secondary buttons for visual consistency.
• Do use the system font stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Arial, sans-serif) to ensure consistent rendering and avoid web font latency in error contexts.
• Do keep border-radius at 2px for buttons and inputs, and 4px for cards, to maintain the technical, institutional aesthetic.
• Do apply transition: all 0.2s ease to all interactive elements (buttons, inputs, links) for smooth state changes.
• Do use {colors.error} (#bd2426) exclusively for blocking states, denials, and critical messages—never for warnings or non-critical feedback.

**Don't**

• Don't use rounded corners larger than 4px on any component—the aesthetic requires sharp, technical precision.
• Don't apply shadows larger than 0 2px 10px rgba(0, 0, 0, 0.5)—excessive depth undermines the institutional clarity.
• Don't use accent colors (primary, secondary, error) on backgrounds or large surfaces—reserve them for interactive elements and semantic signals.
• Don't apply text-shadow or text-decoration to body text—the system font stack and 15px size are sufficient for legibility.
• Don't use more than three button variants (primary, secondary, danger) on a single page—visual hierarchy becomes ambiguous.
• Don't apply opacity values below 0.1 or above 0.5 to shadows—they either disappear or become too heavy.
• Don't use web fonts in error pages—rely on the system font stack to ensure instant rendering and accessibility.