Viking Lab

Overview

Viking Lab's security verification interface embodies 'Austere Minimalism'—a design philosophy that strips away ornament to expose pure function. The page serves as a trust-building moment during browser validation, where users expect clarity and reassurance. The aesthetic is deliberately restrained: a clean white canvas, a single indigo accent (#6366f1) used exclusively for the loading spinner, and a carefully weighted sans-serif typeface. The emotional response is one of calm precision—the interface says 'we are checking your security, and we are doing it methodically.' Voice: direct, technical, patient. The brand speaks in imperative statements without urgency: 'Please wait for up to 5 seconds.' Example: 'Checking your browser before accessing html.vikinglab.agency'—no exclamation marks, no reassuring emoji, just factual clarity.

Colors

The color palette is deliberately constrained to maximize focus and trust. Primary (#6366f1, indigo) is reserved exclusively for the animated spinner's active stroke, creating a single point of visual interest on an otherwise neutral canvas. This restraint signals confidence: the brand does not need multiple accent colors to communicate. The primary-container (#e5e4ff, pale indigo) forms the spinner's background ring, creating depth through transparency and layering rather than saturation. Surface colors range from pure white (#ffffff) for the main background to carefully calibrated grays (#e9ecef, #d0d0d0, #666666) for secondary text and interactive elements. On-surface (#1a1a1a, near-black) is used for primary text to ensure maximum readability at 16px body size. On-surface-variant (#666

Typography

DM Sans, a geometric sans-serif from Google Fonts, anchors the entire system. Its clean, technical character reinforces the security-focused narrative. The type scale is minimal: title-lg (24px, 600 weight) for the main heading, body-md (16px, 400 weight) for the domain name, and label-md (14px, 600 weight) for supporting text. This three-tier hierarchy is sufficient because the page has a single, clear purpose. Line-height is set to 1.4 for the heading and 1.5 for body text, providing breathing room without excess. Letter-spacing is neutral (0em to 0.02em) to maintain the typeface's geometric precision. On smaller screens (max-width: 768px), the heading scales to 20px and body text to 13px, maintaining proportional relationships. Apply font-smoothing (-webkit-font-smoothing: antialiased;

Layout

The layout follows a centered, single-column model with a fixed max-width of 600px. The body uses flexbox (display: flex; justify-content: center; align-items: center; min-height: 100vh) to vertically and horizontally center the container, ensuring the verification message occupies the visual center regardless of viewport height. Padding is set to 20px on all sides, providing a 20px gutter on mobile devices. The container itself has text-align: center, aligning all child elements. Spacing between elements follows the semantic scale: the spinner has margin-bottom: 32px (4 × 8px), the heading has margin-bottom: 16px (2 × 8px), and the supporting text sits directly below with no additional margin. This creates a tight, focused composition. On tablets (max-width: 768px), the spinner margin red

Elevation & Depth

Depth is conveyed through a flat, minimalist approach with selective use of subtle shadows. The spinner itself creates depth through animation: the border-top-color (#6366f1) rotates continuously (animation: spin 1s linear infinite), drawing the eye and signaling active processing. The select dropdown panel uses a single, precise shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is tight and close to the element (3px vertical offset, 8px blur radius), suggesting the panel floats just above the page surface without dramatic depth. No other elements on the page use shadows; the desi

Shapes

The design employs 'Technical Sharpness'—a shape philosophy that favors precision over softness. The spinner uses border-radius: 50% to create a perfect circle, emphasizing geometric purity. The select dropdown panel uses border-radius: 4px (0.25rem), a subtle rounding that softens the corners just enough to feel contemporary without introducing visual warmth. Buttons and interactive elements (when present) would use the same 4px radius for consistency. This minimal rounding is intentional: it signals that the interface is functional and technical, not playful or organic. The 4px radius appear

Components

Loading & Feedback The spinner-circle component is the primary visual indicator of active processing. It measures 64px × 64px on desktop (56px on tablets, 48px on mobile) with a 4px border (3px on mobile). The border color is #e5e4ff (primary-container), while the border-top-color is #6366f1 (primary), creating a two-tone effect. The animation rotates continuously at 1s per full rotation (animation: spin 1s linear infinite), providing constant visual feedback without distraction. The spinner is centered above the heading with a 32px margin-bottom, establishing clear spatial hierarchy.

Typography & Messaging The heading uses title-lg (24px, 600 weight, line-height: 1.4) with color #1a1a1a (on-surface). The domain name is wrapped in a .domain class with font-weight: 600, emphasizing

Do's and Don'ts

**Do**

• Do use the indigo primary (#6366f1) exclusively for interactive elements and loading indicators—never for backgrounds or body text.
• Do maintain the centered, single-column layout with max-width: 600px to ensure the verification message remains the focal point.
• Do apply DM Sans at 16px body size with -webkit-font-smoothing: antialiased for crisp, readable text on all devices.
• Do use the select dropdown shadow (0 3px 8px rgba(0, 0, 0, 0.15)) for any floating panels or modals to maintain visual consistency.
• Do scale the spinner and typography proportionally on mobile (max-width: 480px) to preserve the visual hierarchy on small screens.

**Don't**

• Don't introduce additional accent colors—the palette is intentionally constrained to indigo, grays, and white to maximize focus.
• Don't use rounded corners larger than 4px (0.25rem) except for the spinner circle, which should remain 50% for geometric purity.
• Don't apply shadows to elements other than the select dropdown panel; the design relies on color contrast and layout for hierarchy.
• Don't exceed the 600px container max-width on desktop, as this would dilute the centered, focused composition.
• Don't modify the spinner animation speed below 1s per rotation, as faster speeds may feel anxious rather than reassuring.