Kids' marine-science day camp
Low Tide Lab
The schedule is a tide chart: camp weeks sit in the low-tide troughs. Field-guide specimen cards show what kids find on the rocks.
Signature: A tide chart that doubles as the camp schedule
- Palette
- Foam
#EAF6F3 - Deep Channel
#0E3B53 - Sea Glass
#7FC8B8 - Coral
#FF7F6B - Kelp
#3F6B3A - Buoy Yellow
#FFD23F
- Foam
- Fonts
- Display: Bricolage Grotesque
- Body: Nunito
- Utility: DM Mono
Download this folder (1.12 MB)
The easy way
Download a demo folder, give it to Claude (drop the zip into a chat or open the folder in Claude Code) and write: make this site. Claude follows START_HERE.md.
Pinned prompt
Use the frontend-design skill. Build this brief exactly from the design plan below. Do not change the palette, fonts,
layout or signature element.
BRIEF:
Build a one-page website for Low Tide Lab, a marine-science day camp for ages 8–12 at the North Cove field station. Three one-week sessions in July (Week 1 is full, Week 2 has 4 spots left, Week 3 has 9), $340 per week Mon–Fri, groups of 8 with two instructors, 15% sibling discount. Show what kids find at low tide (shore crab, anemone, sea star, limpet), what a typical day looks like, and what to bring. Parents should be able to reserve a week. One self-contained index.html, Google Fonts allowed, no frameworks.
DESIGN PLAN:
# Design plan — Low Tide Lab (frontend-design skill, pass 1 + critique)
**Subject:** a marine-science day camp on a rocky shore, ages 8–12. **Audience:** parents (the kids look over their shoulder).
**Single job:** get a parent to reserve a week.
**The subject's world:** tide charts, tide-pool field guides, specimen cards, rubber boots, buckets, sea glass.
## Tokens
| Role | Name | Hex |
|---|---|---|
| Background | Foam | `#EAF6F3` |
| Ink / deep water | Deep Channel | `#0E3B53` |
| Water | Sea Glass | `#7FC8B8` |
| Accent / action | Coral | `#FF7F6B` |
| Secondary | Kelp | `#3F6B3A` |
| Highlight | Buoy Yellow | `#FFD23F` |
**Type**
- Display: **Bricolage Grotesque** 800 — chunky, a bit playful, still readable for parents.
- Body: **Nunito** 400/700 — round and friendly.
- Utility: **DM Mono** — tide times, dates, specimen numbers.
## Layout
```
[ Low Tide Lab weeks · what we find · reserve ]
[ THE BEST CLASSROOM ]
[ DISAPPEARS TWICE A DAY. [Reserve a week] ]
[ ~~~~~~~~ tide curve across the full width ~~~~~~~~ ]
[ ▼ Week 1 low 06:12 ▼ Week 2 low 07:40 ▼ Week 3 ... (sessions sit ]
[ in the troughs of the tide = when camp is on the rocks) ]
[ FIELD GUIDE: specimen cards (crab, anemone, sea star, limpet) w/ numbers ]
[ A DAY AT CAMP: timeline pinned to the tide (real sequence) ]
[ reserve card: price, what to bring (boots, bucket), CTA ]
```
**Signature:** the tide curve is the schedule — camp weeks sit in the low-tide troughs.
## Critique of pass 1 → revisions
- Pass 1 had a photo-style hero with a gradient overlay and a centered headline → template. **Replaced** by the tide curve.
- Pass 1 palette was navy + gold "premium" → wrong audience. **Changed** to foam / sea glass / coral, with navy only as ink.
- Pass 1 had "01 / 02 / 03" on the field-guide cards → not a sequence. **Changed** to real specimen catalogue numbers (LT-014).
- Kept the day timeline numbered by clock time, because it is a sequence.
Template FAQ
Can I use this template for client or commercial work?
Free for personal and commercial use, including client work; modify freely; attribution appreciated, not required; do not resell the templates as-is.