Why Kindred Give looks the way it does
Kindred Give is a charity donation site with a full-bleed photo of hands painted red, a serif headline and an orange donate button. The page asks for a gift early and shows proof of impact soon after.
- Built for
- Individual donors giving online, many for the first time, and recurring givers who want to see where their money goes.
- Navigation
- Sticky frosted bar with the full menu and a Give button. On phones, a bottom tab bar plus a quick-links launcher.
- Pages
- Home, About, Visit, Causes, Stories, Events, Donate, Contact
- Hero
- Full-bleed photograph with the headline set over a dark scrim.
Typography
Fraunces Bold sets the headline at about 90 pixels, a warm serif with soft curves. Inter handles body text and the interface. The headline sounds human and the body keeps the donation details clear.
Colour
The page is warm white (#FFF9F3) with dark brown text (#231815), a strong orange (#E8590C) for the Donate button and a green (#12604A) for trust cues. The dark theme uses a lighter orange (#FF8A4C) and a mint (#6FD0A8). Orange stands out against the dark photo and green adds a calm secondary signal.
Layout and navigation
A white bar has an orange logo tile, six links and an orange Donate pill. A three-column set of cards describes causes, then a stats band reports 98 percent to programs, 45,000 families helped and 120 volunteers. The order is need, action and proof.
The hero
The hero photo shows many hands pressed together, each painted red, under a dark overlay. 'Together, we can change a life today.' is set on three lines. A line beneath says what a $25 gift buys, which makes the ask concrete.
Calls to action
'Donate now' is a solid orange pill, and 'See our impact' is outlined. The Donate button also appears in the header, so it is within reach throughout. A chip points to the next Soup Supper.
Photography
The photo is symbolic and emotional rather than literal. The hands suggest many people acting together without exposing a beneficiary. A real charity should also use real stories with permission, and keep the images respectful.
Accessibility
White on the orange button is only about 3.6 to 1, so button labels are bold and large, and a real build should darken the orange or use a dark label for small sizes. Body text on warm white is about 16.6 to 1. The dark overlay protects the hero text.
Type system
- DisplayFrauncesFraunces is soft and personal, so the appeal sounds like a neighbour talking.
- TextInterInter keeps amounts, forms and receipts clear, which matters on a page where people enter payment details.
Colour and contrast
Each text pairing is checked against WCAG 2.2 in both themes. Ratios are computed from the exact theme colours.
