Unicatu

Overview

Unicatu is a minimal, accessibility-first browser-verification interface that embodies the 'Functional Minimalism' aesthetic—a design philosophy that strips away all non-essential visual elements to create a calm, focused user experience. The interface serves users during a security check, prioritizing reassurance and clarity through centered composition, generous whitespace, and a single, purposeful accent color. The brand personality is patient and transparent: the UI communicates status without urgency, using a soft indigo spinner (#6366f1) as the sole visual anchor against a clean white canvas. The tone is conversational yet professional, avoiding jargon while maintaining technical credibility. Example voice: 'Please wait for up to 5 seconds—we're verifying your browser.'

Colors

The color system is built on a high-contrast, light-mode foundation with a single accent. Primary (#6366f1, a soft indigo) is reserved exclusively for the loading spinner and interactive focus states, creating a visual focal point that draws the eye without overwhelming. The primary-container (#e5e4ff) provides a subtle tinted background for the spinner's inactive border, creating depth through transparency rather than saturation. On-surface (#1a1a1a) is the dominant text color, applied to the heading and domain name for maximum readability at 24px/600 weight. On-surface-variant (#666666) is used for supporting copy ('Please wait…') at 14px, maintaining hierarchy through weight and color rather than size alone. The surface stack (white #ffffff at the base, progressing through grays to #d0d

Typography

The typography system uses DM Sans exclusively, a geometric sans-serif that conveys both technical precision and human warmth. The hierarchy is built on weight and size rather than multiple typefaces: headline-md (24px, 600 weight, 1.4 line-height) anchors the primary message, while label-md (14px, 600 weight) and body-md (16px, 400 weight) support it. The generous line-height (1.4–1.5) and letter-spacing (-0.01em to 0em) create breathing room, essential for a page designed to calm rather than rush. On small screens (max-width: 480px), the headline scales to 18px and the spinner shrinks to 48px, maintaining proportional hierarchy. Apply text-rendering: optimizeLegibility and -webkit-font-smoothing: antialiased to all text elements to ensure crisp rendering across browsers.

Layout

The layout is a single-column, centered composition built on a 1-column grid with a 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, creating a meditative focal point. Padding of 20px on the body ensures the content never touches the viewport edge on mobile. The spinner sits 32px above the heading (margin: 0 auto 32px), and the heading sits 16px above the supporting text, using the md spacing token (24px) for section separation. This rhythm—64px spinner, 32px gap, 24px heading, 16px gap, 14px text—creates a visual cadence that feels intentional without being rigid. The container itself has no padding; all internal spacing is managed through margin on child elements

Elevation & Depth

Elevation in this system is minimal and purposeful, relying on subtle shadows rather than layering or depth gradients. The base level (Level 1) is the white background (#ffffff) with no shadow. Level 2 (interactive elements like dropdown panels) uses a single, soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is tight (3px blur, 8px spread) and dark enough to separate the panel from the background without creating visual drama. There is no Level 3; the design intentionally avoids stacked elevation to maintain the minimalist aesthetic. The spinner itself has no shadow; its dep

Shapes

The shape philosophy is 'Geometric Precision'—clean, predictable, and functional. The spinner uses border-radius: 50% to create a perfect circle, the only fully rounded element on the page. Dropdown panels and select options use border-radius: 4px (0.25rem), a subtle rounding that softens the corners without introducing visual softness. This distinction—full rounding for the primary interactive element (spinner), minimal rounding for secondary UI—creates a clear visual hierarchy. The 4px radius is applied consistently to all panel-based components (select-panel, select-option) to maintain a co

Components

Loading & Feedback The spinner-ring component is the visual anchor of the interface. It uses a 64px square container with a 4px border in primary-container (#e5e4ff), with the border-top colored in primary (#6366f1). The animation spins continuously at 1s per rotation (animation: spin 1s linear infinite), creating a gentle, non-aggressive loading indicator. On tablets (max-width: 768px), the spinner scales to 56px; on mobile (max-width: 480px), it shrinks to 48px with a 3px border-width to maintain visual weight. The spinner has no box-shadow; its depth is purely chromatic.

Typography & Messaging The heading-primary component applies headline-md (24px, 600 weight, 1.4 line-height) to the main message, with color set to on-surface (#1a1a1a). The heading-domain variant applies the s

Do's and Don'ts

**Do**

• Do use the primary color (#6366f1) exclusively for interactive elements like spinners, focus states, and active indicators—never for backgrounds or body text.
• Do maintain the centered, single-column layout on all screen sizes; use the responsive breakpoints (768px, 480px) to scale typography and spinner size proportionally.
• Do apply the soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to any elevated surface (dropdowns, modals) to create subtle depth without visual clutter.
• Do use DM Sans at 600 weight for headings and 400 weight for body text; avoid mixing typefaces or using weights outside 400 and 600.
• Do preserve the generous line-height (1.4–1.5) and whitespace; the minimalist aesthetic depends on breathing room, not compact layouts.

**Don't**

• Don't use multiple accent colors or gradients; the single indigo (#6366f1) is the brand's only chromatic accent—all other colors are neutral or grayscale.
• Don't apply shadows to the spinner or other primary interactive elements; depth should be chromatic (color contrast) rather than spatial.
• Don't use border-radius values > 1rem (16px) except for the spinner (50%); the design relies on geometric precision, not organic softness.
• Don't add animations or transitions beyond the spinner's 1s rotation; the interface should feel calm and deliberate, not playful or energetic.
• Don't deviate from the 600px max-width container; wider layouts break the centered, meditative composition that defines the brand.