Holistic

Overview

Holistic is a premium wellness coaching platform designed for therapists, life coaches, and holistic practitioners who need to project established credibility while maintaining genuine human warmth. The aesthetic movement is 'Warm Minimalism'—a deliberate rejection of sterile tech-forward design in favor of earthy, natural tones (#99582a, #fef9ef, #2a2b2f) paired with restrained typography and generous whitespace. The brand evokes a sense of calm authority: you're in the hands of someone who has done the work, who understands the science, and who genuinely cares about your transformation. The UI communicates professionalism through restraint—no gradients, no animations for their own sake, no visual noise. Every element serves the user's journey toward booking a session and beginning their healing.

The voice is grounded, evidence-based, and never breathless. Holistic speaks in the language of practitioners: 'compassionate, evidence-based wellness coaching for stress, anxiety, and burnout.' The vocabulary avoids wellness clichés ('transform your life,' 'unlock your potential') in favor of specificity and honesty. The brand personality is the coach who listens more than talks, who asks clarifying questions, and who measures success in client outcomes, not marketing promises. Example sentence in brand voice: 'After 12 weeks of coaching, 95% of our clients report measurable reductions in stress—not because we promised miracles, but because we built sustainable practices together.'

Colors

The color system centers on a warm, earthy primary (#99582a) that conveys both natural authority and accessibility—it's the color of earth, of grounding, of trust without coldness. This primary is used exclusively on CTAs ('Begin Your Journey,' 'Book a Call'), interactive states, and brand accents. The surface stack is built on a soft cream (#fef9ef) that serves as the page background, with a slightly warmer mid-tone (#f5ede1) for container backgrounds and a near-white (#ffffff) for input fields and elevated surfaces. The on-surface text is a deep charcoal (#2a2b2f) that provides high contrast (WCAG AAA) against all light surfaces without the harshness of pure black. Secondary colors include a sophisticated dark gray (#2a2b2f) for secondary actions and a muted taupe (#8b7355) for tertiary

Typography

The type system pairs Instrument Serif for display and headline hierarchy with Inter for body and UI text, creating a sophisticated contrast between editorial authority and functional clarity. Instrument Serif at 90px (display) and 48px (headline-lg) conveys the brand's premium positioning and editorial voice—these sizes are reserved for hero statements like 'Where lasting change begins.' and section headers. The serif's elegant proportions and generous spacing (100px line-height on display, -0.02em letter-spacing) create breathing room and prevent the large sizes from feeling heavy. Body copy uses Inter at 18px (body-lg) and 16px (body-md) with 28px and 24px line-heights respectively, ensuring readability on both desktop and mobile. All body text uses 400 weight for warmth; 500 weight is

Layout

The layout uses a 12-column grid with a max-width of 1200px, centered on the viewport with symmetric margins. The hero section spans the full width with a background image overlay (dark semi-transparent gradient at rgba(0, 0, 0, 0.4) to ensure text legibility), positioning the headline and CTAs in the left half with 64px (xl spacing) from the left edge and 40px (lg spacing) from the top. Section separation uses 64px (xl spacing) vertically and 24px (gutter) horizontally; cards within sections are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile, with 24px gaps between cards. The container max-width of 1200px ensures content never stretches beyond comfortable reading width. Whitespace is generous and intentional: the brand philosophy rejects the 'more content p

Elevation & Depth

Elevation in Holistic is achieved through subtle shadows and layering rather than dramatic depth effects. The system uses three shadow levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for base cards and interactive elements at rest, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and floating elements, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and elevated overlays. Buttons use md shadow by default, increasing to lg on hover with a 200ms transition. Cards use sm shadow at rest and transition to md shadow on hover, creating a subtle lift effect that signals interactivity without distr

Shapes

The shape philosophy is 'Warm Geometric'—a balance between sharp architectural precision and organic approachability. Buttons and CTAs use full-rounded corners (50px border-radius, or {rounded.full}) to soften the call-to-action and make it feel inviting rather than commanding. Cards and containers use lg radius (1rem / 16px) to create gentle corners that feel contemporary without the sterility of sharp 90° angles. Input fields use DEFAULT radius (0.5rem / 8px) for a slightly more utilitarian feel that signals 'functional form.' The stat blocks and badge elements use full rounding (50px) to cr

Components

Action Elements Buttons are the primary interaction mechanism and use full rounding (50px) with generous padding (12px 28px) to create a large, inviting touch target (48px height). Primary buttons (#99582a on white) use md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) and transition to a darker brown (#7a4620) on hover with a 200ms cubic-bezier(0.2, 0, 0.38, 0.9) easing curve. Secondary buttons use the primary-container background (#f5ede1) with a 1px border in the primary color, creating a lower-emphasis alternative for secondary CTAs like 'How I Can Help.' Ghost buttons have a transparent background with a 1px outline-variant border, used for tertiary actions. All button text uses label-md typography (14px, 500 weight, 0.01em letter-spacing) for consistency and scannability.

Container

Do's and Don'ts

**Do**

• Do use the primary color (#99582a) exclusively on CTAs and interactive states—never on passive text or backgrounds, as it dilutes the brand's call-to-action authority.
• Do maintain at least 64px (xl spacing) of vertical separation between major sections to create visual breathing room and reinforce the calm, grounded aesthetic.
• Do pair Instrument Serif headlines with Inter body copy to create a sophisticated editorial voice that signals premium positioning without sacrificing readability.
• Do use the full Material 3 surface stack (surface-container-lowest through surface-container-highest) to create predictable, layered visual hierarchy—never hardcode custom grays.
• Do apply 200ms cubic-bezier(0.2, 0, 0.38, 0.9) transitions to all interactive state changes (hover, focus, active) for a consistent, professional feel.
• Do use full rounding (50px) on buttons and badges to create visual warmth and draw the eye to actionable elements.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—always use the defined surface and on-surface tokens (#2a2b2f and #fef9ef) to maintain the warm, cohesive aesthetic.
• Don't apply shadows greater than 16px blur radius or opacity greater than 0.12—the brand's authority comes from restraint, not visual drama.
• Don't mix serif and sans-serif fonts within a single text block or headline—Instrument Serif is for display/headlines, Inter is for body/UI, never the reverse.
• Don't use the primary color (#99582a) for decorative elements, dividers, or non-interactive UI—reserve it exclusively for CTAs and focus states to maintain visual hierarchy.
• Don't create custom color variants outside the defined Material 3 token system—all colors must reference the established palette to ensure consistency and maintainability.
• Don't use animations or transitions longer than 300ms or with easing curves other than cubic-bezier(0.2, 0, 0.38, 0.9)—the brand prioritizes calm, predictable interactions over flashy effects.