put.io · patterns · auth, 2fa

Tier 1Tier 1 · Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--yellow-solid · --radius-md · --radius-sm · --dur-fast

L · 09 Two-factor verification Authenticator-app code · 6-digit slot input

Two-factor authentication

Authentication code

Open your authenticator app and enter the 6-digit code.

Wrong account?Sign out

L · 11 Two-factor · error Whole OTP turns red · form-level callout

Two-factor authentication

Authentication code

That code doesn't look right. Enter the current 6-digit code from your authenticator app.

Wrong account?Sign out

L · 12 Two-factor · success Verified code · automatic continuation

Two-factor authentication

Authentication code

Code verified. Continuing…

Layout rules.
L · 09 2FA uses 6 digit slots with a separator between groups of three
L · 11 a failed code flips every slot red, border and text only, plus an inline callout
L · 12 success keeps the verified code visible, announces continuation, and has no dead-end action
Recovery stays absent until the consumer owns a working recovery-code route