Owen Design System

A token-driven design language for a cross-platform pet care app. Built for clarity under stress, accessible touch targets, and calm visual hierarchy — because pet health tasks deserve focus, not friction.

React Native · Expo Light & Dark themes WCAG-conscious contrast Source: src/constants/

Overview

Owen helps pet owners track health records, reminders, and vet visits in one offline-first mobile experience. The design system centralizes color, type, and component patterns in colors.ts, typography.ts, and shared React Native components.

Design Principles

Calm & trustworthy Warm neutrals and serif headlines signal care without clinical coldness.
Scannable hierarchy Libre Baskerville for titles, Source Sans 3 for UI — distinct roles, zero ambiguity.
Semantic color Reminder categories and status states use dedicated tokens, not one-off hex values.
Accessible by default 48px minimum touch targets, high-contrast dark mode, and focus rings on interactive elements.

Color Tokens

Click any hex value to copy. Tokens map 1:1 to lightColors / darkColors in the codebase.

Brand

Semantic

Surfaces & Text

Borders & Interactive

Typography

Libre Baskerville — headers & pet names. Source Sans 3 — body, labels, and buttons.

Heading 132px / 40px · Libre Baskerville Bold
Track every paw print
Heading 224px / 32px · Libre Baskerville Bold
Reminders
Heading 320px / 28px · Libre Baskerville Regular
Veterinary records
Heading 418px / 24px · Libre Baskerville Regular
Oliver · Golden Retriever
Body Large18px / 26px · Source Sans 3 Regular
Everything your pet needs, in one place.
Body16px / 24px · Source Sans 3 Regular
Next vet visit scheduled for March 14 at 2:30 PM.
Label / Button14–16px · Source Sans 3 SemiBold
Pet name · Mark complete
Caption12px / 16px · Source Sans 3 Regular
Updated 2 hours ago · Required field

Spacing & Radius

Derived from component specs — cards use 16px padding, buttons 14×24px, 48px min touch height.

Border Radius

8px

sm · buttons, inputs

12px

md · cards

20px

lg · pill actions

50%

full · avatars

Buttons

Three variants — primary, secondary, outline. Min height 48px, radius 8px.

Inputs

Label + 48px field. Accent focus ring, red border on error.

Pet name is required

Cards

Production card components — neutral surfaces, type-colored icons only, tertiary alert badges on pet profiles.

ReminderCard · upcoming
Heartgard
Oliver
Mar 14, 2026 · 8:00 AM
ReminderCard · completed
Annual checkup
Luna
Feb 28, 2026 · 2:30 PM
Completed
Undo Delete
PetCard
Oliver
Golden Retriever · Dog
4 years old · 65 lbs
Allergies Medication
BirthdayCard · upcoming
Luna
Turns 3 in 12 days
12

Reminder Type Colors

Category colors apply to reminder icons only — not card backgrounds or labels.

Token Export

CSS custom properties mirror the React Native token structure for web or documentation use.


        

      

    


  
Copied!