Westgate Medical Centre Sayers

Overview

Westgate Medical Centre Sayers operates within the 'Clinical Clarity' aesthetic—a design philosophy that prioritizes patient trust through transparent information hierarchy, accessible typography, and purposeful color signaling. The brand serves families and individuals seeking comprehensive healthcare in Hoppers Crossing, Australia, and the UI reflects this mission: calm, professional, yet genuinely approachable. The interface avoids clinical coldness by pairing a clean white canvas (rgb(252, 252, 252)) with warm, energetic accent colors that signal action and care.

The brand voice is direct, reassuring, and patient-centric. Sentences are clear and action-oriented, never jargon-heavy. Example: 'Book your telehealth appointment today—see a doctor from home with secure video consultation.' The personality balances authority (we are medical professionals) with accessibility (we make healthcare simple). Color choices reinforce this duality: the primary cyan-blue (#38b6ff) conveys trust and medical professionalism, while the secondary teal (#00cea6) adds warmth and approachability. Typography pairs Open Sans (headings, 600 weight, 64px for display) with Source Sans Pro (body, 400 weight, 17.6px baseline) to create visual rhythm that guides patients through information without overwhelming them.

Colors

The color system is built on a light, neutral foundation (surface: #fcfcfc, on-surface: #535353) that ensures readability and clinical cleanliness. Primary (#38b6ff, rendered as rgb(56, 182, 255) in computed styles) is the dominant accent—used exclusively on high-priority CTAs like 'Book Appointment' buttons, focus states, and key interactive elements. This cyan-blue was chosen for its psychological association with trust, clarity, and medical care; it appears prominently on the hero modal and primary navigation CTA. Secondary (#00cea6, a vibrant teal) supports the primary and is used for secondary actions, highlights, and status indicators—it conveys approachability and energy without competing for attention. Tertiary (#ff6900, luminous orange) is reserved for accent highlights, badges, a

Typography

The type system employs a two-family strategy: Open Sans (600 weight, 64px display size, -0.02em letter-spacing) for headlines and CTAs, creating strong visual hierarchy and commanding attention; Source Sans Pro (400 weight, 17.6px body size, 0.01em letter-spacing) for body copy and supporting text, ensuring comfortable reading at all sizes. Display (64px, 72px line-height) anchors hero sections and major page titles. Headline-lg (40px, 48px line-height) structures section breaks. Body-md (16px, 24px line-height) is the workhorse for patient-facing content—readable at arm's length and accessible for users with low vision. Label-md (16px, 600 weight) is applied to buttons and form labels to ensure clarity and scannability. On small labels over busy backgrounds (e.g., badges on cards), apply

Layout

The page layout follows a fluid, centered grid model with a maximum container width of 1024px (--wp--style--global--wide-size: 1200px for wide content). The 12-column grid adapts responsively: full-width on mobile, 8-column on tablet, 12-column on desktop. Spacing is semantic and hierarchical: md (24px) for standard section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. The body padding is 0px to allow full-bleed hero sections; content blocks use margin-block-start: 24px and margin-block-end: 0 to create consistent vertical rhythm. The container-max-width of 1024px ensures that appointment booking flows and patient information remain scannable without excessive line lengths. White-space is generous—never cramped—reflecting t

Elevation & Depth

Visual hierarchy is achieved through a subtle shadow system and background color layering rather than dramatic depth. Level 1 (Base): flat surface at #fcfcfc with no shadow. Level 2 (Standard Card): surface-container-low (#f5f5f5) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating gentle separation from the base. Level 3 (Elevated/Modal): surface-container (#eeeeee) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for modals, overlays, and high-priority content. The modal overlay uses a semi-transparent black (rgba(0, 0, 0, 0.5)) with backdrop-filter: blur(4px) to focus attention on

Shapes

The design employs 'Accessible Roundedness'—a philosophy that balances modern softness with clinical precision. Buttons use the full radius (45px, matching the computed border-radius: 45px from the primary CTA) to create pill-shaped, inviting targets that feel approachable and are easy to tap on mobile devices. Cards and containers use lg (1rem, 16px) for a subtle, professional curve that softens the interface without appearing playful. Input fields use DEFAULT (0.5rem, 8px) for a clean, minimal appearance that maintains form-like clarity. Modals and overlays use lg (1rem) to match cards, crea

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#38b6ff), textColor: {colors.on-primary} (#030303), rounded: {rounded.full} (45px), and padding: 20px 35px with a 56px height. On hover, the background transitions to #0078d4 over 200ms (transition: background-color 200ms ease-in-out), providing clear feedback without animation fatigue. The button-secondary uses {colors.secondary} (#00cea6) for supporting actions like 'Learn More' or secondary CTAs. Button-tertiary is transparent with a 1px border (border: 1px solid {colors.outline}) and is used for low-priority actions or cancel buttons.

Containers & Surfaces Cards use backgroundColor: {colors.surface-container-lowest} (#f8f8f8), rounded: {rounded.lg

Do's and Don'ts

**Do**

• Do use primary (#38b6ff) exclusively for high-priority CTAs and focus states—it is the visual anchor for patient action.
• Do apply 24px block-gap between major content sections to prevent cognitive overload and maintain clarity.
• Do pair Open Sans (600 weight) headlines with Source Sans Pro (400 weight) body copy to create clear visual hierarchy.
• Do use the full 45px border-radius on buttons and badges to signal interactivity; reserve smaller radii (1rem) for containers.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces for subtle depth without drama.
• Do maintain the light surface (#fcfcfc) as the default background to ensure clinical cleanliness and readability.

**Don't**

• Don't use secondary (#00cea6) or tertiary (#ff6900) for primary CTAs—they dilute the trust signal of the primary color.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) to avoid creating a cluttered, non-medical appearance.
• Don't mix Open Sans and Source Sans Pro weights arbitrarily; use 600 weight only for headings and labels, 400 for body.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements—they reduce tap target clarity on mobile.
• Don't apply text-shadow or text-stroke to body copy; reserve these only for labels over busy backgrounds.
• Don't exceed the 1024px container max-width; wider layouts reduce readability for patient information and appointment flows.