Pet Shop Blue
Building the Brand
Overview
Pet Shop Blue is a pet shop based in Jundiaí, a mid-sized city near São Paulo, Brazil. While the business offers pet food and accessories, its core focus is on professional pet grooming services.
The studio's goal was to craft a brand identity that reflects the company's core values — a genuine love for pets (especially Schnauzers), dedication to pet care and cleanliness, and the owner's unmistakable fondness for the color blue.
Version 2 evolved the project from a brochure MVP into a full-stack platform: clients can register an account, manage their pets, book grooming appointments online and shop for products — while the owner manages everything from a purpose-built admin panel.
Technologies
Version 2 was rebuilt from the ground up on Next.js 16 (App Router) with React 19 and TypeScript, replacing the original MERN stack with a modern full-stack architecture. Tailwind CSS v4 took over from Material UI, giving the UI a leaner, utility-first foundation.
Data persistence moved from MongoDB to PostgreSQL hosted on Supabase, managed through Prisma ORM. Authentication is handled by NextAuth v5 with a credentials provider and bcrypt password hashing. Form validation is powered by React Hook Form and Zod.
Additional libraries include Embla Carousel for the homepage hero, Recharts for admin reporting, and a PicPay integration for in-app payment processing. The application is deployed on Vercel.
Style Tile
Striking the right balance between aesthetics and purposeful design is central to my approach. Every color, typeface and pixel plays a role in building an emotional connection with the user.
The Style Tile establishes a shared visual language between designer and stakeholders, serving as a catalyst for productive conversations about preferences, goals and brand direction.
Typography
Typography encompasses font style, appearance and structure — each choice designed to evoke specific emotions and reinforce the brand message.
Bold, playful typefaces for headlines paired with smooth, rounded fonts for body text were key to conveying warmth and approachability throughout the layout.
Color Palette
A color palette defines the combination of colors a UI designer uses to shape the look and feel of an interface.
Pet Shop Blue naturally called for shades of blue as the primary color across backgrounds and visual elements. Orange was chosen as the complementary accent to bring warmth and energy to the design — the two hues make each other appear more vibrant while blending into effective neutral tones for shadows.
Documentation
As part of the design system documentation, every element is organized into reusable design patterns — proven solutions to common UI challenges. Each pattern defines the shape, color and style of its components, ensuring consistency and scalability across the entire application.
Online Booking
The grooming booking flow (Banho e Tosa) is the centrepiece of v2. Authenticated clients select a service, choose their registered pet, pick a date and available time slot, and check out — all within a single guided form.
Pricing is dynamic: rates vary by pet size (small, medium, large) and are fetched live from the database. Special breeds such as Spitz and Pomeranian automatically trigger an admin price-confirmation step before the appointment is finalised, along with a photo upload so the groomer can assess coat condition in advance.
Clients can also add shop products as appointment add-ons at booking time, and pay via PicPay directly inside the app. Post-appointment, both text feedback and photo uploads are supported.
Shop & Dashboard
An integrated online shop (Loja) lets clients browse the product catalogue, add items to a persistent cart and place orders — all tied to their account for order history tracking.
The Minha Conta portal gives each client a self-service hub: edit personal details and delivery address, register and manage pets (with species, breed, vaccination status and photos), view upcoming and past appointments, and track orders.
The admin panel provides the owner with a complete operations dashboard: manage grooming services and size-based pricing, maintain the product catalogue, review all appointments with the ability to confirm, update status or cancel, manage user accounts and roles, control daily time-slot availability, and monitor revenue through a Recharts analytics view.