Abby Health

Overview

Abby Health is an Australian telehealth platform delivering accessible, bulk-billed online healthcare through trusted GPs and Nurse Practitioners. The design system embodies 'Clinical Minimalism'—a philosophy that combines the precision and credibility of medical practice with the warmth and approachability of modern digital-first healthcare. The interface prioritizes clarity and trust: clean white surfaces (rgb(255, 255, 255)), generous whitespace, and a carefully curated accent palette (primary teal #359c79, secondary cyan #00d1ff, tertiary violet #865dff) that conveys both professionalism and human care. The emotional response is one of calm confidence: users feel they are in capable hands, yet the interface never feels clinical or cold.

The brand voice is direct, reassuring, and jargon-free. Abby speaks to Australians with practical empathy—acknowledging the friction of traditional healthcare while celebrating the speed and convenience of online care. Tone is conversational but authoritative, never breathless or overselling. Example sentence: 'Your GP knows your history. No repeating yourself. No waiting rooms. Just care, online.'

Colors

The color system is built on a foundation of clinical trust (white #ffffff, near-black #0c0c0c) anchored by a vibrant teal primary accent (#359c79). Primary is deployed on all call-to-action buttons ('Book a medical appointment'), interactive states, and brand-critical UI elements. It appears at 100% opacity on white backgrounds and is never desaturated. Secondary cyan (#00d1ff) and tertiary violet (#865dff) are reserved for service category cards and accent highlights—each card in the 'How can we help you?' section uses a distinct gradient (e.g., card-1 uses linear-gradient(#00262c, #359c79) on hover, card-4 uses linear-gradient(#0028be, #00d1ff)). The surface stack is deliberately minimal: surface-container-lowest (#f7f7f7) for card backgrounds, surface-container-high (#e9ecef) for hover

Typography

The type system uses Manrope exclusively, a geometric sans-serif that conveys modern professionalism without sacrificing warmth. Display (88px, weight 500, line-height 96px, letter-spacing -0.02em) anchors hero sections and commands attention without aggression. Headline-lg (48px, weight 600) and headline-md (32px, weight 600) establish section hierarchy with tight line-height (56px, 40px respectively) to maintain visual density. Body-md (16px, weight 400, line-height 24px) is the workhorse for descriptive copy and card content, ensuring legibility at all viewport sizes. Label-md (14px, weight 500, letter-spacing 0.01em) is used for button text and UI labels, with the slight letter-spacing (+0.01em) improving clarity on interactive elements. When small labels appear over busy backgrounds (

Layout

The page uses a 12-column fluid grid with a max-width container of 1280px (applied via CSS max-width: 1280px on wrapper divs). The gutter spacing is 32px between columns, creating breathing room without excessive whitespace. Section separation uses lg spacing (40px) for major rhythm breaks (hero to services, services to testimonials), while internal card padding uses md spacing (24px). The hero section occupies full viewport height with padding: 0 32px, establishing the gutter as the horizontal margin standard. Service cards are arranged in a 4-column grid on desktop (3 columns on tablet, 1 on mobile), each with 20px border-radius and 24px internal padding. The container-max-width of 1280px ensures content never stretches beyond comfortable reading width; on screens >1280px, centered margi

Elevation & Depth

Depth is conveyed through a restrained shadow system and color-based hierarchy rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Standard Cards): box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06) paired with a 1px border at rgba(0, 0, 0, 0.05), creating a subtle lift. Level 3 (Hover/Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on card-hover, signaling interactivity. Level 4 (Modals/Overlays): box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.16), reserved for floating panels and chat widgets. The Intercom chat launcher

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are generous enough to feel human and welcoming, yet not so extreme as to sacrifice visual hierarchy. Buttons use full radius (9999px / border-radius: 9999px), creating pill-shaped affordances that are unmistakably clickable. Cards use lg radius (30px), softening edges while maintaining a structured appearance. Input fields use DEFAULT radius (14px), striking a balance between form-like precision and modern softness. Service category cards use lg radius (30px) to match standard cards. The most frequent radius in the codebase is 2

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses backgroundColor: {colors.primary} (#359c79), textColor: white, rounded: full (9999px), padding: 12px 24px, height: 48px, and typography: label-md (14px, weight 500). On hover, the background transitions to #2d8a6f (a 15% darkening) over 200ms using cubic-bezier(0.33, 0, 0, 1). Button-secondary mirrors the primary structure but uses backgroundColor: {colors.surface-container-low} (#f3f4ea) with a 1px border at {colors.outline} (#d0d0d0), and on hover shifts to surface-container-high (#e9ecef) with textColor becoming primary (#359c79). Button-ghost is transparent by default, textColor primary, and on hover gains a subtle background (surface-container-low) to signal interactivity without visual weight.

C