## Overview
Storyland funeral home homepage, based on the f1Connect Design System "Theme 1 - Home - Desktop" (Figma node 73-6791). Extra-light Poppins display type, serif body copy, soft rounded photo cards, gentle blue accent over warm grey-blue text.
## Source
Figma: f1Connect Design System, frame "Theme 1 - Home - Desktop" (73:6791)
## Colors
| Token | Hex | Usage |
|-------|-----|-------|
| background | #FFFFFF | Page background |
| foreground | #5A686C | Body text, headings |
| primary / accent | #149FDA | Brand blue, links, buttons, footer |
| muted | #F5F8F9 | Soft card backgrounds |
| border | #D9E6E8 | Testimonial card background, dividers |
## Typography
- **Heading** (Poppins) — extralight 96px for display headlines, regular 28px for feature titles
- **Body** (Noto Serif) — serif body copy (Crimson Text substitute), 22px at lg
## Sections
1. **Hero** — Rounded-bottom photo with top nav, large display headline, search pill, two overlapping option cards
2. **Services** — Alternating photo/copy rows under "We exist to serve the unique needs of every family"
3. **Location** — Full-bleed photo with "Everything in one place" heading and CTA
4. **News** — "What's happening" three-card grid
5. **Testimonials** — Rounded pastel card with pull quote, five-star rating
6. **Plan** — "Plan for the future, today" with two CTA cards
7. **Footer** — Brand blue, logo, contact column, five link columns, legal copy
## Do's and don'ts
- DO use `container grid-layout` + `grid-col-span-*` for every multi-column section
- DO use `text-balance` on headings and `text-pretty` on body paragraphs
- DO prefer `gap-*` on parents over stacked `mt-*`/`pb-*` on children
- DON'T hand-roll buttons — always use `@repo/design-system/components/ui/button`
- DON'T use `tracking-tight`/`tracking-tighter` on display headings
- DON'T use `<br />` — rely on `text-balance`