EFG International Security Verification

Overview

EFG International's security verification interface embodies 'Institutional Clarity'—a design philosophy that prioritizes trust, precision, and accessibility over visual flourish. The brand serves corporate and institutional users who require immediate, unambiguous communication during security checkpoints. The aesthetic is deliberately restrained: a near-white canvas (#f2f2f2 backgrounds, #313131 text) with surgical precision in spacing and typography, punctuated by three purposeful accent colors—a deep institutional blue (#0051c3) for primary actions, a success green (#2db35e) for verification completion, and a warning red (#fc574a) for errors. The interface conveys confidence through negative space and high contrast, never through decoration.

The voice is formal yet human: direct, reassuring, and free of jargon. Example: 'Verify you are human' (not 'Complete CAPTCHA verification protocol'). Every word serves a function. The design rejects skeuomorphism, gradients, and motion for motion's sake—instead, it uses micro-interactions (30px status badges with 0.36s animations, 2px focus outlines at 2px offset) to signal state changes. The brand personality is that of a trusted security partner: competent, transparent, and always one step ahead of malicious actors.

Colors

The color system operates on a principle of 'high-contrast institutional trust.' The primary surface is near-white (#ffffff, #f2f2f2 for containers) paired with near-black text (#313131 for primary, #595959 for secondary). This 18:1+ contrast ratio ensures legibility in all contexts and accessibility compliance (WCAG AAA). Primary accent (#0051c3, a deep institutional blue) is reserved exclusively for interactive elements—buttons, links, and focus states—making every clickable element immediately identifiable. Secondary accent (#2db35e, a confident green) signals successful verification and positive outcomes; it appears in success badges and completion states. Tertiary accent (#fc574a, a warning coral-red) and error (#b20f03, a darker red) communicate failure states, security warnings, and

Typography

The type system uses a single sans-serif family (system-ui stack: Segoe UI, Roboto, Helvetica Neue, Arial) to ensure consistent rendering across platforms and reduce cognitive load. Display (60px, 700 weight, -0.04em tracking) anchors hero sections; headline-lg (40px, 600 weight, -0.02em tracking) titles major sections; headline-md (28px, 600 weight) subtitles; body-md (16px, 400 weight, 24px line-height) carries all body copy; label-md (14px, 600 weight, 0.01em tracking) labels inputs and buttons. The hierarchy is strict: weight and size increase together, never inversely. Letter-spacing is negative only at display sizes (where large letterforms need visual tightening) and positive at label sizes (where small caps benefit from breathing room). All text uses 1.5x line-height multiplier (24

Layout

The layout uses a fixed 12-column grid with a max-width of 960px (container-max-width), centered on the viewport with 24px gutters (gutter token). The main content area (.main-content) uses margin: 8rem auto (128px top margin, auto horizontal) on desktop, reducing to 4rem (64px) on mobile (width ≤ 720px). Padding-left: 1.5rem (24px) ensures edge breathing room. Sections are separated by lg spacing (40px) for visual rhythm; cards and form groups use md spacing (24px) internally. The grid is fluid within the container—no fixed column widths—allowing text and components to reflow naturally. Whitespace is weaponized: the verification card occupies roughly 25% of the viewport width, leaving 75% as negative space, which amplifies focus and reduces cognitive friction. The spacing scale (xs: 4px,

Elevation & Depth

Depth is achieved through subtle shadows and borders, never through color or blur. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and inputs, md (0 4px 12px rgba(0, 0, 0, 0.08)) for modals and overlays, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for critical alerts. Cards use a 1px solid border at #d9d9d9 (outline-variant) combined with sm shadow to separate from the background without visual heaviness. Inputs use a 2px solid border at #d9d9d9 (outline-variant) that shifts to 2px solid #0051c3 (primary) on focus, with outline: 2px solid #0051c3 and outline-o

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully, never decoratively. Buttons and inputs use rounded: md (0.5rem / 8px) to soften hard edges while maintaining a technical, institutional feel. Cards use rounded: md (8px) for consistency. Status badges use rounded: full (9999px) to create perfect circles, signaling completion or state change. Borders are always 1px or 2px (never 3px or thicker), rendered at #d9d9d9 (outline-variant) or #b6b6b6 (outline). The rationale: sharp 90° corners would feel cold and hostile in a security context; full rou

Components

Action Elements Buttons use a strict two-state system: primary (background: #0051c3, color: #ffffff, padding: 24px horizontal, height: 48px, rounded: 8px, border: 1px solid #0051c3) and secondary (background: transparent, color: #0051c3, border: 2px solid #0051c3, same padding and height). Hover states shift primary to #003681 (inverse-primary-container) and secondary to background: #b9d6ff (primary-container). Focus states add outline: 2px solid #0051c3 at outline-offset: 2px. All buttons use label-md typography (14px, 600 weight, 0.01em tracking) and transition: background-color 150ms ease-out, border-color 150ms ease-out for smooth state changes.

Containers & Surfaces Cards (.card-container) use background: #ffffff, border: 1px solid #d9d9d9, rounded: 8px, padding: 24px, and bo

Do's and Don'ts

**Do**

• Do use high contrast (18:1+) between text and background; #313131 on #ffffff is the standard pair.
• Do reserve the primary blue (#0051c3) exclusively for interactive elements—buttons, links, focus states—to create a clear affordance hierarchy.
• Do use 24px gutters and 40px section margins (lg spacing) to create breathing room and reduce cognitive load in security contexts.
• Do apply 2px focus outlines at 2px offset on all interactive elements; never remove focus states for keyboard accessibility.
• Do use 8px border-radius (rounded: md) on buttons and cards; avoid sharp corners (0px) or full rounding (9999px) except for badges.
• Do pair 600-weight typography with larger sizes (28px+) for headings; use 400-weight for body text (16px) to maintain readability.

**Don't**

• Don't use colors outside the defined palette; no custom hex values or gradients—every color must map to a token.
• Don't apply shadows heavier than md (0 4px 12px rgba(0, 0, 0, 0.08)); institutional trust requires clarity, not depth.
• Don't use border-radius > 1rem (16px) except for badges; excessive rounding feels frivolous in a security context.
• Don't remove or hide focus outlines; they are non-negotiable for keyboard navigation and accessibility compliance.
• Don't mix typefaces; the system uses a single sans-serif stack (system-ui, Segoe UI, Roboto, etc.) for consistency.
• Don't use animations longer than 600ms or easing functions other than cubic-bezier(0.2, 0.7, 0.2, 1); motion should feel purposeful, not playful.