Soft, rounded, reassuring
Puddle
Puddle is for the places parents and pet owners need to trust at first glance. Headlines are set in a rounded display face, each section is a soft sheet with rounded corners that overlaps the one above it, and the main photographs are cropped into uneven puddle shapes that slowly change outline. Buttons are pills that spring up a little on hover. As a visitor scrolls, each section's colour warms a shade, so the page feels awake without anything moving fast.
01 / Character
How Puddle looks and reads
- Rounded display headings paired with a soft, open sans for reading
- Sections stacked as rounded sheets, each overlapping the one above
- Hero, feature and team photos cropped into slowly drifting puddle shapes
- Pill buttons, filled cards and a phone menu of large rounded tiles
How the page flows
Puddle reads best when paper sections alternate with colour. Open on a pastel hero, follow with a paper introduction, then give services or a testimonial their own colour so each rounded sheet marks a new part of the page.
02 / Fit
Businesses that suit it
- Childcare centres, nurseries and preschools
- Pediatric, family and dental practices
- Vets, groomers and pet sitters
- Swim schools, tutors and children's classes
03 / Features
Features
Openings with a puddle photo
A rounded headline on a pastel section, with the photo cropped into a soft puddle shape beside it.
Services on filled cards
Each service sits on its own rounded card with a round icon, on a pale colour section.
Questions as rounded cards
Numbered questions open in place, each on its own card with a round number.
04 / Make it yours
Shape the mood around your brand
- Mint is the default. Apricot is warmer, Lilac is cooler, and Night Light is a dark navy option with a pale moon-yellow accent section.
- Use the contrast palette once, for a testimonial or a call to action, so it stands out from the pastels.
- Choose a different rounded or soft sans from the font menu to change the voice without losing the shape.
05 / Every screen
Clear, comfortable, and easy to use
- Text on every pastel section uses the palette's deep ink, and every colourway passes contrast checks in each section palette.
- The colour shift on scroll changes hue only, so text stays equally readable, and it stops for visitors who ask for reduced motion.
- The drifting photo shapes and the springy button movement stop for reduced motion too.
- The phone menu uses large tiles that are easy to tap.
06 / FAQ
Puddle questions
- Does the background colour change as visitors scroll?
- Yes. Each section's colour moves a shade warmer as it passes through the window. Visitors who turn on reduced motion, or sites that set motion to off, see still colours.
- Does Puddle include a dark option?
- Yes. Night Light sets cream text on deep navy, with a pale yellow accent section and peach buttons.
- Which colour palette does Puddle start with?
- Mint is the starting colorway: a pale mint accent, a warm paper page, navy text and peach buttons.