Daniela and Moe Wedding Event One-Pager

Overview

This one-pager is a refined event template designed by and for designers, characterized by its sophisticated use of negative space and editorial typography. It serves as an excellent reference for cloning due to its unique layout components, such as the interactive 'Fun Facts' flip-grid and a visually dense timeline-based event structure.

Design System

• Color Palette & Visual Hierarchy: The site uses a soft, warm neutral background (#FDF2F0) paired with deep navy text for high-restraint elegance. Accents of coral/terracotta provide warmth in interactive elements and decorative graphics. Hierarchy is established through extreme contrast in font scales and generous padding between sections.
• Typography: The system relies on a high-contrast serif for primary headings (e.g., "Daniela Moe") and secondary display text. Subheaders (h5) use a wide-tracked, all-caps sans-serif for a functional, utilitarian feel. Body text alternates between a large serif for storytelling and a smaller sans-serif for logistics.
• Structure & Flow: The page follows a logical chronological flow: Hero Archive > Narrative Story > Interactive Quiz > Chronological Event Timeline > Local Map/Guide (Stay, Eat, Drink, Play) > Registry > RSVP Form.
• Reusable Components:
  • Flip-Card Quiz: A grid of index-fact units with SVG icons that reveal text on hover/tap.
  • Event Row: A complex flexbox/grid layout (index-event) that combines a date marker, headline, and vertical metadata list (Time, Where, Parking).
  • Category Cards: Specialized list cards for recommendations using descriptive icons and price-point indicators.
  • Custom RSVP: A minimalist, state-driven form that toggles field visibility based on the guest's response.
• Interactions: The design features hover-only reveals on the quiz section and a custom 'banger' text effect where headlines are split into staggered spans (banger-1, banger-2) for visual rhythm.
• Implementation Clues: The HTML reveals a custom Bootstrap-inspired grid (container, row, col-md-10) used to center-align narrative content while allowing imagery to break the grid or bleed to the edges.

Use Cases

• Who should clone this: Designers or agencies looking for a portfolio-grade event site that avoids the 'generic template' look. It is ideal for high-end weddings, boutique conferences, or curated workshops.
• Remix potential: The 'Fun Facts' grid can be effectively remixed into a 'Services' or 'Team' section for a creative agency. The 'Stay/Eat/Drink' layout can be repurposed for a city guide or a local directory.
• Remix Directions: Swap the warm palette for high-contrast monochrome for a more corporate aesthetic, or adapt the information architecture to create a product launch page by replacing the timeline with features.
• Clone Scope: A full-page clone is recommended to capture the sophisticated spacing and typographic rhythm, though the index-facts quiz and index-event timeline sections are the most valuable standalone components.