Betechified

Overview

Betechified is a security verification interface designed to communicate trust and transparency during browser validation checks. The aesthetic is 'Minimal Clarity'—a design philosophy that strips away visual noise to focus user attention on a single, reassuring message. The interface uses a clean white canvas with a single accent color (indigo #6366f1) to guide the eye toward the loading indicator, creating a sense of forward progress. The brand personality is calm, professional, and reassuring: it acknowledges the user's wait without inducing anxiety. Voice example: 'Please wait for up to 5 seconds...' — direct, honest, no corporate jargon.

Colors

The color system is built on a foundation of pure white (#ffffff) as the primary surface, paired with a carefully calibrated grayscale for text and UI elements. Primary accent color is Indigo (#6366f1), used exclusively on the animated spinner's top border to draw attention and signal activity. The primary container (#e5e4ff) provides a subtle background for the spinner ring's base, creating depth without visual clutter. Secondary grays (#666666 for body text, #505050 for disabled states, #6c757d for tertiary elements) establish a clear hierarchy: darkest text (#1a1a1a) for headings, mid-tone (#666666) for supporting copy, and lighter (#d0d0d0) for borders and dividers. The outline color (#d0d0d0) is used for dropdown borders and subtle separators. Error states use #d32f2f with a light con

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that conveys both technical precision and human warmth. Display and headline weights (600–700) are reserved for primary messaging (h1 at 24px/600 weight on desktop, 20px on tablet, 18px on mobile), while body copy uses 400 weight at 14px for secondary text and 16px for larger body blocks. Letter-spacing is subtle but deliberate: headlines use -0.02em to -0.04em for tighter, more authoritative presentation, while body text uses 0.02em for improved readability. Line-height is consistently 1.4–1.5 for body text to ensure comfortable reading during the wait state. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased on all text elements to maintain crispness on both light and dark backgrounds.

Layout

The layout uses a centered, single-column container with a maximum width of 600px, ensuring the interface remains focused and intimate regardless of viewport size. The page uses flexbox (display: flex; justify-content: center; align-items: center; min-height: 100vh) to vertically and horizontally center all content, creating a meditative, balanced composition. Spacing follows a strict 8px unit grid: the spinner sits 32px above the heading (md spacing), the heading has 16px margin-bottom (sm spacing), and the body text sits directly below with no additional margin. On tablets (max-width: 768px), the spinner reduces to 56px and margins compress to 28px. On mobile (max-width: 480px), the spinner becomes 48px and margins reduce to 24px. The gutter (padding around the container) is 20px on all

Elevation & Depth

This design system uses flat, minimal elevation. The only shadow applied is on dropdown panels (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)), which provides subtle depth separation from the background without introducing visual weight. The spinner itself has no shadow—it floats on the white surface through color contrast alone (the indigo top border against the light purple ring). All other elements (text, headings, body copy) are rendered flat with no shadows or depth effects. This approach reinforces the 'Minimal Clarity' aesthetic: every visual element earns its presence through function, not

Shapes

The shape philosophy is 'Functional Minimalism': rounded corners are used sparingly and only where they serve a functional purpose. The spinner uses full border-radius (50% / border-radius: 9999px) to create a perfect circle, which is the most natural shape for a loading indicator. Dropdown panels use a subtle 4px border-radius (0.25rem) to soften corners without introducing visual softness—this is a technical, precise radius that feels intentional rather than decorative. All other elements (text, headings, body copy) use no border-radius, maintaining sharp edges that reinforce clarity and pre

Components

Loading Indicator The spinner component is the visual anchor of the interface. It consists of a 64px × 64px ring with a 4px border: the ring is colored #e5e4ff (primary-container), while the top 25% is colored #6366f1 (primary). The animation rotates continuously at 1s per full rotation (animation: spin 1s linear infinite), creating a smooth, hypnotic effect that reassures the user without inducing urgency. On tablet (768px breakpoint), the spinner reduces to 56px; on mobile (480px), it becomes 48px with a 3px border width. The margin-bottom is 32px on desktop, 28px on tablet, and 24px on mobile, maintaining proportional spacing across all viewports.

Typography Hierarchy The primary heading (h1) uses DM Sans 600 weight at 24px with 1.4 line-height and 16px margin-bottom. The domai

Do's and Don'ts

**Do**

• Do use the indigo primary color (#6366f1) exclusively on interactive elements and the spinner to maintain focus and visual hierarchy.
• Do maintain the centered, single-column layout with max-width: 600px to keep the interface intimate and focused.
• Do apply consistent 8px grid spacing (32px spinner margin, 16px heading margin, 20px container gutter) across all viewports.
• Do use DM Sans 600 weight for headings and 400 weight for body text to maintain the geometric, technical aesthetic.
• Do apply the subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) only to dropdown panels to signal interactivity without visual clutter.
• Do reduce spinner size and margins proportionally on smaller viewports (56px on tablet, 48px on mobile) to maintain visual balance.

**Don't**

• Don't use multiple accent colors or gradients—the indigo primary is the only brand color; all other elements are grayscale or white.
• Don't add shadows, depth effects, or glassmorphism to the main interface; keep it flat and minimal to reinforce clarity.
• Don't use serif fonts, script fonts, or system fonts other than DM Sans; maintain typographic consistency across all elements.
• Don't break the 8px grid spacing; all margins, padding, and dimensions must align to the unit grid for visual precision.
• Don't increase the spinner size beyond 64px on desktop or add decorative animations; the 1s rotation is the only motion allowed.
• Don't use rounded corners on text elements, headings, or body content; reserve border-radius for the spinner (full) and dropdowns (4px only).