Octave

Overview

Octave is a mental health platform that transforms therapy into an accessible, outcome-focused experience. The design system embodies 'Warm Clinical Minimalism'—a movement that marries the precision and trust of healthcare with the approachability and human-centered warmth of modern wellness brands. The aesthetic combines a soft, cream-based palette (#fffbef, #faefde) with deliberate accent colors (warm gold #d4af37, earthy terracotta #c17a4a) to create an environment that feels both professional and deeply human. The UI evokes calm, clarity, and competence—users should feel they are in capable hands while remaining at ease.

Octave's voice is direct, evidence-based, and empathetic without being saccharine. The brand speaks in concrete outcomes: 'Measurably improve your life,' 'Proven therapy, covered by insurance,' 'Most clients pay just $28 per session.' Typography pairs a distinctive serif display font (RECKLESS_NEUE_FONT, 300 weight, -0.04em tracking) for headlines with a clean, modern sans-serif (Public Sans) for body copy, creating visual hierarchy that guides users through complex information with confidence. Example sentence in brand voice: 'Your therapist is matched within 3 business days—then the real work begins.'

Colors

The color system is rooted in natural, earthy tones that evoke trust and wellness. Primary (#d4af37) is a warm, sophisticated gold used exclusively for call-to-action buttons, interactive states, and key brand moments—it commands attention without aggression. Secondary (#c17a4a) is a muted terracotta that appears in supporting UI elements, badges, and secondary navigation, grounding the interface in warmth. Tertiary (#8fbc8f) is a soft sage green reserved for positive states, confirmations, and accent highlights. The surface stack progresses from #fffbef (surface, the page background) through #f5f1e8 (surface-container, card backgrounds) to #e9e3d5 (surface-container-highest, elevated modals), creating subtle depth without harsh contrast. On-surface text is a deep brown (#1e130f, 30, 19, 1

Typography

The typography system uses a two-font strategy: RECKLESS_NEUE_FONT (a distinctive serif with 300–400 weight range) for all display and headline levels, and Public Sans (a geometric sans-serif) for body, labels, and UI text. Display (81.92px, 300 weight, -0.04em tracking, 90px line-height) is reserved for hero headlines and major page titles, commanding visual presence while maintaining elegance. Headline-lg (48px, 400 weight, -0.02em tracking) and headline-md (36px, 400 weight, -0.01em tracking) are used for section titles and subsections, maintaining the serif's distinctive character. Title-lg (20px, 600 weight, Public Sans) bridges the serif and sans-serif worlds, used for card titles and prominent labels. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px l

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max), centered with symmetric gutters of 24px on desktop. The spacing scale is semantic: unit (8px) is the base increment, xs (4px) for micro-spacing, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Hero sections use full-width backgrounds with rounded corners (24px border-radius) and overlay content with rgba(30, 19, 15, 0.35) semi-transparent dark overlays to ensure text legibility over photography. Cards and containers use md (24px) padding with lg (40px) margin between sections. Mobile breakpoints compress gutters to 16px and reduce padding to sm (12px) on cards. The design favors generous white-space

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surface colors rather than dramatic depth effects. Level 1 (Base): the page background (#fffbef) with no shadow. Level 2 (Standard Cards): surface-container (#f5f1e8) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that suggests gentle lift. Level 3 (Elevated Modals/Overlays): surface-container-high (#efe9df) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger spread shadow that creates clear visual separation. Interactive elements (buttons, inputs) use the md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) on hover to

Shapes

The shape philosophy is 'Soft-Technical Accessibility'—rounded corners are used strategically to soften clinical precision without sacrificing clarity. Buttons and primary CTAs use full border-radius (9999px, 64px in computed pixels) to create pill-shaped, approachable forms that feel inviting rather than institutional. Cards and containers use lg (1rem, 16px) border-radius for a balanced, modern appearance. Form inputs use md (0.75rem, 12px) border-radius, slightly less rounded than buttons to maintain visual distinction. Modals and overlays use xl (1.5rem, 24px) border-radius for prominent,

Components

Action Elements Buttons are the primary interaction mechanism and use full border-radius (9999px) with generous padding (12px 32px, 48px height) to create large, inviting touch targets. Button-primary uses {colors.primary} (#d4af37) background with {colors.on-primary} text (#1e130f), applied to all main CTAs ('Find A Therapist,' 'Get Started'). On hover, background shifts to #ffd966 (inverse-primary) with a 200ms transition. Button-secondary uses transparent background with a 2px border in {colors.outline} (#9b9b9b) and on-surface text, applied to secondary actions ('Learn More,' 'View Services'). On hover, background becomes {colors.surface-container-high} (#efe9df). Both button variants use {typography.label-md} (14px, 600 weight) and apply box-shadow: {elevation.md} (0 3px 8px rgba(

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d4af37) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain visually distinct.
• Do apply {typography.display} (RECKLESS_NEUE_FONT, 81.92px, 300 weight, -0.04em tracking) only to hero headlines; it commands attention and should not be overused.
• Do maintain lg (40px) or xl (64px) spacing between major sections to reinforce calm, clinical clarity and reduce cognitive load.
• Do use full border-radius (9999px) on all primary buttons to signal approachability and reduce friction for key user actions.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to interactive elements on hover to signal elevation and interactivity.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as primary colors; the brand uses warm, desaturated tones (#fffbef, #1e130f) to reduce eye strain and reinforce humanity.
• Don't apply sharp corners (0px border-radius) to primary UI elements; the brand philosophy is soft-technical, and all interactive elements must use at least {rounded.md} (12px).
• Don't use secondary (#c17a4a) or tertiary (#8fbc8f) as primary CTA colors; these are supporting accents only. Primary (#d4af37) is reserved for main actions.
• Don't compress spacing below sm (12px) in card padding or section margins; generous white-space is essential to the calm, clinical aesthetic.
• Don't apply text-shadow or text-stroke to body copy; these effects are reserved for small labels over busy backgrounds and should use 0 2px 4px rgba(0, 0, 0, 0.15) only.