Stillpoint

Overview

Stillpoint is a premium therapy practice template that embodies **Warm Minimalism with Therapeutic Depth**—a design philosophy that prioritizes emotional safety through restrained elegance. The aesthetic combines earthy, muted tones (warm beige #f8f6e8, terracotta #a34e31, deep sage #1f3b2f) with refined serif typography (Lora) to create a sanctuary that feels both professional and deeply human. The brand serves psychologists, counselors, and private practices specializing in burnout, anxiety, and emotional wellness, evoking a sense of calm steadiness and room to breathe. Every visual element—from the generous whitespace to the soft shadows (0 3px 8px rgba(0,0,0,0.15))—reinforces the promise that therapy here is unhurried and grounded.

The voice is warm, precise, and never clinical. Stillpoint speaks in the language of lived experience: "A calm, practical space to slow down, understand what's weighing on you, and build a more sustainable way forward." The brand avoids jargon and corporate language, instead using conversational, human-centered phrasing. Example: "You do not need to be in crisis to begin" rather than "Therapy is indicated for acute presentations." The typography pairing—serif headlines in Lora (45px, 400 weight, -0.015em tracking) paired with clean sans-serif labels in 42 Dotsans—signals both tradition and accessibility, honoring the depth of therapeutic work while remaining approachable.

Colors

The color system is built on a foundation of **Earthy Warmth and Emotional Grounding**. The primary surface (#f8f6e8, a warm off-white with subtle beige undertones) creates a soft, paper-like backdrop that feels natural and calming—never sterile. The primary accent color (#a34e31, a warm terracotta-brown) is reserved exclusively for call-to-action buttons, active states, and brand-critical interactive elements. This color is psychologically associated with stability, warmth, and grounded presence—essential for a therapy brand. It appears on the prominent "Book Free Consultation" button (padding: 23px 67px 23px 20px, border-radius: 300px) and the "Buy Template" CTA in the header.

Secondary and tertiary colors (#6b5d54 and #7d5d52, respectively—muted warm grays and taupes) serve as supporti

Typography

The type system is rooted in **Serif-Led Hierarchy with Functional Clarity**. Lora (a Google Font serif with generous x-height and warm letterforms) is used exclusively for headlines, body copy, and narrative content, establishing the brand's refined, trustworthy voice. Display and headline sizes range from 60px (display) down to 24px (title-lg), all set at 400–500 weight to maintain elegance without heaviness. The 45px headline-lg (used for the hero title "Feel like yourself again…") is set at 400 weight with -0.015em tracking, creating an inviting, slightly condensed appearance that draws the eye without aggression. Body text (16px, 400 weight, 24px line-height) is set with 0.01em tracking for optimal readability on the warm background. Functional labels and button text use 42 Dotsans (a

Layout

The layout follows a **Fluid, Breathing Grid** with a maximum container width of 1280px and a 12-column grid system. The design prioritizes generous whitespace and breathing room—a core principle for a therapy brand where visual calm directly supports the user's emotional state. The hero section uses full-width imagery (the contemplative portrait of a woman in soft light) paired with left-aligned text, creating an asymmetrical balance that feels natural and unhurried. Section separation uses the lg spacing token (40px) for major breaks and md spacing (24px) for subsection rhythm, ensuring content never feels cramped. The gutter (24px) is applied consistently to all container edges, creating a safe margin that respects the content. Cards and content blocks use the md spacing (24px) for inte

Elevation & Depth

Depth in Stillpoint is achieved through **Soft Layering and Subtle Shadow Hierarchy**, not through dramatic contrast. The design avoids harsh shadows and instead uses a three-tier elevation system: Level 1 (Base Surface) is the warm background (#f8f6e8) with no shadow. Level 2 (Standard Cards & Inputs) applies a subtle shadow (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift, creating just enough separation to define interactive elements without visual noise. Level 3 (Elevated Cards, Modals, Hover States) uses a medium shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to indicate prominence or interaction

Shapes

The shape language follows **Therapeutic Softness with Functional Clarity**. The rounded scale progresses from sharp (6px for small UI elements like badges) to fully rounded (300px for primary buttons and inputs), reflecting the brand's journey from structured support to open, flowing healing. Primary buttons and input fields use the full radius (300px, border-radius: 300px), creating pill-shaped elements that feel approachable and non-threatening—a deliberate choice for a therapy brand where visual softness supports emotional safety. Secondary buttons and cards use the lg radius (20px), provi

Components

Action Elements Primary buttons use the full rounded radius (300px) with padding 23px 67px 23px 20px, creating a generous, pill-shaped target that feels welcoming. The background is the primary color (#a34e31), text is white, and the shadow is 0 3px 8px rgba(0, 0, 0, 0.15). On hover, the background darkens to #883f26 with a smooth transition (transition: background-color 200ms ease-out). The button text uses 42 Dotsans at 16px, 500 weight, 24px line-height, creating clear visual distinction from body copy. Secondary buttons (like "Contact" in the nav) use the same primary color but with a smaller padding (14px 34px) and lg radius (20px), maintaining the warm aesthetic while signaling a secondary action. Ghost buttons (for tertiary actions) use a transparent background with a 1px border

Do's and Don'ts

**Do**

• Do use the primary color (#a34e31) exclusively for CTAs, active states, and brand-critical interactions—never for decorative elements or backgrounds.
• Do maintain the warm, earthy color palette across all custom components; never introduce cool grays or clinical blues that undermine the therapeutic aesthetic.
• Do apply the lg spacing token (40px) between major sections to create breathing room and visual calm—whitespace is a design feature, not wasted space.
• Do use Lora serif for all narrative content (headlines, body, testimonials) and 42 Dotsans sans-serif only for functional labels and buttons to maintain clear hierarchy.
• Do apply the subtle shadow system (0 1px 2px rgba(0, 0, 0, 0.06) for base, 0 3px 8px rgba(0, 0, 0, 0.15) for elevated) to create depth without visual noise.
• Do use the full rounded radius (300px) on primary buttons and inputs to signal safety and approachability—this is a core brand signal for therapy.

**Don't**

• Don't use harsh shadows (anything over 0.2 opacity) or high-contrast black/white combinations; they undermine the calm, therapeutic aesthetic.
• Don't apply the primary color (#a34e31) to body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and brand moments.
• Don't use sans-serif fonts for headlines or body copy; Lora's warmth and refinement are essential to the brand voice.
• Don't reduce whitespace or padding to fit more content; the breathing room is therapeutic and non-negotiable.
• Don't introduce new colors outside the defined palette; every color choice should reinforce the earthy, warm minimalist aesthetic.
• Don't use sharp corners (0px radius) on interactive elements like buttons or inputs; the full rounded radius (300px) is a core brand signal.