Umbra

Design concept

Umbra organizes a broad wellness offer around goals and practical next steps instead of medical diagnoses. An inclusive search-led hero, goal tiles, structured program cards, accessible weekly schedule, and transparent guided pathway create a clear service journey. The entire color system comes from Happy Hues Palette 1: white and pale lavender support content, deep purple anchors text, coral drives actions, purple-gray supports secondary labels, and yellow highlights access information. A single solid coral square forms the simplified logo without dots or secondary geometry.

How to use this template

Choose this template for a health and wellness platform that brings together programs, scheduled classes, local activities, educational content, or membership benefits. It is suitable for wellness networks, fitness communities, yoga and movement organizations, employee wellbeing providers, preventive health programs, retreat directories, community centers, and lifestyle services operating across several locations or delivery formats. The template is not designed to diagnose conditions or replace clinical care. If the organization provides regulated medical, psychological, nutritional, or therapeutic services, involve qualified professionals and legal reviewers before publishing claims or intake flows.

Replace the UMBRA wordmark with a compact transparent SVG or PNG logo. A horizontal mark works best because the header also contains navigation, location selection, account access, and a primary action. Preserve generous spacing and strong text contrast; pale wellness colors should never make controls or labels difficult to read. Define a small semantic color system so categories remain consistent across icons, cards, filters, and schedules. Do not assign colors randomly each time content is added. The hero should explain the portal's practical value in plain language. Pair a welcoming photograph with separate HTML text, search controls, a location selector, and one main action.

Use real participants with documented permission and avoid imagery that suggests a narrow body type, age, gender, ethnicity, or level of physical ability. Search should cover programs, classes, experiences, and guidance while returning useful suggestions, an empty-results state, and a path to support. Popular searches must reflect actual demand rather than invented trends. Goal tiles provide an accessible starting point for visitors who do not know a service name. Adapt goals to the real offer, use neutral language, and avoid promises such as curing stress, guaranteeing sleep, or producing specific health outcomes.

Each program card should use structured data for title, category, image, level, duration, delivery format, location, instructor or provider, price, availability, and next start date. The destination page should explain prerequisites, accessibility, equipment, cancellation rules, safety considerations, and who should seek professional advice before participating. The weekly schedule should be generated from real class records rather than maintained as decorative text. Support time zones, recurring sessions, capacity, waitlists, online links, and schedule changes. Make the schedule keyboard accessible and provide a readable list alternative on small screens.

Guided pathways can group several programs into a recommended sequence, but explain how recommendations are created and allow users to opt out of personalization. Do not imply clinical personalization unless the service is qualified and authorized to provide it. Local experience pages should contain accurate addresses, maps, transit or parking details, accessibility information, weather or equipment needs, organizer identity, and emergency or cancellation procedures. Practical guidance articles should name authors and reviewers, display publication and update dates, cite reliable sources, and distinguish general education from individual advice.

For SEO, create focused landing pages for meaningful goals, program types, locations, and experiences without generating thousands of thin filter pages. Add unique titles, descriptions, canonical URLs, structured event data when accurate, descriptive image alternative text, and a current sitemap. Protect profile, booking, payment, and health-related information with appropriate access controls and retention policies. Optional analytics and advertising must remain disabled until consent where required.

On mobile, convert the schedule and filter controls into accessible stacked views, maintain comfortable touch targets, and keep enrollment actions visible without obscuring content.

Before launch, replace all fictional schedules and metrics, verify provider qualifications, test booking and cancellation workflows, review accessibility, check every health claim, add privacy and terms pages, and confirm that support staff can handle safety questions.

With accurate operational data and responsible language, this template can turn a complex wellness offer into a welcoming portal that helps people choose realistic next steps.