Auth module → Material 3 / Flutter / token mapping, extending 00-shared/04.
Every color, type, spacing, elevation, radius, icon, motion reference traces to
00-shared/02_Design_Tokens.md.
| Screens | Theme | Exception |
|---|
| Pre-auth (login/register/verify/reset) | surface, primary | emphasis: brand primaryContainer; input fill surfaceVariant |
| Security screens (authed) | standard shell | destructive = error |
| 2FA QR card | surfaceContainerHigh | dark: QR contrast ensured (inverseSurface) |
| Component | M3 / Flutter | Tokens | Elev | Radius |
|---|
| Login card | Card | surfaceContainerLow, outlineVariant border | e-1 | r-lg |
| Populated text field | TextFormField | fill surfaceVariant, border outline, focus primary | — | r-md |
CTA Log in | FilledButton | primary/onPrimary | — | r-md |
| Secondary CTA | TextButton | primary, underline on hover | — | — |
| Register CTA | FilledButton | primary | — | r-md |
| Forgot/reset | OutlinedButton | outline/onSurface | — | r-md |
| TOTP boxes | FilledButton-like boxes | box surfaceVariant, focus primaryContainer | — | r-md |
| Error chip | AppBanner/inline | errorContainer/onErrorContainer | — | r-sm |
| Offline banner | AppOfflineBanner | tertiaryContainer | e-1 | — |
| Sessions card | AppCard | surfaceContainerLow | e-1 | r-lg |
| Current-device highlight | AppCard tonal | primaryContainer | e-1 | r-lg |
| API key ring | AppCard | surfaceContainerLow, secret mono | — | r-lg |
| Secret reveal | AppCard | tertiaryContainer bg (warning-kind) | e-2 | r-lg |
| Dialogs/sheets | AppDialog/AppBottomSheet | surfaceContainerHigh | e-4/e-5 | r-lg/r-xl |
| FAB (api-keys) | FloatingActionButton | primaryContainer | e-3 | r-full |
| Snackbar | SnackBar | inverseSurface | e-5 | r-md |
| Token | Screen element |
|---|
headlineMedium | screen titles (Welcome/Security hub headings) |
titleLarge | create-key card, dialog titles |
titleMedium | session rows, key rows, section headers |
bodyMedium | labels, helper lines |
bodySmall | "created/last used", disclaimer, hints |
labelLarge | buttons, tabs (Security tabs) |
mono | token/secret/auto-keys sk… prefix, TOTP digits option |
Numerals (timestamps, key counts) use FontFeature.tabularFigures().
Material Symbols outlined; module map: login/mail, lock, password, fingerprint,
shield, devices, key, content_copy, logout, refresh, warning, check_circle.
| Purpose | Token | Applied to |
|---|
| Form submit→result | m-base | swap to success/error |
| Route transitions | m-base | stack push/pop |
| List exit on revoke | m-base | removal |
| Totp error | m-fast+shake | — |
| Badge pop | m-fast | 2FA on/API-key count |
| Hero QR | m-slow | 2FA QR scale-in (forward) |
Rules: reduced-motion substitutes fades/instants (08 §4).
- All text passes 4.5:1; interactive chrome 3:1.
- Dark: chromatic roles TBD by designer (00-shared/02 §1.4); QR on
inverseSurface.
- No sole-color status; 2FA off/on uses badge + icon (09 §9).
| Class | Pre-auth | Security |
|---|
| phone <600 | single column | lists full width, detail pushed |
| 600–839 | centered card | master-detail |
| ≥1200 | centered + max width 480 | master-detail breaks, hover rings |