This is a comprehensive technical and design brief for ProOfficiants. You can copy this directly into your Open Brain AI to ensure it maintains the brand's integrity and technical requirements for all future updates.
Project Brief: ProOfficiants.com
1. Brand Identity & Strategy
Core Concept: A premium, national directory for professional wedding officiants.
Target Market: Exclusively Canada. The platform focuses on building trust through regional expertise and provincial legal verification.
Aesthetic Style: "Modern Editorial." The design should feel expensive, airy, and curated, avoiding the cluttered "corporate directory" look.
Primary Palette: * Background: Light Cream/Off-white (
#FAF9F6)Accent: Muted Gold (
#C5A059)Text: Deep Charcoal/Soft Black (
#333333)
2. Layout & Grid Logic
Startup Constraint: To avoid the "empty site" look during launch, the Featured Professionals section is limited to a centered 3-column grid on desktop.
Responsiveness:
Desktop: Max-width container of
1000pxto maintain focus.Mobile: Single column stack. Navigation must use a Hamburger Menu with a glassmorphism effect (translucent background +
backdrop-filter: blur(10px)).
3. Component Specifications
Officiant Cards
Visuals: High-quality portrait photography with a subtle
15pxborder radius.Verification Tag: A "Canada Verified" or "Verified Pro" badge located in the top-left of the photo. Styling: 85% white semi-transparent background, gold border, and charcoal text.
Trust Metrics: Instead of just star reviews, highlight volume of experience.
Format:
5.0 ★ (250+ Ceremonies).
Call to Action: Clean "View Portfolio" button in deep charcoal.
"How it Works" Section
Structure: Card-based steps (1, 2, 3) with subtle boundaries.
Connectivity: No aggressive continuous lines. Use subtle, gold-colored connectors or three-dot separators between steps to imply a journey.
Typography: Large Serif numbers in gold to contrast with Sans-Serif body text.
Footer Design
Philosophy: Centered and Minimalist.
Background: Matches the off-white page background to feel seamless.
Hierarchy: 1. ProOfficiants Logo (Centered).
2. Secondary Links (About Us • Contact • Privacy Policy) with wide letter spacing.
3. "Popular Cities" directory links (Toronto, Vancouver, etc.) using Serif font and gold hover states.
Social: Small, subtle icons in the bottom center.
4. Technical Guardrails
CSS Stability: Always ensure global styles don't break grid containers. Use
object-fit: coverfor all professional photos to maintain aspect ratio uniformity.Navigation: Mobile menu must be toggled via a simple JavaScript or CSS checkbox hack to ensure functionality across all mobile browsers.
Use this documentation as the "Source of Truth" for any code generation or design changes.