Cloudflare Error UI

Overview

Cloudflare's error page system embodies 'Austere Technical Authority'—a design language that prioritizes clarity and trust through restrained typography, a neutral monochromatic palette, and strategic use of semantic status colors. The interface communicates security and precision without visual noise, reflecting the brand's role as a protective infrastructure layer. The aesthetic is deliberately corporate and institutional, evoking confidence in a security provider. Voice: direct, factual, and solution-oriented. The tone avoids alarm despite the blocking context; instead, it educates and guides. Example sentence: 'This website is using a security service to protect itself from online attacks. Please include what you were doing when this page came up.'

Colors

The color system operates on a foundation of neutral grays (#404040 for primary text, #ebebeb for container backgrounds, #999999 for outlines) that establish a calm, professional baseline. Primary blue (#2f7bbf) is reserved for actionable elements and links, signaling interactivity without aggression. Error red (#bd2426) communicates blocking and denial with semantic clarity; it appears on alert backgrounds (rgba-based at #de5052 for containers) and critical messaging. Secondary orange (#f68b1f) is used sparingly for warnings and secondary alerts. Success green (#9bca3e) reinforces positive outcomes. All interactive states use a 0.2s ease transition. Focus states employ inset shadows (inset 0 0 4px rgba(0,0,0,0.3)) to maintain accessibility without breaking the austere aesthetic. Hover sta

Typography

The type system uses a single sans-serif family (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.) across all scales, reinforcing the unified, technical voice. Display (60px, 300 weight, -0.02em tracking) sets the error headline with elegant restraint; headline-lg (36px, 400 weight) and headline-md (30px, 400 weight) structure content hierarchy. Body text (15px and 14px, 400 weight, 22px and 21px line-height) maintains readability at standard viewing distances. Labels (14px, 600 weight) are used for form fields and button text, with small labels (13px, 400 weight) for metadata and footer information. Font weights are minimal: 300 for display (elegant lightness), 400 for body and headlines (neutral authority), and 600 only for strong emphasis and interactive labels. Letter-spacin

Layout

The page uses a fluid 90% width container (max 1280px) centered on the viewport, with a 12-column grid system that collapses to single-column on mobile. Section spacing follows a semantic rhythm: 2em (32px) margins between major sections, with 1.5em (24px) between paragraphs and 1.25em (20px) between headings and body text. The two-column layout for 'Why have I been blocked?' and 'What can I do to resolve this?' uses 50% column widths on screens ≥49.2em, with 22.5px gutters and 45px bottom padding per column on mobile. The footer uses 10px (py-10) vertical padding on desktop, reducing to 4px (sm:py-4) on mobile, with 8px horizontal padding (sm:px-8) for mobile breathing room. Container max-width is 1280px; gutter spacing is 22.5px.

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layering or blur effects. Standard card and dropdown shadows use 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background without visual drama. Focus states employ inset shadows (inset 0 0 4px rgba(0,0,0,0.3)) to indicate keyboard focus and interactive readiness. Input fields on focus receive a 0 0 8px rgba(47, 123, 191, 0.5) glow in the primary blue, signaling active state. The error banner uses 0 2px 8px rgba(0,0,0,0.2) for a slightly heavier lift. All shadows use rgba(0,0,0,...) with opacity betw

Shapes

The design employs 'Minimal Technical Precision'—a shape philosophy that favors sharp, small border-radii (2px as default, 4px for dropdowns, 5px for select panels) over rounded softness. This reflects the brand's technical, infrastructure-focused identity. Buttons use 2px radius, maintaining a crisp, business-like appearance. Input fields and form elements use 2px radius for consistency. Dropdown panels and select menus use 4px radius to provide subtle visual distinction without compromising the austere aesthetic. The full radius (9999px) is reserved for badge-like elements or future accent c

Components

Action Elements Buttons follow a three-tier hierarchy: primary (blue background, white text, 36px height, 9.6px vertical / 21.3px horizontal padding, 2px radius), secondary (transparent with gray border, dark text), and danger (red background, white text). All buttons use a 0.2s ease transition on all properties. Hover states shift background color and add or emphasize borders: primary hover becomes #62a1d8 with a #2f7bbf border; secondary hover becomes #bfbfbf with a #737373 border. Focus states add inset 0 0 4px rgba(0,0,0,0.3) shadow. Active states match hover but with a darker border (e.g., #404040 for secondary active).

Containers & Surfaces Alerts use semantic background colors: error (#de5052), success (#bada7a), warning (#f9b169), info (#62a1d8). All alerts have 1px solid

Do's and Don'ts

**Do**

• Do use primary blue (#2f7bbf) exclusively for links and primary CTAs; it signals trust and actionability.
• Do maintain 2px border-radius on all interactive elements to preserve the technical, precise aesthetic.
• Do apply 0.2s ease transitions to all state changes (hover, focus, active) for smooth, predictable feedback.
• Do use semantic colors (error red, success green, warning orange) consistently across alerts and status indicators.
• Do keep typography weights minimal (300, 400, 600 only) to reinforce the austere, professional voice.
• Do use inset 0 0 4px rgba(0,0,0,0.3) focus shadows for keyboard accessibility without breaking the austere design.

**Don't**

• Don't use rounded corners larger than 5px; the design relies on sharp, technical geometry to communicate authority.
• Don't mix sans-serif families; always use the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.).
• Don't apply shadows heavier than 0 3px 8px rgba(0,0,0,0.15); depth should be subtle and restrained.
• Don't use color outside the defined semantic palette; every color must serve a functional purpose (primary, error, success, warning, info).
• Don't animate state changes with durations longer than 0.2s; the interface should feel responsive and immediate.
• Don't use decorative gradients or glassmorphism effects; the design is intentionally flat and austere to convey technical precision.