Cloudflare Error UI

Overview

Cloudflare's error UI system embodies 'Institutional Minimalism'—a design philosophy that prioritizes clarity, authority, and accessibility over visual decoration. The brand serves users encountering security blocks, DDoS protection, or access restrictions, and must communicate technical information with calm precision. The aesthetic is deliberately austere: a white canvas (rgb(255, 255, 255)), system-native typography, and a restrained color palette anchored by a professional blue primary (#2f7bbf) and a warning orange secondary (#f68b1f). The emotional response is reassurance through transparency—the UI says, 'Something happened, here's why, here's what to do next.' Voice: direct, jargon-light, never patronizing. Example: 'Your IP 52.27.44.164 triggered our security system. Email the site owner with this Ray ID: a0e8d0d2891f2095.'

Colors

The color system is built on a foundation of institutional trust and technical clarity. Primary (#2f7bbf) is the signature accent, used on interactive links, focus states, and primary call-to-action buttons—it conveys authority without aggression. Secondary (#f68b1f) is reserved for warnings and non-critical alerts, providing visual distinction without alarm. Error (#bd2426) is deployed for critical blocks and danger states, commanding attention through saturation and contrast against white. The surface stack is deliberately minimal: white (#ffffff) as the base, light grays (#ebebeb, #dedede, #e9ecef) for subtle container differentiation, and a neutral outline (#999999) for borders and dividers. On-surface text is a warm charcoal (#404040, not pure black), reducing eye strain on long-form

Typography

The type system uses the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif) to ensure maximum legibility and platform consistency. Display (60px, fontWeight 300, lineHeight 72px) is reserved for the primary headline 'Sorry, you have been blocked'—its light weight conveys calm authority. Headline-lg (36px, fontWeight 400) and headline-md (30px, fontWeight 400) are used for section headers ('Why have I been blocked?', 'What can I do to resolve this?'), maintaining visual hierarchy without aggressive weight shifts. Body-md (15px, fontWeight 400, lineHeight 24px) carries explanatory text, optimized for reading comfort at standard viewing distances. Label-md (14px, fontWeight 600) is applied to button text and form labe

Layout

The layout uses a fluid 12-column grid with a max-width of 1280px, centering content on desktop while allowing full-width adaptation on mobile. The wrapper (.cf-wrapper) maintains 90% width with auto margins (margin-left: auto; margin-right: auto), creating breathing room around the viewport edges. Section spacing follows a 2em (32px) margin-top and margin-bottom rhythm (.cf-section { margin-bottom: 2em; margin-top: 2em }), establishing predictable vertical flow. The two-column layout (.cf-columns.two) splits at 50% width on screens ≥49.2em, with 22.5px padding between columns (padding-right: 22.5px on odd columns, padding-left: 22.5px on even). Container padding uses the md spacing token (24px) for card interiors, sm spacing (12px) for form inputs, and lg spacing (40px) for section separa

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than layering or blur effects. The standard card elevation uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the white background without visual heaviness. Interactive elements (buttons, inputs) use a 0.2s ease transition to signal state changes: on focus, inputs receive box-shadow: 0 0 8px rgba(47, 123, 191, 0.5), a soft blue glow that reinforces the primary color without overwhelming the interface. Buttons in focus state use inset 0 0 4px rgba(0, 0, 0, 0.3), a subtle internal shadow that sugge

Shapes

The shape philosophy is 'Technical Precision'—minimal, functional border-radius values that avoid ornament while maintaining usability. Buttons and inputs use 2px border-radius ({rounded.sm}), a subtle softening that prevents harsh corners without introducing visual softness. Cards and containers use 4px ({rounded.md}) or 5px ({rounded.lg}), providing slightly more visual breathing room for larger surfaces. Dropdowns and select panels use 4px border-radius with a 1px solid border at #d0d0d0, maintaining consistency with form elements. The error icon (a red circle with a white X) uses border-ra

Components

Action Elements Buttons follow a three-tier system: primary (blue, #2f7bbf), secondary (transparent with gray border, #999999), and danger (red, #bd2426). Primary buttons use padding: 0.6em 1.33333em 0.53333em with height: auto, allowing text to breathe. On hover, primary buttons shift to #62a1d8 (primary-container) with a 1px solid border at the base primary color, signaling interactivity. Focus state adds inset 0 0 4px rgba(0, 0, 0, 0.3), a subtle internal shadow. All buttons transition: all 0.2s ease, ensuring smooth state changes. Danger buttons (#bd2426) shift to #de5052 on hover, with a border at #521010 on active/focus, creating a clear escalation of urgency.

Containers & Surfaces Cards use backgroundColor: {colors.surface} (white), rounded: {rounded.md} (4px), padding: {sp

Do's and Don'ts

**Do**

• Do use the primary blue (#2f7bbf) exclusively for links, focus states, and primary CTAs—never use it for warnings or errors.
• Do apply transition: all 0.2s ease to all interactive elements (buttons, inputs, links) to signal responsiveness.
• Do maintain the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, ...) for maximum platform consistency and legibility.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for card elevation and box-shadow: 0 0 8px rgba(47, 123, 191, 0.5) for input focus states.
• Do reserve the error red (#bd2426) for critical blocks and danger actions; use warning orange (#f68b1f) for non-blocking alerts.
• Do apply 2px border-radius to buttons and inputs, 4px to cards, and 50% (full) only to icon badges or emphasis elements.

**Don't**

• Don't use rounded corners larger than 5px on any element—the aesthetic demands technical precision, not organic softness.
• Don't apply shadows larger than 0 2px 8px rgba(0, 0, 0, 0.2)—excessive depth undermines the institutional clarity.
• Don't mix font weights within a single line of body text; use fontWeight 400 for body and 600 only for labels and strong emphasis.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #404040 for on-surface text and #ffffff only for text on colored backgrounds.
• Don't apply more than one transition property per element; use transition: all 0.2s ease as the standard.
• Don't use the secondary orange (#f68b1f) for primary CTAs or links—it is reserved for warnings and non-critical alerts.