Cloudflare Challenge UI

Overview

Cloudflare Challenge UI is a security verification interface that prioritizes trust, clarity, and accessibility. Serving users who encounter bot-protection checks, the design employs a "Functional Minimalism" aesthetic—clean typography, ample whitespace, and a restrained color palette punctuated by a vivid blue accent (#4693ff) for interactive focus and a critical red (#fc574a) for error states. The interface adapts seamlessly between light (surface: #f2f2f2, on-surface: #313131) and dark modes (surface: #313131, on-surface: #f2f2f2), ensuring legibility and reducing cognitive load during verification. The brand personality is reassuring yet efficient: the UI communicates security without inducing anxiety. Voice: direct, transparent, human-centered. Example: "Verifying you are human. This may take a few seconds."

Colors

The color system balances accessibility with brand distinction. Primary (#4693ff) is the signature accent—used exclusively for focus states, interactive outlines (outline: 2px solid #4693ff, outline-offset: 2px), and link hover states (color: #b9d6ff in dark mode). Secondary (#2db35e) signals success states: success-circle stroke: #2db35e, fill: #2db35e in light mode; in dark mode, the secondary shifts to #2db35e for consistency. Error (#fc574a) is reserved for failure states and critical messaging—failure-circle stroke: #fc574a, fill: #fc574a. The surface stack is deliberately neutral: surface (#f2f2f2) is the primary background, surface-container-lowest (#f9f9f9) provides subtle depth for cards, and surface-container-high (#ececec) is used for hover states on interactive elements. In dar

Typography

The type system uses a single, system-native font stack (Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif) to ensure consistent rendering across platforms and reduce load time. Display (40px, fontWeight: 600, lineHeight: 48px, letterSpacing: -0.02em) anchors the page hierarchy—used for the domain name (www.gowork.pl). Headline-md (24px, fontWeight: 600, lineHeight: 32px) supports secondary messaging (e.g., "Verifying you are human"). Body-md (16px, fontWeight: 400, lineHeight: 24px) is the workhorse for explanatory text and status messages. Label-sm (12px, fontWeight: 500, lineHeight: 16px, letterSpacing: 0.05em) is applied to footer text and tertiary links. All text over busy backgrounds or status icons must include text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure legibility. In da

Layout

The layout employs a centered, single-column composition optimized for mobile-first delivery. The main content container (max-width: 960px) is centered with margin: 128px auto on desktop and margin: 64px auto on mobile (max-width: 720px). Padding is consistent at 24px on all sides (padding-left: 1.5rem = 24px). The grid is 12 columns, though the design rarely exceeds 6 columns of actual content width. Whitespace is generous: section separation uses lg spacing (40px), while internal element gaps use md spacing (24px). The verification card (border: 1px solid #b6b6b6, border-radius: 8px, padding: 24px) sits 24px below the headline, creating a clear visual hierarchy. Footer text is positioned at the bottom with margin-top: 40px, ensuring adequate breathing room. Responsive behavior: at max-wi

Elevation & Depth

Depth in this system is achieved through subtle borders and minimal shadows, avoiding heavy drop-shadows that would conflict with the security-focused aesthetic. Level 1 (Base): flat surface (#f2f2f2 light, #313131 dark) with no shadow. Level 2 (Cards/Containers): 1px solid border at {colors.outline} (#b6b6b6 light, #444444 dark), border-radius: 8px, box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06). Level 3 (Modals/Overlays): 1px solid border at {colors.error} or {colors.inverse-on-surface}, border-radius: 8px, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Status icons use inset shadows for depth: box-

Shapes

The shape philosophy is "Architectural Precision"—sharp, geometric corners with minimal rounding to convey technical competence and security. Border-radius: 2px (sm) is used for small interactive elements (checkboxes, focus outlines). Border-radius: 4px (DEFAULT) is the standard for most containers and cards. Border-radius: 8px (md) is reserved for larger cards and verification containers. Border-radius: 12px (lg) is used sparingly for modals or overlay containers. Border-radius: 50% (full) is applied only to circular status icons (width: 30px, height: 30px, border-radius: 50%). This hierarchy

Components

Status Indicators Status icons are the primary visual feedback mechanism. Success icon (status-icon-success): width 30px, height 30px, border-radius 50%, backgroundColor #ffffff, stroke #228b49 (light) or #2db35e (dark), stroke-width 2px, animation: scale-up-center 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both. Error icon (status-icon-error): identical dimensions and animation timing (0.6s instead of 0.3s), stroke #b20f03 (light) or #fc574a (dark). Verifying spinner (status-icon-verifying): animation: spin 5s linear infinite, applied to a 30px circular element. All status icons use stroke-dasharray and stroke-dashoffset for animated path drawing (stroke-dasharray: 242, stroke-dashoffset: 242 initially, animating to 0 over 0.4s).

Containers & Surfaces Verification card (verificat

Do's and Don'ts

**Do**

• Do use the primary blue (#4693ff) exclusively for focus states, interactive outlines, and link hover colors—never for backgrounds or body text.
• Do maintain the 128px top margin on desktop (margin: 128px auto) to create breathing room and reduce cognitive load during verification.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to all text overlaid on status icons or colored backgrounds to ensure WCAG AA contrast.
• Do use the secondary green (#2db35e) for success states and the error red (#fc574a) for failures—never swap or invert these roles.
• Do animate status icons with scale-up-center timing (0.3s for success, 0.6s for error) to provide clear temporal feedback without jarring transitions.

**Don't**

• Don't use system-ui or generic sans-serif fallbacks—always specify the full font stack (Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif) to ensure consistent rendering.
• Don't apply border-radius greater than 12px on any element; the design's precision depends on sharp, geometric corners.
• Don't place text directly on colored backgrounds without a text-shadow; minimum contrast must be WCAG AA (4.5:1 for normal text).
• Don't use the primary blue (#4693ff) for body text, backgrounds, or non-interactive elements—reserve it exclusively for focus and hover states.
• Don't mix light and dark mode colors within a single view; the entire interface must commit to either the light palette (#f2f2f2 surface) or dark palette (#313131 surface) based on prefers-color-scheme.