How this site was designed and put together.

The concept

Most veterinary sites split into two bad defaults: sterile clinical blue-and-white that feels like a hospital brochure, or an overly cutesy cartoon look that undersells the medicine happening inside. Brightpaw sits deliberately between the two — warm and reassuring without tipping into childish, because the actual audience is an anxious pet and an anxious owner, and the site's whole job is to lower that temperature before they've even walked in the door.

The positioning line that guided every decision was "care that treats your pet like family, from a team that actually likes Mondays" — so the copy leans warm and specific (real invented pet names, real specifics about what a visit includes) rather than generic clinic-speak, and the visual language stays soft and rounded rather than sharp and institutional.

Typography and color

Fredoka carries every headline — a rounded, friendly display face with enough weight to still read as confident rather than cartoonish, which was the exact balance this brand needed. Figtree handles all body copy and UI labels, chosen for its warm humanist curves that pair naturally with Fredoka without the two fighting for attention.

The palette is a warm cream base (never a stark clinical white) with a muted, dusty sage green as the primary color and a true coral-red as the secondary accent — intentionally dustier and warmer than a bright mint-and-peach combination, so the whole site reads calmer and a touch more grown-up rather than sugary. Cards and photo frames use a soft asymmetric corner radius — three corners gently rounded, one corner tucked in tighter — instead of a uniform pill shape on everything, which keeps the rounded language from feeling like a single repeated template stamp.

Structure — five real pages

This is a genuine multi-page site, not a one-pager with anchor links standing in for pages. Each section lives at its own address:

• index.html — the home page: hero, services overview, a "why Brightpaw" trust section, a meet-the-team teaser, testimonials, and a booking call to action.
• services/index.html — each service category gets its own photo, description, and tag list, plus a plain-language walkthrough of what actually happens at a first visit.
• about/index.html — the clinic's founding story, its working philosophy, the three-person team, and a small photo gallery of the space.
• contact/index.html — an appointment-request form, clinic hours and address, an emergency-info callout, and a short FAQ.

Every page shares the same header and footer, and every internal link is relative to that page's folder depth — pages one level down (like services/) reach the homepage with ../index.html and reach their sibling pages the same way. That detail matters the moment a site grows past a single file, so it was checked deliberately rather than assumed.

The imagery

Every photograph — the hero exam-room moment, the wellness and dental and urgent-care scenes, the grooming tub, the waiting room, and the three team portraits — was generated rather than sourced from a real clinic, since Brightpaw itself isn't real. The direction stayed consistent across the set: soft natural daylight rather than flat fluorescent lighting, genuinely candid mid-laugh or mid-motion moments rather than stiff posed stock photography, and a real range of companion animals rather than just one dog breed repeated everywhere. Team portraits kept the same warm, soft-daylight studio treatment across all three so the "about" page reads as one consistent shoot rather than three mismatched sources.

The signature motion

The site's identity move is a paw scroll-rail — a slim vertical trail fixed to the right edge of the screen on wider viewports. As you scroll down any page, a small paw print glides down the rail and "lights up" each print it passes, like a dog leaving fresh tracks down the length of the page, with the line itself filling in behind it to mark how far you've read. It's tied to overall page-scroll progress rather than any single section, so it works consistently whether the page is short (contact) or long (services).

The second motion signature is a quick wag micro-interaction — buttons, service icons, and team photo frames get a fast, elastic side-to-side rotation on hover instead of a generic scale or fade, meant to read like a happy tail wag rather than a standard UI hover state. Section reveals and staggered card entrances run through GSAP's ScrollTrigger from a CDN, with prefers-reduced-motion respected throughout — visitors who've asked for less motion get the finished layout immediately, rail included.

Responsiveness and craft details

The layout was checked from a 375px phone width through large desktop screens. The paw-rail hides below 1160px so it never competes for space on tablet or mobile, the nav collapses to a full-height slide-in panel below 860px, and multi-column grids step down to two and then one column as the viewport narrows. overflow-x: clip is set on both html and body so nothing — including the full-bleed hero photo — can force horizontal scroll on a narrow screen.

The contact page's appointment form is intentionally a visual demo: it validates and shows a confirmation state on submit but doesn't send anything anywhere, and that's disclosed directly on the page. The FAQ section uses native <details>/<summary> elements so it's keyboard- and screen-reader-accessible without any extra JavaScript.

Deploying a site like this

There's no build step — plain HTML, CSS, and a small JavaScript file, with fonts and the animation library loaded from CDNs — so deployment is just hosting static files. The most common path is Netlify: drag the project folder onto Netlify's deploy target, or connect a Git repository and let it deploy on every push, and the site is live on a Netlify subdomain within a minute or two, with a custom domain attachable afterward under Site Settings. Because every internal link in this project is relative rather than absolute, the whole folder also works dropped into any other static host without changing a single link.