Verify it's you · Aperture (OTP / 2FA, graphite-platinum)

Summary

A full-bleed OTP / two-factor verification screen for a fictional product, 'Aperture', on a warm off-white 'paper' canvas. A sticky translucent nav spans the top, a single centered glass card holds the whole verify-code flow, and a minimal footer closes the page. The card is framed by a 'Two-factor' eyebrow pill above and an end-to-end-encryption reassurance line below; inside, a graphite lock icon, a 'Verify it's you' title, a masked-destination subtitle, a row of six single-digit OTP inputs (split 3 + 3 by a small platinum dash), a full-width graphite 'Verify code' button, a row of six platinum progress dots that fill graphite as digits are entered, and a count-down 'Resend' control. The whole thing sits over a calm ambient backdrop: a soft platinum glow blob top-center over a paper-to-paper2 vertical gradient, plus a faint grain veil.

Style

Calm, premium, light-mode security UI built on a graphite + platinum + warm-paper system, with zero saturated color. Canvas is a warm off-white 'paper' (#f6f5f2) deepening to 'paper2' (#efeee9); near-black 'ink' graphite (#1c1c1e) carries text, the lock icon, the primary button and focus states; a cool 'platinum' grey (#c7c7cc, dim #9a9aa0) is the only secondary accent, used for the card accent rail, the OTP separator dash, the progress dots and muted icons. Surfaces are subtle translucent white glass (white at ~85% over paper) with hairline ink/10 borders and very soft, deep, low-opacity shadows. Inter throughout (400-800) with tight tracking on the heading and OpenType features (ss01/cv11/cv05) on. Generous rounded corners (card ~26px, button ~16px, OTP inputs ~12px), an inner-gloss top sheen on the card, and a graphite focus ring on the inputs give it a high-end, trustworthy, almost stationery-like feel.

Layout & Structure

A single full-height page centered on one narrow auth column (max-width ~440px). A sticky translucent top nav and a full-bleed paper2 footer bracket a min-h-screen hero/auth main that vertically and horizontally centers the card over the ambient backdrop. Above the card sits an eyebrow 'Two-factor' pill; the card itself stacks the verify flow top to bottom (lock icon -> title -> subtitle -> six OTP inputs -> Verify button -> progress dots -> resend); below it sit an encryption reassurance line and a two-link helper row.

Sticky nav

Hero / auth main

Eyebrow + heading

Verify card

OTP inputs

Verify button + progress dots + resend

Reassurance + helper links + footer

Special Notes

Color tokens (exact): ink-900 #1c1c1e, ink-800 #222224, ink-700 #2c2c2e, ink-600 #3a3a3c; platinum DEFAULT #c7c7cc, platinum-soft #d6d6db, platinum-dim #9a9aa0; paper #f6f5f2, paper2 #efeee9. Two-tone system: graphite (ink) for text/CTA/focus, platinum as the ONLY secondary accent (rail, OTP dash, dots, muted icons) — NO saturated color anywhere. Font: 'Inter' everywhere (weights 400/500/600/700/800) via Google Fonts, with font-feature-settings 'ss01','cv11','cv05' and a custom letterSpacing 'tightest' = -0.04em. Built on Tailwind (CDN) with a custom theme (ink/platinum/paper scales) and a small CSS layer for the .otp input states (focus = ink border + 4px ink/8 ring + lift, .filled state), the .verify-btn hover lift, the .hairline sheen, the .nav-link grow-from-left underline, the .grain veil and a @keyframes floatUp 'rise' entrance. Icons via Iconify (phosphor 'ph:*' set: aperture-bold, shield-check-fill, lock-key-fill, arrow-right-bold, clock-countdown, lock-simple, arrow-u-up-left). OTP JS handles auto-advance, backspace, numeric-only (blocks 'e'), paste-to-fill, dot syncing and a 30s resend countdown. The masked destination ('•••• 4471'), the 'Aperture' brand and the copy are illustrative placeholders. Fully responsive: the narrow 440px card recenters on all widths; OTP boxes widen 44px->50px at sm; nav center links hide below md and 'Sign in' hides below sm; the footer row stacks on mobile. Light mode, antialiased, smooth scroll.