Project · Adoption Infrastructure · Kickoff v0.1 · 09 May 2026

An open standard, an open-source reference, and the first genuinely calm tool for the people doing this work.

Author · Design
Status · Read-back & system proposal
Surfaces · A1–A6 · S1–S8 · X1–X4 · E1–E10
Fidelity · Wireframe → mid-fi · system before screens
§ 0 · Read-back

The constraints, in our own words.

Before sketching anything, here is what we heard. Anything we’d push back on is in the dark card.

01 · Audience

Mobile-first for staff. Desktop is secondary.

The kennel volunteer on a phone in a metal-roofed building is the canonical user. The office admin on desktop is the minority. Bulk & pivot live on desktop; everything else starts mobile.

02 · State

The user is exhausted.

Aggressive autosave. Undo by default with a 10s toast. No “Are you sure?” except for genuinely irreversible actions (euthanasia, deceased, permanent delete). Empty states welcome; never scold.

03 · Body

One hand. Gloves. Leash in the other.

Touch targets 48px floor, 56–64px for primary. Primary action lives at the bottom. Hover is decoration, never function. Swipe is an accelerator; tap is the path.

04 · Network

Offline is the rule, not the exception.

Every form saves locally first and reconciles. Every record carries a sync state — synced / pending / conflict — and conflicts are surfaced honestly with both edits visible.

05 · Demographics

Older volunteers. Mobile-only adopters.

16px body floor, 1.5 leading. EN+ES at v1, structured for VI/TL/ZH/HT/PT/SO/HMN/RU/BN/HY/KM/FA. SMS is a first-class channel, not a notification afterthought.

06 · Sensory

Status is icon + text + tone. Never color alone.

Okabe-Ito-leaning palette. No red/green pair. No autoplay. prefers-reduced-motion honored wholesale. No sound on load.

07 · Trauma

No countdowns. No urgency theater.

Difficult content is opt-in, not default. A “Take a break” affordance exits image-heavy panels into a calm view. An “In memory of” mode globally softens forever-home copy.

08 · Politics

Civic infrastructure, not SaaS pitch.

Closer to GOV.UK / USWDS than current pet-tech marketing. Plain language. Honest hierarchy. No dark patterns. An open standard other tools can implement.

09 · Pushback

Where we’d like to push.

A. The “60-question Common App” framing risks reproducing gatekeeping at scale. Propose minimal common profile + per-rescue add-ons, and surface required fields up-front so applicants opt in knowingly.

B. “AI bio generator” carries reputational risk for civic infra. Propose Bio Draft, never auto-publish, require human edit, watermark with disclosure metadata.

C. ActivityPub is a strong commitment. Propose RSS + JSON Feed + Schema.org AnimalListing first; ActivityPub in v1.1 once data model is stable.

§ 1 · Directions

Three directions. We picked one. Field Manual.

All three sit in “calm civic.” They differ in voice and surface temperature. The two we didn’t pick are sketched so you can override.

Alt A

Daylight

paper
sky
tan
ink

Cool sky-blues against a sand neutral. Geometric sans throughout. Reads like a children’s hospital site — soft, specifically un-corporate. Risk: too soft; reads “wellness app,” less authority.

Find a friend.
— Plex Sans display, no serifs anywhere
Chosen · Field Manual

Field Manual

paper
field
sage
ink

Warm-paper neutral, near-black ink, single sage primary. Newsreader serif for display + numerals; Plex Sans for UI; Plex Mono for status, codes, IDs. Reads like a printed field manual or a public-records system that respects the work.

Find a friend.
— Newsreader 26 / -1% tracking
Alt B

Almanac

cream
brick
moss
walnut

Stronger character — slab serif display, woodblock chip styling, brick accents. Beautiful, but the brick reads as an emergency color and we explicitly want to avoid red urgency. Risk: too distinctive; competes with the photos.

Find a friend.
— Display italic, heavy weights only
Why Field Manual The chrome must recede so the animals don’t compete with it. Newsreader gives display warmth without flourish; Plex Sans is a humanist UI face that holds at 14px on a phone in poor light; Plex Mono carries the “public-records” tone and earns its place on every status, microchip, and timestamp. Sage is the only chromatic accent and only at action moments. Status uses an Okabe-Ito-derived palette with required glyphs — never color alone.
§ 2 · Tokens

The system, before the screens.

Color, type, space, motion, status. Every screen below is composed from these. If a screen needs something that isn’t here, the token list is wrong.

Coloroklch · 13 tokens
--ink
.22 .015 60
--ink-2
.36 .014 60
--mute
.54 .012 60
--rule
.86 .008 80
--field
.965 .008 80
--paper
.987 .005 80
--sage primary
.58 .06 158
--sage-tint
.95 .022 158
--st-pend
.66 .10 75
--st-info
.55 .08 235
--st-warn
.60 .12 50
--st-stop irreversible
.42 .09 25
--st-mem in-memory
.55 .05 295
Type3 families · 7 sizes
DSP-1Plain language.
DSP-2Plain language.
DSP-3Plain language.
UI-LGSave and continue
UI-MDSave and continue
UI-SMSave and continue
MN-CAPCHIP · 985112
Display Newsreader — headings, animal names, count numerals.
UI IBM Plex Sans — anything interactive.
Mono IBM Plex Mono — IDs, microchips, statuses, codes, timestamps.
Space & radius4pt · 5 radii
r1 · 2px codes
r2 · 4px controls
r3 · 8px cards
r4 · 14px phones
rf · pill chips
Motion3 durations
FAST · 120
BASE · 200
SLOW · 360
Single easing: cubic-bezier(.2,.6,.2,1). Cancelled wholesale by prefers-reduced-motion.
Status — never color aloneicon + text + tone
Available On Hold Pending Synced 2m Foster ! Conflict Adopted Unavailable In-memory
Each status carries (1) glyph, (2) word, (3) tonal dot. Greyscale-printable. CVD-safe — no red/green pair anywhere.
Voiceplain language, ~14 words/sentence
Yes
“Saved. We’ll text you when there’s news.”
No
“Your application has been successfully submitted to the rescue organization.”
Tone
Honest about what we don’t know. Specific about what happens next. Never “forever home,” never “urgent,” never “successfully.” Numbers exact, not rounded for marketing.
§ 3 · Adopter (A)

The public surface. Where strangers meet animals.

Six surfaces. Mobile primary; desktop where it has a real role. Photography is the emotional core; chrome is structural.

§ 4 · Staff (S)

The work surface. Where exhausted humans handle traumatized animals.

Mobile-primary unless the surface is fundamentally desktop (bulk + pivot). Bottom-thumb-zone primary actions everywhere; 56–64px hit targets on every primary control.

§ 5 · System (X)

What ties the pieces together.

The shared concerns: notifications, command palette, sync state, public verification.

§ 6 · Experimental (E)

Ten ideas worth fighting for.

Each calls back to a surface above. Treat each as a hypothesis with a failure mode named on it — these are explicit risks, not features.

§ 7 · Open

Questions for you.

Where we want a decision before we leave wireframe and start mocking pixels.