KidTag — a design direction

Direction B · Neighborhood-modern
Proposal · Apr 2026

A quieter kind of
knowing where they are.

An editorial take on the neighborhood-safety app — warm paper tones, confident navy, a living serif for the words that matter. Fewer icons, more craft. Parents first.

PalettePaper · Navy · Sage · Clay DisplayFraunces (opsz 72–144) BodyInstrument Sans
01

Color — warm in daylight, warm by lamplight.

Six semantic tokens, two modes. Light is paper & navy; dark is a warm charcoal-on-cream inversion — intentionally not stark black/white. Sage and clay shift slightly brighter in dark mode for legibility without losing their identity.

Daylight
Paper
#F4EEE3
Cream
#FBF7EE
Ink
#141B2D
Sage — Home
#8FA47A
Clay — Away
#C67A55
Rule
#D8CFBE
Lamplight
Paper
#15130E
Cream
#201C14
Ink
#EBE1C8
Sage — Home
#A3BA8E
Clay — Away
#DB8E6A
Rule
#2F2A1F
02

Type — a living serif, and a sans that listens.

Fraunces carries the emotional weight at large sizes (optical size 72–144, soft axis 70–80); Instrument Sans handles UI without drawing attention to itself. Italic Instrument Serif shows up in small moments — an arrow, a caption, a felt accent.

Display · Fraunces 350 · opsz 144
Home is who's watching.
H1 · Fraunces 400 · opsz 72
Welcome back, Maeve.
H2 · Fraunces 500 · opsz 48
Your children are all home.
Body · Instrument Sans 400 · 17px
Someone invited you to their household, or you can set up your own. You can always add more trusted families later.
Caption · Instrument Sans 600 · 11px tracked
Tagged in · 14 min ago
03

Screens — restraint, rhythm, a little serif breath.

Three touch points: the first impression, the everyday home, and the detail view you open when your kid is somewhere else.

9:41
First impressionSignInScreen
9:41
M

KidTag

Carrington Pl Carrington Woods · Perrysburg
m
a
A
Asa
at the Sharmas · since 3:42p
Away
N
Nora
home · since morning
Home
The everydayDashboardScreen
9:41
← back to home
A

Asa — 7

Away at the Sharmas
Tagged in
3:42 pm — 38 minutes ago
Allergies
Peanuts Benadryl in bag
bring him home when he's done playing
The moment that mattersChildDetailScreen
04

Settings — grouped, serif-labeled, quieter.

The current screen stacks six equally-weighted cards in an iOS Settings-app cadence, with five different tinted icon circles (blue, green, orange, orange, purple). Rebuilt: editorial group headers, unified icon treatment, a segmented toggle that inherits the app's own "lamplight" vocabulary, and a sign-out that stops shouting.

9:41
← back

Settings.

the knobs & the dials.

your home
Whitlock Home
1559 Carrington Pl · 4 in family
Your family
2 parents · 2 children
your circle
Trusted households
3 connected · 1 waiting on you
1
you
Notifications
4 of 6 types turned on
the app
Require Face ID to open
locks automatically · device passcode as fallback
Appearance
currently in daylight
sign out
The knobsSettingsScreen

What changes, and why

  • i

    One unified icon treatment. Today: five different tinted circles. Proposed: a single cream-on-paper circle with a 1.8-stroke line icon, ink-soft in both modes. The eye stops hunting for the "colorful one" and just reads the labels.

  • ii

    Editorial group labels. Six cards in a flat stack becomes four groups — your home · your circle · you · the app — set in italic Fraunces at caption size. Same scanning pattern as a magazine table of contents.

  • iii

    "Add a Trusted Household" moves off the top. The current bright blue CTA above the list is a launcher for a connection action that already lives one tap deeper. It's removed here; the "+" affordance belongs inside the Trusted Households flow.

  • iv

    Pending invites become a quiet pill. The orange "1 pending invite" banner is loud for something that's usually zero. Now it's a small clay-colored counter on the Trusted Households row — visible, not shouting.

  • v

    Appearance: renamed and recolored. Light / Dark / System → Daylight / Lamplight / Auto, matching the header toggle's vocabulary. Selection is ink-on-cream, not system-blue-on-gray.

  • vi

    Sign out is whispered. Today: bold red text. Proposed: small italic link in muted grey. Red gets reserved for genuinely destructive actions (deleting a child profile, removing a household). This is just a door out — it shouldn't feel like a tripwire.

  • vii

    Subtitles get italic serif treatment. The current secondary-gray metadata ("1559 Carrington Pl, Perrysburg") switches to italic Fraunces at 11px — reads more like a descriptor than a field value, which is what it is.

05

A moment — Asa arrives at the Sharmas'.

Trusted-household tagging is the product's center of gravity. Here's the twenty-second moment it happens, told from both sides of the street — from Priya's phone (the host) through to Maeve's (the parent).

9:41
← back

Who's here?

tap to select · just pulled up is marked.

A
Asa Whitlock · 7
from the Whitlock Home · just pulled up
N
Nora Whitlock · 5
from the Whitlock Home
T
Theo Reeb · 9
from the Reeb Home
T
Hazel Reeb · 7
from the Reeb Home
1 · Priya opens the appTagInListScreen
9:41
← cancel
A

Asa — 7

About to tag in
Checking in to
Sharma Home
3:59pm
!
Peanut allergy — severe Benadryl in backpack
Asa's parent
Whitlock Home
Playing in the backyard…
Maeve will see it instantly.
2 · She confirmsTagInConfirmScreen
9:41
M

KidTag

Asa tagged in at the Sharmas just now · by Priya Sharma
Carrington Pl Carrington Woods · Perrysburg
m
a
A
Asa
at the Sharmas · just now
Away
N
Nora
home · since morning
Home
3 · Maeve knows instantlyDashboardScreen · realtime
06

When more than one arrives.

Asa and Theo pull up together. Priya selects both, confirms once. Default mode is multi-select — no "edit mode" toggle — so a single-kid tag-in still works without a mental shift.

9:41
← back

Who's here?

tap to select · tap again to deselect.

A
Asa Whitlock · 7
from the Whitlock Home
T
Theo Reeb · 9
from the Reeb Home
N
Nora Whitlock · 5
from the Whitlock Home
T
Hazel Reeb · 7
from the Reeb Home
1 · Select all who arrivedTagInListScreen
9:41
← back
A
T

Asa & Theo

tagging in two at once

A
Asa · Whitlock Home
⚠ Peanut allergy · severe · Benadryl in bag
T
Theo · Reeb Home
no allergies noted
both families will see it instantly.
2 · Confirm in one passTagInConfirmScreen

iMulti is the default

No separate "select mode" toggle — every row tap is a selection. The single-kid case still works: tap one, bar reads "1 kid selected," confirm, done. That's +1 tap vs today, but the confirm screen is a required stop anyway.

iiAllergies stay per-kid

Rolling up to "2 of these kids have allergies" saves pixels but raises skim-risk. Per-kid rows keep the allergy attached to the face — you can't skim past Asa's peanut allergy without also seeing Asa's face. The cost is vertical space; worth it.

iiiPer-event commit, not all-or-nothing

Service layer writes N TagEvent docs sequentially, returning per-event success/failure. Partial success is recoverable: failed kids stay in a retry pill on the host's dashboard. Firestore batch writes would be atomic but too strict — one bad network hiccup shouldn't un-tag the others.

07

Onboarding — SSO first, phone optional.

Apple & Google take the primary slot on the welcome screen; phone auth becomes a fallback. The upside is real money — OTP SMS runs $0.01–0.06 per verification, free for SSO — so every user who picks Apple/Google is pure margin. Phone number still gets captured (for invites) but verification can be lazy: only OTP if and when they receive their first invite. Full happy-path flow below; fallback shown separately.

9:41
1 — Pick a way in new SignInScreen
9:41
one  of four

You.

we filled in what Apple gave us — tidy up if needed.

Maeve Apple
Whitlock Apple
+1 555 · 0100

how invites find you — we won't text unless one arrives.

2 — Who you are CreateAccountScreen
9:41
two  of four

Get started.

create your own home, or accept someone's invite.

No pending invites
if one arrives, reopen the app to see it.
3 — The fork ChooseHouseholdScreen
9:41
three  of four

Your home.

we'll pin it on the neighborhood map.

Whitlock Home

derived from your last name · tap to rename

search your address
k
your address is only visible to households you invite.
4 — Where you live CreateHouseholdScreen
9:41
four  of four

Your kids.

one at a time — you can add more later.

A Asa · 7
N Nora · 5
+
Another child's first name
Last name · Whitlock
Age
last name prefilled · change it for blended-family kids
allergies, photos, and medical notes stay encrypted — visible only to households you trust.
or skip for now
5 — Who you're tracking AddChildrenScreen
9:41

You're in,
Maeve.

your home is on the map — encrypted and private. invite a neighbor next; you'll need one trust connection to start tagging kids in.

Whitlock Home · 2 kids · 0 trusted neighbors yet
or invite a neighbor first
6 — You're all set new WelcomeCompleteScreen

If they pick "use phone instead"

Two extra screens — phone entry + OTP — before step 2. Same downstream flow. This path costs a few cents in SMS per user; only users who decline SSO hit it.

Alternative cost optimization: keep this path free of OTP by treating phone as claimed, not verified at onboarding, and only send an OTP the first time an invite arrives for that number. Deferred SMS = deferred cost, and most users never trigger it.

9:41
← back

Your number.

we'll text you a code.

+1 555 · 0100
a — Phone entry PhoneEntryScreen
9:41
← back

Enter code.

we texted it to +1 555 · 0100

4
2
9
|
resend in 0:30
b — Verify code OTPScreen

iSSO-primary is a cost decision

Firebase phone auth bills per-OTP (roughly $0.01–0.06 per verification). Apple & Google are free. If 80% of users pick SSO, your onboarding SMS spend drops ~80% against a phone-first baseline. Phone number still gets captured for the invite system — we just don't verify it eagerly.

iiWhat SSO auto-fills

Apple returns firstName, lastName, and email (first-time sign-in only). Google returns all three plus a profile photo URL. Phone is the one field SSO cannot give — users still type it. We mark pre-filled fields with a quiet "Apple" or "Google" badge so it's clear what came from where, and every field stays editable.

iiiPhone verification, deferred

Instead of OTP on every signup, phone is marked claimed. The first time an invite arrives for that number, we send an OTP then. Most users never receive an unsolicited invite, so most accounts never trigger a paid SMS. Requires a small addition: users/{'{'}uid{'}'}.phoneVerifiedAt: Timestamp | null.

08

Coming back — a face unlock, not a sign-in.

Once they're signed in at §07, they stay signed in. Face ID is a local app lock — default on, togglable in Settings — not a Firebase re-auth. The user doesn't see Apple or Google again unless they explicitly sign out, switch devices, or the session token expires (~60 days). The 99% case is: open app → Face ID → dashboard.

9:41
KidTag

welcome back,

Maeve.

M

Face ID to open

or

still signed in · locked since 8:12 am

Every launch after the firstAppLockScreen · new

iA lock, not a re-auth

The Firebase session stays valid for weeks. Face ID just gates the app's UI — same pattern as banking apps. No token refresh, no Apple/Google prompt, no OTP round-trip. If biometrics fail, the device passcode acts as the local fallback (handled by the OS, not a phone-number code).

iiDefault on, off-able

Not every user wants the friction — shared family iPads, kid-friendly profiles, users who keep their phone in a case with a face-read shadow. Settings → the app → Require Face ID to open flips it off; when off, launching the app drops straight to the dashboard with no gate. State lives in a single users/{'{'}uid{'}'}.appLockEnabled: boolean, default true.

iiiWhen sign-in actually re-runs

Only three moments Apple/Google (or phone OTP) come back: (a) user explicitly signs out from Settings, (b) Firebase ID token expires (~60 days of inactivity), (c) they install on a new device from backup. Everything else is Face ID → dashboard, or — if the lock's disabled — dashboard directly.

09

Mark — a name-tag with a serif inside.

The product is called KidTag, so the mark is literally a tag — with a notched corner, a punch hole, and a single italic Fraunces "k" where the name would go. It reads as tactile and human, not as a tech icon.

Primary · Ink
Inverse · Cream
Sage · Home
Clay · Away