System Requirements Document for selfcare-girls

1. Introduction

selfcare-girls is a girls' self-care and cleanliness website. It presents guidance in which school girls wearing white hijabs and green uniforms explain how to be clean as a teenage girl. The site covers daily hygiene routines, skin and hair care, period care, and healthy habits, written and presented in a friendly, age-appropriate style for teenage girls.

The product is a website, not a video file: the requested "video about self-care and cleanliness in girls" is delivered as an interactive web experience whose content is the school-girl guidance itself, presented through illustrated characters in white hijabs and green uniforms.

The audience is teenage schoolgirls who want to learn how to stay clean and practice self-care, and who relate to the presented scenario of school girls in white hijabs and green uniforms. The site is public and requires no account: a visitor can read all guidance immediately.

2. System Overview

2a. Product Interpretation and Delivery Boundary

selfcare-girls is a first-party, publicly readable website. All accepted content — the school-girl guidance on daily hygiene routines, skin and hair care, period care, and healthy habits — is available anonymously. There is no sign-in, no account creation, no personal profile, and no stored user data in the accepted scope; the site is a read-only educational surface.

Delivery is split into two accepted destinations:

• Landing — the anonymous public entry that introduces the site, presents the school-girl characters in white hijabs and green uniforms, and routes visitors into the topic guidance.
• Topics — the browsable topic sections where the actual cleanliness and self-care guidance lives, organized as Daily hygiene, Skin & hair, Period care, and Healthy habits, plus the numbered "My routine" habit strip.

The provisioned backend (FastAPI) and database (MariaDB) exist as infrastructure. Because the accepted scope contains no user-authored, user-owned, or persisted per-visitor state, no domain entities, authentication, or personal data storage are introduced by this document. The backend serves the site's content and the frontend renders it; the database is available infrastructure and is not used to justify any new capability.

Nothing in the accepted scope is deferred to a future horizon; the current and future boundary is identical: the two public pages described here.

2b. Source Content Inventory

Not applicable — no reference directive with content_source was supplied.

2c. Page Content and Component Coverage

Landing

Information and state

• Full-bleed forest-green (#1E7A4C) hero block filling the first screen.
• Oversized Sora headline "Clean feels like you." set flush-left in cream, clamp(40px, 8vw, 96px), across 8 of 12 columns.
• Thin cream hairline rule with a small "For girls, by girls" caps label anchored top-left.
• A cream pill CTA in forest-green text and a coral text link beneath the headline.
• A large arch-framed illustration of a schoolgirl in a white hijab and green uniform on the right third, cropped by the arch edge and bleeding slightly off the right viewport edge — decoration only, never covering the headline or CTA.
• A cream editorial intro section with an arch-framed character and a short welcome explaining what the site is.
• A closing coral CTA band with a repeating cream marquee of short affirmations ("wash · hydrate · rest · repeat") that pauses on hover.

Primary actions

• Activate the cream pill CTA to enter the topic guidance (Topics).
• Activate the coral text link to enter the topic guidance (Topics).
• Activate the closing coral CTA band to enter the topic guidance (Topics).

Supporting actions

• Read the editorial intro.
• Observe the hero character illustration and affirmation marquee (decorative).

Domain entities

• Site introduction copy; hero headline and label; character illustration; affirmation phrases. No user-owned entities.

Component responsibilities

• Hero block: renders headline, hairline rule, caps label, CTA pill, coral link, and arch-framed character; keeps all readable text and controls whole at 375px, 768px, and 1280px.
• Editorial intro: arch-framed character plus welcome copy.
• Coral CTA band: repeating affirmation marquee that pauses on hover and becomes a static, fully readable arrangement under prefers-reduced-motion.

States

• Loading: static content; no data-dependent loading state required.
• Empty: not applicable (fixed editorial content).
• Success: page renders fully; CTA and link navigate to Topics.
• Error: if a navigation target is unavailable, the visitor remains on Landing and can retry the CTA/link.
• Recovery: reduced-motion users receive a static marquee arrangement with every affirmation readable.

Topics

Information and state

• A two-column topic grid of chunky cards: Daily hygiene, Skin & hair, Period care, Healthy habits, each with a 6px coloured top stripe (green, coral, mustard, sage) and a 3px offset forest-green shadow.
• Each topic card presents friendly, age-appropriate guidance explained in the voice of school girls wearing white hijabs and green uniforms.
• A numbered "My routine" horizontal strip of seven habit cards, each anchored by an oversized tabular numeral, scrolling with snap points.
• Arch-shaped character frames with coral dot sticker badges overlapping frame corners.
• Supporting spot icons (droplet, leaf, sun, moon) in forest green and coral on cream.

Primary actions

• Read the guidance within each of the four topic cards.
• Scroll the "My routine" strip horizontally through its seven habit cards.

Supporting actions

• Hover a topic card to lift it 4px and widen its top stripe to 12px.
• Return to Landing via site navigation.

Domain entities

• Four topic sections (Daily hygiene, Skin & hair, Period care, Healthy habits) with their guidance text; seven numbered routine habits; character illustrations and spot icons.

Component responsibilities

• Topic grid: renders four chunky cards with coloured top stripes, offset shadows, and hover lift/stripe-widen; every card's text and controls stay whole inside the viewport and container at 375px, 768px, and 1280px.
• Routine strip: horizontally scrollable, snap-pointed row of seven numbered habit cards; under prefers-reduced-motion becomes a scrollable list with no transforms, each item fully readable when brought into view.
• Character frames: arch-shaped illustration containers with coral dot sticker badges.

States

• Loading: static content; no data-dependent loading state required.
• Empty: not applicable (fixed editorial content).
• Success: all four topics and seven routine habits are readable.
• Error: if content fails to render, the visitor can reload the page; no partial-state data loss occurs because nothing is user-authored.
• Recovery: reduced-motion users can scroll the routine strip to bring each habit fully into view.

3. Functional Requirements

FR-1 — Public entry introduces the site (explicit) As a teenage schoolgirl, I should land on a public page that explains what the self-care and cleanliness site is, so that I understand what guidance is available before I start reading.

• Trigger: visitor opens the site.
• Observable result: the Landing page renders the hero headline "Clean feels like you.", the "For girls, by girls" label, the editorial intro, and a CTA into the topic guidance.
• Access: anonymous, no account.
• Failure/recovery: if the CTA target is unavailable, the visitor stays on Landing and can retry.
• Continuation: activating the CTA or coral link opens Topics.

FR-2 — School-girl characters present the guidance (explicit) As a teenage schoolgirl, I should see school girls wearing white hijabs and green uniforms explaining how to be clean as a teenage girl, so that the guidance feels relatable and addressed to me.

• Trigger: visitor views Landing and Topics.
• Observable result: arch-framed illustrations of schoolgirls in white hijabs and green uniforms appear on Landing and within Topics, and the guidance is voiced as their explanation.
• Access: anonymous.
• Failure/recovery: if an illustration fails to load, the surrounding text guidance remains fully readable.
• Continuation: the visitor reads the guidance.

FR-3 — Browse daily hygiene guidance (explicit) As a teenage schoolgirl, I should read friendly, age-appropriate guidance on daily hygiene routines, so that I know how to stay clean day to day.

• Trigger: visitor opens Topics and reads the Daily hygiene card.
• Observable result: the Daily hygiene guidance is displayed in full.
• Access: anonymous.
• Failure/recovery: if content fails to render, the visitor can reload; no user data is lost.
• Continuation: the visitor moves to another topic or the routine strip.

FR-4 — Browse skin and hair care guidance (explicit) As a teenage schoolgirl, I should read friendly, age-appropriate guidance on skin and hair care, so that I can care for my skin and hair.

• Trigger: visitor reads the Skin & hair card in Topics.
• Observable result: the Skin & hair guidance is displayed in full.
• Access: anonymous.
• Failure/recovery: reload on render failure.
• Continuation: the visitor moves to another topic or the routine strip.

FR-5 — Browse period care guidance (explicit) As a teenage schoolgirl, I should read friendly, age-appropriate guidance on period care, so that I understand how to care for myself during my period.

• Trigger: visitor reads the Period care card in Topics.
• Observable result: the Period care guidance is displayed in full.
• Access: anonymous.
• Failure/recovery: reload on render failure.
• Continuation: the visitor moves to another topic or the routine strip.

FR-6 — Browse healthy habits guidance (explicit) As a teenage schoolgirl, I should read friendly, age-appropriate guidance on healthy habits, so that I can build supportive daily habits.

• Trigger: visitor reads the Healthy habits card in Topics.
• Observable result: the Healthy habits guidance is displayed in full.
• Access: anonymous.
• Failure/recovery: reload on render failure.
• Continuation: the visitor moves to another topic or the routine strip.

FR-7 — Follow the numbered "My routine" habit strip (explicit) As a teenage schoolgirl, I should see a numbered strip of seven habit cards that I can scroll through, so that I can follow a simple ordered routine.

• Trigger: visitor reaches the routine strip in Topics and scrolls it horizontally.
• Observable result: seven numbered habit cards, each anchored by an oversized tabular numeral, become fully readable as they are scrolled into view with snap points.
• Access: anonymous.
• Failure/recovery: under prefers-reduced-motion, the strip becomes a scrollable list with no transforms, and each habit can still be brought fully into view.
• Continuation: the visitor returns to a topic or back to Landing.

FR-8 — Friendly, age-appropriate tone throughout (explicit constraint) As a teenage schoolgirl, I should experience all content in a warm, sisterly, encouraging, modest tone that is age-appropriate, so that the site feels safe and supportive.

• Trigger: any page view.
• Observable result: copy and presentation follow the warm, encouraging, non-clinical register; no clinical or cold medical iconography is used.
• Access: anonymous.
• Failure/recovery: not applicable (content constraint).
• Continuation: not applicable.

4. User Personas

Teenage schoolgirl

Product context. She is a teenage girl who wants to learn how to stay clean and practice self-care. She relates directly to the presented scenario of school girls in white hijabs and green uniforms, and the site speaks to her in that same voice — warm, sisterly, encouraging, and modest.

Primary goal. To understand and be able to follow age-appropriate cleanliness and self-care practices: daily hygiene routines, skin and hair care, period care, and healthy habits.

Distinct accepted responsibilities.

• Arrives at the public Landing page and decides whether the site is for her.
• Enters Topics and reads the four topic sections.
• Scrolls the numbered "My routine" strip to learn an ordered set of seven habits.
• Applies what she has read to her own daily habits.

Relevant inputs and decisions. Which topic she reads first; whether she scrolls the routine strip; whether she returns to Landing or another topic.

Interactions with other accepted participants. None beyond the site itself — the school-girl characters are presented content, not interactive participants, and no other human actor is in the accepted scope.

Observable success. She has read the guidance and can describe and follow the cleanliness and self-care practices it presents.

5. Core User Flows

Flow A — First visit and orientation (Teenage schoolgirl)

1. The teenage schoolgirl opens the site anonymously and lands on Landing.
2. She sees the full-bleed forest-green hero with the headline "Clean feels like you.", the "For girls, by girls" label, and the arch-framed illustration of a schoolgirl in a white hijab and green uniform.
3. She reads the cream editorial intro explaining what the site offers.
4. She activates the cream pill CTA (or the coral text link, or the closing coral CTA band).
5. Observable result: she arrives at Topics.
6. Failure/recovery: if the CTA target is unavailable, she remains on Landing and can retry.
7. Continuation: she proceeds to Flow B.

Flow B — Reading the topic guidance (Teenage schoolgirl)

1. On Topics, she sees the two-column grid of four chunky cards: Daily hygiene, Skin & hair, Period care, Healthy habits, each with a coloured top stripe.
2. She reads the Daily hygiene guidance, voiced by school girls in white hijabs and green uniforms.
3. She reads the Skin & hair guidance.
4. She reads the Period care guidance.
5. She reads the Healthy habits guidance.
6. Observable result: all four topic sections are fully readable, in a friendly, age-appropriate tone.
7. Failure/recovery: if content fails to render, she reloads the page; nothing she authored is lost.
8. Continuation: she moves to Flow C or returns to Landing.

Flow C — Following the numbered routine (Teenage schoolgirl)

1. On Topics, she reaches the numbered "My routine" horizontal strip of seven habit cards.
2. She scrolls the strip horizontally; cards snap into place and each oversized numeral and habit becomes fully readable.
3. Observable result: she has read all seven numbered habits in order.
4. Failure/recovery: with prefers-reduced-motion, the strip is a scrollable list with no transforms, and she can still bring each habit fully into view.
5. Continuation: she returns to a topic card or back to Landing.

6. Visuals Colors and Theme

The creative direction is authoritative for this section.

Muse and headline. Haraldur Thorleifsson — big-hearted boldness for a girls' self-care circle. Headline: "Clean feels like you."

Colour tokens (light mode)

• Background / page ground: #F7F1E6 (cream)
• Surface: #FFFFFF (reserved for hijab-white cards and panels)
• Text: #173A2B (deep forest green)
• Primary: #1E7A4C (hero colour block and button fill)
• Accent: #F26B4E (coral — single hot accent for one CTA, underline strokes, sticker dots only; never more than ~10% of any screen)
• Muted: #8FA396 (sage — labels and secondary text)
• Hairline: #D9CDB8 (1.5px panel hairline)

Typography

• Headings: Sora, 700–800, very large, slightly tight (-0.02em), sentence case with occasional all-caps micro-labels at 12px / 0.16em tracking; headings wrap generously and never hyphenate.
• Body: Outfit.
• Scale: 1.4 modular — 88 / 64 / 44 / 28 / 20 / 17. Display clamp(40px, 8vw, 96px); section H2 clamp(30px, 5vw, 56px); card title 22px; body 17px / 1.65; label 12px caps.

Shape language. Chunky rounded rectangles (24–32px radii), pill buttons, sticker-like circular badges with a 3px offset shadow in forest green, soft cream panels with a single 1.5px hairline in #D9CDB8. Colour blocks are hard-edged and full-bleed; character illustration sits inside circular or arch-shaped frames that echo a hijab silhouette.

Layout. Colour-blocked sections stacked like chapters: full-bleed green hero, cream editorial intro with an arch-framed character, two-column topic grid (Daily hygiene / Skin & hair / Period care / Healthy habits) as chunky cards with a coloured top stripe, a horizontal "routine strip" of numbered habit cards, and a closing coral CTA band. Max width 1180px, 24px gutters on mobile, asymmetric editorial offsets on desktop (every second card nudged 32px down).

Imagery. Custom flat vector characters: three schoolgirls in white hijabs and green uniforms, drawn with rounded limbs, simple friendly faces and small props (water bottle, toothbrush, comb, calendar). Supporting spot icons — droplet, leaf, sun, moon — in forest green and coral on cream. No stock photography, no gradients, no 3D blobs.

Avoid. Blue–indigo primary on white; Inter, Roboto, Arial or system-ui for headings; gradient-blob heroes or glassmorphism; grids of identical hover-lift white cards; stock photography of anonymous teenagers; clinical or medical iconography; neon or candy-pastel palettes; any element covering headline or CTA text.

7. Signature Design Concept

The public entry is a full-bleed forest-green (#1E7A4C) block filling the first screen. The oversized Sora headline "Clean feels like you." is set flush-left in cream at clamp(40px, 8vw, 96px) across 8 of 12 columns. Beneath it sit a cream pill CTA in forest-green text and a coral text link. Dominating the right third is a large arch-framed illustration of a schoolgirl in a white hijab and green uniform, cropped by the arch edge and bleeding slightly off the right viewport edge — decoration only, never covering the headline or CTA. A thin cream hairline rule with a small "For girls, by girls" caps label anchors the top-left.

The signature gesture is the arch frame: every character illustration sits inside a rounded arch that echoes the hijab silhouette, with a coral dot sticker badge overlapping the frame corner. This recomposes only accepted content — the headline, the CTA, the label, and the school-girl character — into a single proud, warm first frame.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the arch-framed schoolgirl in a white hijab and green uniform on the right third of the forest-green hero.
• Input → transformation → outcome thesis: on page load, the character illustration pops in with a 1.05→1.0 scale and 180ms settle while the headline and CTA are already composed and readable; the outcome is a warm, complete first frame that invites the visitor to enter Topics. No accepted behaviour is added — motion only reveals the existing hero.
• Motion vocabulary: lively entrance animations only — character pop-in (1.05→1.0, 180ms settle); section headings slide up 16px on scroll into view; topic cards lift 4px and their top stripe widens on hover; the routine strip scrolls horizontally with snap points; the closing affirmation marquee scrolls and pauses on hover.
• Composed first frame: full-bleed green block, cream headline flush-left, cream pill CTA and coral link beneath, hairline rule and "For girls, by girls" label top-left, arch-framed character bleeding off the right edge.
• Reduced-motion state: all motion becomes static with no transforms; the routine strip and affirmation marquee become scrollable/static arrangements in which every item can be brought fully into view.

9. Non-Functional Requirements

• NFR-1 — Website, not a video file (explicit): the product is a website/app; it does not produce or deliver a video file. The school-girl guidance is delivered as web content.
• NFR-2 — Age-appropriate and friendly (explicit): all content must be friendly and age-appropriate for teenage girls; no clinical or cold medical register.
• NFR-3 — Anonymous public access (explicit via page contract): both Landing and Topics are publicly readable with no account, sign-in, or personal data collection.
• NFR-4 — Readable text and controls at every viewport (explicit): headlines, wordmarks, labels, numbers, card text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit; no element covers any readable text or control. Imagery and decoration may be cropped, bled, or overlapped as directed.
• NFR-5 — Reduced-motion support (explicit): all motion respects prefers-reduced-motion by becoming static with no transforms, and horizontal rows become scrollable lists in which each item can be brought fully into view.
• NFR-6 — Scrolling content integrity (explicit): marquees, tickers, and horizontally scrollable rows may cross the viewport edge by design; every item must become fully readable as it passes or is scrolled into view.
• NFR-7 — No stock photography of anonymous teenagers (explicit): imagery is custom flat vector illustration only.

10. Tech Stack

• Frontend: React application UI.
• Backend: shared FastAPI process for application APIs and domain modules (serves the site's content).
• Database: MariaDB, provisioned as application-owned persistent infrastructure. No domain entities, authentication, or personal data storage are introduced by the accepted scope; the database is available infrastructure and does not justify new capabilities.
• Containerization: Docker / docker-compose for the frontend, backend, and database services.

11. Assumptions and Constraints

• A-1 (assumption): The site's guidance content is fixed editorial content authored for the product; no visitor-authored content exists.
• A-2 (assumption): The three school-girl characters are presented content, not interactive participants; no chat, messaging, or live interaction is in scope.
• A-3 (constraint, explicit): The product is a website/app and does not produce or deliver a video file.
• A-4 (constraint, explicit): Content must be friendly and age-appropriate for teenage girls.
• A-5 (constraint, explicit): The palette, fonts, surfaces, tone, layout, and product context of the creative direction are preserved; the generic indigo/blue-on-white SaaS template is forbidden.
• A-6 (constraint, explicit): No stock photography of anonymous teenagers; custom flat vector illustration only.
• A-7 (assumption): No user accounts, profiles, or persisted per-visitor state are required; the provisioned database does not create such requirements.

12. Glossary

• Landing — the anonymous public entry page introducing the site and routing visitors to Topics.
• Topics — the browsable page containing the four topic sections and the numbered "My routine" strip.
• Topic sections — Daily hygiene, Skin & hair, Period care, and Healthy habits.
• My routine — the numbered horizontal strip of seven habit cards in Topics.
• Arch frame — the rounded arch-shaped illustration container that echoes a hijab silhouette.
• Affirmation marquee — the repeating cream text band ("wash · hydrate · rest · repeat") in the closing coral CTA band.
• School-girl characters — the illustrated girls in white hijabs and green uniforms who voice the guidance.