Yandex SmartCaptcha

Overview

Yandex SmartCaptcha is a security verification interface designed to balance user trust with friction reduction. The aesthetic is 'Minimal Institutional'—clean, purposeful, and deliberately restrained. The UI employs a bright, confident yellow accent (#ffdd57) on a white card floating above a photographic background, creating visual hierarchy through color contrast rather than complexity. The design evokes clarity and legitimacy: users immediately recognize this as an official security checkpoint, not a distraction. The brand personality is direct and reassuring: precise, never condescending, and optimized for rapid comprehension. Example voice: 'Confirm you're human. One click.'

Colors

The color system operates on a dual-theme foundation: light mode (white surfaces, black text) and dark mode (dark gray surfaces, light text). Primary (#ffdd57) is the call-to-action yellow—used exclusively on the main verification button and focus states, creating unmistakable affordance. Secondary (#5282ff) is a corporate blue reserved for checked states, progress indicators, and link focus rings. Error (#ff3333) signals validation failures with high contrast (rgba(255, 51, 51, 0.12) for error backgrounds). Surface colors range from pure white (#ffffff) in light mode to #313036 in dark mode, with intermediate container shades (#f5f5f5, #e8e8e8) for subtle layering. On-surface text is pure black (#000000) in light mode and off-white (#dfdfe0) in dark mode. Outline tokens (#cccccc, #d9d9d9)

Typography

The type system uses YS Text (Yandex's proprietary typeface) with Helvetica Neue and Arial as fallbacks, ensuring consistent rendering across platforms. Display and headline weights (600–700) are reserved for page titles and modal headers, set at 20–40px with tight line-height (1.2–1.3 ratio) to convey authority. Body text (400 weight, 14–16px) is the workhorse: used for explanatory copy, error messages, and form labels. Label styles (12–14px, 500 weight) appear on buttons and badges with 0.01–0.05em letter-spacing to enhance legibility at small sizes. Critical instruction: apply text-shadow 0 1px 1px rgba(0, 0, 0, 0.1) on white text overlaid on photographic backgrounds (e.g., the 'Yandex' logo area) to maintain 4.5:1 contrast ratio. Line-height is consistently unitless (1.4–1.5) to scale

Layout

The layout uses a centered card paradigm: a fixed-width container (max 460px on desktop, 100% minus 6.6vh on mobile) floats above a full-bleed background image. The grid is single-column, with semantic spacing: 40px padding-bottom between logo and heading, 16px between heading and body text, 40px before the checkbox component. Container max-width is 1280px for the overall page, but the captcha card itself is constrained to 460px to maintain focus. Gutter spacing (24px) applies to horizontal padding on mobile; on desktop, the card is centered with auto margins. Vertical rhythm follows an 8px unit scale: 8px (xs), 12px (sm), 24px (md), 40px (lg). The background image extends edge-to-edge, creating immersion; the white card uses border-radius 14px and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15)

Elevation & Depth

Depth is achieved through a three-level shadow system. Level 1 (Base): no shadow; used for inline text and flat backgrounds. Level 2 (Card/Modal): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), applied to the main captcha card and dropdown panels, creating gentle separation from the background. Level 3 (Hover/Focus): box-shadow 0 4px 6px rgba(0, 0, 0, 0.1) combined with a 1px border at rgba(0, 0, 0, 0.15), used when cards or buttons are interacted with. Buttons use a pressed state (transform: scale(0.96)) rather than shadow change, signaling tactile feedback. Focus rings are 2px solid borders in th

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are present but restrained, avoiding the playful aesthetic of consumer apps. Border-radius follows a deliberate scale: 4px (sm) for small UI elements like dropdown arrows and icon containers; 8px (DEFAULT) for input fields and minor components; 11px (md) for the checkbox container and advanced captcha borders, striking a balance between modern and institutional; 12px (lg) for primary buttons and modals, creating a subtle visual distinction from inputs; 14px (xl) for the main captcha card, the largest radius, emphasizing it as the pr

Components

Action Elements Buttons use a two-tier system. Primary buttons (#ffdd57 on white, 8px 16px padding, 40px height, 12px border-radius) are the main CTA; on hover, the background shifts to #fac000 (darker yellow) with no text color change. Focus state adds a 2px solid border in #fac000 with a 4px offset and 0 0 0 4px rgba(250, 192, 0, 0.2) box-shadow. Secondary buttons (rgba(176, 189, 214, 0.2) background, white text) are used in dark-mode contexts (e.g., cookie consent); on hover, opacity increases to rgba(176, 189, 214, 0.3). All buttons use transition: transform 0.1s ease-out, color 0.15s linear; on press, transform: scale(0.96) provides tactile feedback.

Containers & Surfaces The checkbox captcha component uses a white card (or #313036 in dark mode) with 1px solid rgba(0, 0, 0, 0

Do's and Don'ts

**Do**

• Do use #ffdd57 (primary yellow) exclusively on CTAs and focus indicators—it is the brand's signature affordance and must never be diluted or overused.
• Do maintain 1px solid borders on all input fields and cards; the thin border creates visual definition without heaviness, reinforcing the 'minimal institutional' aesthetic.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) to floating cards and modals; this specific shadow value is the canonical depth treatment and ensures consistency across themes.
• Do use YS Text as the primary typeface; if unavailable, fall back to Helvetica Neue, then Arial—never use system-ui or generic sans-serif, as it breaks the brand's institutional voice.
• Do implement dark mode using the provided CSS custom properties (--smart-captcha-background-color: #313036, etc.); the theme system is fully wired and must be respected.

**Don't**

• Don't use primary yellow (#ffdd57) on non-interactive elements or backgrounds; it must remain reserved for buttons and focus states to preserve its affordance signal.
• Don't apply border-radius greater than 14px on any component; the brand uses restrained rounding (4–14px scale) to maintain institutional credibility.
• Don't add drop shadows deeper than 0 4px 6px rgba(0, 0, 0, 0.1); excessive shadow creates visual clutter and contradicts the minimal aesthetic.
• Don't mix font families within a single component; YS Text must be used consistently, with Helvetica Neue and Arial only as fallbacks, never as intentional alternatives.
• Don't override the error color (#ff3333) or use it for non-error states; error red must remain semantically reserved for validation failures and alerts.