Resolved: light

System screens

Full-page layout shells for the moments the app has nothing else to show — booting, locked, asking permission, down for maintenance, signing in, or hitting an error. Each is a thin, presentational composition over the <Surface> primitive plus a brand mark, with title / description / children / actions slots. They deliberately do NOT touch real auth or boot logic — you render them from your own gates and pass the copy + controls in. Flip the theme in the top bar to confirm each one re-skins.

SplashScreen
A brand launch / loading shell — a Surface app-icon tile holding the brand glyph, the app name, a tagline, and a loading Spinner (or a custom slot).
LockScreen
A locked state — a Surface card with the brand mark, a lock badge, copy, a slot for an unlock control, and an actions row. Presentational only.
PermissionPrompt
A permission ask — a tinted icon badge, a rationale, an optional detail slot, and Allow / Not-now actions. Wire the platform call into the buttons you pass.
MaintenanceScreen
A planned-downtime notice — brand mark, wrench badge, reassurance copy, an ETA / status slot, and an actions row.
AuthScreen
The formalised login shell — a centered Surface card (brand mark, title, your form slot, a secondary links row, a legal footer) with an optional aside for a split marketing layout on wide screens.
ErrorScreen
A not-found / error page — a large status code, a tinted icon badge, copy, an optional detail slot, and Go-home / Retry actions.

The screens

Each screen below is rendered live inside a capped preview window (normally each fills the viewport).

Save the Dogs

Foster homes for dogs in need.

v2.4.0

<SplashScreen> — app-icon tile + wordmark + tagline + spinner
Save the Dogs

Locked

Enter your 4-digit code to unlock.

<LockScreen> — brand + lock badge + code slot + actions

Turn on notifications?

We'll only ping you about events and dogs you follow.

  • New events near you
  • Updates on dogs you follow

You can change this anytime in Settings.

<PermissionPrompt> — icon badge + rationale + Allow / Not now
Save the Dogs

We'll be right back

We're doing some quick upkeep to keep things running smoothly. Thanks for your patience.

<MaintenanceScreen> — wrench badge + ETA banner + status action
Save the Dogs

Welcome back

Sign in to your account to continue.

New here?

By continuing you agree to our Terms & Privacy Policy.

<AuthScreen> — login shell: brand + form slot + secondary + footer

404

Page not found

We couldn't find the page you were looking for. It may have moved or no longer exists.

<ErrorScreen> — big code + badge + Go home / Go back

AuthScreen — split layout

Pass an aside slot and AuthScreen becomes a two-column split on wide screens: a brand / marketing panel beside the login card. On narrow screens the aside is hidden and it falls back to the centered card.

Save the Dogs

Welcome back

Sign in to pick up where you left off.

<AuthScreen aside={…}> — split marketing + sign-in (resize / wide view shows two columns)