Case Study - Brand + Web + CMS
State Line
Recovery Dharma
a place to begin again.
A full-stack website and content management system for a new Buddhist-inspired recovery community on the Wisconsin/Illinois border. Brand identity, responsive website, national meeting finder, custom admin panel with a built-in creative hub for generating print and social media materials, all designed for a non-technical admin to run independently.
Visit statelinedharma.org
The Challenge
Recovery needed a home in this community.
The client had just completed rehab and wanted to start a Recovery Dharma sangha, a peer-led, Buddhist-inspired recovery group, in his area. The problem: there were zero meetings between Milwaukee and Chicago. No website, no brand, no way for people to find help. He needed a complete digital presence that he could manage himself, with no technical experience. The site had to be warm enough to welcome someone on their worst day, and practical enough to answer "when and where do I show up?"
0
Recovery Dharma meetings existed in the WI/IL border area. This was starting from scratch. The website would be the first point of contact for anyone seeking help.
6
Public-facing pages (homepage, about, meetings, resources, get involved, and a national meeting finder), all server-rendered and editable through the admin CMS.
8
Admin panel sections including dashboard, meetings, daily readings, site content, media library, creative hub, settings, and a built-in help guide. All designed for a non-technical user.
Brand Identity
Warm enough to walk toward.
The brand needed to say two things at once: "this is safe" and "this is real." The deep blue anchors trust and calm. The gold saffron nods to Buddhist tradition without being prescriptive. Warm whites and earthy tones feel like a place, not a pamphlet. Playfair Display brings quiet authority to headings while Inter keeps body text clean and accessible. The overall feeling is a meditation studio, not a hospital.
Color Palette
Deep Blue
#1B3A5C
Gold
#B8860B
Saffron
#E8A317
Warm White
#F5F0E8
Lotus Pink
#D4A0A0
Headlines / Playfair Display
You don't have to do this alone.
Body & UI / Inter
Peer-led meditation meetings rooted in Buddhist principles. Free, open to everyone, no experience necessary. All are welcome.
UI Labels & Navigation
Our Meetings · About · Resources · Get Involved
Voice & Tone
Warm, clear, never clinical.
Every word on the site was written for someone who might be visiting on one of the hardest days of their life. The voice is kind without being soft, inclusive without being vague, and grounded in Recovery Dharma's non-theistic Buddhist framework.
Meet people where they are
No assumptions about where someone is in recovery, or whether they've started at all. The site never lectures. It extends invitations. "Thinking about coming to a meeting but feeling nervous?" acknowledges the real barrier.
"Drop us a message. We'll get back to you, usually within a day or two."
Buddhist-informed, never religious
Recovery Dharma uses the Four Noble Truths and Eightfold Path as a framework, not a doctrine. The site explains the tradition without requiring belief. It's a practice, not a religion, and the language reflects that distinction.
"Recovery Dharma uses Buddhist principles as a practical framework for breaking free from the cycles of suffering and addiction."
Homepage
Interior Page
Feature Page
Click any screen to bring it forward
Design Decisions
What made it work.
Meetings front and center
The homepage hero doesn't have a mission statement. It has meeting cards with days, times, and locations. The single most important action is "show up," so the design removes every obstacle between landing on the page and knowing exactly when and where to go.
Admin-first CMS design
The client has no technical background. Every admin feature includes inline help tooltips and a built-in help guide. A schema-driven content editor with field validation lets him edit every line of site copy. Section visibility toggles let him show or hide entire page blocks. A master meeting toggle can disable all meetings at once if schedules change.
Print and social without leaving the browser
The Creative Hub has nine templates across print flyers and social media formats (square posts, Stories, Facebook banners). Six design themes, four text sizes, live QR codes, and real-time preview. Branded materials download as PNG or PDF without ever opening Canva.
Safe enough to reach out
The contact form promises confidentiality. The tone never assumes someone is "in recovery." They might be curious, nervous, or looking for a friend. The "Reach Out" section lives on the Get Involved page, not behind a clinical "Contact Us" link. The SAMHSA crisis line is in the footer of every page, always visible.
Education that doesn't lecture
The About page teaches the Four Noble Truths and Eightfold Path through card-based layouts with Pali terms, not walls of text. An eight-question FAQ accordion addresses real anxieties: "Do I have to be Buddhist?" "What if I've never meditated?" "Is this like AA?" Meeting someone's objections before they arrive.
One source of truth for everything
Meeting data flows from the database to the homepage cards, the footer, the Get Involved page, the meetings page, and the Creative Hub flyers. Change a meeting time once and it updates everywhere. No copy-paste, no version drift, no stale info on a printout.
The Full System
More than a website.
National Meeting Finder
Pulls from Recovery Dharma's national directory API via geocoded search. "Use my location" geolocation button, autocomplete suggestions, configurable radius (10/25/50/100 miles), day filtering, and distance sorting. Results show meeting name, distance, and time.
Creative Hub
Nine templates across flyers (Bold Schedule, Meeting Spotlight, Newcomer Welcome, Try Recovery Dharma) and social media (Type Hero, Clean Split, Weekly Overview, Facebook Banner, Story). Six design themes, four text sizes, live QR codes, and PNG/PDF export. All rendered client-side on HTML Canvas.
Eight-Section Admin CMS
Dashboard with next-meeting countdown and weekly dot schedule. Meetings CRUD with Google Maps embeds and geocoding. Schema-driven content editor. Media library with folder categories. Daily readings manager. Creative Hub. Settings with password management. Comprehensive help guide with anchor links.
Daily Readings System
Admin-managed daily dharma readings displayed on the homepage. Date-assigned or rotation-based scheduling. Each reading has a title, source, and body, giving people a reason to come back every day.
Location-Aware Meetings
Database-driven meeting schedule grouped by location. Each venue has coordinates, Google Maps embed, directions link, venue website, and Google Calendar URL. Change a time once and it propagates to every page and every flyer template.
Contact & Email System
Confidential contact form via Resend API with configurable recipients and database backup. All submissions stored regardless of email delivery status. HTML-formatted notifications with reply-to set to the sender's address.
Scroll Reveal & Mobile UX
IntersectionObserver-powered scroll animations reveal content as visitors scroll. Sticky header with scroll state detection. Mobile hamburger menu. Scroll-to-top button. text-wrap: balance on headings to prevent orphans. Mobile-first responsive design throughout.
Recovery Education
About page teaches the Four Noble Truths and Eightfold Path (organized into Wisdom, Ethics, and Mental Discipline) through card layouts with Pali terms. Eight-question FAQ accordion addresses real anxieties. Resources page features five curated books, meditation apps, guided channels, and gear recommendations.
AI-Assisted Workflow
Two specialized Claude agents, a Creative Director (brand, UX, design system) and a Site Builder (architecture, code, database), accelerated every phase from content strategy to deployment.
6
Public Pages
8
Admin Sections
9
Creative Templates
6
Database Tables
2wk
Build Time