WedFlow Atelier · v1.0.0

Template documentation

Thank you for choosing WedFlow Atelier — a premium, editorial wedding-planning HTML template. This guide walks you through everything in the package, how to run it, and how to make it your own.

Introduction

WedFlow Atelier is a calm, typography-led HTML template for a modern wedding-planning experience — the kind a couple and their planner would keep every detail in. The aesthetic is “The Atelier”: warm ivory, espresso and brushed gold, set in Playfair Display and Inter, in both light and dark.

This is a static HTML template — a hand-built kit of marketing and app-style pages. There is no backend, no database and no build step. Every page is plain HTML that shares one stylesheet and one small script, so you can open it, edit it, and host it anywhere.

The package includes:

25 HTML pages in total — nothing is a duplicate of another with the text changed.
An editorial landing page and a matching documentation page.
Ten couple-side app screens — dashboard, guests, budget, seating, music, timeline, vendors, checklist, gift registry and guestbook.
Four guest-facing pages — the public wedding site, the RSVP form, plus login and register on the espresso auth panel.
A nine-screen operator admin panel — analytics, users, platform settings, payment gateways, payments, SMS/WhatsApp messaging, landing config, legal CMS and languages.
One design-system stylesheet (atelier.css) with CSS-variable theming and a built-in dark mode.
One dependency-free JavaScript file (atelier.js) for the theme toggle, mobile sidebar, scroll reveal and tabs.

Getting started

There is nothing to install or compile. To preview the template:

Unzip the downloaded package to any folder on your computer.
Open index.html in any modern browser (Chrome, Safari, Firefox, Edge).
Use the navigation, or open the files in the pages/ folder directly, to explore each screen.

Everything is static — the fonts load from Google Fonts over the network, and all styling and behaviour is contained in the two assets/ files. To customise, edit the HTML in any code editor (VS Code, Sublime, etc.) and refresh the browser.

Hosting. Because there is no server-side code, you can deploy WedFlow Atelier to any static host — Netlify, Vercel, GitHub Pages, Cloudflare Pages, Amazon S3, or ordinary shared hosting. Just upload the whole folder and point your domain at index.html.

File structure

The package is organised so that markup, styles and scripts stay cleanly separated:

wedflow-atelier/ index.html # landing page pages/ dashboard.html # planning overview guests.html # guest list & RSVPs budget.html # budget tracker seating.html # seating & tables music.html # music & setlist timeline.html # day-of timeline vendors.html # vendor directory checklist.html # planning checklist registry.html # gift registry & funds guestbook.html # guestbook moderation wedding-site.html # public wedding site rsvp.html # guest RSVP form login.html # sign in register.html # create account documentation.html # this page admin/ # operator (admin) panel dashboard.html # analytics dashboard users.html # user management settings.html # platform settings payment-gateways.html # 9 gateways + Connect payments.html # licence payments messaging.html # SMS / WhatsApp providers landing.html # landing-page config legal.html # legal pages CMS languages.html # languages & RTL assets/ css/atelier.css # design system + tokens js/atelier.js # interactions (no deps) img/hero-bg.jpg # bundled hero photo (landing, login, RSVP)

Pages included

Each file demonstrates one part of the wedding-planning experience, using the shared design system:

File	Demonstrates
`index.html`	Editorial landing page — hero, manifesto, feature chapters, pricing tariff.
`dashboard.html`	Planning overview with stat tiles, progress bars and recent activity.
`guests.html`	Guest list with party counts, RSVP status and dietary notes.
`budget.html`	Budget tracker — category spend, totals and progress.
`seating.html`	Seating plan — tables, assigned guests and printable chart layout.
`music.html`	Music & setlist — reception songs, guest requests and DJ view.
`timeline.html`	Day-of timeline — the schedule of events, hour by hour.
`vendors.html`	Vendor directory — contacts, ratings and status.
`checklist.html`	Planning checklist — tasks grouped by stage, with completion.
`registry.html`	Gift registry — wishlist gifts with reservations + cash/honeymoon fund goals.
`guestbook.html`	Guestbook moderation — approve, hide or remove guest well-wishes.
`wedding-site.html`	Public wedding site — the couple's themed guest-facing page.
`rsvp.html`	Guest RSVP form — per-member attendance and meal choices.
`login.html` / `register.html`	Sign-in and account-creation screens on the espresso auth panel.
`admin/dashboard.html`	Operator analytics — KPIs, plan mix, revenue by gateway, storage, signups.
`admin/users.html`	User management — plans, verification and account actions.
`admin/settings.html`	Platform settings — branding, email, storage and plan limits.
`admin/payment-gateways.html`	Nine payment gateways + Stripe Connect contributions.
`admin/payments.html`	Licence payments across every gateway.
`admin/messaging.html`	SMS & WhatsApp — selectable provider (Twilio, Vonage, MessageBird, Plivo).
`admin/landing.html`	Landing-page hero, gallery and auth imagery configuration.
`admin/legal.html`	Legal pages CMS — privacy, terms, refund + custom pages.
`admin/languages.html`	Languages & right-to-left (RTL) management.

Theming & colours

The entire palette is driven by CSS custom properties declared in :root at the top of atelier.css. Change one variable and it re-themes everywhere it is used — buttons, cards, borders, accents and more all read from the same tokens.

/* assets/css/atelier.css */ :root { --bg: #FAF9F7; /* ivory page background */ --fg: #1C1C1C; /* charcoal text */ --muted: #F3EDE4; /* soft champagne surface */ --muted-fg: #8C7B75; /* warm taupe text */ --border: #EAEAEA; --card: #FFFFFF; --gold: #B89668; /* brushed gold accent */ --gold-fg: #FFFFFF; --espresso: #14130F; /* brand surface */ --radius: 14px; }

To restyle the whole template with a different accent — say a dusty rose — you only need to change --gold (and its --gold-hover / --gold-fg companions). Everything that uses gold updates instantly.

Dark mode

A complete dark theme is defined under the [data-theme="dark"] selector, which overrides the same tokens with darker values. The theme toggle button (any element with data-theme-toggle) flips the data-theme attribute on <html>, and the choice is persisted in localStorage under the key atelier-theme, so it survives page loads and navigation.

[data-theme="dark"] { --bg: #14130F; --fg: #F3EDE4; --gold: #C9A878; /* …the same tokens, re-valued for dark */ }

Typography

Two typefaces carry the editorial feel, both loaded free from Google Fonts in the <head> of every page:

Playfair Display — headings, display type and italic accents (--font-serif).
Inter — body copy, labels and UI (--font-sans).

To swap a typeface, change the Google Fonts <link> in each page's head and update the matching variable in atelier.css:

/* pick your own serif + sans, then: */ :root { --font-serif: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', system-ui, sans-serif; }

Components

The stylesheet ships a small, consistent set of reusable classes. Compose pages from these rather than writing new CSS:

.btn family — .btn-gold, .btn-ink, .btn-ghost, .btn-sm; the primary action buttons.
.card — a surface panel; add .pad for padding and .lift for a hover shadow.
.badge family — .badge-gold, .badge-soft, .badge-live pill labels.
.field / .input — labelled form fields with focus rings.
.tiles / .tile — responsive stat-tile grid (key + value).
.tbl — the editorial data table used across app pages.
.bar — a slim progress bar; put an <i> inside for the fill.
.row-card — list rows for checklists, setlists and timelines.
.eyebrow — the small gold rule-and-caps kicker above headings.
.app / .side / .topbar / .page — the app shell (sidebar + top bar + content).
.hero, .feature-grid, .pricing / .plan — the landing-page building blocks.

Usage snippets

A gold button and a padded card:

<a href="#" class="btn btn-gold">Begin planning</a>  <div class="tiles"> <div class="tile"> <div class="k">Guests confirmed</div> <div class="v">128 <small>/ 160</small></div> </div> </div>

A progress bar filled to 70%:

JavaScript

All behaviour lives in one small, dependency-free file — assets/js/atelier.js — written in plain vanilla JavaScript. Include it once before </body> and it wires up everything on DOMContentLoaded. It provides:

Theme toggle — any element with data-theme-toggle flips light/dark and saves the choice to localStorage.
Mobile sidebar — data-side-toggle opens/closes the .side drawer; clicking outside closes it.
Scroll reveal — elements marked data-reveal fade up as they enter the viewport (via IntersectionObserver).
Tabs — a data-tabs group with data-tab triggers and data-panel panels toggles matching content.

<div data-tabs> <button data-tab="ceremony" class="active">Ceremony</button> <button data-tab="reception">Reception</button> <div data-panel="ceremony">…</div> <div data-panel="reception" style="display:none">…</div> </div>

Images & credits

One photograph is bundled in the package — assets/img/hero-bg.jpg (1800×1200 JPEG) — shared by the landing hero, the login panel and the RSVP header band. Swap that single file to re-shoot all three; no markup change is needed. All other placeholder photography is served from Unsplash via direct image URLs, purely for demonstration.

Replace before launch. Drop your own image over assets/img/hero-bg.jpg, and swap the remaining Unsplash URLs for your own imagery (upload your files and update the src attributes). While Unsplash photos are free to use under the Unsplash licence, you are responsible for confirming the licensing of any image you ship in a live project.

Support & credits

Everything you need is already in the package, and the whole template is built on open, well-documented web standards:

Fonts — Google Fonts (Playfair Display & Inter), licensed under the SIL Open Font License.
Icons — inline SVG, drawn directly in the markup; no icon-font or external library.
Photography — Unsplash (placeholders, replace with your own).
Code — hand-written HTML, CSS and vanilla JavaScript, with no framework or build tooling.

If you get stuck or have a question about the template, please reach out through your ThemeForest item page — we're glad to help you get your wedding project looking its best. Thank you again for choosing WedFlow Atelier, and happy planning.