HealthTech Clinical Platform demo
HealthTech Clinical Platform

A clean, trustworthy healthtech landing style using healthcare greens, medical iconography, and accessible layouts to convey digital clinical care and patient journey confidence.
Category: Corporate & SaaS
Era: 2020s Modern
Prompt: 11.9 KB · 1640 words
# SYSTEM PROMPT — Build the "HealthTech Clinical Platform" Landing Page (Corporate & SaaS)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt. Follow every rule in this specification without deviation. **All user-facing copy must be written in English.**

**Project Brief:**
- **Theme:** HealthTech Clinical Platform — a clean, trustworthy, accessible clinic portal / digital health SaaS landing page (2020s HealthTech era).
- **Sections (in this exact order):** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
- **Style Keywords:** healthtech landing, medical icons, clinic portal, healthcare green, patient journey, appointments, doctors, trust, clean, accessible, digital health.
- **Visual Direction:** organic shapes (soft curves) as section separators; heartbeat pulse animation (`@keyframes heartbeat`, scale pulse); form fields with highlighted focus state (green border + green shadow); "How It Works" rendered as numbered steps.
- **Base Aesthetic Tokens:** border-radius 12px; box-shadow `0 2px 8px rgba(0,0,0,0.08)`; text `#1A1A1A` on light backgrounds; font Inter.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
Keep all styling strictly inside a dedicated `style.css` file:
- **No Inline CSS:** Explicitly forbid the `style="..."` attribute anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states must be targeted via class or ID selectors.
- **Minimal HTML Modifications:** HTML must remain clean, semantic (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling — changing the site's look must require modifying only the CSS file, never the markup.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
Store all visual tokens in `:root` (and theme classes):
- **Colors:** `--primary` (emerald green, healthcare palette — e.g., the `#10b981` emerald family), `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary` (`#1A1A1A` in light mode), `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- **Contrast Pairing:** Light background tokens must pair with dark text tokens, and dark background tokens with light text tokens — enforced for every theme, not just the default.
- **Light Mode Background:** Do NOT use pure `#ffffff`. Use a warm neutral / green-tinted near-white (e.g., `#f7faf9`) for `--bg-primary`, and `#fefefe` (never `#ffffff`) for near-white surfaces such as cards — the source spec's `#FFFFFF` is overridden by this rule.
- **Radius & Shadows:** `--radius-sm`, `--radius-md: 12px`, `--radius-lg`, `--shadow-sm`, `--shadow-md: 0 2px 8px rgba(0,0,0,0.08)`.
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
- **Elevation/Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts between layered components.

**1.3 Mandatory Dark Mode Support**
Dark Mode must always be defined:
- **Implementation:** Provide dark mode color tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector. Background and text CSS variables must switch seamlessly with no HTML restructuring.
- **Persistence:** Persist the user's theme choice via `localStorage`, falling back to `prefers-color-scheme` on first visit; include a visible toggle control with correct `aria-pressed` / `aria-label` state.
- **Dark Palette:** Deep neutral backgrounds (never pure black), softened emerald accents, and text tokens maintaining WCAG-compliant contrast.
- **Exception clause:** The source style spec listed Dark Mode as unsupported ("✗ No"); per mandatory architecture rules this is overridden — Dark Mode must be fully implemented regardless.

**1.4 Flexbox Layout & Mobile-First Alignment**
Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities):
- **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an explicitly justified exception is documented in a CSS comment.
- **Mobile-Friendly First:** All flex layouts must be mobile-responsive out of the box — multi-column rows convert to columns on smaller viewports; no horizontal scrolling at any breakpoint; fluid sizing throughout.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives).
- All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Load **Inter** from Google Fonts via `<link>` or `@import` and bind it to `--font-base`.
- **Icons:** Use **Google Material Symbols** exclusively for all iconography (e.g., `calendar_month`, `medical_services`, `verified_user`, `favorite`, `monitor_heart`, `health_and_safety`, `chat`, `shield_lock`, `check_circle`, `person`). Explicitly forbid raw inline SVGs and local icon files for icons.
- **Exception clause:** Inline SVG is permitted exclusively for the decorative organic curve separators between sections; it remains strictly forbidden for icons. Separators must carry `aria-hidden="true"` and `focusable="false"`.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements**
Style all states via CSS classes:
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px. Primary variant: filled emerald. Secondary variant: outlined/ghost.
- **Hover:** Visual shift (brightness/shadow) with `cursor: pointer`.
- **Focus:** Distinct focus ring using CSS variables — for this theme, a green border + green shadow ring per the visual direction.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** Disables interactions, prevents double-clicks, and renders a CSS spinner or animated Google Icon without distorting button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** Temporary feedback state styles driven by `--text-success` or `--text-error`.
- `.btn-danger` must be visually distinct in both light and dark themes.

**2.2 Card Component Requirements**
Applies to Features (3 cards), Testimonials, and Pricing tiers:
- **Default:** Flexible Flexbox layout, `--bg-secondary` surface, subtle `--border-default` border, `--radius-md` (12px), `--shadow-sm` elevation.
- **Hover:** Elevation/shadow shift plus subtle `transform: translateY(-2px)`.
- **Focus-within:** Card borders highlight when a child link/button receives focus.
- **Loading (Skeleton):** Shimmer animation styling defined in CSS to prevent layout jumps.
- **Empty State:** Structured fallback layout featuring a Google Icon and clear guidance text.

**2.3 Form & Input Requirements**
Used in the Hero lead/appointment mini-form and the Final CTA signup:
- **States:** Empty, Focused (green border + green shadow ring), Filled, Valid (success border/icon), Invalid (error border, red text, error icon), Disabled, Read-only.
- **Structure:** Flex container wrapping a label, input field, and a dedicated error feedback container.
- Error/success feedback must be announced via an `aria-live` region; never communicate state by color alone — pair icons and text with state colors.

**2.4 Modal / Popup Requirements**
If a "Book a Demo" / appointment modal is triggered from any CTA:
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
- **UX Features:** Centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click, correct ARIA (`role="dialog"`, `aria-modal="true"`).

**2.5 Landing Page Section Specifications**
- **Hero:** Headline + subheadline centered on the patient journey / appointments value proposition; primary CTA ("Book an Appointment" or "Start Free Trial"); secondary CTA ("Watch Demo" / "Talk to Sales"); trust signals (e.g., "HIPAA-ready security", doctor count, patient rating); optional appointment mini-form per 2.3. Include a heartbeat pulse accent (animated Google `favorite` or `monitor_heart` icon) that respects `prefers-reduced-motion`.
- **Features (3 cards):** e.g., Online Appointment Scheduling, Secure Patient Records, Doctor–Patient Messaging — each card pairs a Google Material Symbol icon with a title and short description; card specs per 2.2.
- **How It Works (3 steps):** Numbered step layout (1. Create your account → 2. Book your appointment → 3. Attend your consultation) with a connecting visual line/progress indicator; each step pairs a Google Icon with a title and one-line description; steps stack vertically on mobile.
- **Testimonials:** 3 cards with a quote, name, role (e.g., "Cardiologist", "Clinic Manager"), and avatar (Google Icon `person` or initial — no external images required).
- **Pricing (3 tiers):** e.g., Basic (Free), Professional (Recommended), Enterprise — each with a price, feature list using `check_circle` icons, and a CTA button; the recommended tier is visually elevated (distinct border, "Recommended" badge, stronger shadow).
- **FAQ:** 5–6 realistic questions implemented as an accessible accordion — each item is a `<button>` with `aria-expanded`, answer panels animated via CSS transitions, full keyboard operability.
- **Final CTA:** Full-width emerald section with headline, supporting line, and an email signup form (per 2.3) or a prominent CTA button; high-contrast text pairing per 1.2.
- **Footer:** Secondary links (About, Features, Pricing, FAQ, Contact, Privacy Policy, Terms), social icons via Material Symbols, copyright line; semantic `<footer>` landmark.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid sizing and responsive breakpoints without horizontal overflow; all multi-column layouts collapse to a single column on mobile.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; the heartbeat `@keyframes` (scale pulse) and skeleton shimmer must be disabled under `prefers-reduced-motion`.
- **Accessibility (a11y):** Sufficient contrast in both Light and Dark modes; never rely solely on color to communicate state; semantic HTML5 elements; correct ARIA roles/labels on the accordion, modal, theme toggle, and any custom widgets; logical DOM/focus order; full keyboard operability (no mouse-only interactions); `aria-live` regions for form errors, loading states, and dynamic feedback.
- **Mandatory Visual Feedback:** Every user click, hover, or submission must trigger a visible state change (buttons per 2.1; form submissions show loading → success/error states).
- **Destructive Actions:** Any destructive action must use `.btn-danger` and be visually distinct in both light and dark themes.
- **Organic Separators:** Curve separators must be purely decorative (`aria-hidden="true"`), layered behind content using the `--z` tokens, and must never trap focus or interfere with scroll/reading order.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** Separate `index.html`, `style.css`, and `script.js` files. No inline `<script>` blocks beyond a single deferred entry-point reference; no inline CSS anywhere.
- **Naming Convention:** Enforce one consistent class-naming convention (BEM or a fixed Tailwind utility set) across the entire deliverable — never mix conventions.
- **Copy Quality:** No lorem-ipsum-only submissions — write realistic, complete English copy for every section (headlines, feature descriptions, step titles, testimonial quotes with names/roles, pricing tiers with features and prices, FAQ questions and answers, CTAs, footer links). Placeholders are allowed only where content was genuinely left unspecified.
- **First-Attempt Completeness:** Deliver the full, working landing page in one response — all eight sections built, all component states styled, dark mode functional, and the theme toggle persisted.