Mobile App

Flutter-native. iOS, Android, and Web.

A single Flutter codebase delivers native performance on iOS, Android, and Web. Every screen shares the same design system tokens, type scale, and component library.

Flutter / Dart iOS + Android + Web Phase 1 MVP
Hub & Navigation

The home screen and bottom nav

The hub organizes everything around the pet. The bottom navigation is an ocean ink pill bar with the active tab shown as a white pill inset.

Hub empty state
Hub - Empty state with onboarding prompt
Hub populated state
Hub - Populated with pet data and active habits
Health History

Records and recurring habits

The Care Vault stores recurring habits alongside one-off vet records. Habit entries display their recurrence pattern, time window, and the full week schedule with Mon-Sun selectors.

Health History recurring habit
Health History - Recurring habit with Mon-Sun schedule
Habits & Logging

Training and activity log

Logging a training session creates a timestamped entry with a color-coded type badge, duration, and optional notes. All entry types use pill-shaped badges.

Training Log entry form
Training Log - Entry form with type badge and schedule
Product Scanner

Scan any pet food or product

The barcode scanner uses the device camera to instantly surface ingredients, allergens, and nutritional data. The catalog selected state shows the full product detail with per-serving and per-kg nutrition.

Barcode scanner camera view
Barcode Scanner - Camera view and scan target
Catalog selected product
Catalog - Selected product with nutrition detail
Label Capture

OCR-powered label scanning

The multi-step capture flow uses Google ML Kit OCR to extract nutrition facts from packaging. The review step flags fields needing manual confirmation before saving to the pet's diet log.

Capture step 1 of 4
Capture - Step 1 of 4, camera alignment guide
Review label needs input
Review - Fields highlighted for manual confirmation
Date & Time

Scheduling and time entry

Custom date and time pickers maintain full Packly design language. Time entry supports both scroll-wheel picker and numeric keypad for speed.

Date picker calendar wheel
Date Picker - Calendar wheel
Time entry numeric keypad
Time Entry - Numeric keypad mode
Design System

Decisions visible in every screen

The visual language is built from a handful of firm rules applied consistently across every view.

Plus Jakarta Sans
Single family, all roles. 800 display, 700 headings, 400 body.
Pill-shaped everything
Buttons, badges, chips, bottom nav: border-radius 9999px.
No card borders
White cards float on #F2F4F7 gray. Elevation from contrast only.
Coral is action
#FF6B6B on primary CTAs only. One coral moment per view.
Ocean ink (#0A3B4A)
Anchors text, the nav bar, and all dark surfaces.
Entry type chips
Color-coded pills: coral Training, amber Activity, teal Meds, sky Vet.