Yardhsm

Overview

Yardhsm is a security verification interface designed to reassure users during browser security checks with clarity and precision. The design employs a minimalist, tech-forward aesthetic that prioritizes accessibility and user confidence. The visual language is austere yet approachable: a clean white canvas (rgb(255, 255, 255)), precise geometric typography in DM Sans, and a single indigo accent (#6366f1) that draws the eye to the animated spinner—the only dynamic element on the page. The brand personality is calm, transparent, and trustworthy; it speaks to users in plain language without jargon, treating security as a straightforward process rather than a source of anxiety. Voice example: 'Please wait for up to 5 seconds...' — direct, honest, and human.

Colors

The color system is built on a foundation of pure white (surface: #ffffff) paired with a neutral gray hierarchy for secondary information. The primary accent is indigo (#6366f1), used exclusively on the animated spinner's leading edge to signal activity and guide attention. This single accent is the only chromatic element on the page, making it unmissable and reinforcing the brand's commitment to clarity. The surface stack progresses from pure white (#ffffff) through subtle grays (#f5f5f5, #f0f0f0, #e9ecef) to support layered UI elements like dropdown panels. Text hierarchy is managed through the on-surface color (#1a1a1a) for primary content and on-surface-variant (#666666) for secondary information. The primary-container (#e5e4ff) provides a soft lavender background for interactive state

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that conveys precision and modernity. The hierarchy is minimal but purposeful: title-lg (24px, 600 weight, 1.4 line-height) anchors the main heading with authority, while body-md (16px, 400 weight, 1.5 line-height) delivers secondary messaging. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to interactive elements like dropdown options to ensure legibility at small sizes. The letter-spacing increases slightly at smaller sizes (0.03em for label-sm) to maintain optical clarity when text is compressed. All typography uses antialiasing (-webkit-font-smoothing: antialiased) to ensure crisp rendering across browsers. On mobile viewports (max-width: 768px), the heading scales down to headline-md (28px) and label-sm (1

Layout

The layout follows a centered, single-column model with a fixed max-width of 600px, ensuring the interface remains focused and readable on all screen sizes. The container uses flexbox (display: flex; justify-content: center; align-items: center) to vertically and horizontally center content within the viewport (min-height: 100vh). Spacing is managed through a semantic scale: the spinner sits 32px above the heading (margin: 0 auto 32px), the heading is followed by 16px of margin (margin-bottom: 16px), and the body padding is 20px on all sides. The gutter spacing (20px) is applied at the body level to ensure consistent breathing room on mobile devices. The grid is a simple 12-column model, though the single-column layout rarely requires explicit grid usage. Responsive breakpoints adjust spac

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic elevation changes. The base layer is the pure white background (rgb(255, 255, 255)) with no shadow. Interactive elements like custom select dropdowns introduce a single shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), which creates a soft, diffused separation from the background without appearing heavy or intrusive. This shadow is applied at the md elevation level and is the only shadow used in the interface. The spinner, being a purely animated element, casts no shadow; its visual weight comes from the indigo

Shapes

The shape philosophy is 'Technical Minimalism'—sharp where precision matters, rounded only where it aids usability. The spinner uses a full circle (border-radius: 50%) to emphasize its rotational motion and create a sense of continuous activity. Interactive elements like custom select dropdowns use a subtle 4px border-radius (rounded.DEFAULT) to soften corners without introducing unnecessary ornamentation. This 4px radius is applied consistently across all dropdown panels and option containers, creating a cohesive micro-interaction language. Buttons and form inputs, if present, would follow th

Components

Loading & Feedback The spinner-ring component is the visual anchor of the interface. It measures 64px × 64px with a 4px border in primary-container (#e5e4ff), topped with a 4px stroke in primary (#6366f1). The animation rotates continuously at 1s per revolution (animation: spin 1s linear infinite), creating a smooth, reassuring sense of progress. On tablet (max-width: 768px), the spinner scales to 56px × 56px; on mobile (max-width: 480px), it becomes 48px × 48px with a 3px border to maintain visual weight. The spinner sits 32px above the heading, creating clear visual separation.

Typography & Messaging The heading-primary component uses title-lg (24px, 600 weight, 1.4 line-height) in on-surface (#1a1a1a) with 16px margin-bottom. On mobile, it scales to headline-md (28px) to mainta

Do's and Don'ts

**Do**

• Do use the indigo primary (#6366f1) exclusively on interactive elements and loading indicators to maintain visual focus and brand consistency.
• Do maintain the white background (#ffffff) on all surfaces to ensure maximum contrast and readability; never introduce gradients or textures.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to dropdown panels and floating elements to create subtle depth without visual clutter.
• Do scale typography and spacing responsively at 768px and 480px breakpoints to maintain hierarchy and readability across all devices.
• Do use DM Sans at 600 weight for headings and interactive labels to convey precision and modernity; reserve 400 weight for body text.
• Do apply 4px border-radius consistently to interactive elements like dropdowns and select panels for a cohesive, refined appearance.

**Don't**

• Don't introduce secondary colors or gradients; the interface relies on a single accent color and neutral grays to avoid visual noise.
• Don't use shadows heavier than md elevation (0 3px 8px rgba(0, 0, 0, 0.15)); excessive depth contradicts the minimalist aesthetic.
• Don't apply border-radius to typography or primary content areas; reserve rounding for interactive and container elements only.
• Don't use system fonts or fallback stacks in place of DM Sans; the geometric precision of DM Sans is essential to the brand identity.
• Don't exceed the 600px container max-width; the narrow column width ensures focus and prevents content from feeling scattered.
• Don't animate elements other than the spinner; motion should signal activity, not distract from the core message.