# Atlas Login > A two-column Atlas login: a bare Poppins form with pill OAuth rows, email and password fields (live `:user-invalid` validation, reveal toggle, Caps-Lock hint), remember-me and a springy pill submit, beside a deep accent panel of JS-rendered drifting topographic contour art. - Category: Login - Frameworks: Vanilla, React + CSS, React + Tailwind - Design system: Aperture - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: authentication, form, validation - Page: https://builder.atheros.ai/components/login-meridian - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_login_meridian/preview-6cea6327ed23.webp ## Features - Design-system adaptive controls use an opaque surface/foreground pair, keep 44px targets, expose `aria-busy` during submission, and focus the first invalid field. - Text links transition to the active design system's contrast-safe primary color on hover, with the underline color following the text - Two-column layout — a bare login form on a ghost-lavender canvas beside a deep-indigo contour-art panel that collapses to a single column below 960px - Generative topographic SVG artwork rendered by `js/art.js` — twin elevation peaks of organic contour rings, a dashed meridian, faint graticule curves, radial glows, official Tabler `map-pin` summit markers and waypoint dots, all tokenized through CSS classes - Calm ambient motion — the two peaks drift in counter-phase and the glow layer breathes, transform/opacity only, fully disabled under `prefers-reduced-motion` - Real HTML5 form validation surfaced through the `:user-invalid` pseudo-class — inline error text only appears after a field is touched - Email and password inputs with `autocomplete`, a password `pattern`, and per-field inline success checks via `:user-valid` - Stacked full-width pill OAuth buttons (Google, Apple) with accessible labels and brand marks - Show/hide password toggle with an accessible `aria-pressed` button and inline Tabler eye icons - Caps-Lock warning on the password field — a polite `aria-live` hint driven by `KeyboardEvent.getModifierState('CapsLock')` - Remember-me checkbox that persists the email to `localStorage` and prefills it on the next visit - Submit is intercepted with `preventDefault` — it validates, runs a simulated async flow (loading spinner → success confirmation), clears the password, and never navigates - Pill-shaped controls — OAuth rows, inputs and submit all use the full radius, honoring the source design's soul; the Atlas badge rides `--chips-radius` clamped to a true capsule so it stays deliberate under squared and pill systems alike - Staggered fade-and-slide entrance that cascades each form section and the art panel into view ## Accessibility - **Form labels** — Every input has an associated `