Maven Clinic

Overview

Maven Clinic is a digital health platform delivering evidence-based care for women and families across the full spectrum of reproductive health: pregnancy, fertility, adoption, surrogacy, and infant care. The brand serves both individual patients and employers seeking to improve health outcomes and reduce costs. The design system embodies "Clinical Warmth"—a fusion of medical authority and human compassion. The interface prioritizes clarity and accessibility, using a teal-dominant palette (#00856f primary, #02846d secondary) paired with warm, cream-toned surfaces (#ede9e3) to evoke both trust and comfort. The aesthetic is contemporary yet approachable, avoiding cold minimalism in favor of generous spacing, readable typography, and photography-forward layouts that celebrate diverse families.

The brand voice is evidence-driven yet conversational, never clinical or patronizing. Maven speaks to users as partners in their health journey, using precise language grounded in research while remaining emotionally intelligent. The tone is calm, supportive, and action-oriented—sentences are direct and benefit-focused. Example: "Your personalized care plan arrives today—24/7 access to specialists who know your story."

Colors

The Maven color system is anchored by a confident teal primary (#00856f), used exclusively for interactive elements, CTAs, and brand moments. This teal signals trust, growth, and care—core to the Maven mission. The secondary teal (#02846d) provides a darker variant for hover and active states, creating tactile feedback without introducing a new hue. The surface stack uses warm, neutral tones: the base surface is #ede9e3 (warm beige), with container variants ranging from #f8f5f1 (lowest, brightest) to #dee3e3 (highest, slightly cooler). Text on light surfaces is #071a24 (near-black with warmth), while variant text is #263633 (a softer gray-green). Tertiary purple (#9c63ff) is reserved for accent moments—badges, highlights, or secondary CTAs—adding visual interest without competing with prim

Typography

The type system pairs Helvetica Now Display (for headlines and display) with Helvetica Neue (for body and labels), creating a cohesive, professional voice rooted in Swiss design tradition. Display (68px, 300 weight, -0.04em tracking) commands attention in hero sections and major headings, while Headline-lg (48px, 400 weight) anchors section introductions. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, card copy, and navigation—sized for comfortable reading on mobile and desktop. Label-md (14px, 600 weight) is applied to button text and form labels, with 0.01em tracking for subtle emphasis. All display and headline text uses negative letter-spacing (-0.04em to -0.01em) to tighten the visual rhythm and reinforce authority. On small labels over busy backgrounds

Layout

Maven uses a 12-column fluid grid with a max-width of 1240px, allowing content to breathe on large screens while remaining compact on mobile. The gutter is 24px (md spacing), applied consistently between columns and sections. Section separation uses lg spacing (40px) vertically, creating clear visual rhythm without excessive white space. The container max-width of 1240px is applied to all major content blocks (hero, feature sections, forms), ensuring text remains readable and layouts feel intentional. Padding within cards and containers uses md spacing (24px) as the default, with sm spacing (12px) for tighter, data-dense layouts. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for form field padding, md (24px) for card padding and section gutters,

Elevation & Depth

Depth in Maven is achieved through subtle, warm-toned shadows and layering rather than stark contrast. The elevation system uses three levels: sm (0 1px 3px rgba(0,0,0,0.06)) for subtle card lifts and hover states, md (0 5px 15px rgba(0,0,0,0.12)) for modals and floating elements, and lg (0 0 10px 2px rgba(0,0,0,0.36)) for critical overlays and sidepop notifications. Shadows use rgba(0,0,0,0.x) with low opacity to preserve the warm surface palette—never pure black. Cards in the default state have no shadow; on hover, they elevate to md shadow with a background shift to surface-container-high (

Shapes

The Maven shape philosophy is "Approachable Precision"—rounded corners are used consistently to soften the interface without sacrificing clarity or professionalism. Buttons use 4px radius (DEFAULT), creating a subtle roundness that feels modern without being playful. Cards and containers use 10px radius (md), balancing warmth with structure. Modals and elevated surfaces use 15px radius (lg), signaling importance and creating visual separation. Input fields use 4px radius (DEFAULT) to align with buttons, creating a cohesive form language. The full radius (9999px) is reserved for badges and pill

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #00856f background with white text, 44px height, 12px 24px padding, and 4px radius. On hover, the background shifts to #02846d (secondary), maintaining the teal family while providing tactile feedback. On active/pressed, the background becomes #035748 (on-primary-fixed-variant), a darker teal. Button text is always label-md (14px, 600 weight), with no text-transform applied. Buttons never use shadows; instead, they rely on color and scale (no scale transform on hover—maintain 44px height). Secondary buttons use a transparent background with a 1px border in primary (#00856f) and primary text; on hover, the background becomes primary-container (#71d1b5) with on-primary-container text (#002019).

Do's and Don'ts

**Do**

• Do use primary teal (#00856f) exclusively for interactive elements and CTAs—never for backgrounds or decorative elements.
• Do maintain 24px gutter spacing between grid columns and 40px vertical spacing between sections to preserve breathing room.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all display and headline text to reinforce authority and tighten visual rhythm.
• Do use warm-toned shadows (rgba(0,0,0,0.x) with low opacity) rather than pure black to preserve the warm surface palette.
• Do pair Helvetica Now Display with Helvetica Neue—never mix with system fonts or other typefaces.
• Do use 4px radius for buttons and inputs, 10px for cards, and 15px for modals to create a clear visual hierarchy.

**Don't**

• Don't use primary teal for backgrounds, body text, or large surface areas—reserve it for interactive moments only.
• Don't apply box-shadows to buttons; rely on color shifts and border treatments for state feedback instead.
• Don't use font weights below 300 or above 600 in the type system—stick to the defined scale (300, 400, 500, 600).
• Don't compress spacing below the defined scale (xs: 4px, sm: 12px, md: 24px); maintain semantic spacing to preserve clarity.
• Don't use pure black (#000000) for shadows or text—use near-black (#071a24) or warm grays (#263633) to maintain warmth.
• Don't introduce new accent colors outside the defined palette (primary teal, secondary teal, tertiary purple, error red)—consistency is critical for brand recognition.