System Requirements Document for kaushalya-homecare

1. Introduction

Kaushalya Homecare Service is a home healthcare provider that supports Indian families — adult children arranging care for ageing parents, and elders arranging care for themselves. This project delivers the public website for that service: a calm, trustworthy, single-purpose web presence that explains what Kaushalya Homecare Service is, what kinds of care it offers, how a visit works, and how a family can reach the agency to ask about or request service.

The audience is twofold. The first audience is the Prospective Client or Family Caregiver — an anxious adult child or an elder researching homecare options, who needs to understand the service quickly and reach a human being without friction. The second audience is the Homecare Service Provider / Agency Staff — the people who operate Kaushalya Homecare Service, who need a published site that accurately represents the service and channels incoming inquiries to them.

The product intent is deliberately narrow: present the service truthfully and make contact easy. The website is a public, anonymous, informational and inquiry-oriented surface. It is not a booking engine, not a client portal, not a caregiver marketplace, and not an administrative system.

2. System Overview

The current delivery is a public marketing and inquiry website for Kaushalya Homecare Service, composed of two pages: Landing and Contact. Both pages are publicly reachable with no access requirement — a visitor arriving from search, a referral, or a shared link sees the full service explanation and the full contact options without creating an account or signing in.

The accepted actors are:

• Prospective Client or Family Caregiver (active human persona) — evaluates the service and initiates contact.
• Homecare Service Provider / Agency Staff (active human persona) — maintains the service information shown to visitors and responds to incoming inquiries.

The accepted behavior is: presenting the homecare service to visitors, and receiving inquiries from prospective clients and family caregivers. Everything the site does serves one of those two outcomes.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The website is first-party application-owned custom UI. Both pages are rendered by the application itself; there is no provider-hosted or external-only surface in the current scope.

Access ownership. Both accepted pages are public and anonymous. No identity establishment, sign-in, invitation, or provisioning step exists in the current scope, and none is required: the site's accepted outcomes — reading about the service and sending an inquiry — do not create durable actor-specific state that a visitor must privately own or resume. A visitor who submits an inquiry does not return to a private account to track it; the agency receives the inquiry and responds through the contact channel the visitor supplied. Because no accepted journey requires continuity of private state, no application-owned identity is introduced.

Current versus future boundary. Current scope is the two public pages and the inquiry handoff to the agency. Anything resembling scheduling, caregiver matching, client records, payments, or an authenticated portal is outside the current scope and is not built. The site's job ends at a delivered inquiry and a reachable phone/WhatsApp channel.

Exclusions. No blue or indigo anywhere in the palette; no clinical hospital aesthetic; no auto-playing carousels or looping decorative motion; no dashboard-style layouts; no account creation, login, or client portal; no online booking or scheduling; no payment processing; no caregiver directory or marketplace; no live chat widget beyond the stated phone/WhatsApp contact channel.

2c. Page Content and Component Coverage

Landing

Information and state. The Landing page is the anonymous public entry surface. It explains what Kaushalya Homecare Service is, what kinds of care are available, how a visit works, and what families say about the service, and it routes visitors toward contact. It holds no user-specific state and no persisted data.

Primary actions.

• Follow the primary pill call-to-action in the hero (sage-filled) into the Contact page.
• Follow the secondary text link "Talk to a care advisor" into the Contact page.
• Tap a care-type capsule tag to expand its two-line description in place.

Supporting actions.

• Read the hero headline and subline.
• Read the care-type descriptions.
• Read the "How a visit works" numbered steps.
• Read caregiver cards and their availability indicator.
• Read testimonials.
• Navigate to Contact from the header or footer.

Domain entities.

• Service — Kaushalya Homecare Service as a whole (name, wordmark, positioning statement).
• Care type — Elder Care, Post-Surgery, Dementia, Companionship; each with a short two-line description.
• Visit step — one of four numbered steps describing how a visit works.
• Caregiver — a caregiver profile card with a name/role header and an area-availability indicator.
• Testimonial — a family or client statement about the service.

Component responsibilities.

• Header — carries the Kaushalya Homecare wordmark in sage small caps and the navigation into Contact.
• Hero — asymmetric two-part composition: left side holds the wordmark, the Work Sans headline "Care that comes home." with a single terracotta-underlined phrase, a Karla subline at a 68ch measure, a sage pill CTA, and the secondary text link; right side holds the large rounded photograph panel (28px radius, 4:5 crop) of a caregiver and elder in a sunlit room, bleeding off the right viewport edge at 1280px.
• Care-type selector — four capsule tags in a row (Elder Care, Post-Surgery, Dementia, Companionship), each expanding in place to a two-line description when tapped, rather than linking away.
• Care explanation block — single-column reading measure (max 68ch) explaining the service.
• Service card row — 3-up card row for the service types, with soft continuous curves and 20–28px radii.
• "How a visit works" band — four numbered steps connected by a thin sage arc line curving across the section.
• Caregiver cards — soft offset shadow (0 8px 24px rgba(63,90,78,0.10)) with a small terracotta "available in your area" dot in the top corner; the only place the accent appears on cards.
• Textile texture band — full-width folded-cotton texture band in warm oat tones separating the services section from the testimonials, with the section heading set in Work Sans medium reversed out in sage on the band.
• Testimonials — family statements about the service.
• Footer — repeats the wordmark, the contact route, and the phone/WhatsApp channel.

States.

• Loading — the hero photograph panel fades and lifts 16px on load; text content renders immediately and is never blocked by the image.
• Empty — not applicable; all Landing content is static published service information.
• Success — the visitor reads the service explanation and reaches Contact through the hero CTA, the secondary text link, the header, or the footer.
• Error — if the hero photograph fails to load, the rounded panel area retains its oat/sage-tinted ground and the headline, subline, CTA, and text link remain fully readable and operable.
• Recovery — the visitor can still reach Contact through the header, footer, and text link regardless of any image failure.

Contact

Information and state. The Contact page is the anonymous public inquiry destination. It presents a plain inquiry form and a sage-filled "Call or WhatsApp" card, and it holds the visitor's in-progress form input until submission. It holds no account state and no persisted visitor profile.

Primary actions.

• Complete the inquiry form fields and submit the inquiry.
• Use the "Call or WhatsApp" card to reach the agency by phone or WhatsApp.

Supporting actions.

• Read the agency's contact details and availability.
• Correct and resubmit after a validation or submission failure.

Domain entities.

• Inquiry — a submitted contact request from a visitor, carrying the visitor's name, contact details, and message.
• Contact channel — the agency's phone number and WhatsApp contact.

Component responsibilities.

• Inquiry form — plain form on the left column, collecting the visitor's name, contact details, and message; submits the inquiry to the agency.
• "Call or WhatsApp" card — sage-filled card on the right column, carrying the phone and WhatsApp contact; stays pinned at the top of the right column on scroll at 1280px and stacks below the form at 375px.
• Validation and confirmation region — reports field-level validation problems and confirms successful submission in place.

States.

• Loading — the submit control shows an in-progress state while the inquiry is being sent; the form fields remain visible and the visitor's input is preserved.
• Empty — the form renders with empty fields and the "Call or WhatsApp" card is immediately usable.
• Success — the page confirms that the inquiry was sent and tells the visitor the agency will respond through the contact details provided; the phone/WhatsApp card remains available as an immediate alternative.
• Error — missing or malformed required fields are reported against the specific field; a failed submission reports the failure in place and preserves everything the visitor typed.
• Recovery — the visitor corrects the flagged fields and resubmits, or abandons the form and uses the "Call or WhatsApp" card instead; no input is lost on a failed submission.

3. Functional Requirements

FR-1 — Present the Kaushalya Homecare Service to visitors (explicit) As a Prospective Client or Family Caregiver, I should be able to open the public Landing page and understand what Kaushalya Homecare Service is and what it offers, so that I can decide whether it fits my family's situation.

• Trigger/input: the visitor opens the Landing page anonymously.
• Observable result: the page presents the Kaushalya Homecare wordmark, the headline "Care that comes home.", a subline describing the service, and the service explanation.
• Access state: public, anonymous, no sign-in.
• Failure/recovery: if the hero photograph fails to load, the text content remains fully readable and the page remains usable.
• Continuation: the visitor reads further into the care types, the visit steps, and the caregiver cards, or moves to Contact.

FR-2 — Explain the available care types (explicit) As a Prospective Client or Family Caregiver, I should be able to see the kinds of care Kaushalya Homecare Service provides — Elder Care, Post-Surgery, Dementia, and Companionship — and read a short description of each, so that I can tell whether the service covers my relative's needs.

• Trigger/input: the visitor taps one of the four capsule tags in the care-type selector.
• Observable result: the tapped capsule expands in place to show its two-line description, without navigating away from the Landing page.
• Access state: public, anonymous.
• Failure/recovery: if a description fails to render, the capsule label remains visible and the visitor can still reach Contact.
• Continuation: the visitor taps another capsule, or continues to the service cards and the "How a visit works" band.

FR-3 — Show how a visit works (explicit) As a Prospective Client or Family Caregiver, I should be able to read the four numbered steps of how a visit works, so that I know what to expect before I make contact.

• Trigger/input: the visitor scrolls to the "How a visit works" band on the Landing page.
• Observable result: four numbered steps are presented, connected by a thin sage arc line curving across the section.
• Access state: public, anonymous.
• Failure/recovery: the steps are static text and remain readable if decorative elements fail.
• Continuation: the visitor continues to the caregiver cards, the textile band, and the testimonials, or moves to Contact.

FR-4 — Show caregiver availability by area (explicit) As a Prospective Client or Family Caregiver, I should be able to see caregiver cards with an "available in your area" indicator, so that I have a sense of whether caregivers are available where my family lives.

• Trigger/input: the visitor views the caregiver cards on the Landing page.
• Observable result: each caregiver card shows its header and a small terracotta "available in your area" dot in the top corner.
• Access state: public, anonymous.
• Failure/recovery: if the availability indicator is absent on a card, the card's text remains fully readable.
• Continuation: the visitor moves to Contact to confirm availability for their specific area.

FR-5 — Read what other families say (explicit) As a Prospective Client or Family Caregiver, I should be able to read testimonials from families who have used Kaushalya Homecare Service, so that I can judge the service on other people's experience.

• Trigger/input: the visitor scrolls to the testimonials section, introduced by the textile texture band.
• Observable result: testimonial statements are presented with the section heading set in Work Sans medium reversed out in sage on the band.
• Access state: public, anonymous.
• Failure/recovery: testimonials are static text and remain readable if the texture band fails to load.
• Continuation: the visitor moves to Contact.

FR-6 — Reach the agency from the Landing page (explicit) As a Prospective Client or Family Caregiver, I should be able to move from the Landing page to the Contact page using the primary pill call-to-action, the secondary "Talk to a care advisor" text link, the header, or the footer, so that I can act the moment I decide to inquire.

• Trigger/input: the visitor activates the sage pill CTA, the "Talk to a care advisor" text link, the header navigation, or the footer contact route.
• Observable result: the Contact page opens.
• Access state: public, anonymous; no sign-in is required to reach Contact.
• Failure/recovery: if one route is unavailable, the remaining routes still reach Contact.
• Continuation: the visitor completes the inquiry form or uses the "Call or WhatsApp" card.

FR-7 — Submit an inquiry to the agency (explicit) As a Prospective Client or Family Caregiver, I should be able to complete the inquiry form on the Contact page and submit it, so that Kaushalya Homecare Service receives my request and can respond to me.

• Trigger/input: the visitor fills in the form fields — name, contact details, and message — and submits.
• Observable result: the page confirms that the inquiry was sent, and the agency receives the inquiry with the visitor's name, contact details, and message.
• Access state: public, anonymous; no account is created and no sign-in is required.
• Failure/recovery: missing or malformed required fields are reported against the specific field; a failed submission is reported in place and preserves everything the visitor typed, so the visitor can correct and resubmit.
• Continuation: the visitor sees the confirmation and may additionally use the "Call or WhatsApp" card for an immediate response.

FR-8 — Call or message the agency directly (explicit) As a Prospective Client or Family Caregiver, I should be able to use the "Call or WhatsApp" card on the Contact page to reach the agency by phone or WhatsApp, so that I can speak to someone immediately instead of waiting for a form response.

• Trigger/input: the visitor activates the phone or WhatsApp contact on the card.
• Observable result: the visitor's device opens the phone dialer or WhatsApp with the agency's contact details.
• Access state: public, anonymous.
• Failure/recovery: if the device cannot open the dialer or WhatsApp, the phone number and contact details remain visible on the card so the visitor can use them manually.
• Continuation: the visitor speaks with the agency and, if needed, returns to the form.

FR-9 — Keep contact options reachable while reading the form (explicit) As a Prospective Client or Family Caregiver, I should be able to see the "Call or WhatsApp" card while I am filling in the inquiry form, so that I can switch to calling at any point.

• Trigger/input: the visitor scrolls the Contact page at 1280px.
• Observable result: the sage-filled "Call or WhatsApp" card stays pinned at the top of the right column while the form scrolls on the left; at 375px the card stacks below the form.
• Access state: public, anonymous.
• Failure/recovery: if pinning is unavailable, the card remains present in the page flow and fully usable.
• Continuation: the visitor calls, messages, or continues with the form.

FR-10 — Maintain the published service information (explicit) As Homecare Service Provider / Agency Staff, I should be able to have the service information shown to visitors — the service description, the four care types and their descriptions, the four visit steps, the caregiver cards and their area availability, and the testimonials — accurately represent Kaushalya Homecare Service, so that prospective clients and family caregivers see a truthful picture of what the agency provides.

• Trigger/input: the agency's service offering, care types, visit process, caregiver availability, and testimonials.
• Observable result: the Landing page presents the agency's current service information to every visitor.
• Access state: the published information is publicly visible; the agency's own maintenance of that information is not a visitor-facing capability of this website.
• Failure/recovery: if published information is out of date, the visitor can still reach the agency through Contact and confirm details directly.
• Continuation: the agency's published information drives visitor inquiries into the Contact page.

FR-11 — Receive and respond to incoming inquiries (explicit) As Homecare Service Provider / Agency Staff, I should be able to receive the inquiries visitors submit through the Contact page, including the visitor's name, contact details, and message, so that I can respond to each prospective client or family caregiver.

• Trigger/input: a visitor submits the inquiry form on the Contact page.
• Observable result: the agency receives the inquiry with the visitor's name, contact details, and message, and the visitor sees a confirmation that it was sent.
• Access state: the agency's receipt and handling of inquiries is not a visitor-facing capability of this website; the visitor's submission is anonymous and requires no account.
• Failure/recovery: if a submission fails, the visitor is told in place and can resubmit or call; the agency is not left with a partial inquiry presented as complete.
• Continuation: the agency responds to the visitor through the contact details the visitor provided.

FR-12 — Reach the agency by phone or WhatsApp as a published channel (explicit) As Homecare Service Provider / Agency Staff, I should be able to publish the agency's phone number and WhatsApp contact on the Contact page, so that visitors who prefer to speak to someone can reach the agency directly.

• Trigger/input: the agency's phone and WhatsApp contact details.
• Observable result: the "Call or WhatsApp" card on the Contact page presents the agency's phone and WhatsApp contact to every visitor.
• Access state: public, anonymous.
• Failure/recovery: if the contact details are unavailable, the inquiry form remains as the alternative route.
• Continuation: the visitor calls or messages the agency and the agency responds.

4. User Personas

Prospective Client or Family Caregiver

Product context. This person is either an elder arranging care for themselves or, more often, an adult child researching homecare for an ageing parent. They arrive at the site from a search result, a referral, or a link shared in a family group. They are usually anxious, often time-pressured, and frequently making the decision alongside siblings or a spouse. They are not evaluating software; they are evaluating whether a stranger can be trusted in their parent's home.

Primary goal. Understand quickly and concretely what Kaushalya Homecare Service provides, whether it covers the kind of care their relative needs, and how to reach a human being who can answer the rest.

Distinct accepted responsibilities.

• Reading and interpreting the service explanation on the Landing page (FR-1).
• Determining whether the offered care types — Elder Care, Post-Surgery, Dementia, Companionship — match their relative's situation, by expanding the care-type capsules (FR-2).
• Understanding what actually happens during a visit, from the four numbered steps (FR-3).
• Judging whether caregivers are available in their area from the caregiver cards' availability indicator (FR-4).
• Weighing other families' testimonials (FR-5).
• Deciding to make contact and choosing the route: the hero CTA, the "Talk to a care advisor" text link, the header, or the footer (FR-6).
• Composing and submitting an inquiry with their name, contact details, and message (FR-7).
• Choosing to call or WhatsApp the agency instead of, or in addition to, submitting the form (FR-8), and keeping that option visible while filling in the form (FR-9).

Relevant inputs and decisions. The care type that matches their relative's condition; the area they need coverage in; whether the visit process matches their expectations; whether to write a message or speak to someone directly; what contact details to leave and how quickly they need a response.

Interactions with other accepted participants. This persona's actions are the sole source of the inquiries that the Homecare Service Provider / Agency Staff receives. The handoff is one-directional and asynchronous: the visitor submits the inquiry or places the call, and the agency responds through the contact details the visitor supplied. The visitor never sees the agency's internal handling, and the agency never sees anything the visitor did not submit.

Observable success. The visitor has read enough to make a judgement, has reached the Contact page without obstruction, and has either seen a confirmation that their inquiry was sent or has an open phone/WhatsApp conversation with the agency.

Homecare Service Provider / Agency Staff

Product context. This person operates Kaushalya Homecare Service. They know the service intimately — the care types offered, how a visit is conducted, which caregivers cover which areas, and what families have said. They are not web specialists, and they need the site to be a faithful, low-maintenance representation of the agency rather than a system they must administer.

Primary goal. Have a published website that accurately represents Kaushalya Homecare Service to prospective clients and family caregivers, and that reliably channels incoming inquiries to the agency.

Distinct accepted responsibilities.

• Ensuring the published service information — the service description, the four care types and their descriptions, the four visit steps, the caregiver cards and their area availability, and the testimonials — truthfully represents what the agency provides (FR-10).
• Receiving the inquiries visitors submit, with the visitor's name, contact details, and message, and responding to each one (FR-11).
• Publishing the agency's phone number and WhatsApp contact so visitors who prefer to speak can reach the agency directly (FR-12).

Relevant inputs and decisions. The current service offering and care types; the current visit process; which caregivers are available in which areas; which testimonials to publish; the agency's phone and WhatsApp contact details; how quickly and through which channel to respond to each inquiry.

Interactions with other accepted participants. The agency's published information is what the Prospective Client or Family Caregiver reads and acts on. Every inquiry the agency receives originates from a visitor's decision on the Landing or Contact page. The agency's response happens outside the website, through the contact details the visitor provided.

Observable success. The site presents the agency's service accurately, and inquiries arrive with enough information — name, contact details, and message — for the agency to respond to each prospective client or family caregiver.

5. Core User Flows

Flow 1 — A family caregiver evaluates the service and sends an inquiry

1. Starting context. An adult child is researching homecare for an ageing parent. They open the Kaushalya Homecare Service website anonymously from a search result. No account, no sign-in.
2. Landing — first impression. The Landing page loads on the warm oat ground. The hero photograph panel fades and lifts 16px into place. The visitor reads the Kaushalya Homecare wordmark in sage small caps, the Work Sans headline "Care that comes home." with its single terracotta-underlined phrase, and the Karla subline at a 68ch measure.
3. Landing — matching care type. The visitor taps the "Dementia" capsule tag. It expands in place to a two-line description of dementia care. They tap "Post-Surgery" and read that description too. Nothing navigates away; the visitor stays in the same reading position.
4. Landing — understanding the visit. The visitor scrolls to the "How a visit works" band and reads the four numbered steps connected by the thin sage arc line, forming a picture of what a visit actually involves.
5. Landing — checking availability. The visitor scans the caregiver cards. One card carries the small terracotta "available in your area" dot in its top corner. The visitor notes that coverage looks plausible for their area but wants to confirm it for their specific locality.
6. Landing — weighing experience. The visitor passes the full-width folded-cotton textile band, where the section heading is reversed out in sage, and reads the testimonials from other families.
7. Landing — deciding to act. The visitor activates the sage pill call-to-action in the hero. The Contact page opens.
8. Contact — choosing a route. On the Contact page the visitor sees the plain inquiry form on the left and the sage-filled "Call or WhatsApp" card on the right. They decide to write a message first, because they want to describe their parent's situation in detail.
9. Contact — composing the inquiry. The visitor fills in their name, contact details, and a message describing their parent's condition and the area they need coverage in.
10. Contact — submission failure and recovery. The visitor submits without a valid contact detail. The page reports the problem against that specific field and preserves everything they typed. The visitor corrects the field and resubmits.
11. Contact — observable result. The page confirms that the inquiry was sent and tells the visitor the agency will respond through the contact details provided. The "Call or WhatsApp" card remains visible beside the form.
12. Continuation. The visitor, still anxious about timing, activates the WhatsApp contact on the card. WhatsApp opens with the agency's contact details. The visitor sends a short message. The agency receives both the form inquiry and the WhatsApp message and responds through the channels the visitor supplied.

Flow 2 — An elder calls the agency directly

1. Starting context. An elder has been given the website address by their son. They open the Landing page anonymously on a phone at 375px width.
2. Landing — reading. The hero photograph panel appears as a full-width rounded image below the headline. The elder reads the headline, the subline, and the service explanation in the single-column 68ch measure.
3. Landing — checking the care type. The elder taps the "Elder Care" capsule tag and reads its two-line description in place.
4. Landing — moving to contact. The elder taps the "Talk to a care advisor" text link. The Contact page opens.
5. Contact — choosing to call. The elder does not want to type a message. The "Call or WhatsApp" card has stacked below the form at this viewport width. The elder activates the phone contact.
6. Observable result. The device opens the phone dialer with the agency's number.
7. Continuation. The elder speaks with the agency directly and arranges the next step by voice. No inquiry form is submitted, and none is required.

Flow 3 — The agency publishes and maintains the service information

1. Starting context. Kaushalya Homecare Service has a current offering: four care types with descriptions, a four-step visit process, caregiver coverage by area, and a set of family testimonials.
2. Agency action. The agency ensures the published Landing page reflects that offering — the service description, the four care-type capsules and their two-line descriptions, the four numbered visit steps, the caregiver cards with their area availability indicators, and the testimonials.
3. Observable result. Every visitor to the Landing page sees the agency's current service information, presented in the warm oat and sage visual language.
4. Continuation. The published information drives visitors into the Contact page.

Flow 4 — The agency receives and responds to an inquiry

1. Starting context. A visitor has submitted the inquiry form on the Contact page, or has called or messaged the agency through the "Call or WhatsApp" card.
2. Agency action. The agency receives the inquiry carrying the visitor's name, contact details, and message.
3. Observable result. The agency has everything needed to respond to that specific prospective client or family caregiver.
4. Continuation. The agency responds through the contact details the visitor provided. If the visitor also called or messaged, the agency answers that channel as well.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Yves Béhar (fuseproject), and the headline idea is "Humane technology — care as a material, not a service tier." Soft forms wrapped around serious competence; wellbeing first; warm materials instead of sterile white. The emotional register is trust, dignity, and relief — a calm, capable hand on the shoulder, not clinical coldness and not childish warmth.

Colour tokens — light mode

No blue anywhere. No #2563EB, #4F46E5, #6366F1, and no medical blue of any kind. The generic indigo/blue-on-white SaaS template is forbidden for this project.

Typography

• Headings: Work Sans, weights 500–600, tight tracking -0.02em, sentence case, generous line-height on long headlines. Headlines are large but never shouty — they sit like a printed care manual, not a billboard.
• Body: Karla.
• Scale: 1.333 modular — 56 / 40 / 28 / 18 / 16.
  • Hero line: clamp(2.4rem, 6vw, 3.5rem)
  • Section headings: clamp(1.75rem, 4vw, 2.5rem)
  • Body: 18px
  • UI: 16px
• Forbidden typefaces: Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui for headings or body.

Shape language

Soft continuous curves: 20–28px radii on cards and buttons, pill-shaped CTAs, capsule tags for care types. Section boundaries are gentle arcs rather than hard rules. No sharp corners anywhere except the thin 1px divider lines that separate care categories.

Spacing rhythm

Single-column reading measure of max 68ch for the care explanation, breaking into a 3-up card row for the service types. Generous vertical breathing room between sections; the textile band provides a full-width pause between services and testimonials.

Imagery style

Natural-light photography of real Indian homes and caregivers — a hand helping an elder stand, a chai tray on a side table, a caregiver reading with an older person. Warm, slightly desaturated, film-like. No stock-photo grins, no hospital corridors, no 3D blobs. One textile detail — a folded cotton blanket — recurs as a texture band between sections.

Shadow

Caregiver cards and lifted cards use a soft offset shadow: 0 8px 24px rgba(63,90,78,0.10). The hero photograph sits on a sage-tinted shadow, not a gradient.

7. Signature Design Concept

The first screen is a warm oat room, not a landing page.

At 1280px, the viewport is divided asymmetrically. The left 55% is the reading side: the Kaushalya Homecare wordmark in sage small caps at the top, then a 9-column Work Sans headline at clamp(2.4rem, 6vw, 3.5rem) reading "Care that comes home." with a single terracotta-underlined phrase, then a 68ch subline in Karla, then a pill CTA in sage and a secondary text link reading "Talk to a care advisor."

The right 45% is a large rounded photograph panel — 28px radius, cropped to a tall 4:5 ratio — of a caregiver and an elder in a sunlit room. The panel bleeds slightly off the right viewport edge at 1280px, so the room appears to continue past the screen. It sits on a sage-tinted shadow, not a gradient. There is no centred stack, no blue button, no blob.

Directly beneath the hero, the care-type selector runs as four capsule tags in a row — Elder Care, Post-Surgery, Dementia, Companionship — each expanding in place to a two-line description when tapped, rather than linking away. This is the signature move: the visitor interrogates the service without ever leaving the page they are reading.

The concept recomposes only accepted content and controls. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

The tempo is copied from the creative direction: breathing, slow easing — 400–600ms with cubic-bezier(0.22, 1, 0.36, 1). Nothing bounces, nothing loops. The pace is that of a household, not a startup.

Landing Hero Motion Brief

• Focal subject. The rounded photograph panel of a caregiver and elder in a sunlit room, occupying the right 45% of the first screen and bleeding off the right viewport edge at 1280px.
• Input → transformation → outcome thesis. On load, the hero photograph panel fades in and lifts 16px into its resting position while the headline, subline, CTA, and text link are already present and readable. The visitor's first frame is a composed room; the motion completes the composition rather than announcing it. No accepted behavior is added — the panel simply arrives.
• Motion vocabulary. One purposeful reveal only: fade plus a 16px lift on the hero photograph panel, 400–600ms, cubic-bezier(0.22, 1, 0.36, 1). Care cards lift 4px on hover with a soft shadow bloom. The care-type capsules expand in place to their two-line descriptions. The "How a visit works" band's thin sage arc line curves across the section as a static drawn element, not an animated one.
• Composed first frame. Warm oat #F7F3EC ground with no gradient. Wordmark in sage small caps top-left. Headline "Care that comes home." with one terracotta-underlined phrase. Karla subline at 68ch. Sage pill CTA and the "Talk to a care advisor" text link. The rounded photograph panel on the right, on its sage-tinted shadow.
• Reduced-motion state. With prefers-reduced-motion, all transitions become instant and the hero panel appears static in its final position. The care cards do not lift on hover. The capsules still expand in place, instantly. Every headline, wordmark, label, number, card text, and control remains whole and readable at 375px, 768px, and 1280px.

9. Non-Functional Requirements

NFR-1 — Readable text and controls stay whole at every viewport (explicit) Headlines, wordmarks, labels, numbers, cards' text, and controls must 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. No other element may cover any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the creative direction asks, as long as they cover no readable text or control. Where a direction or brief asks readable text or a control to be cropped, clipped, covered, or run off an edge, the text or control stays whole and the gesture is carried by imagery or decoration instead. This rule takes precedence for readable text and controls.

NFR-2 — Responsive layout breakpoints (explicit) At 1280px the hero is the asymmetric two-part composition with the photograph panel bleeding off the right edge, and the Contact page is a two-column pair with the "Call or WhatsApp" card pinned at the top of the right column on scroll. At 768px the hero photograph drops below the headline. At 375px the hero photograph becomes a full-width rounded image and the Contact page collapses to a stack with the card below the form.

NFR-3 — Reduced motion (explicit) With prefers-reduced-motion, all transitions become instant and the hero panel appears static. No auto-playing carousels and no looping decorative motion exist anywhere in the product.

NFR-4 — Palette and typography fidelity (explicit) The palette is exactly the six light-mode tokens in Section 6. No blue or indigo appears anywhere. Headings use Work Sans and body uses Karla; the forbidden typefaces listed in Section 6 are not used for headings or body.

NFR-5 — Anonymous public access (explicit) Both the Landing and Contact pages are reachable without an account, sign-in, invitation, or provisioning step. No identity establishment is required for any accepted journey.

NFR-6 — Inquiry input preservation (required_inference) A failed inquiry submission must not discard what the visitor typed. The visitor must be able to correct the flagged field and resubmit without re-entering their name, contact details, and message. This is required for the accepted recovery path in FR-7 to be usable.

NFR-7 — Inquiry delivery integrity (required_inference) A submission that fails must not be presented to the visitor as sent, and must not be presented to the agency as a complete inquiry. The visitor's confirmation and the agency's receipt must agree on whether the inquiry was delivered. This is required for FR-7 and FR-11 to be truthful.

NFR-8 — Contact channel availability (required_inference) The phone and WhatsApp contact details on the Contact page must remain visible and usable even when the inquiry form is in an error state, so that the visitor always has a working route to the agency. This is required for the recovery paths in FR-7, FR-8, and FR-9 to be usable.

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for a two-page public website with a form submission and a published contact channel.

• Frontend: React, with the Landing and Contact pages as the two routes. [Default — not specified by user]
• Styling: CSS with the Section 6 tokens expressed as custom properties; clamp() for the type scale; prefers-reduced-motion media query for the reduced-motion state. [Default — not specified by user]
• Backend: Python with FastAPI, serving the inquiry submission endpoint that receives the visitor's name, contact details, and message and delivers it to the agency. [Default — not specified by user]
• Storage: A relational database for received inquiries, so the agency has a durable record of each inquiry with the visitor's name, contact details, and message. [Default — not specified by user]
• Packaging and deployment: Docker with docker-compose for local and single-host deployment. Kubernetes is not required for a two-page public website at this scope. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions.

• A-1. The agency's phone number and WhatsApp contact are available to be published on the Contact page. Without them, FR-8, FR-9, and FR-12 cannot be satisfied. (Assumption — narrow, required by FR-8/FR-9/FR-12.)
• A-2. The agency supplies the service description, the four care types and their two-line descriptions, the four visit steps, the caregiver cards with their area availability, and the testimonials that appear on the Landing page. (Assumption — narrow, required by FR-1 through FR-5 and FR-10.)
• A-3. The agency responds to inquiries outside the website, through the contact details the visitor provided. The website's responsibility ends at delivering the inquiry and confirming delivery to the visitor. (Assumption — narrow, required by FR-7 and FR-11.)
• A-4. The inquiry form collects the visitor's name, contact details, and message. These are the fields the agency needs to respond. (Assumption — narrow, required by FR-7 and FR-11.)

Constraints.

• C-1. Both pages are public and anonymous. No account creation, sign-in, invitation, or provisioning exists in the current scope. (Explicit — Planning Scope access contract.)
• C-2. No blue or indigo appears anywhere in the palette. No #2563EB, #4F46E5, #6366F1, and no medical blue. The generic indigo/blue-on-white SaaS template is forbidden. (Explicit — creative direction.)
• C-3. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are not used for headings or body. (Explicit — creative direction.)
• C-4. No gradient-blob heroes, abstract mesh backgrounds, clinical white-and-blue hospital aesthetics, stock photography of grinning doctors, childish cartoon characters or playful mascots, sharp-cornered cards, hard rules, dense dashboard-style layouts, auto-playing carousels, or looping decorative motion. (Explicit — creative direction.)
• C-5. No grid of identical hover-lift cards with no hierarchy. (Explicit — creative direction.)
• C-6. The current scope is exactly two pages: Landing and Contact. No scheduling, caregiver matching, client records, payments, authenticated portal, caregiver directory, or marketplace is built. (Explicit — Planning Scope page contract and delivery boundary.)
• C-7. Readable text and controls stay whole at 375px, 768px, and 1280px; imagery and decoration may bleed and crop instead. (Explicit — creative direction, restated as NFR-1.)

Future considerations (not in current scope). Online booking or scheduling, a client or family portal, caregiver profiles with individual detail pages, and payment handling are plausible future directions for a homecare service, but none is accepted in the current requirement thread and none is built, referenced, or linked from the current pages.

12. Glossary

• Kaushalya Homecare Service — the home healthcare provider this website represents.
• Care type — one of the four kinds of care the service provides: Elder Care, Post-Surgery, Dementia, Companionship. Presented on the Landing page as capsule tags that expand in place to a two-line description.
• Capsule tag — the pill-shaped control in the care-type selector that expands in place rather than navigating away.
• Visit step — one of the four numbered stages in the "How a visit works" band, connected by a thin sage arc line.
• Caregiver card — a card on the Landing page carrying a caregiver header and a small terracotta "available in your area" dot in its top corner.
• Textile band — the full-width folded-cotton texture band in warm oat tones separating the services section from the testimonials, with its section heading reversed out in sage.
• Inquiry — a contact request submitted by a visitor through the Contact page form, carrying the visitor's name, contact details, and message.
• Contact channel — the agency's published phone number and WhatsApp contact, presented on the "Call or WhatsApp" card.
• "Call or WhatsApp" card — the sage-filled card on the Contact page carrying the agency's phone and WhatsApp contact; pinned at the top of the right column at 1280px and stacked below the form at 375px.
• Prospective Client or Family Caregiver — the accepted active human persona who evaluates the service and initiates contact.
• Homecare Service Provider / Agency Staff — the accepted active human persona who maintains the published service information and responds to incoming inquiries.
• Warm oat ground — the #F7F3EC background carrying the whole page.
• Deep sage — the #3F5A4E trust colour used for the wordmark, primary buttons, caregiver card headers, the arc line, and the reversed-out band heading.
• Terracotta — the #C97B4A single hot accent, reserved for the call-to-action underline and the "available now" dot, never for body text.