Screen 1 — Login / Sign-in

Identity & Access (Foundation) · route /login

PURPOSE

Secure sign-in and the first impression of the product's identity and trust. Seeds the design system for every following screen.

LAYOUT

Desktop two-panel split — brand side ~45% (dark, logo placeholder, value line, trust cues), sign-in card ~55% on light background, vertically centred. Tablet: card centred. Mobile: single column, logo on top.

COMPONENTS & CONTENT

Heading "Sign in" + "Welcome back — sign in to continue." · Email field · Password field with show/hide · Remember me (left) and Forgot password? (right) · Primary full-width "Sign in" · Optional "Sign in with SSO" (hideable per org) · Footer "© Your Product · Secure sign-in".

STATES

Default · Focus (visible ring) · Filled · Loading ("Signing in…" + spinner) · Error (top banner "Incorrect email or password" + inline field errors) · Disabled until fields are valid.

ACCESSIBILITY

Labels linked to inputs, visible focus, WCAG AA contrast, keyboard navigable, errors announced, accessible show/hide toggle, tap targets ≥44px.

NAVIGATION

Entry: /login by default; any protected route without a session, logout and session expiry land here. Sign in ✓ → Verify identity. Forgot password? → Forgot password screen. SSO → external provider → back to app. Failed sign-in stays here with the error banner.

Screen 2 — Verify Identity (MFA)

Identity & Access (Foundation) · route /login/verify

PURPOSE

Second factor after the password — mandatory MFA for staff. Recurring verification for users already enrolled; first-time enrolment is a separate screen.

LAYOUT

Identical two-panel split and brand panel as Screen 1; only the right card's content changes. Same card width, padding and shadow. Tablet centred, mobile single column.

COMPONENTS & CONTENT

"← Back to sign in" · shield icon · "Verify your identity" + "Enter the 6-digit code from your authenticator app." · 6 segmented code boxes (auto-advance, backspace back, paste whole code, numeric only) · "Trust this device for 30 days" · Primary "Verify" · "Resend code" with 30s cooldown · "Use a different method" · "Having trouble? Contact your administrator." · same footer.

STATES

Default · Focus · Filled · Error "Invalid or expired code. Please try again." (boxes red) · Loading "Verifying…" · Success (green check, then redirect) · Resend cooldown · Lockout "Too many attempts. Please sign in again." · Method chooser.

ACCESSIBILITY

Combined "Verification code" group label, per-box labels, visible focus, errors announced, paste-friendly, readable timer, keyboard navigable, boxes ≥44px on mobile.

NAVIGATION

Entry: from Login after a correct password. Verify ✓ → Dashboard (role-based home). Verify ✗ stays here with the error state. Resend code re-sends, no navigation. Back to sign in → Login. Use a different method → method chooser. Lockout → Login with message.