Builder
  • Create
  • Sites
  • Templates
  • Blocks
  • Images
  • Fonts
  • Logos
  • Brand Extractor
  • Docs
  • Sitemap
  • Composer
Builder
  • Create
  • Sites
  • Templates
  • Blocks
  • Images
  • Fonts
  • Logos
  • Brand Extractor
  • Docs
  • Sitemap
  • Composer
Loading
Funeral homes
ThemeBrandBriefDESIGN.md
## Overview

Full-page funeral home "About Us" landing based on the f1Connect Restland design system (Figma node 240-21487). Editorial serif headings with golden yellow accents and script-font decorative overlays.

## Source

Figma: f1Connect Design System, frame "About us / Desktop"

## Colors

| Token | Hex | Usage |
|-------|-----|-------|
| background | #FFFFFF | Page background |
| foreground | #282828 | Primary text |
| primary / accent | #FFC500 | Golden yellow CTA, borders, stats bg |
| secondary | #2E2F2A | Dark sections (CTA, footer) |
| muted-foreground | #8A8A8A | Eyebrow text, captions |

## Typography

- **Heading** (Canela Text in Figma -> Fraunces): Display serif for h1/h2, stats
- **Body** (Gilroy in Figma -> DM Sans): Nav, body copy, eyebrows, buttons
- **Script** (Bayshore in Figma -> Sea Summer via mono slot): Decorative section subtitles

## Sections

1. **Hero** - Full-bleed landscape photo, dark overlay, centered "About Us" + italic subtitle, top nav with logo/links/phone
2. **Values marquee** - Two rows scrolling opposite directions: empathy, compassion, professionalism, etc.
3. **Pledge** - "Our Pledge" heading + script subtitle, 3 icon cards (Care, Comfort, Plan) inside yellow-bordered frame
4. **Story** - "Our Story" heading, photo carousel with 1925 founding text, stats on yellow bg (100k, 96, 27k)
5. **Team** - 4-col portrait grid with names and roles
6. **Explore** - Full-bleed photo hero with CTA button, thumbnail strip gallery
7. **Services** - "Why Us" heading, 4 photo strip, 2x2 icon features on yellow bg
8. **CTA** - "Plan Ahead" on dark bg with script accent
9. **Footer** - 4-col dark footer with logo, link columns, copyright

## Do's and don'ts

- DO use `text-balance` on all headings
- DO use `text-pretty` on body paragraphs
- DO use semantic color tokens (bg-accent, text-foreground) not raw hex
- DON'T use font-light anywhere
- DON'T use tracking-tight on display headings
Preview templateBrand guidelines