Helshe

Overview

Helshe is a security verification interface designed to communicate trust and transparency during browser validation checks. The aesthetic is 'Minimal Clarity'—a deliberate rejection of visual noise in favor of a centered, breathing layout that reassures users during a potentially anxious moment. The design uses a single indigo accent (#6366f1) on the loading spinner to create a focal point, while the rest of the interface retreats into neutral grays and whites. The brand personality is calm, professional, and direct: the copy is concise and honest ('Please wait for up to 5 seconds'), never apologetic or overly reassuring. Voice example: 'Verifying your access. This takes a moment.'

The interface prioritizes cognitive ease through extreme whitespace, centered composition, and a single typeface (DM Sans) at two weights. Every element serves a function—there are no decorative flourishes. The loading spinner is the only animated element, drawing the eye without distraction. This restraint communicates competence and respect for the user's time.

Colors

The color system is built on a foundation of pure white (#ffffff) and near-black (#1a1a1a), with a carefully curated accent palette. Primary (#6366f1, indigo) is the signature accent—used exclusively on the loading spinner's animated border-top to create a visual anchor. The primary-container (#e5e4ff, pale lavender) provides a subtle background for the spinner's static border, creating depth through transparency and contrast. On-surface (#1a1a1a) is the primary text color for headings, ensuring maximum legibility. On-surface-variant (#666666, medium gray) is reserved for secondary copy like 'Please wait for up to 5 seconds,' reducing visual weight without sacrificing readability. The select component system uses surface-container (#e9ecef, light gray) for disabled states and hover backgro

Typography

The type system uses DM Sans exclusively at two weights (400 regular, 600 semibold) across eight scales. Headline-md (24px, 600 weight, 1.4 line-height) is used for the primary heading 'Checking your browser before accessing,' establishing hierarchy through size and weight rather than color. Body-sm (14px, 400 weight, 1.5 line-height) carries the secondary message 'Please wait for up to 5 seconds,' with a letter-spacing of 0.02em to add breathing room. The domain name uses headline-md at 600 weight to emphasize the site being verified. All text is left-aligned in the center container, creating a calm, meditative rhythm. On mobile (max-width: 480px), headline-md scales to 18px and body-sm to 13px, maintaining proportional hierarchy. Letter-spacing is minimal (0em to 0.02em) to preserve the

Layout

The layout is a single-column centered container with a maximum width of 600px, positioned at the vertical and horizontal center of the viewport using flexbox (display: flex; justify-content: center; align-items: center; min-height: 100vh). The body has 20px padding on all sides, creating a gutter that prevents content from touching screen edges on mobile. The container itself uses text-align: center to center all child elements. Spacing follows a strict scale: the spinner has 32px margin-bottom (md spacing), the heading has 16px margin-bottom (sm spacing), and the paragraph sits directly below with no additional margin. On tablets (max-width: 768px), the spinner margin-bottom reduces to 28px; on mobile (max-width: 480px), it reduces to 24px. This responsive scaling maintains visual propor

Elevation & Depth

Depth in this system is achieved through subtle shadow and border treatments rather than layering. The select dropdown panel uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) (md elevation), creating a soft separation from the background without visual heaviness. The border is 1px solid #d0d0d0 (outline color), providing a crisp edge that defines the panel's boundary. The spinner has no shadow; it floats on the white background through color contrast alone (the indigo border-top against the pale lavender border creates the illusion of depth). Hover states on select options use a background-color

Shapes

The shape philosophy is 'Geometric Precision'—sharp, functional corners that reflect the technical nature of security verification. The spinner uses border-radius: 50% (full circle), the only fully rounded element, emphasizing its role as the focal point. The select dropdown panel uses border-radius: 4px (sm rounded), a subtle 4-pixel radius that softens the hard corners without introducing organic curves. Select options have no border-radius, maintaining the panel's rectangular geometry. The overall effect is 'technical minimalism'—curves are reserved for the animated element, while static UI

Components

Loading & Feedback The spinner-circle component is the primary interactive element. It uses a 64px square container with a 4px border, border-color set to #e5e4ff (primary-container), and border-top-color set to #6366f1 (primary). The animation is spin 1s linear infinite, rotating 360 degrees continuously. On mobile (max-width: 480px), the spinner scales to 48px with a 3px border-width, maintaining visual prominence while respecting screen constraints. The spinner-circle-mobile variant is a separate component to ensure media queries are honored in component definitions.

Text & Messaging The heading-primary component uses headline-md typography (24px, 600 weight, 1.4 line-height) in on-surface color (#1a1a1a), with 16px margin-bottom. The heading-domain variant uses the same typogr

Do's and Don'ts

**Do**

• Do use the indigo primary (#6366f1) exclusively on interactive elements like the spinner, never on static text or backgrounds.
• Do maintain the centered, breathing layout—never left-align the container or introduce asymmetrical spacing.
• Do use DM Sans at 400 or 600 weight only; avoid intermediate weights or other typefaces.
• Do apply the select panel shadow (0 3px 8px rgba(0, 0, 0, 0.15)) consistently to all dropdown surfaces.
• Do scale the spinner and text proportionally on mobile using the defined media query breakpoints (768px, 480px).

**Don't**

• Don't use colors outside the defined palette—no custom grays, no secondary accents, no gradients.
• Don't add decorative elements like icons, illustrations, or background patterns; every pixel must serve a function.
• Don't use shadows heavier than md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) or apply multiple layered shadows.
• Don't left-align or right-align the container; the centered composition is non-negotiable for the brand's calm, meditative tone.
• Don't animate elements other than the spinner; motion should be reserved for the loading state to avoid distraction.