Healing

Overview

Healing is a warm, organic wellness template designed for therapists, counselors, and health professionals seeking to build trust through visual calm. The aesthetic centers on 'Warm Minimalism'—a philosophy that combines earthy, natural color palettes (deep browns #772d08, soft creams #f9f6f0) with generous whitespace and human-scaled typography to create an environment that feels both professional and deeply approachable. The brand evokes a sense of sanctuary: a place where vulnerability is met with expertise, where the interface itself becomes part of the healing journey. Voice: grounded, compassionate, never clinical. The copy avoids jargon while maintaining authority. Example: 'Your wellness journey begins with understanding yourself—we're here to guide you through every step.'

Colors

The color system is rooted in earth tones and natural warmth, reflecting the organic nature of wellness work. Primary (#772d08) is a deep, confident brown used exclusively on CTAs ('Request A Proposal', 'Contact Us') and key interactive elements—it signals trust and grounding without aggression. Secondary (#fae6be) is a soft, warm cream that appears on supporting buttons and accent badges, creating visual rhythm without competing for attention. Tertiary (#d7e5ff) is a gentle sky blue reserved for informational elements and secondary badges, providing cognitive separation from the warm palette. The surface stack uses a warm off-white (#f9f6f0) as the base, with progressively deeper containers (#f5f1e9, #ede9e0) for layered content. On-surface text is a near-black brown (#260e01) for optimal

Typography

The type system pairs Satoshi (organic, humanist sans-serif) for display and headline scales with Inter (geometric, precise) for body and label text. This pairing communicates 'approachable expertise'—the warmth of Satoshi draws users in, while Inter's clarity ensures information hierarchy and accessibility. Display (70px, 400 weight) anchors hero sections with generous line-height (78px) and -0.02em letter-spacing to create breathing room. Headlines step down through 48px and 36px at 500 weight, maintaining the organic feel. Body text uses Inter at 16–18px with 24–28px line-height for comfortable reading on wellness content. Labels are set at 12–14px with 0.01–0.02em letter-spacing to add subtle emphasis. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels over busy backgroun

Layout

The layout uses a 12-column grid with a max-width of 1280px, allowing flexible content scaling from mobile to desktop. Page rhythm is governed by the lg spacing token (40px) for section separation, creating visual breathing room that mirrors the wellness philosophy. The gutter is consistently 24px, providing comfortable margins around content blocks. Hero sections use asymmetric layouts (text on left, imagery on right) with 64px (xl spacing) between major content zones. Card-based sections employ md spacing (24px) for internal padding and lg spacing (40px) between card groups. Container backgrounds shift subtly through the surface-container stack (surface → surface-container-low → surface-container) to guide visual hierarchy without harsh contrast. Whitespace is intentional and never squee

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids drama in favor of subtle layering. Level 1 (Base): no shadow; surface sits at #f9f6f0. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift. Level 3 (Modals & Elevated Surfaces): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a broader, softer shadow suggesting greater distance. Hover states transition shadows smoothly (200ms) to reinforce interactivity without jarring the user. Buttons use md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) at rest, maintaining visual weight. Focus states add a thin 3p

Shapes

The shape philosophy is 'Organic Precision'—curves are used purposefully to soften interactions while maintaining clarity. Buttons employ full border-radius (9999px) to create pill-shaped CTAs that feel inviting and approachable; this is the most distinctive shape in the system and should never be compromised. Secondary buttons and inputs use 8px (0.5rem) radius for a subtle, modern feel. Cards and containers use 16px (1rem) radius, balancing softness with structure. Badges use full radius (9999px) to match button language. The reasoning: full-radius buttons signal 'this is safe, click me' in

Components

Action Elements Primary buttons (#772d08 background, white text, 48px height, 12px 24px padding, full radius, 200ms transitions) are the dominant CTAs. Hover state darkens to #5a1f08 with smooth transition. Secondary buttons use the warm cream (#fae6be) background with dark brown text, 8px radius, and identical sizing for visual consistency. Tertiary buttons employ the sky blue (#d7e5ff) for informational or lower-priority actions. All buttons include box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) at rest, lifting to 0 8px 24px rgba(0, 0, 0, 0.12) on hover.

Containers & Surfaces Cards use surface-container (#f5f1e9) background with 24px padding, 16px border-radius, and a 1px border in outline-variant (#c9b8ad). On hover, background shifts to surface-container-high (#ede9e0) and shadow

Do's and Don'ts

**Do**

• Do use the primary brown (#772d08) exclusively on high-priority CTAs and interactive focus states—it's the brand's signature accent and should never be diluted across secondary elements.
• Do maintain 40px (lg spacing) between major sections and 24px (md spacing) within card groups to preserve the calm, breathing aesthetic that defines the brand.
• Do pair Satoshi headlines with Inter body text to reinforce the 'approachable expertise' positioning—never reverse this pairing or use a single typeface for both scales.
• Do apply full border-radius (9999px) to all primary buttons; this pill shape is the most distinctive visual element and signals safety and invitation in wellness contexts.
• Do use the shadow system consistently: sm for cards at rest, md for buttons, lg for modals—never invent intermediate shadow values or apply shadows to text elements.

**Don't**

• Don't use the primary brown (#772d08) on body text or background surfaces; reserve it exclusively for interactive elements and focus states to maintain visual hierarchy.
• Don't compress whitespace or reduce padding below 12px (sm spacing) on any interactive element—the brand's calm depends on generous breathing room.
• Don't mix Satoshi and Inter weights arbitrarily; maintain 400–500 weight for Satoshi headlines and 400–600 weight for Inter body/labels to preserve legibility and brand consistency.
• Don't apply border-radius smaller than 8px to buttons or inputs; the brand's warmth relies on soft, approachable curves, not sharp corners.
• Don't use the secondary (#fae6be) or tertiary (#d7e5ff) colors as primary CTAs or dominant interactive elements—they are supporting accents only and will dilute the brand's visual authority if overused.