Atlas Login

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 <label> via for/id

OAuth buttons

<button> with descriptive aria-label and brand mark

Live status

role="status" with aria-live="polite" for the confirmation

Validation

Native :user-invalid styling, no color-only error cues

Field errors

Each input wires aria-describedby to its error text and toggles aria-invalid on input/blur

Password reveal

aria-pressed button with an aria-label that swaps between Show and Hide

Caps-Lock warning

Polite aria-live hint driven by getModifierState('CapsLock'), cleared on blur

Decorative art

The SVG scene is aria-hidden inside an aria-label-ed complementary aside

Focus indicators

:focus-visible with --ring outline on all elements

Reduced motion

prefers-reduced-motion: reduce disables all animations including the art drift

Customise it with AI

Open Atlas Login in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the login is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.