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.
My 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.
For the first iteration of this MVP, I designed and developed an application that allows users to explore the grooming services offered by the pet shop, check opening hours and location, and get in touch through a contact form.
Technologies
The MVP was built on the full-stack MERN framework — MongoDB, Express.js, React and Node.js.
The front end makes extensive use of reusable React functional components, hooks and modern ES6+ patterns to power cards, galleries and CTAs, all structured around the Atomic Design methodology.
Material UI's production-ready component library was integrated to accelerate development and maintain a consistent user interface throughout the application.
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.
