Wix Therapist (Organic)

Overview

Wix Therapist (Organic) is a professional template system designed for mental health practitioners, wellness coaches, and therapeutic practices seeking to establish a trustworthy, calming digital presence. The aesthetic embraces 'Therapeutic Minimalism'—a design philosophy that prioritizes clarity, human connection, and emotional safety through restrained color palettes, generous whitespace, and purposeful typography. The brand personality is warm yet professional, grounded yet aspirational: it speaks to visitors' desire for healing and growth without overselling or inducing anxiety. The UI evokes the feeling of entering a well-designed therapy office—clean, organized, welcoming, and free from unnecessary distraction.

The voice is conversational but authoritative, empathetic but not patronizing. Sentences are direct and benefit-focused: 'Start your healing journey today' rather than 'Click here.' The vocabulary avoids clinical jargon while respecting the intelligence of the audience. Every interaction—from button hover states to form validation—reinforces the message: 'You are safe here, and we are here to help.'

Colors

The color system balances a serene, neutral foundation with strategic accent colors that signal trust and action. The primary color (#116dff, a confident medium blue) is reserved exclusively for interactive elements—call-to-action buttons, links, focus states, and key affordances. This blue is derived from the brand's signature accent and appears on the 'Edit this Site' button and all focus rings (box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #116dff). Secondary (#4d33de, a deep purple) and tertiary (#3910ed, a vibrant indigo) provide supporting accent options for badges, highlights, and secondary actions, creating visual hierarchy without overwhelming the calm aesthetic.

The surface stack is anchored in near-white (#f9fafa for base, #ffffff for elevated cards) with carefully calibrated grays

Typography

The type system employs a two-family approach: Madefor Display for headlines and Madefor for body text, with Helvetica Neue as a fallback. This pairing communicates professionalism and modernity while remaining highly legible at all sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements; headline-lg (40px, 600 weight) anchors major sections; headline-md (32px, 400 weight) introduces subsections with a lighter touch. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and testimonials, while body-md (16px, 400 weight, 24px line-height) serves as the default for form labels and descriptive text. Label-md (14px, 600 weight, 21px line-height, 0.01em letter-spacing) is applied to button text and form hints. All small labels over bu

Layout

The layout system uses a 12-column grid with a fixed max-width of 1110px, centered on the viewport with symmetric gutters of 24px. This constraint ensures content remains scannable and prevents overwhelming the user with excessive information density—critical for an audience often seeking clarity during vulnerable moments. Sections are separated using lg spacing (40px) to create visual breathing room; internal card padding uses md spacing (24px), while form field padding uses sm spacing (12px). The container-max-width of 1110px accommodates both desktop and tablet views gracefully, with responsive breakpoints at 834px (tablet) and 750px (mobile). White-space is treated as a design element, not wasted space: margins between sections are never less than 24px, and card interiors always mainta

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the harsh, high-contrast shadows of older design systems. The base elevation (sm) uses box-shadow: 0 2px 1px 0 rgba(22, 45, 61, 0.48), a subtle shadow that defines card edges without drawing attention. Medium elevation (md) applies 0 0 3px 0 rgba(22, 45, 61, 0.12), a soft diffuse shadow for hover states and slightly elevated containers. The highest elevation (lg) uses -8px -7px 20px 0 rgba(0, 0, 0, 0.1), a directional shadow that creates clear separation for modals and floating panels. Modals are layered as follows: Level 1 (Back

Shapes

The shape philosophy is 'Soft-Technical'—combining subtle rounded corners with precise geometric proportions to convey both approachability and professionalism. Buttons use rounded: 6px (DEFAULT), a gentle curve that softens hard edges without appearing playful or casual. Cards and major containers use rounded: 12px (lg), creating a more pronounced softness that invites interaction. Input fields and form elements use rounded: 6px to maintain consistency with buttons. Toggle switches and checkboxes use rounded: 12px for their track and 12px for the thumb, creating a cohesive, modern appearance.

Components

Action Elements Buttons are the primary interaction mechanism and must communicate affordance clearly. The primary button (button-primary) uses backgroundColor: {colors.primary} (#116dff), textColor: {colors.on-primary} (#ffffff), rounded: 6px, padding: 0 27px, and height: 48px. The font is Madefor at 16px, 400 weight. On hover (button-primary-hover), the background shifts to {colors.primary-fixed-dim} (#7fb3ff), maintaining the blue family while signaling interactivity. The transition is 100ms linear on background-color and color. On active/focus, a focus ring appears: box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #116dff. Secondary buttons (button-secondary) use a transparent background with a 1px solid border in {colors.outline} (#4c4c4c), rounded: 18px, padding: 0 18px, height: 36px. On

Do's and Don'ts

**Do**

• Do use the primary blue (#116dff) exclusively on interactive elements—buttons, links, focus rings—to create a clear visual hierarchy and signal affordance.
• Do maintain at least 24px padding inside cards and 40px spacing between major sections to preserve the calm, unhurried aesthetic.
• Do apply the focus ring (box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #116dff) to all interactive elements for accessibility and visual consistency.
• Do use Madefor Display for headlines and Madefor for body text to maintain the professional, modern tone across all content.
• Do employ the surface-container grays (#e9ecef, #dfe5eb, #cbd3dc) for subtle visual separation rather than harsh borders or dividers.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text colors; instead use #162d3d (on-surface) for dark text and #ffffff only on colored backgrounds.
• Don't apply shadows darker than rgba(0, 0, 0, 0.1) or blur radii larger than 20px, as this breaks the soft, therapeutic aesthetic.
• Don't mix the secondary (#4d33de) and tertiary (#3910ed) accent colors on the same page unless they serve distinct functional roles (e.g., secondary for badges, tertiary for status indicators).
• Don't reduce padding below 12px in form fields or below 24px in cards; cramped layouts undermine the calming, spacious design philosophy.
• Don't use rounded corners smaller than 6px on buttons or larger than 18px on cards; this maintains the Soft-Technical balance between precision and approachability.