Paws & Paths Design System

The brand should feel optimistic, trustworthy, active, and human. Its visual style is modern corporate, but softened with pet-friendly warmth so the product feels reliable without becoming sterile.

The interface should stay light and airy. Use soft tonal layers, rounded geometry, and subtle ambient shadows instead of heavy borders or dense visual treatments.

• Prioritize clarity for busy pet owners.

• Use warm action colors and cool supporting colors in balance.

• Maintain generous whitespace and avoid crowding.

• Keep interaction feedback soft, tactile, and polished.

• Favor rounded forms that reinforce safety and friendliness.

### Core palette

| Token | Value | Role |

|---|---|---|

| background | #f9f9ff | Main page background |

| surface | #f9f9ff | Primary surface tone |

| surface-container-lowest | #ffffff | White card surface |

| surface-container-low | #f0f3ff | Soft input and low-emphasis surface |

| surface-container | #e7eefe | Neutral panel background |

| surface-container-high | #e2e8f8 | Hover and elevated tonal layer |

| on-surface | #151c27 | Primary text |

| on-surface-variant | #534434 | Secondary text and metadata |

| primary | #855300 | Main action color |

| primary-container | #f59e0b | Hover and highlighted primary state |

| secondary | #0058be | Trust, navigation, and supporting emphasis |

| secondary-container | #2170e4 | Strong blue data or stat surfaces |

| tertiary | #00658b | Supporting accent |

| tertiary-container | #1abdff | Badge and tertiary emphasis surface |

| error | #ba1a1a | Error state |

| outline | #867461 | Border and outline tone |

| outline-variant | #d8c3ad | Subtle dividers |

### Color usage

Golden Retriever orange should drive calls to action, active states, and moments of energy. Sky Walk blue should support wayfinding, trust indicators, scheduling, and data-oriented elements.

Neutral surfaces should stay bright and premium, with deep charcoal text for legibility. Avoid overusing saturated colors in large areas; keep most layouts grounded in soft light neutrals.

Interactive states should feel polished but restrained. Use subtle color shifts, hover lifts, and a 150ms ease-in-out transition for feedback rather than dramatic motion.

Touch targets should remain wide and comfortable, especially in walker lists and scheduling flows. Feedback should be clear without introducing clutter.

The Tailwind config mirrors the design primitives for color, typography, spacing, and border radius. The design token JSON extends that foundation with component-level definitions that are portable into design and token tooling.

### Source alignment

| Source file | Contribution |

|---|---|

| README-2.md | Product framing and file overview |

| DESIGN.md | Core design language, token frontmatter, and usage guidance |

| tailwind.config-4.js | Tailwind theme primitives for implementation |

| design_tokens-3.json | Portable design tokens including components |

Paws & Paths is best suited for dog-walking marketplaces, pet care dashboards, booking flows, sitter profiles, and status-heavy service apps. Any extension of the system should preserve its core balance: warm action cues, calm trust-building support tones, soft rounded forms, and generous breathing room.