Why Second Chance Paws looks the way it does
Second Chance Paws is a foster-based rescue: every dog and cat lives in a volunteer's home until adoption, so the site works like a front porch rather than a shelter lobby. The animals come first, then the people who keep them, then the money.
- Built for
- Asheville families looking to adopt, people willing to foster for a few weeks, owners who are struggling to keep a pet, and the local businesses and donors who keep the rescue running.
- Navigation
- Classic top bar. Logo left, pages right, one action. Familiar to every visitor.
- Pages
- Home, Adopt, Foster, Need help?, Volunteer, Donate
- Hero
- a short action form as the hero: the one thing most visitors came to do (request a ride, ask for help, register a child) can be done before they scroll, with reassurance beside it. Variants: a = headline, reassurance and a photo on the left with the form as a raised card on the right; b = a tall photo carrying the headline, with the form and reassurance on a plain panel beside it; c = headline beside a photo, then the form laid out as one horizontal booking bar; An asymmetric mosaic of five photographs with the headline locked into one cell of the grid, so the first screen shows real people before it says anything. Variants: a = headline block top-left beside one large photo, three smaller below; b = a tall photo leads and the headline sits low on the right; c = a triptych, with the headline in the middle panel between stacked photos; One impact number is the hero (for example meals served this year), with a line naming the unit, a sentence of context, a row of three supporting figures and one photograph. The number counts up once when it first comes into view. Variants: a = the number spans the full width above the photo and figures; b = photo on the left, number and a ledger of figures on the right; c = the number sits on a coloured panel that overlaps the bottom of a wide photograph
Typography
Shrikhand is a heavy, bouncing display face with the swagger of a 1970s pet-shop sign. Setting each animal's name in it turns them into headliners, which is what a rescue site is for. DM Sans does everything else quietly at 17px, so the fees, hours and vaccine details are easy to read on a phone at an adoption event.
Color
The magenta is the Catawba rhododendron that covers Craggy Gardens in June, the yellow is a collar tag, and the pale blue-gray ground is the haze over the Blue Ridge seen from Haywood Road. The dark theme becomes a deep aubergine evening with the pink lifted, so the warmth survives at night.
Layout and navigation
A plain top bar with the five things people come for. Nobody arrives at a rescue site to browse; they come to see the animals, foster, ask for help or give, and the classic bar puts those within one tap on every page.
The hero
The opening triptych is all animals and the people holding them, with the headline in the middle panel. People decide to adopt with their eyes, so the first screen shows faces before it says anything, then the very next band lets you scroll through who is ready this week.
Calls to action
"Meet the animals" is the main action because it is gentler than "Adopt now" and closer to what people actually want to do first. Fostering gets a time-boxed verb, "Foster for three weeks", because a short commitment is far easier to say yes to. The rehoming page uses no pressure at all.
Photography
Real-looking rescue photos: dogs at a shelter fence, a volunteer cradling a puppy, a hound asleep on a step, dogs on a forest trail like the ones off the Parkway. No studio pet portraits, and every animal pictured has a name, an age and a weight beside it.
Accessibility
Body copy passes AA in both themes and the magenta on the pale ground passes 6:1. Shrikhand is kept to headings, animal names and short pull quotes; prices, hours, vaccine details and form labels are all in DM Sans. The adoption application and foster form have visible labels and plain-language errors, and nothing on the page moves on its own.
Type system
- DisplayShrikhandA fat, bouncing display face with the swagger of a 1970s pet-shop sign; it makes the animals' names feel like headliners.
- TextDM SansA plain, low-contrast sans that steps back so Shrikhand can be loud, and stays very readable on a phone at an adoption event.
Colour and contrast
Every text pairing is checked against WCAG 2.2 in both themes.
Light theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.08:1 | AAA |
| Body text on cards | Aa | 16.79:1 | AAA |
| Secondary text | Aa | 5.56:1 | AA |
| Links | Aa | 5.99:1 | AA |
| Button text | Aa | 6.67:1 | AA |
| Accent label text | Aa | 10.15:1 | AAA |
| Text on dark bands | Aa | 15.08:1 | AAA |
| Muted text on dark bands | Aa | 7.98:1 | AAA |
| Text on brand bands | Aa | 6.67:1 | AA |
| Muted text on brand bands | Aa | 4.6:1 | AA |
Dark theme
| Pairing | Sample | Ratio | WCAG |
|---|
| Body text on page | Aa | 15.82:1 | AAA |
| Body text on cards | Aa | 14.39:1 | AAA |
| Secondary text | Aa | 7.06:1 | AAA |
| Links | Aa | 7.81:1 | AAA |
| Button text | Aa | 8.19:1 | AAA |
| Accent label text | Aa | 11.54:1 | AAA |
| Text on dark bands | Aa | 16.99:1 | AAA |
| Muted text on dark bands | Aa | 8.52:1 | AAA |
| Text on brand bands | Aa | 8.19:1 | AAA |
| Muted text on brand bands | Aa | 5.19:1 | AA |
