Solace

Overview#

Solace is a multi-page website template for a therapy and counseling practice. The demo is Budd Bay Counseling, a fictional group practice at 412 Legion Way SE in Olympia, Washington, with six clinicians (a psychologist, an LICSW, an LMFT, two LMHCs and a supervised associate) who see adults, couples, teens, children and families in person and by video. It is built with plain HTML, Tailwind CSS v4 and two vanilla JavaScript files (assets/js/data.js for the practice data, assets/js/main.js for the interactions), with no other dependencies. This is version 1.0.0 (see template.json and CHANGELOG.md). Live demo: freeframe.dev/templates/solace.

The demo never goes stale: office hours, holidays, the next free consultation, reply-by dates and group start dates are all worked out from today's date in Pacific time, from rules rather than fixed dates.

Mental health copy needs care. The template keeps to general information, makes no promises about outcomes, shows no client testimonials or reviews, asks people not to put health details in forms, and points to the real crisis routes (call or text 988, call 911) on every page. Keep it that way when you edit, and have your own clinicians review the wording.

Quick start#

1. Unzip the download.
2. Open index.html in a browser. Everything works from the file system, with no server or build step.
3. To preview over HTTP instead (closer to a real host), serve the folder, for example npx serve . or python3 -m http.server, and open the address it prints.

You only need Node.js (version 24 recommended) if you want to rebuild the CSS after adding Tailwind classes; see Building and deploying.

Pages#

Project structure#

solace/
  index.html ... contact.html, 404.html   the pages (crisis bar, header and footer repeated in each)
  assets/
    css/style.css        compiled Tailwind CSS (generated by npm run build, committed)
    js/data.js           practice data: hours, holidays, clinicians, fees, sliding scale, plans, groups, quiz
    js/main.js           all interactions (reads window.SOLACE from data.js)
    img/
      favicon.svg        arch, sun and tide-line logo mark
      hero-sound.svg     home hero: dusk over Budd Inlet with cedars and a heron
      svc-*.svg          service art: individual, couples, families, groups, telehealth
      approach-stones.svg, fees-shells.svg, heron-404.svg   page art
      portrait-*.svg     six illustrated clinician portraits (320 x 400)
      map.svg            illustrated map of downtown Olympia (home and contact)
      og-image.svg       social image source (1200 x 630)
      og-image.png       social image used by og:image
  src/input.css          Tailwind source: theme tokens and components
  package.json           npm scripts to rebuild the CSS
  README.md              short introduction
  DOCS.md                this guide
  CHANGELOG.md           version history
  LICENSE.txt            license (added to the download)

Customizing#

Brand and colors#

The design tokens are in the @theme block at the top of src/input.css. Every color becomes a Tailwind utility (bg-clay-600, text-fir-800, border-line...).

To change the brand color, replace the clay scale and rebuild:

@theme {
  --color-clay-600: #7b4a8c; /* buttons */
  --color-clay-700: #643b72; /* links, eyebrows */
}

Keep white text on clay-600 and fir-800 at 4.5:1 contrast or more. A few colors are also written inside the SVG files and the logo mark (in each page's header and footer); change those by hand if you rebrand.

Typography#

Headings use Gilda Display (an editorial serif, regular weight only) and body text uses Rosario (a humanist sans, weights 400–700 plus italic). They load from Google Fonts with a <link> in each page's <head>:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gilda+Display&amp;family=Rosario:ital,wght@0,400..700;1,400&amp;display=swap">

The stacks are --font-display and --font-sans in src/input.css. To swap fonts, change the link in every page and the two tokens, then rebuild the CSS.

Content#

Page copy is plain HTML. Everything the pages calculate from lives in assets/js/data.js, which defines window.SOLACE:

The hours lists in the HTML (data-hours) are written out in each page; keep them in step with HOURS.

Adding a clinician

Add an entry to CLINICIANS and a 320 x 400 portrait to assets/img/. The key is used in URLs (clinician.html?id=underhill), so use lowercase letters only.

underhill: {
  name: 'Sorrel Underhill', first: 'Sorrel', short: 'Sorrel', credential: 'LMHC',
  role: 'Licensed mental health counselor', pronouns: 'they/them', tier: 'licensed',
  clients: ['adults'], concerns: ['anxiety', 'grief'], modalities: ['act', 'cbt'],
  formats: ['inperson', 'video'], days: { 1: ['09:00', '17:00'], 4: ['12:00', '20:00'] },
  accepting: 'yes', insurance: ['soundshore'], sliding: false,
  languages: ['English'], since: 2020,
  focus: 'One line for cards', summary: 'Two sentences for the directory.',
  bio: ['Paragraph one.', 'Paragraph two.'], words: 'A sentence in their own words.',
  training: ['MA, Counseling', 'LMHC, Washington State'], art: 'portrait-underhill.svg'
}

• tier picks the row of FEES.tiers (psychologist, licensed or associate).
• days are session hours. A shift that starts before DAYTIME_UNTIL ('15:00') counts as daytime, one that ends after EVENING_FROM ('17:00') counts as evenings, and day 6 counts as Saturdays.
• accepting is 'yes' or 'waitlist'; a waitlisted clinician needs wait: 'about 6 weeks'.
• insurance lists keys of PLANS; sliding: true means they hold sliding-scale spots.

The directory, profile, quiz, contact form, approach tabs and service lists all pick the new clinician up. Also mention them in the home and team page copy where the number of clinicians appears ("Six therapists").

Fees and the sliding scale

FEES.tiers holds the fee per row id (consult, intake, individual, couples, extended). The table on fees.html is built from it. The figures repeated in copy ($110, $165, $190 on the home page; $55 groups; $75 late cancellation) are plain HTML.

The sliding scale works out income as a share of the federal poverty guideline: guideline = base + perPerson × (household − 1), then the first band whose upTo percentage is not exceeded sets the fee. Update base and perPerson with each year's guidelines.

Insurance plans

PLANS entries have a type: 'in' (in network with the clinicians who list the plan), 'eap' (an employee assistance program with sessions free sessions) or 'oon' (out of network: superbill). The plan names are fictional placeholders; use the plans your practice really works with. The out-of-network estimate is OON.allowed × share: with the defaults, 60% of $140 is about $84 back, so a $165 session costs about $81.

Groups

Each group in GROUPS starts on the nth weekday (0 = Sunday) of each month in months. The date shown is the first one at least GROUP_RULES.minLeadDays (7) days from today that isn't a holiday (observed, or the calendar date of a fixed-date holiday), so the list never shows a past date. weeks: 0 marks a one-day workshop. Opened on Nov 1, 2026 the demo shows Slack Tide from Thursday, Dec 10; Little Hours from Saturday, Jan 2, 2027; Steady Ground from Tuesday, Jan 5, 2027; Tide Pool from Wednesday, Jan 6, 2027; and Two Oars on Saturday, Mar 20, 2027.

To use fixed dates on a real site, replace the rule with your own logic in nextGroupStart() in main.js, or simply edit months each term.

Images and artwork#

All artwork is SVG drawn for this template: the hero landscape, five service illustrations, page art, the map and six portraits. Each is an <img>, so you can replace any of them with a photo of the same aspect ratio:

The social image is og-image.png (1200 x 630), generated from og-image.svg. Edit the SVG, then export it to PNG with any tool (or open it in a browser and take a 1200 x 630 screenshot). The favicon is favicon.svg.

Navigation, header and footer#

The crisis bar, header and footer are repeated in every page. To add a page, copy an existing one, change its <title>, description and <main>, and add a link to the desktop menu (<nav aria-label="Main">) and the mobile menu (#mobile-menu) in every page. Mark the current page with aria-current="page".

Features#

Crisis panel#

Every page starts with a bar: "In crisis right now? Call or text 988, any time. In an emergency, call 911." The "More ways to get help now" button (data-crisis-toggle) opens a panel (#crisis-panel) with call buttons and the note that the practice can't respond to emergencies by form or email. It is a disclosure button with aria-expanded; Esc closes it while focus is inside. The home page, footer, match page and contact form repeat the same routes. Don't remove them, and check the numbers if you adapt the template for another country.

Office hours, open now and holidays#

renderHours() in main.js highlights today's row in every data-hours list, fills the open-now pills (data-open-status), shows the next holiday within 14 days (data-holiday-note) and the reply-by line (data-reply-by). It runs every minute.

Holidays are the 11 US federal holidays, worked out for any year from the rules in HOLIDAYS. Fixed-date holidays move to the Friday before when they fall on a Saturday, and to the Monday after on a Sunday, so New Year's Day 2028 (a Saturday) is observed on Friday, Dec 31, 2027. Add one-off closures to EXTRA_CLOSED.

All dates use PRACTICE.timeZone (America/Los_Angeles), whatever the visitor's own time zone. For review, add ?now=2027-01-04T10:00 to any page URL to see it at that Pacific wall-clock time.

Next free consultation and reply-by dates#

nextConsult(id) returns the first day at least consultLeadDays (2) days ahead when an accepting clinician works and it isn't a holiday; waitlisted clinicians show their wait instead. The home hero shows the earliest across the team (on Sunday, Nov 1, 2026: "Tue, Nov 3 with Eamon"). Reply-by dates are the next business day (Monday to Friday, not a holiday) after today.

Clinician directory and shortlist#

team.html filters the cards by concern, client group, in-network plan, format, "accepting new clients" and "sliding-scale spots". Filters are written to the URL (team.html?concern=trauma&format=video&accepting=1), so filtered views can be shared; values are checked against the data before use. Example: concern trauma and format video shows Eamon only; plan Cascadia Mutual with accepting shows Eamon and Nadira.

The "Save" buttons (data-save-id) are toggle buttons with aria-pressed that add a clinician to the shortlist bar, which links to the consultation form with the first saved clinician. The profile page has the same button.

Clinician profiles#

clinician.html?id=<key> renders one clinician from CLINICIANS: name, role, pronouns, status, formats, bio, "in their own words", a Monday to Saturday hours grid, the next free consultation, an "at a glance" list and three related clinicians (most shared concerns and client groups). Without id it shows the first clinician; an unknown id shows a "We couldn't find that clinician" message.

Approach tabs#

approach.html uses the ARIA tabs pattern (role="tablist", arrow keys, Home and End). The URL hash selects a tab (approach.html#emdr), and profile pages link there. "Who offers it here" lists clinicians whose modalities include the tab's key.

Match quiz#

match.html asks five questions: who it's for, up to three concerns (MATCH.maxConcerns), format, times and payment. matchClinicians(answers) in main.js (also available as window.SOLACE.match):

1. Keeps clinicians who see the chosen client group (WHO[who].client).
2. Drops those who don't offer the chosen format, unless that leaves nobody (then it says so).
3. Scores 3 points per matching concern, 1 per matching time, 2 for payment (in-network plan, sliding-scale spots or the EAP) and 2 for accepting new clients (MATCH.points).
4. Shows the top three, ties in data order, each with its reasons and a link to contact.html?clinician=<key>&from=match.

Sliding scale and insurance checker#

On fees.html, the calculator updates as you type and highlights the matching band; ?household=3&income=45000 prefills it. The plan checker (?plan= is kept in the URL) shows in-network clinicians, EAP details or the out-of-network explanation with a refund estimate by share (50–80%).

FAQ#

faq.html uses <details> elements, so answers open with the keyboard and without JavaScript. The search box filters questions and answers as you type (?q=insurance prefills it) and announces the count. "Open all answers" toggles every item, and linking to a topic (faq.html#money) opens its first answer.

Mobile menu, reveals, back to top and toast#

The menu button has aria-expanded and aria-controls, and Esc or a click outside closes it. Sections fade in once with an IntersectionObserver (off with reduced motion). A back-to-top button appears after scrolling; toast() announces shortlist changes through a polite live region.

Forms#

There are two forms, and neither sends anything until you connect it:

The consultation form reads ?clinician=, ?who=, ?format=, ?pay= and ?plan= from the URL and, with ?from=match, the saved quiz answers. Choose a clinician and it says whether they are accepting, their next free consultation, and whether they work in the chosen format or with the chosen client group.

To connect a form service such as Formspree, post the form data in the submit handler and show the success panel only when the service answers OK. In main.js, find the comment "Connect your form service here" in the consultation handler:

fetch('https://formspree.io/f/your-id', {
  method: 'POST',
  body: new FormData(intake),
  headers: { Accept: 'application/json' }
}).then(function (r) {
  if (r.ok) { /* the existing success code */ }
  else toast('Sorry, that didn’t send. Please call us on (360) 555-0142.');
});

Do the same in the group form's submit handler. Choose a form service that offers a signed business associate agreement (BAA) if you might receive health information, and keep the form copy asking people not to include health details.

Saved data (localStorage)#

Names, email addresses, phone numbers and the free-text note are never stored. All access goes through safeStorage in main.js: when localStorage is blocked (sandboxed iframes, strict privacy settings), it falls back to memory, so the shortlist, quiz and form keep working for the page view. To reset everything, clear the site's data in the browser or run localStorage.clear() in the console.

SEO and sharing#

Each page has its own <title>, meta description, Open Graph tags and theme-color in its <head>. Social sites need an absolute image URL, so when you deploy, change og:image in every page to your full URL, such as https://yourpractice.example/assets/img/og-image.png. Add a sitemap.xml and robots.txt at the root of your host. 404.html has noindex. If you add structured data, the MedicalBusiness or Psychologist schema.org types fit.

Accessibility#

• Skip link, landmarks, one h1 per page and a logical heading order.
• Visible focus outlines; WCAG AA color contrast for text.
• Keyboard-accessible menu, crisis disclosure, tabs, <details> accordions, filters and toggle buttons with aria-pressed.
• Radio and checkbox cards are real inputs inside labels, grouped in <fieldset> with <legend>.
• Inline errors are tied to their fields with aria-describedby and aria-invalid; focus moves to the first problem. Step changes move focus to the new step's heading.
• Results and counts are announced with role="status".
• prefers-reduced-motion turns off reveals, the floating cards and smooth scrolling.

When editing, keep one h1, label every new input, and keep the crisis routes visible.

Building and deploying#

The compiled CSS is committed, so you only need to rebuild after adding Tailwind classes or changing src/input.css:

npm install
npm run build     # once
npm run watch     # rebuild on every change

To publish, upload the folder to any static host: Netlify Drop, Cloudflare Pages, GitHub Pages or your own server. There's no server code. Use HTTPS, and connect the forms before you go live.

Troubleshooting#

• Times or "open now" look wrong. Everything uses PRACTICE.timeZone. If your practice isn't in Pacific time, change it and update the "Pacific time" wording in the pages.
• A new Tailwind class has no effect. Rebuild the CSS (npm run build). Classes used only in main.js must be written as whole strings so Tailwind can find them.
• A new clinician doesn't appear in the quiz. Check that their clients include the answer's client group (WHO), and that their formats include the chosen format.
• The group date is not what you expected. It's the first date at least 7 days ahead in a listed month that isn't a holiday; preview other dates with ?now=YYYY-MM-DDTHH:MM.
• The shortlist or quiz answers don't survive a reload. The browser is blocking storage (private mode, a sandboxed preview); they still work for the page view.
• The social image doesn't show when shared. Use an absolute og:image URL on a deployed site.

License#

MIT. The code and all included artwork are free for personal and commercial use; see LICENSE.txt in the download.

The fonts (Gilda Display and Rosario) are from Google Fonts under the SIL Open Font License.

Budd Bay Counseling, its clinicians, insurance plans, groups and address are fictional placeholders; replace them with your own content. The health information is general and should be reviewed by your own clinicians.