Psych Central

Overview

Psych Central is a trusted mental health information platform that transforms clinical evidence and therapeutic guidance into accessible, human-centered digital experiences. The design system embraces an 'Editorial-First Minimalism' aesthetic—prioritizing clarity, readability, and emotional safety through a refined palette of deep navy (#3d5a99), warm gold (#ffc50d), and clean whites. The brand serves individuals seeking mental health information, clinicians, and wellness-focused audiences, evoking a sense of calm authority and approachability. The UI voice is precise, compassionate, and evidence-grounded: never sensational, always respectful of the user's mental health journey. Example sentence: 'Depression in children often manifests differently than in adults—here's what parents should know.'

Colors

The color system balances clinical credibility with warmth. Primary (#3d5a99) is a sophisticated navy used for navigation, interactive elements, and trusted CTAs—it conveys stability and professional authority. Secondary (#ffc50d) is a vibrant gold accent reserved for high-priority announcements, newsletter signups, and podcast promotions, creating visual energy without overwhelming the content-focused layout. Tertiary (#203769) is a deeper navy for secondary navigation and emphasis. The surface stack (white #ffffff down to light gray #dcdbdb) ensures maximum readability for long-form health content, with sufficient contrast (WCAG AA+) for accessibility. On-surface text (#231f20) is near-black for legibility on white backgrounds. Error states use #d32f2f for critical alerts. All interactiv

Typography

The type system pairs Tiempos Headline SemiBold (serif, 700 weight) for headlines with Proxima Nova (sans-serif, 400–600 weight) for body text—a classic editorial pairing that signals trustworthiness and readability. Display (56px, 700 weight, -0.02em tracking) anchors hero sections; Headline-lg (42px, 700 weight) structures article titles; Body-md (17px, 400 weight, 26px line-height) ensures comfortable reading of clinical content. All headlines use -0.015em to -0.02em negative letter-spacing to tighten the serif letterforms and increase visual hierarchy. Labels use 600 weight at 14–16px with 0.01–0.02em positive tracking for UI clarity. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (12px) placed over image backgrounds to ensure legibility.

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, maintaining a 24px gutter on desktop and 12px on mobile. Content containers are centered with lg spacing (40px) between major sections, creating a breathing rhythm that respects the cognitive load of health information. The homepage hero spans full-width with a 40px lg margin below, followed by featured article cards in a 2-column layout on desktop (1 column mobile). White-space is generous—minimum 24px padding inside cards, 40px between sections—reflecting the brand's commitment to clarity and reduced cognitive friction. Container max-width of 1280px prevents line lengths from exceeding 75 characters, optimizing readability for long-form mental health articles.

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids visual clutter. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), rounded 3–4px, used for article cards, input fields, and secondary CTAs. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), rounded 8px, reserved for modals, overlays, and hover states on cards. Announcement bars use no shadow but rely on solid background color (#ffc50d) and 12px vertical padding for prominence. Transitions between shadow states use 0.2s ease timing

Shapes

The shape philosophy is 'Refined Pragmatism'—minimal rounding that respects the editorial aesthetic while maintaining modern usability. Buttons use 3–4px border-radius (rounded.DEFAULT to rounded.md), preserving a structured, professional appearance. Cards use 3px (rounded.DEFAULT) for subtle definition without softness. Input fields use 3px to match card styling and create visual cohesion. Badges and pills use full (9999px) for a friendly, approachable feel on secondary UI elements. The rationale: serif headlines demand crisp geometry; excessive rounding would undermine the brand's clinical c

Components

Action Elements Buttons follow a three-tier hierarchy. Primary buttons (bg: #3d5a99, text: white, 44px height, 12px 24px padding, 3px radius) are used for main CTAs like 'Subscribe' or 'Read Article.' Hover state shifts to #203769 with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Secondary buttons (transparent bg, #3d5a99 text, 1px outline) are used for 'View All' or 'Learn More.' Accent buttons (bg: #ffc50d, text: #231f20, 600 weight) are reserved for high-priority actions like newsletter signups and podcast promotions. All buttons use transition: background-color 0.2s ease, color 0.2s ease for smooth state changes.

Containers & Surfaces Cards (bg: white, 3px radius, 24px padding, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) are the primary content container. On hover, they elevate t

Do's and Don'ts

**Do**

• Do use Tiempos Headline SemiBold for all H1–H4 headings to maintain editorial authority and visual hierarchy.
• Do apply 24px lg spacing between major content sections to create breathing room and reduce cognitive load.
• Do reserve the gold secondary color (#ffc50d) for high-priority CTAs (newsletter, podcast) to maintain visual urgency without overuse.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on cards and buttons for consistent, subtle depth.
• Do ensure all interactive elements have a 0.2s ease transition to telegraph state changes smoothly.
• Do maintain a minimum 75-character line length in body text by respecting the 1280px container max-width.

**Don't**

• Don't use rounded corners larger than 8px on primary UI elements—it undermines the clinical, editorial aesthetic.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) to avoid visual clutter on a content-focused platform.
• Don't use sans-serif fonts for headlines; Tiempos Headline SemiBold is the only approved serif for H1–H4.
• Don't exceed 40px lg spacing between sections or the layout will feel fragmented and lose visual cohesion.
• Don't use the secondary gold (#ffc50d) for body text or secondary navigation—reserve it for high-priority CTAs only.
• Don't apply animations longer than 0.2s on state changes; the brand prioritizes clarity and quick feedback over delight.