System Requirements Document for sa-ada

1. Introduction

sa-ada is the public web presence for SA'ADA Mental Health Clinic ("SA'ADA" — happiness). The product intent is a single, warm, humane first screen: a hero section that presents the clinic to a person who arrives anxious, possibly at night, on a phone, and is deciding whether to trust a clinic with their inner life. The hero must communicate what the clinic is and offer a clear next step toward care, using the uploaded SA'ADA image as its imagery.

The audience is twofold:

• Clinic Website Visitor — an anonymous person arriving at the clinic site who needs to understand what the clinic offers and how to proceed toward care.
• Clinic Content Owner — the clinic-side person responsible for the hero section's message and imagery, who must be able to maintain the headline, supporting text, and the uploaded image so the page reflects the clinic's identity.

The register is warm, safe, humane, and unhurried — never clinical-cold, never corporate-neutral, never hype. The emotional target is: "someone is holding this gently."

2. System Overview

sa-ada is a small, focused web application with three surfaces:

1. Landing — an anonymous, publicly reachable first screen whose centerpiece is the SA'ADA hero section, built around the uploaded image.
2. Login — the returning-verification surface through which the Clinic Content Owner establishes access to protected content maintenance.
3. Content — the protected clinic-side destination where the Clinic Content Owner maintains the hero message and its uploaded visual asset.

The system is delivered as a custom first-party web application with application-owned identity. The Landing surface is anonymous and requires no account. The Content surface is role-restricted to the Clinic Content Owner; the Login surface is the anonymous entry boundary through which that identity is verified. Backend integration is required to persist and serve the hero content (headline, supporting text, and the uploaded image reference) so that changes made in Content are reflected on Landing.

2a. Product Interpretation and Delivery Boundary

Current delivery. The current product is the hero section for SA'ADA Mental Health Clinic, presented on an anonymous public Landing surface, plus the minimum clinic-side machinery needed for the Clinic Content Owner to maintain that hero content. The hero uses the uploaded image (chat_media/92e1e14e-2823-471b-86eb-43e1c7ad64d8/5bc24266_deepseek_20260928_333f34.png) as its imagery — this is a hard, explicit constraint, not a suggestion.

Access ownership. The Landing surface is public and anonymous: a visitor needs no account to read the hero. The Content surface is protected and role-restricted to the Clinic Content Owner. Because the hero content is application-owned and must remain bound to the correct clinic-side participant across visits, application-owned identity is used: the Clinic Content Owner is established by invitation or provisioning, and returns through verification on the Login surface. The Login surface is itself anonymously reachable — it is the entry boundary that establishes access to the protected Content surface, and it cannot own the interaction that establishes access to itself.

Boundaries. This document covers only the hero section, its public presentation, and the clinic-side maintenance of that hero content. It does not add adjacent clinic capabilities (appointment booking systems, patient records, therapist directories, blog, contact forms, or account self-registration) beyond what the accepted journeys require. The "Book a first session" call to action is a hero control whose destination is not specified by the source; it is treated as a call-to-action control on the hero, not as a booking product.

2b. Source Content Inventory

The authoritative reference directive declares uses: ["content_source", "visual_inspiration"] with authority: authoritative for the uploaded image. The verified factual entity requested by that directive is:

• Media reference: chat_media/92e1e14e-2823-471b-86eb-43e1c7ad64d8/5bc24266_deepseek_20260928_333f34.png
  • Storage key: chat_media/92e1e14e-2823-471b-86eb-43e1c7ad64d8/5bc24266_deepseek_20260928_333f34.png
  • Originating message: 561b2761-20ca-4904-98c3-4b9ba25c4603
  • Created at: 2026-09-28T19:33:13.098884+00:00
  • Role in product: the hero section's visual asset for SA'ADA Mental Health Clinic.

No other verified factual entities, collections, fields, values, descriptions, dates, contacts, or links are supplied by the content source.

2c. Page Content and Component Coverage

Landing

• Information / state: the anonymous public first screen for SA'ADA Mental Health Clinic. Displays the hero section: an eyebrow label, an oversized headline, a two-line supporting paragraph, a primary call to action, a secondary text link, a trust row, and the uploaded image presented in a plate. Content is served from application-owned hero content maintained by the Clinic Content Owner.
• Primary actions: read the hero headline, supporting copy, and trust row; activate the primary call to action ("Book a first session"); activate the secondary text link ("How care works").
• Supporting actions: navigate via the flat navigation row (wordmark, four text links, pill "Book a session"); at 375px, open the collapsed pill menu.
• Domain entities: Hero Content (headline, supporting text, primary CTA label, secondary link label, trust row items, hero image reference).
• Component responsibilities:
  • Navigation row — wordmark left, four text links center-right, pill "Book a session" right; collapses at 375px to wordmark plus a pill menu button with no element overlapping the wordmark.
  • Eyebrow label — 13px sage label reading "SA'ADA · MENTAL HEALTH CLINIC".
  • Hero headline — Fraunces, sentence case, tight leading, deep sage with exactly one phrase in terracotta.
  • Supporting paragraph — Work Sans, capped at 46ch, two lines.
  • Primary CTA — solid sage pill button, "Book a first session".
  • Secondary link — quiet text link, "How care works".
  • Trust row — three short claims separated by 6px sage dots, 13px with 0.08em tracking: "Same-week intake · Arabic & English · Licensed clinicians".
  • Hero image plate — the uploaded image inside a 24px-radius white plate with a 1px #E4DCCE hairline and oat matte, offset 32px downward so its top edge aligns to the headline's second line.
  • Sage curve band — a single large-radius sage curve at 8% opacity sweeping the bottom-right of the hero as decoration only; it never touches the headline, the image, or the CTA.
  • Care statements band — below the fold, a full-width sage band with a gentle top curve holding three care statements in a 3-up grid that becomes a single column at 375px.
• States:
  • Loading: hero content is being fetched; the image plate reserves its space to avoid layout shift.
  • Empty: if hero content has not yet been supplied, the hero renders with the uploaded image and the clinic's default headline and supporting copy rather than a blank screen.
  • Success: hero content and the uploaded image render fully; the visitor can read the message and activate the CTA.
  • Error: if hero content fails to load, the hero renders the uploaded image with a fallback headline and supporting copy so the first screen is never empty.
  • Recovery: the visitor can reload the page; the Clinic Content Owner can correct the content from the Content surface.

Login

• Information / state: the anonymous entry boundary through which the Clinic Content Owner completes returning verification to reach protected content maintenance. Reachable without an account; protected state remains unavailable until identity is established.
• Primary actions: enter credentials and submit to verify identity.
• Supporting actions: return to the Landing surface.
• Domain entities: Clinic Content Owner identity, verification credential.
• Component responsibilities:
  • Verification form — credential input(s) and a submit control.
  • Error region — inline message when verification fails.
  • Return link — a quiet link back to Landing.
• States:
  • Loading: submission in progress; the submit control is disabled.
  • Empty: the form is presented with empty fields.
  • Success: verification succeeds and the Clinic Content Owner is taken to the Content surface.
  • Error: verification fails; an inline message is shown and the form remains available for retry.
  • Recovery: the Clinic Content Owner can re-enter credentials and resubmit.

Content

• Information / state: the protected, role-restricted clinic-side destination where the Clinic Content Owner maintains the hero message and its uploaded visual asset. Shows the current hero content and the current hero image.
• Primary actions: edit the hero headline, supporting text, and related hero copy; replace or update the hero image; save changes.
• Supporting actions: preview the hero as it will appear on Landing; sign out.
• Domain entities: Hero Content (headline, supporting text, primary CTA label, secondary link label, trust row items, hero image reference).
• Component responsibilities:
  • Hero copy editor — fields for headline, supporting text, and hero copy.
  • Hero image control — displays the current hero image and allows the Clinic Content Owner to supply or update it.
  • Save control — commits changes to application-owned hero content.
  • Preview — shows the hero as it will render on Landing.
  • Status region — confirms a successful save or reports a failure.
• States:
  • Loading: current hero content and image are being fetched.
  • Empty: no hero content has been supplied yet; the editor presents empty fields ready for input.
  • Success: changes are saved and confirmed; the updated hero is served on Landing.
  • Error: a save fails; the status region reports the failure and the Clinic Content Owner's edits remain available for retry.
  • Recovery: the Clinic Content Owner can retry the save or correct the input.

3. Functional Requirements

FR-1 — Hero section on the public Landing surface (explicit) As a Clinic Website Visitor, I should see a hero section for SA'ADA Mental Health Clinic when I arrive at the Landing surface, so that I understand what the clinic is and how to proceed toward care.

• Trigger/input: the visitor opens the Landing surface.
• Observable result: the hero section renders with the clinic's headline, supporting copy, primary call to action, secondary link, and trust row.
• Access state: anonymous; no account required.
• Failure/recovery: if hero content fails to load, the hero renders with a fallback headline and supporting copy so the first screen is never empty; the visitor can reload.
• Continuation: the visitor reads the hero and may activate the primary call to action or the secondary link.

FR-2 — Hero uses the uploaded image (explicit) As a Clinic Website Visitor, I should see the uploaded SA'ADA image as the hero section's imagery, so that the first screen presents the clinic's identity visually.

• Trigger/input: the Landing surface renders the hero.
• Observable result: the uploaded image (chat_media/92e1e14e-2823-471b-86eb-43e1c7ad64d8/5bc24266_deepseek_20260928_333f34.png) is displayed as the hero's visual asset inside its plate.
• Access state: anonymous; no account required.
• Failure/recovery: if the image fails to load, the plate retains its reserved space and the hero copy remains readable; the visitor can reload.
• Continuation: the visitor continues reading the hero and may activate the primary call to action.
• Constraint: the hero section must use the uploaded image as its imagery.

FR-3 — Primary call to action (explicit) As a Clinic Website Visitor, I should be able to activate the hero's primary call to action ("Book a first session"), so that I can take the next step toward care.

• Trigger/input: the visitor activates the primary CTA control.
• Observable result: the control responds to activation (hover darkens two steps of sage with a 2% scale; focus shows a 2px terracotta ring offset 3px).
• Access state: anonymous; no account required.
• Failure/recovery: if the CTA's destination is unavailable, the visitor remains on the Landing surface and can retry.
• Continuation: the visitor proceeds from the hero.

FR-4 — Secondary text link (explicit) As a Clinic Website Visitor, I should be able to activate the hero's secondary text link ("How care works"), so that I can learn more about the clinic's care.

• Trigger/input: the visitor activates the secondary link.
• Observable result: the link responds to activation.
• Access state: anonymous; no account required.
• Failure/recovery: if the link's destination is unavailable, the visitor remains on the Landing surface.
• Continuation: the visitor continues from the hero.

FR-5 — Trust row (explicit) As a Clinic Website Visitor, I should see a trust row of three short claims under the CTA, so that I can quickly gauge the clinic's accessibility and credibility.

• Trigger/input: the hero renders.
• Observable result: three short claims separated by 6px sage dots are displayed at 13px with 0.08em tracking: "Same-week intake · Arabic & English · Licensed clinicians".
• Access state: anonymous; no account required.
• Failure/recovery: if the trust row content is unavailable, the hero's other elements remain readable.
• Continuation: the visitor continues reading the hero.

FR-6 — Clinic Content Owner invitation or provisioning (required_inference) As a Clinic Content Owner, I should receive an invitation or provisioning before accessing protected content maintenance, so that my access to the clinic's hero content is established.

• Trigger/input: the clinic establishes the Clinic Content Owner's access.
• Observable result: the Clinic Content Owner holds an identity that can be verified on the Login surface.
• Access state: this is the prerequisite for protected access; the Content surface remains unavailable until identity is established.
• Failure/recovery: if provisioning has not occurred, the Clinic Content Owner cannot reach the Content surface.
• Continuation: the Clinic Content Owner proceeds to returning verification.

FR-7 — Returning verification (required_inference) As a Clinic Content Owner, I should complete returning verification on the Login surface before maintaining the hero content, so that protected content maintenance remains bound to the correct clinic-side participant.

• Trigger/input: the Clinic Content Owner submits credentials on the Login surface.
• Observable result: on success, the Clinic Content Owner reaches the Content surface; on failure, an inline error is shown.
• Access state: the Login surface is anonymously reachable; the Content surface remains unavailable until verification succeeds.
• Failure/recovery: on failed verification, the form remains available for retry.
• Continuation: on success, the Clinic Content Owner proceeds to the Content surface.

FR-8 — Maintain the hero message (required_inference) As a Clinic Content Owner, I should edit the hero headline, supporting text, and related hero copy on the Content surface, so that the hero accurately presents the clinic to visitors.

• Trigger/input: the Clinic Content Owner edits hero copy fields and saves.
• Observable result: the updated hero content is persisted and served on the Landing surface.
• Access state: protected; role-restricted to the Clinic Content Owner.
• Failure/recovery: if a save fails, the status region reports the failure and the edits remain available for retry.
• Continuation: the Clinic Content Owner previews the hero or continues editing.

FR-9 — Maintain the hero image (required_inference) As a Clinic Content Owner, I should supply or update the hero image on the Content surface, so that the hero's imagery reflects the clinic's identity.

• Trigger/input: the Clinic Content Owner supplies or replaces the hero image and saves.
• Observable result: the updated hero image is persisted and served on the Landing surface.
• Access state: protected; role-restricted to the Clinic Content Owner.
• Failure/recovery: if the image save fails, the status region reports the failure and the current image remains in place.
• Continuation: the Clinic Content Owner previews the hero or continues editing.

FR-10 — Preview the hero (required_inference) As a Clinic Content Owner, I should preview the hero as it will appear on Landing, so that I can confirm the clinic's presentation before it is served to visitors.

• Trigger/input: the Clinic Content Owner requests a preview on the Content surface.
• Observable result: the hero is shown as it will render on Landing.
• Access state: protected; role-restricted to the Clinic Content Owner.
• Failure/recovery: if the preview cannot render, the Clinic Content Owner can return to editing.
• Continuation: the Clinic Content Owner saves or continues editing.

4. User Personas

Clinic Website Visitor

• Product context: a person arriving at the SA'ADA Mental Health Clinic site, possibly anxious, possibly at night, on a phone, deciding whether to trust a clinic with their inner life.
• Primary goal: understand what the clinic is and how to proceed toward care.
• Distinct accepted responsibilities: reading the hero section's headline, supporting copy, trust row, and call to action; deciding whether to take the next step.
• Relevant inputs or decisions: whether the hero's message and imagery feel trustworthy and humane; whether to activate the primary call to action or the secondary link.
• Interactions with other accepted participants: none directly; the visitor consumes hero content that the Clinic Content Owner maintains.
• Observable success: the visitor knows what the clinic is and how to proceed.
• What makes this role different: the visitor is anonymous and read-only; they never edit content and never authenticate. Their entire responsibility is comprehension and the decision to proceed.

Clinic Content Owner

• Product context: the clinic-side person responsible for the hero section's message and imagery about SA'ADA Mental Health Clinic.
• Primary goal: ensure the hero accurately presents the clinic to visitors.
• Distinct accepted responsibilities: supplying and updating the hero headline, supporting text, and the uploaded image; previewing the hero; saving changes so the Landing surface reflects the clinic's identity.
• Relevant inputs or decisions: the clinic's current message and imagery; whether the hero reads as warm, safe, and humane.
• Interactions with other accepted participants: the Clinic Content Owner's work is what the Clinic Website Visitor reads; the owner's changes are the visitor's first impression.
• Observable success: the hero on Landing accurately presents the clinic, with the owner's intended headline, supporting text, and image.
• What makes this role different: the owner is authenticated and write-capable; they hold protected access to application-owned hero content and are the only participant who changes what visitors see. Their work is maintenance, not consumption.

5. Core User Flows

Flow A — Clinic Website Visitor reads the hero and decides

1. The Clinic Website Visitor opens the Landing surface anonymously, with no account.
2. The hero section renders: the eyebrow label "SA'ADA · MENTAL HEALTH CLINIC", the oversized headline with one phrase in terracotta, two lines of supporting copy, the primary CTA "Book a first session", the secondary link "How care works", and the trust row "Same-week intake · Arabic & English · Licensed clinicians".
3. The uploaded SA'ADA image renders inside its 24px-radius white plate with the oat matte and hairline, offset so its top edge aligns to the headline's second line.
4. The visitor reads the headline and supporting copy and forms an impression of the clinic.
5. The visitor reads the trust row and weighs whether the clinic feels accessible and credible.
6. The visitor decides: they activate the primary CTA "Book a first session", or they activate the secondary link "How care works", or they leave.
7. Observable result: the visitor knows what the clinic is and how to proceed.
8. Failure/recovery: if hero content fails to load, the hero renders the uploaded image with a fallback headline and supporting copy so the first screen is never empty; the visitor can reload.
9. Continuation: the visitor proceeds from the hero via the CTA or the secondary link.

Flow B — Clinic Content Owner is established and verifies

1. The clinic establishes the Clinic Content Owner's access by invitation or provisioning.
2. The Clinic Content Owner opens the Login surface, which is anonymously reachable.
3. The Clinic Content Owner enters their credentials and submits.
4. Observable result: on success, the Clinic Content Owner reaches the protected Content surface; on failure, an inline error is shown.
5. Failure/recovery: on failed verification, the form remains available and the Clinic Content Owner can re-enter credentials and resubmit.
6. Continuation: on success, the Clinic Content Owner proceeds to maintain the hero content.

Flow C — Clinic Content Owner maintains the hero message

1. The Clinic Content Owner, having verified, opens the protected Content surface.
2. The Content surface loads the current hero content and the current hero image.
3. The Clinic Content Owner edits the hero headline, supporting text, and related hero copy.
4. The Clinic Content Owner saves the changes.
5. Observable result: the updated hero content is persisted and served on the Landing surface.
6. Failure/recovery: if the save fails, the status region reports the failure and the Clinic Content Owner's edits remain available for retry.
7. Continuation: the Clinic Content Owner previews the hero or continues editing.

Flow D — Clinic Content Owner maintains the hero image

1. The Clinic Content Owner, having verified, opens the protected Content surface.
2. The Content surface shows the current hero image.
3. The Clinic Content Owner supplies or replaces the hero image.
4. The Clinic Content Owner saves the change.
5. Observable result: the updated hero image is persisted and served on the Landing surface.
6. Failure/recovery: if the image save fails, the status region reports the failure and the current image remains in place.
7. Continuation: the Clinic Content Owner previews the hero or continues editing.

Flow E — Clinic Content Owner previews the hero

1. The Clinic Content Owner, on the Content surface, requests a preview.
2. The hero is shown as it will render on Landing.
3. Observable result: the Clinic Content Owner sees the clinic's presentation as visitors will.
4. Failure/recovery: if the preview cannot render, the Clinic Content Owner returns to editing.
5. Continuation: the Clinic Content Owner saves or continues editing.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section: Humane technology after Yves Béhar — soft forms holding serious care.

Muse and headline. Yves Béhar's fuseproject language — soft forms wrapped around serious technology, warm materials, wellbeing-first pacing — is the emotional contract this first screen makes. It gives warmth without childishness, tactility without luxury distance, and a palette of oat, sage, and terracotta that reads as calm and human rather than institutional white-and-blue.

Palette (light mode):

No blue anywhere. White surfaces are reserved for the hero image plate and content cards, always with a 1px #E4DCCE hairline instead of a shadow.

Typography:

• Headings: Fraunces, weight 400–500, soft optical size, "wonk" axis at 1. Sentence case, tight leading (0.98–1.05), tracking -0.01em, deep sage with exactly one word in terracotta. Never all-caps, never black weight.
• Body: Work Sans.
• Scale: 1.333 modular — 18 / 24 / 32 / 42 / 56 / 76.
• Hero display: clamp(42px, 8.5vw, 92px).
• Section heading: clamp(28px, 4vw, 42px).
• Body: 18px / 1.65.
• Label: 13px, letter-spacing 0.08em, sentence case.

Shape language. Soft continuous curves everywhere — 24px radius on the hero image plate, 20px on cards, 999px pill buttons, 12px on inputs. Section boundaries are gentle arcs (a single large-radius curve where the sage band meets the oat ground), never diagonals or hard 90° corners. One deliberate exception: the thin 1px hairline rules that separate content rows are perfectly straight, so the softness reads as intentional rather than fuzzy. Icons are 2px-stroke rounded pictograms drawn on a 24px grid.

Layout. Asymmetric two-column on desktop (7 / 5), stacked on mobile with the image plate first. Left column: eyebrow label, oversized Fraunces headline, two-line supporting paragraph capped at 46ch, a pill primary CTA plus a text-link secondary, and a small trust row (three items separated by sage dots). Right column: the uploaded image inside a 24px-radius white plate with a warm oat matte border, offset 32px downward so the headline baseline and the image top edge share a line — an editorial, non-centred composition. Below the fold, a full-width sage band with a gentle top curve holds three care statements in a 3-up grid that becomes a single column at 375px. Navigation is a single flat row: wordmark left, four text links centre-right, a pill "Book a session" right; at 375px it collapses to wordmark plus a pill menu button, with no element overlapping the wordmark.

Imagery. The uploaded image is the only photograph on the first screen and is treated as a warm, softly lit portrait of a place — presented inside a white plate with generous oat matte, never bled to the viewport edge, never cropped through a face or a readable element. Supporting imagery, if any, is natural-light photography of hands, plants, textiles, and quiet rooms on oat grounds; no stock smiling-people clip art, no 3D blobs, no abstract gradient shapes. Illustrative accents are limited to 2px rounded line diagrams.

Avoid. Any blue or indigo in the palette, and any white-ground-with-blue-button hero. Inter, Roboto, Poppins, system-ui, or any neutral geometric sans for headings. Gradient-blob heroes, glassmorphism panels, frosted cards, glow effects. A grid of identical hover-lift cards below the hero. Centred headline + subtext + button composition. Clinical stock photography of generic smiling people or handshakes. Cropping or bleeding the uploaded image so any face or readable element runs off the viewport at 375px. Drop shadows on cards — depth comes from the oat/white surface contrast and hairline borders only.

7. Signature Design Concept

The public entry is composed as a warm oat first screen, not a centred SaaS stack:

1. An oversized Fraunces headline in deep sage with exactly one phrase switched to terracotta, set across seven of twelve columns so the image plate beside it is visibly subordinate — a ratio no template hero uses. The headline reads "Care that meets you where you are" with "where you are" in terracotta #C4622D.
2. The uploaded image presented as a physical plate: white surface, 24px continuous radius, 1px #E4DCCE hairline, oat matte, offset 32px downward so it aligns to the headline's second line rather than the top of the section.
3. A single large-radius sage curve (8% opacity) sweeping the bottom-right of the hero as the only decoration, replaced by a straight 1px rule under the trust row so softness stays deliberate. It never touches the headline, the image, or the CTA.
4. A trust row of three short claims separated by 6px sage dots instead of icons or a logo strip — "Same-week intake · Arabic & English · Licensed clinicians" — sitting directly under the CTA at 13px with 0.08em tracking.
5. Pill controls with a 2px terracotta focus ring offset 3px, and a "Book a session" pill that darkens two steps of sage on hover with a 2% scale — the only interaction flourish on the page.

On mobile the image plate comes first at full column width with 20px gutters, headline below at 42px, CTA full-width, everything whole and inside the viewport. No gradient blobs, no blue, no centred hero, no floating dashboard mockup.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject: the uploaded SA'ADA image inside its white plate, with the oversized Fraunces headline beside it.
• Input → transformation → outcome thesis: on load, the hero image plate fades and rises 16px while the headline reveals line by line with a 90ms stagger; the outcome is a first screen that assembles gently rather than snapping into place, matching the "someone is holding this gently" register.
• Motion vocabulary: breathing pace, ~600–900ms, ease-out only, no bounce. A very slow 12s ambient drift (2px translate) on the sage curve band. Buttons grow 2% and shift to a darker sage on hover; focus rings are a 2px terracotta outline with 3px offset. Nothing loops, nothing pulses, nothing moves without user intent after the entrance.
• Composed first frame: the oat ground, the eyebrow label, the headline's first line, and the image plate at its resting position — the composition reads as complete even before motion begins.
• Reduced-motion state: under prefers-reduced-motion, all of it becomes a single 200ms opacity fade.

9. Non-Functional Requirements

NFR-1 — Readable text and needed content stay whole at every viewport (explicit, creative direction) Headlines, wordmarks, labels, numbers, item images, cards, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Crops, bleeds, and off-edge placement are for decoration only: shapes, textures, rules, and background art. The one exception is moving content: marquees, tickers, carousels, and horizontally scrollable rows may cross the viewport or container edge by design, judged by whether they actually move or scroll and whether every item becomes fully readable as it passes. With prefers-reduced-motion, moving content stops and shows whole items: they wrap into rows, or sit in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.

• Rationale: the audience arrives anxious, possibly on a phone; nothing readable may be cut off.

NFR-2 — The uploaded image is never cropped through a face or readable element (explicit, creative direction) The uploaded image is presented inside its plate and is never bled to the viewport edge or cropped through a face or a readable element at 375px.

• Rationale: the image is the clinic's identity; cropping it would damage trust.

NFR-3 — No blue or indigo; no generic SaaS template look (explicit, creative direction) The palette contains no blue or indigo, and the generic indigo/blue-on-white SaaS template is forbidden for this project.

• Rationale: the register must read as warm and human, not institutional or corporate-neutral.

NFR-4 — Depth from surface contrast and hairlines, not shadows (explicit, creative direction) Cards and plates use the oat/white surface contrast and 1px #E4DCCE hairline borders; drop shadows are not used on cards.

• Rationale: Béhar's soft-form language relies on material contrast, not elevation effects.

NFR-5 — Accessible contrast (explicit, creative direction) #23262B on #F4EFE6 is ~13:1 and #FFFFFF on #3E5C50 is ~7:1, both safe at body size.

• Rationale: the audience may be reading under stress or at night; contrast must hold.

NFR-6 — Reduced-motion support (explicit, creative direction) Under prefers-reduced-motion, all entrance and ambient motion becomes a single 200ms opacity fade.

• Rationale: motion must never be a barrier to a person seeking care.

NFR-7 — Hero content is application-owned and persisted (required_inference) Hero content (headline, supporting text, hero copy, and the hero image reference) is persisted server-side so that changes made by the Clinic Content Owner are served to the Landing surface.

• Rationale: the accepted journey requires the owner's changes to reach visitors; without persistence the maintenance lifecycle is not executable.

NFR-8 — Protected content maintenance is role-restricted (required_inference) The Content surface is reachable only by a verified Clinic Content Owner; the Landing surface remains anonymous.

• Rationale: hero content is application-owned and must remain bound to the correct clinic-side participant.

10. Tech Stack

• Frontend: React (custom first-party web UI for Landing, Login, and Content).
• Backend: Python / FastAPI, providing hero content read for the Landing surface and authenticated hero content read/write for the Content surface.
• Storage: a persistent store for application-owned hero content and the hero image reference.
• Containerization: Docker / docker-compose for local and single-host deployment.
• Kubernetes: not required by the source; omitted unless deployment scale demands it.

11. Assumptions and Constraints

Assumptions

• A-1 (required_inference) — The Clinic Content Owner is established by invitation or provisioning rather than open self-registration; the source does not describe self-service sign-up, and adding it would be an adjacent account-management capability.
• A-2 (required_inference) — The Login surface is anonymously reachable because it is the entry boundary that establishes access to the protected Content surface; it cannot own the interaction that establishes access to itself.
• A-3 (required_inference) — The "Book a first session" control is a hero call to action; its destination is not specified by the source, so no booking product is defined here.
• A-4 (required_inference) — The "How care works" link is a hero secondary link; its destination is not specified by the source.
• A-5 (required_inference) — The four navigation text links and the "Book a session" pill are part of the Landing navigation row; their individual destinations are not specified by the source.
• A-6 (required_inference) — The three care statements in the below-the-fold sage band are hero-adjacent content; the source does not name them, so they are treated as clinic-supplied copy.

Constraints

• C-1 (explicit) — The hero section must use the uploaded image (chat_media/92e1e14e-2823-471b-86eb-43e1c7ad64d8/5bc24266_deepseek_20260928_333f34.png) as its imagery.
• C-2 (explicit) — The project name is sa-ada.
• C-3 (explicit) — The hero section is about SA'ADA Mental Health Clinic.
• C-4 (explicit, creative direction) — The palette, typography, shape language, layout, motion, and imagery rules in Sections 6–8 are binding for this project.
• C-5 (explicit, creative direction) — The generic indigo/blue-on-white SaaS template is forbidden.

12. Glossary

• SA'ADA — the mental health clinic this product presents; the name means "happiness".
• Hero section — the first screen of the Landing surface, presenting the clinic's headline, supporting copy, call to action, trust row, and the uploaded image.
• Hero image plate — the white, 24px-radius surface with a 1px #E4DCCE hairline and oat matte that holds the uploaded image.
• Hero content — the application-owned headline, supporting text, hero copy, and hero image reference maintained by the Clinic Content Owner.
• Clinic Website Visitor — the anonymous person arriving at the Landing surface to understand the clinic and decide how to proceed.
• Clinic Content Owner — the clinic-side person who maintains the hero message and imagery.
• Landing — the anonymous public first screen of sa-ada.
• Login — the anonymously reachable entry boundary where the Clinic Content Owner completes returning verification.
• Content — the protected, role-restricted clinic-side destination for maintaining hero content.
• Trust row — the three short claims separated by 6px sage dots beneath the hero CTA.
• Sage curve band — the single large-radius sage curve at 8% opacity sweeping the bottom-right of the hero as decoration only.
• Oat ground — the warm #F4EFE6 background carrying ~65% of the page.