# Haven: periwinkle editorial memorial
## Overview
Elegant funeral home homepage inspired by the f1Connect design system. Playfair Display italic serif headings paired with Josefin Sans geometric body text, a periwinkle blue (#6277A8) brand color, and warm sand (#F3DECA) accent. The design conveys quiet dignity through editorial serif typography, generous whitespace, and soft blue-tinted section backgrounds.
## Source
Figma frame: f1Connect Design System, node 208-16807
## Colors
| Token | Hex | Usage |
| ----------------- | --------- | --------------------------------------- |
| background | #FFFFFF | Page and card backgrounds |
| foreground | #676D7B | Body text, muted headings |
| primary | #6277A8 | Brand blue, heading highlights, buttons |
| primary-foreground| #FFFFFF | Text on primary backgrounds |
| secondary | #6277A8 | Footer background |
| secondary-foreground | #FFFFFF | Footer text |
| muted | #EFF1F6 | Alternating section tint |
| muted-foreground | #676D7B | Secondary body text |
| card | #FFFFFF | Card surfaces |
| card-foreground | #282828 | Dark card headlines (news titles) |
| border | #D1D5DE | Dividers, input rings |
| accent | #F3DECA | Warm sand CTA fills, tag backgrounds |
| accent-foreground | #6277A8 | Text on accent backgrounds |
## Typography
| Token | Font | Purpose |
| ------- | --------------- | ---------------------------------- |
| heading | Playfair Display| Display and section headings |
| body | Josefin Sans | Body copy, navigation, buttons |
## Sections
1. **Hero** - Split-screen layout with editorial italic title, hamburger menu, two bordered CTA cards (immediate need / plan ahead), and obituary search bar
2. **Services** - "Why Haven?" eyebrow with large heading featuring italic accent, three circular icon cards
3. **News** - Muted background, three-column article grid with image, tag badge, date, title, and description
4. **Testimonials** - Centered large serif quote with italic highlight, attribution
5. **Locations** - Muted background, italic heading, panoramic photo gallery with pagination dots
6. **Plan** - Display-scale CTA heading with italic accent, description, dual action buttons
7. **Footer** - Blue background, immediate help block with phone number, five link columns, legal disclaimer