Save the Dogs Design System

Save the Dogs · teal

Resolved: light
Overview

Explainers

The “explain this page” family. ExplainerPanel is a collapsible comprehension panel — a Callout lead, optional label/value facts (DescriptionList) and optional “what to do” Steps — composed only of @phauna/ds atoms over a native <details>, so it is fully server-safe (no client JS for the collapse). AuthExplainer is the thin auth-ceremony variant that answers why you're here / what this protects / what to do, made to sit in an AuthPage aside. Build once; every page borrows one affordance.

ExplainerPanel
title (the always-visible toggle line), summary (Callout lead), details? ({ label, value }[] → DescriptionList), steps? (StepItem[] → Steps), icon? (a rendered element), defaultOpen? (default true), className?. Server-safe: collapse is a native <details>/<summary> — no hooks, no 'use client'.
AuthExplainer
Thin ExplainerPanel variant for the chrome-less auth screens: reason (why you're here → Callout), protects? (what this protects → a labelled fact), steps? (what to do → Steps), plus a default shield icon + “Why you're seeing this” title. Drop it in an AuthPage aside.
composition
No bespoke widgets — Callout + DescriptionList + Steps + the Surface primitive (rendered as="details"). Re-skins entirely from the DS tokens.
a11y
The <summary> is the keyboard-operable toggle; the chevron is aria-hidden and rotates from the [open] state (never color-only). Facts are a real <dl>; steps keep their ordered-list semantics. Rotation honours reduced-motion.
safety
Presentation only. AuthExplainer EXPLAINS an auth/MFA/step-up gate — it never performs, weakens, or substitutes for the check itself.

ExplainerPanel

A collapsible panel that explains a page in one place: a Callout lead, an optional DescriptionList of facts, and an optional Steps run of actions. Click the header to collapse/expand (native <details> — no JS). The first demo starts open; the second starts collapsed (defaultOpen={false}).

What are mail aliases?
A mail alias forwards email from a friendly public address (like adoptions@savethedogs.io) to a real inbox. Your team shares one address without sharing a password — and you can re-point it any time without telling the world a new address.
Who can edit
Admins with the Mail role
Applies to
savethedogs.io and app.savethedogs.io
Propagation
Live within ~1 minute of saving
  1. 1Pick the public addresse.g. adoptions@savethedogs.io — the address the world sees.
  2. 2Choose the destination inboxWhere forwarded mail should actually land.
  3. 3Save & verifySend a test email to confirm it forwards end-to-end.
open by default · Callout summary + DescriptionList facts + Steps actions
What does “View as” do?
View-as renders the app exactly as another rescuer sees it — same data scoping, same hidden actions — so you can debug a “why can't I see X?” report without their password. It's read-only and every session is recorded in the auth log.
collapsed by default (defaultOpen={false}) · summary only, no steps/facts

AuthExplainer

The auth-ceremony variant. It answers the three questions a gate raises — why you're here, what it protects, what to do — and is sized to sit in an AuthPage aside (shown here in a constrained column to mimic that placement). It only EXPLAINS the gate; it never is the gate.

Why you're seeing this
You're about to open personally identifiable information (PII). Step-up verification confirms it's really you before sensitive records unlock.
What this protects
Rescuer phone numbers, home addresses, and other PII.
  1. 1Open your authenticator appGoogle Authenticator, 1Password, Authy — whatever you enrolled.
  2. 2Enter the 6-digit codeIt refreshes every 30 seconds.
  3. 3ContinueElevated access lasts 15 minutes, then re-locks.
step-up / sensitive-data gate (default shield icon)
About this invitation
Someone on your team invited you to the Save the Dogs admin. Setting a password here links this email to your account and grants the role they chose for you.
What this protects
The rescuer roster and every team's organizing data.
  1. 1Set a passwordAt least 12 characters — a passphrase is great.
  2. 2Confirm your nameHow teammates will see you across the app.
  3. 3Enroll a second factorRequired before you can view any PII.
invite acceptance · custom title + icon, collapsed by default
reason / protects / steps
reason → the Callout lead (why you're here). protects → a single “What this protects” labelled fact. steps → the “what to do” Steps run. Only reason is required.
title / icon / defaultOpen
title defaults to “Why you're seeing this”; icon defaults to a shield (pass a rendered element to override); defaultOpen defaults to true.
placement
Built for an AuthPage `aside` (the marketing/guidance panel beside the form on wide screens). Server-safe, so it drops straight into the server-rendered auth shell.