New Dimensions Day Treatment Centers

Overview

New Dimensions Day Treatment Centers operates within the "Clinical Warmth" aesthetic—a design philosophy that balances medical authority with human accessibility. The brand serves patients and families navigating bipolar disorder, dual diagnosis, and addiction treatment, transforming clinical environments into spaces that feel supportive rather than sterile. The visual language combines a warm terracotta primary accent (rgb(217, 124, 80)) with cool, trustworthy blues (rgb(24, 142, 201) and rgb(46, 163, 242)) to evoke both stability and hope. The interface prioritizes clarity and directness: large, readable typography (Roboto at 16–20px for body text), generous white space (24px gutters, 40px section separation), and high-contrast text (rgb(51, 51, 51) on white) ensure that patients in crisis can navigate treatment options without cognitive friction.

The brand voice is clinical yet conversational—never patronizing, always precise. Sentences are direct and action-oriented: "Schedule a Free Assessment" not "Learn More About Our Services." The design system emphasizes trust through consistency: every button uses the same rounded-pill shape (50px border-radius), every input field has the same 4px border-radius and 16px padding, and every card maintains a 1px outline at rgba(170, 170, 170, 0.5). This predictability is essential for a healthcare brand where users are often anxious or in acute distress.

Colors

The color system is built on three pillars: a warm, approachable primary (rgb(217, 124, 80) / #d97c50), a clinical secondary blue (rgb(24, 142, 201) / #188ec9), and a bright tertiary accent (rgb(46, 163, 242) / #2ea3f2) used for interactive elements and links. Primary is deployed on all primary CTAs ("Resource Book Information Submission", "Schedule a Free Assessment") and hover states to signal action and warmth. Secondary blue anchors trust—used in secondary buttons, section headers, and data visualization. Tertiary (the brighter blue) appears on hyperlinks and tertiary actions, creating visual hierarchy without competing with primary. The surface stack uses a clean white (#ffffff) as the base with carefully calibrated grays: surface-container-lowest (#eeeeee) for subtle backgrounds, sur

Typography

The type system uses Roboto as the primary typeface for body and headlines, paired with Plus Jakarta Sans for labels and CTAs to introduce subtle personality without sacrificing legibility. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines like "Finding Stability in a World of Highs and Lows." Headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) introduces subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and ensures comfortable reading at arm's length. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, card content, and navigation. Label-md (14px, 600 weight, Plus Jakarta Sans) appears on all buttons and badges, with 0.01em tracking to tighten the appearance.

Layout

The layout uses a fixed 1080px container max-width centered on the page, with 24px horizontal gutters on mobile and tablet. The grid is a 12-column system with 8px base unit spacing. Section separation uses 40px (lg spacing) between major content blocks, 24px (md spacing) between related groups, and 12px (sm spacing) for tight groupings within cards. The page rhythm alternates between full-width hero sections (with internal 1080px containers) and constrained content areas to prevent cognitive overload. White space is intentional: form fields are never crowded (minimum 24px vertical separation), and call-to-action buttons are always surrounded by at least 40px of breathing room. The wide-size breakpoint is 1080px (defined in WordPress as --wp--style--global--wide-size), and content-size is

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (Base): the white background (rgb(255, 255, 255)) with no shadow. Level 2 (Standard Card): 1px solid border at rgba(170, 170, 170, 0.5) with box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), creating a barely-perceptible lift. Level 3 (Elevated Card / Modal): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with the same 1px border, used for hover states and modals. Level 4 (Hero / Accent Sections): box-shadow: 0 8px 32px rgba(0, 139, 219, 0.247), a larger shadow tinted with the secondary blue to create visual

Shapes

The shape philosophy is "Clinical Precision with Human Warmth." Buttons use a full pill shape (50px border-radius) to feel approachable and reduce the clinical edge of sharp corners. Cards and containers use 8px border-radius (md) for a balanced, modern appearance that's neither too soft nor too rigid. Input fields use 4px border-radius (DEFAULT) to maintain a clean, form-like appearance without feeling cold. Badges and small UI elements use 50px border-radius (full) to create visual distinction from larger containers. The rationale: pill-shaped buttons (50px radius on 44px height) are scienti

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (rgb(217, 124, 80) background, white text, Plus Jakarta Sans 14px 600 weight, 50px border-radius, 13px 32px padding, 44px height) appear on all major CTAs. On hover, the background darkens to rgb(198, 109, 66) with a 200ms transition and no shadow. On active/pressed, it darkens further to rgb(184, 93, 53). Secondary buttons use the clinical blue (rgb(24, 142, 201)) with white text, 4px border-radius, 5px 20px padding, 36px height, and Roboto 16px 500 weight—used for less prominent actions like "Contact Us" or form submissions. Links are always rgb(46, 163, 242) with no underline by default; on hover, they gain an underline and darken to rgb(24, 142, 201). All interactive elements must have a visible focus stat

Do's and Don'ts

**Do**

• Do use the warm terracotta primary (rgb(217, 124, 80)) exclusively on primary CTAs and hover states—never on body text or backgrounds, as it will overwhelm the clinical aesthetic.
• Do maintain 24px minimum padding inside cards and 40px minimum spacing between major sections to prevent cognitive overload for users in distress.
• Do apply Roboto 16px 400 weight with 24px line-height for all body text to ensure readability for users with potential medication-related vision changes.
• Do use the clinical blue secondary (rgb(24, 142, 201)) for trust-building elements like headers, secondary buttons, and data visualization—never for warnings or errors.
• Do include a visible focus state (3px outline at rgba(217, 124, 80, 0.3)) on all interactive elements for keyboard navigation and accessibility compliance.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use rgb(51, 51, 51) on rgb(255, 255, 255) instead to reduce eye strain during long reading sessions.
• Don't apply shadows larger than 0 8px 32px rgba(0, 139, 219, 0.247) on standard elements; excessive depth creates visual chaos for users experiencing anxiety or cognitive symptoms.
• Don't use rounded corners smaller than 4px on any interactive element—sharp corners feel clinical and reduce click accuracy for users with tremors.
• Don't mix typefaces within a single component; Roboto is for body/headlines, Plus Jakarta Sans is for labels/CTAs only—mixing creates visual confusion.
• Don't use the error red (rgb(207, 46, 46)) for non-critical UI; reserve it for form validation, alerts, and warnings only to avoid alarm fatigue.