Hers

Overview

Hers is a direct-to-consumer women's healthcare platform that combines clinical rigor with humanist design. The brand serves women seeking personalized, judgment-free healthcare—from weight loss and mental health to dermatology and lab testing—delivered online and to their door. The aesthetic is 'Clinical Warmth': a nature-inspired palette of soft greens (#90ad72, #9abdb1) paired with crisp whites and deep navy accents (#0000ee), creating an environment that feels both trustworthy and approachable. The UI evokes clarity and care through generous whitespace, rounded forms, and photography that centers real women's faces and experiences.

Hers speaks in a conversational, empowering tone—never clinical jargon, never shame. The vocabulary is direct and action-oriented: 'Start your weight loss today,' 'Find your Rx match,' 'Unsure where to begin? Start here.' The brand personality is confident but not pushy, knowledgeable but not condescending. Example sentence in brand voice: 'Your weight loss breakthrough is here—let's find the medication that works for your body.'

Colors

The color system is anchored by a primary blue (#0000ee) used exclusively for interactive elements—buttons, links, and focus states—ensuring every CTA is unmistakable and clickable. The secondary palette draws from nature: a sage green (#90ad72) and soft teal (#9abdb1) appear in accent cards, badges, and supporting UI elements, reinforcing the brand's wellness positioning. The surface stack uses pure white (#ffffff) as the dominant background with a shallow gray hierarchy (surface-container-low: #f0f0f0, surface-container: #e8eaed) for subtle depth without visual noise. Text is set in near-black (#202124) for maximum legibility; secondary text uses #5f6368 (on-surface-variant) for hierarchy. The accent button treatment combines the sage green background (#a3b58d, primary-container) with bl

Typography

The type system uses CareSans as the primary typeface—a humanist sans-serif that balances clinical precision with warmth. Display (57px, 410 weight) anchors hero sections with confident, large-scale messaging; headline-lg (40px, 600 weight) breaks up content sections; body-md (16px, 400 weight) carries the bulk of instructional copy. The weight progression (400 for body, 500 for labels, 600 for headlines) creates clear hierarchy without requiring multiple typefaces. Letter-spacing is tight on headlines (-0.02em) to reinforce authority, while body copy uses 0em spacing for natural readability. On small labels over busy backgrounds (e.g., badge text on product cards), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast. The 18px body-lg size is reserved for form labels and pro

Layout

The page uses a 12-column fluid grid with a max-width of 1280px, centered on desktop and edge-to-edge on mobile. The gutter between columns is 24px (md spacing), and section separation uses lg spacing (40px) to create breathing room between hero, card grids, and CTAs. The hero section occupies full width with 24px horizontal padding on mobile, expanding to 40px on tablet and desktop. Card grids use a 2-column layout on mobile (stacked), 3–4 columns on tablet, and 4 columns on desktop, with 24px gaps between cards. The container max-width of 1280px ensures content never stretches uncomfortably wide. Whitespace is treated as a design element: the hero headline sits in the top 30% of the viewport with 40px of breathing room below; card sections have 40px top/bottom padding; CTAs are surrounde

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than aggressive drop shadows. The base elevation (elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to interactive elements like buttons and input fields to signal clickability without visual heaviness. Standard cards (elevation-md: 0 3px 8px rgba(0, 0, 0, 0.15)) create a single step of separation from the white background, used on product cards and form containers. The privacy consent modal uses elevation-lg (0 8px 24px rgba(0, 0, 0, 0.12)) to anchor it as a modal overlay. Hero cards with dark overlays (rgba(45, 70, 80, 0.8))

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used consistently to soften the clinical nature of healthcare, but never so rounded as to feel frivolous. Buttons use 1rem (16px) border-radius for a friendly, approachable feel; secondary buttons and pills use full border-radius (9999px) for a softer, more playful appearance. Input fields use 18px border-radius (slightly more than buttons) to create a distinct visual category. Cards use 18–20px border-radius to balance containment with approachability. The hero cards with background imagery use 20px border-radius to frame the conte

Components

Action Elements Buttons are the primary interaction pattern. The primary button (blue, #0000ee background, white text, 48px height, 16px border-radius, 12px 24px padding) uses label-md typography (14px, 500 weight) and transitions to #0000cc on hover over 0.2s linear. The secondary button (transparent background with rgba(0, 0, 0, 0.06), 40px height, full border-radius) is used for lower-priority actions like 'Log in' and shifts to rgba(0, 0, 0, 0.12) on hover. The accent CTA button (sage green background #a3b58d, blue text #0000ee, 48px height, 24px border-radius) is reserved for hero-level calls-to-action like 'Unsure where to begin? Start here' and creates a distinctive visual signature. All buttons use font-weight: 500 and include a 0.2s linear transition on background-color and te

Do's and Don'ts

**Do**

• Do use the primary blue (#0000ee) exclusively for interactive elements—buttons, links, and focus states—to create unmistakable CTAs.
• Do apply 24px padding and 40px section separation to create breathing room and reduce cognitive load.
• Do use CareSans at 400 weight for body copy and 600 weight for headlines to establish clear hierarchy without multiple typefaces.
• Do round button corners to 16px and card corners to 18–20px to signal approachability and trust.
• Do transition all interactive states (hover, focus, active) over 0.2s linear to provide smooth, predictable feedback.
• Do use the sage green (#90ad72) and teal (#9abdb1) accents in supporting UI (badges, secondary cards) to reinforce the wellness positioning.

**Don't**

• Don't use the primary blue for backgrounds, text, or non-interactive elements—reserve it exclusively for CTAs and focus states.
• Don't apply shadows heavier than elevation-lg (0 8px 24px rgba(0, 0, 0, 0.12)) to avoid visual clutter on a white background.
• Don't mix typefaces; CareSans is the system typeface for all text, including headings, body, and labels.
• Don't use border-radius smaller than 16px on buttons or larger than 20px on cards—stay within the soft-technical range.
• Don't set input field padding below 12px or above 24px; maintain the 18px border-radius and 1px border in all states.
• Don't apply color transitions longer than 0.2s linear; faster feedback feels more responsive and trustworthy.