Petty Design System

A comprehensive guide to building consistent UI for Petty applications

Brand Identity

Iconography Guidelines

Solid Style
Regular Style

Usage Principles

  • Maintain consistent sizing within components
  • Use appropriate color contrast
  • Always include ARIA labels or hidden text for accessibility
  • Match icon style (solid vs. regular) to action type

✅ Do

Edit

❌ Don't

Logo & Mark

Petty

Logo should always use the primary color palette

Minimum clear space: 24px around the logo

Typography

Primary Font: Poppins

Light 300

Regular 400

Medium 500

SemiBold 600

Bold 700

Color Palette

Primary Colors

Primary Light
#D6EAF8
text-primary-light
Primary
#3498DB
text-primary
Primary Dark
#2874A6
text-primary-dark

Usage Guidelines

✅ Do

  • Use primary blue for primary actions and highlights
  • Use success green for confirmation and positive states
  • Maintain proper contrast ratios (4.5:1 minimum)

❌ Don't

  • Use more than 3 colors for primary UI elements
  • Modify the core brand colors
  • Use red unless for errors/destructive actions

Tabs

Pet profile information and details

Components

Buttons

Button Sizes

Button Types

✅ Do

  • Use primary buttons for the most important actions
  • Maintain consistent sizing hierarchy
  • Keep button text concise (1-2 words)
  • Use aria-labels for icon-only buttons
  • Provide sufficient contrast (4.5:1 minimum)

❌ Don't

  • Use more than 1 primary button per screen
  • Mix button sizes arbitrarily
  • Make buttons too small for touch (min 48x48px)
  • Use buttons for non-actionable elements

Accessibility

  • Focus states: Ensure buttons have visible focus indicators
  • Tap targets: Minimum 48x48px on mobile
  • Color contrast: Text/icons must meet WCAG AA (4.5:1)
  • ARIA: Use aria-label for icon-only buttons

Cards

Basic Card

Card Title

This is the card content area where you can place any information.

Media Card

Sample
Pet Card

For displaying pet information with images

Tooltips

Forms & Inputs

Helper text goes here

✅ Do

  • Align labels and inputs vertically
  • Provide clear error states
  • Use appropriate input types

❌ Don't

  • Use placeholder text as labels
  • Leave required fields unclear
  • Overwhelm users with too many fields

Spacing System

Scale & Usage

0.125em
0.25em
0.5em
1em

When to Use

  • Use 1em increments for component spacing (relative to element's font-size)
  • Use 0.5em for internal element spacing
  • Use 0.25em for fine-tuned adjustments and borders
  • Consider multiples of 1em for layout spacing

Elevation

Level 0 (none)

Use for flat UI elements

Level 1

Buttons, cards

Level 2

Dropdowns, tooltips

✅ Do

  • Use elevation to signify interactivity
  • Maintain consistency in z-index ordering

❌ Don't

  • Overuse elevation (keep interface flat where possible)
  • Use more than 3 elevation levels in a single view

Accessibility

Color Contrast

Primary/White - AAA (8.12:1)

Primary Dark/White - AAA (11.43:1)

Keyboard Navigation

  • All interactive elements must be focusable
  • Visible focus states required
  • Logical tab order
  • Keyboard traps should be avoided

Screen Reader Support

Required Attributes

<button aria-label="Close modal">X</button>
  • Use semantic HTML elements where possible
  • Provide text alternatives for icons
  • Use ARIA attributes when needed

Loading Indicators

Types

Default Spinner

Dot Pulse

Circular

Skeleton Loading

✅ Do

  • Use appropriate indicator for context
  • Keep loading times under 2 seconds when possible
  • Use skeleton loaders for content-heavy components
  • Provide loading state for interactive elements

❌ Don't

  • Overuse complex animations for simple loads
  • Block the UI when loading is in progress
  • Show loading states for instant actions

Data Display

Tables

Pet Name Type Age Last Visit Status
Max Dog 3 years June 10, 2023 Healthy
Whiskers Cat 5 years May 28, 2023 Needs Checkup

Feedback Elements

Alerts

Informational Alert

This is an informational message about something important.

Success Alert

Your pet profile has been successfully updated!

Error Alert

There was an error processing your request.

Empty States

No Pets Added Yet

Get started by adding your first pet profile to track their health and milestones.

Progress Indicators

Vaccination Progress 60%
Health Records Completed 100%

Welcome back, John!

Track your pet's health and create unforgettable memories.

My Pets

Golden Retriever

Max

Golden Retriever 3 y.o.
Next vet visit: June 15
Tabby cat

Whiskers

Tabby Cat 5 y.o.
Next grooming: July 2

Upcoming Activities

Vaccination: Rabies

For Max (Golden Retriever)

June 15, 2023 at 2:00 PM
Happy Paws Vet Clinic

Grooming Appointment

For Whiskers (Tabby Cat)

July 2, 2023 at 10:00 AM
Posh Paws Grooming Salon

Monthly Checkup

Medium Priority

For Max (Golden Retriever)

July 10, 2023 at 3:30 PM
Happy Paws Vet Clinic

Quick Actions

Daily Reminders

Everyday at 8:00 AM & 6:00 PM
Everyday at 7:00 AM
Everyday at 5:00 PM

Recent Milestones

Max learned "Sit" command!

June 5, 2023

Golden Retriever sitting

Whiskers finally likes the new food

May 28, 2023

Cat eating