Cloudflare Challenge

Overview

Cloudflare Challenge is a security verification interface built on the principle of 'Transparent Trust'—a design philosophy that prioritizes clarity, accessibility, and user confidence during critical security moments. The system serves users who need to verify they are human, transforming a potentially anxiety-inducing process into a calm, straightforward interaction. The aesthetic is deliberately minimal and utilitarian: a clean white canvas (light mode) or deep charcoal (dark mode) with precise, purposeful typography and a carefully orchestrated color system that communicates status through semantic meaning rather than decoration. The interface evokes professionalism and reliability through restrained use of color, generous whitespace, and micro-interactions that feel responsive without being frivolous.

The brand voice is direct, reassuring, and technically honest. Sentences are short and active: 'Performing security verification' rather than 'Please wait while we verify your identity.' The vocabulary avoids jargon while maintaining precision—'malicious bots' instead of 'threat actors,' 'security service' instead of 'authentication layer.' Tone is never apologetic or defensive; instead, it frames verification as a normal, necessary step. Example: 'This website uses a security service to protect against malicious bots. This page is displayed while the website verifies you are not a bot.'

Colors

The color system operates on a dual-mode foundation: light mode (surface #f2f2f2, on-surface #313131) for daytime use, and dark mode (surface #0a0a0a, on-surface #f2f2f2) for reduced eye strain. Primary (#4693ff) is the accent color used exclusively for interactive elements—links, focus states, and the outline ring applied at 2px solid with 2px offset on keyboard focus. This blue is borrowed from Cloudflare's brand identity and signals 'safe' and 'actionable.' Secondary (#fc574a) is reserved for error states and failure indicators; it appears on the error icon (stroke: #fc574a, fill: #fc574a) and error message backgrounds (rgba background with #feccc8 container). Tertiary (#2db35e) communicates success and verification completion—the checkmark icon uses stroke: #2db35e, fill: #2db35e. Neut

Typography

The type system uses a single typeface family—Segoe UI with system-ui fallbacks—to ensure consistency across platforms and reduce cognitive load. Display (56px, 700 weight, -0.02em letter-spacing) is reserved for the domain name ('salla.com') and communicates the site being verified. Headline-lg (40px, 600 weight) is used for primary headings like 'Performing security verification.' Headline-md (28px, 600 weight) is used for secondary headings and status messages. Body-md (16px, 400 weight, 24px line-height) is the default for explanatory text and maintains 1.5 line-height ratio for readability. Label-md (14px, 600 weight) is applied to footer text and metadata. All text uses color: {colors.on-surface} in light mode and color: {colors.on-surface} in dark mode. Links receive a focus treatme

Layout

The layout uses a centered, single-column design with a max-width of 960px (60rem) to maintain readability and focus. The main content container (.main-content) uses margin: 8rem auto on desktop (128px top margin) and margin-top: 4rem on mobile (width <= 720px), creating a breathing room that emphasizes the verification message. Padding-left: 1.5rem (24px) is applied to accommodate error icons and maintain alignment. The grid is implicit (no CSS Grid used); instead, flexbox with flex-direction: column centers content vertically and horizontally. Spacing between elements follows the semantic scale: {spacing.md} (24px) separates the heading from the body text, {spacing.lg} (40px) separates major sections (heading + body from status icon), and {spacing.sm} (12px) is used for tight groupings l

Elevation & Depth

Depth in this system is achieved through color and animation rather than shadows. The base layer (Level 1) is the page background: #f2f2f2 in light mode, #313131 in dark mode. Level 2 (interactive elements like links and checkboxes) uses a subtle 1px border at {colors.outline} (#b6b6b6) and a background color shift to {colors.surface-container-high} (#ececec) on hover. Level 3 (status icons and modals) uses animation to create perceived depth: scale-up-center (0% transform: scale(0.01), 100% transform: scale(1)) over 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) for success icons, and 0.6s for er

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and only where they serve a functional purpose. Buttons and interactive elements use border-radius: {rounded.sm} (2px) to maintain a clean, professional appearance without appearing playful or casual. Status icons (success, error, loading, expired) use border-radius: {rounded.full} (50%) to create circular containers that feel complete and self-contained. Form inputs (checkboxes) use border-radius: {rounded.sm} (2px) to align with the button aesthetic. Links and focus outlines use border-radius: {rounded.sm} (2p

Components

Status Indicators Status icons are the primary visual feedback mechanism. Success icons (status-icon-success) use a 30px × 30px circle with border-radius: 50%, background: #ffffff, stroke: #2db35e (2px), and animation: scale-up-center 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53) both. The checkmark path animates with stroke-dasharray: 242, stroke-dashoffset: 242 (initial) to stroke-dashoffset: 0 over 0.4s cubic-bezier(0.65, 0, 0.45, 1), with animation-delay: 0.3s. Error icons (status-icon-error) mirror the success treatment but use stroke: #b20f03, fill: #b20f03, and animation: scale-up-center 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both. The loading spinner (status-icon-loading) uses stroke: #2db35e, stroke-width: 3px, stroke-dasharray: 0,100,0, stroke-dashoffset: 200, and animation:

Do's and Don'ts

**Do**

• Do use the primary blue (#4693ff) exclusively for interactive elements and focus states—never for backgrounds or decorative elements.
• Do apply the focus outline (2px solid #4693ff, 2px offset, 2px border-radius) to all interactive elements on keyboard focus.
• Do maintain the 8rem (128px) top margin on desktop to create breathing room and emphasize the verification message.
• Do use the semantic color system: green (#2db35e) for success, red (#b20f03) for errors, gray (#595959) for neutral states.
• Do keep text line-length under 80 characters by respecting the 960px max-width container.
• Do use animation timing consistently: 0.3s for success, 0.6s for errors, 5s for loading spinners.
• Do preserve the system-ui font stack for cross-platform consistency and accessibility.

**Don't**

• Don't use shadows or blur effects; rely on color contrast and animation to establish hierarchy.
• Don't apply rounded corners beyond 2px on buttons, inputs, or links—reserve 50% border-radius for status icons only.
• Don't use the secondary red (#fc574a) or tertiary green (#2db35e) for non-status purposes; they are reserved for error and success states.
• Don't reduce the focus outline to less than 2px or remove the 2px outline-offset; keyboard accessibility is non-negotiable.
• Don't apply text-shadow or other text effects; maintain clean, readable typography at all weights and sizes.
• Don't use the primary blue (#4693ff) at opacity below 100%; always use the full color value for interactive elements.
• Don't deviate from the Segoe UI font stack; custom fonts introduce rendering inconsistencies across platforms.