Veltris Security Checkpoint

Overview

Veltris Security Checkpoint is a trust-centric verification interface designed to guide users through connection security validation with clarity and reassurance. The aesthetic embraces 'Minimalist Institutional Design'—a style that prioritizes legibility, centered composition, and soft visual hierarchy to reduce user anxiety during security checks. The interface employs a clean white canvas with a single accent blue (#5b9fd8) reserved for interactive elements and status indicators, creating a calm, authoritative presence. The brand personality is professional yet approachable: precise, honest, and never alarmist. Voice example: 'Checking the site connection security' — direct, factual, and reassuring without urgency.

Colors

The color system is built on a neutral foundation with a single, carefully chosen accent. Surface colors range from pure white (#ffffff) to soft grays (#e9ecef, #f0f9fa) that provide subtle visual separation without introducing visual noise. Primary blue (#5b9fd8) is reserved exclusively for interactive elements, focus states, and the icon container background, establishing a clear visual hierarchy. The primary-container (#cce5f0) provides a soft, approachable backdrop for the hero icon, evoking trust through its light, airy quality. Secondary grays (#6c757d, #505050) are used for supporting text and disabled states, maintaining legibility while reducing visual weight. The outline color (#b7b7b7) defines subtle borders (footer divider, select panels) at 1px width. Error red (#d32f2f) is he

Typography

The type system uses a single typeface family (Arial, Helvetica, sans-serif) across all scales to reinforce institutional clarity and reliability. Headline-lg (36px, 700 weight, 46px line-height) anchors the page with the domain name, commanding attention without aggression. Body-lg (18px, 400 weight, 28px line-height) delivers the security message with breathing room and legibility. Label-md (14px, 500 weight, 20px line-height) handles footer text and interactive labels, maintaining readability at smaller scales. Letter-spacing is minimal (0 to 0.03em) to preserve the institutional tone; negative letter-spacing is avoided to prevent the appearance of urgency. All text is rendered in on-surface (#363636) or on-surface-variant (#6c757d) to ensure WCAG AA contrast ratios (4.5:1 minimum). App

Layout

The layout follows a centered, single-column composition that prioritizes focus and reduces cognitive load during security verification. The container max-width is 700px, constraining content to a comfortable reading width while maintaining visual hierarchy on wide screens. The hero section uses 60px top padding and 40px bottom padding (spacing.lg and spacing.md respectively) to create breathing room around the icon and text. The icon container (240px × 240px) is centered with margin: 0 auto 40px, establishing a clear visual anchor. The footer bar is fixed at the bottom with 10px vertical padding and 20px horizontal padding, creating a persistent, lightweight information zone. Gutter spacing (20px) is applied to all horizontal edges to maintain safe margins on mobile. The grid is 12 column

Elevation & Depth

Depth is achieved through subtle shadows and color layering rather than dramatic elevation. The select-panel component uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) (elevation.md) to separate it from the background without creating visual heaviness. The footer bar uses a 1px solid border-top in outline color (#b7b7b7) to define its separation from content, avoiding shadows to maintain the institutional aesthetic. The icon container uses a solid background color (primary-container, #cce5f0) rather than shadow to establish its presence—this creates a 'floating' effect through color contrast rat

Shapes

The shape language is 'Institutional Precision'—a system that favors sharp, functional corners with minimal rounding to convey trustworthiness and clarity. The icon container uses rounded: full (9999px) to create a perfect circle, a universal symbol of completeness and security. Select panels and dropdown elements use rounded: DEFAULT (4px), a subtle radius that softens hard edges without introducing playfulness. Buttons and interactive elements (when present) would use rounded: lg (8px) to balance approachability with professionalism. All border-radius values are applied consistently across c

Components

Interactive Elements Select dropdowns use a white background (#ffffff) with a 1px border in outline-variant (#d0d0d0) and rounded corners (4px). The dropdown panel applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for subtle elevation. Options use padding: 6px 12px with line-height: 1.5 for comfortable touch targets. Hover state applies background-color: #f0f9fa (surface-container-high) with text color shifting to primary blue (#5b9fd8). Selected state uses background-color: #e9ecef (surface-container) with font-weight: 500. Disabled state applies background-color: #e9ecef with color: #6c757d (on-surface-variant) and cursor: not-allowed.

Containers & Surfaces The hero section uses a full-width white background with centered content constrained to 700px max-width. The icon containe

Do's and Don'ts

**Do**

• Do use the primary blue (#5b9fd8) exclusively for interactive elements, focus states, and the icon container to maintain clear visual hierarchy and user attention.
• Do maintain the centered, single-column layout on all screen sizes to preserve focus and reduce cognitive load during security verification.
• Do apply the 4px border-radius consistently across all interactive components (selects, panels, buttons) to reinforce the institutional precision aesthetic.
• Do use the full white background (#ffffff) as the primary surface to convey trust, clarity, and institutional authority.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to dropdown panels and elevated surfaces to create subtle depth without visual heaviness.
• Do use Arial/Helvetica sans-serif at 36px (headline-lg) for primary headings and 18px (body-lg) for supporting text to maintain legibility and institutional tone.

**Don't**

• Don't introduce additional accent colors beyond the primary blue (#5b9fd8); the minimalist palette depends on color restraint to maintain trust and clarity.
• Don't apply rounded corners larger than 8px (rounded.lg) to interactive elements; the institutional aesthetic requires functional, minimal rounding.
• Don't use drop shadows on text or small interactive elements; rely on color contrast and background shifts to establish hierarchy.
• Don't center-align body text; maintain left alignment within the centered container to preserve readability and institutional formality.
• Don't apply animations or transitions to non-interactive elements; keep the interface static and reassuring during security checks.
• Don't use the secondary gray (#6c757d) for primary headings or calls-to-action; reserve it for supporting text and disabled states only.