System Requirements Document for kids-disaster-learning

1. Introduction

kids-disaster-learning is a responsive mobile web application that teaches children disaster preparedness through short, colourful, illustrated courses and quizzes. The product intent is to make safety learning feel like a friendly adventure rather than a warning: bright and friendly colours, a clean interface, cute illustration icons, soft gradients, and a Figma-style vector UI aesthetic.

The audience is two-fold:

• Children (roughly 6–11) who browse colourful course cards such as "Earthquake Safety" and "Emergency Kit", watch their progress bar advance, and tap "Start Quiz" to test what they learned.
• Parents or guardians who guide which course the child works through and check the child's progress to confirm learning is happening.

The emotional register is reassuring and playful — never scary — while still teaching real safety behaviour. Course cards are colour-blocked fields with their own illustration, title and progress bar; the primary action is a single coral pill; progress is always visible.

2. System Overview

kids-disaster-learning is delivered as a responsive mobile web application with a first-party custom UI. It is mobile-first (single column at 375px) and opens into a wider two-column catalog and three-column progress dashboard at 1280px.

Actors

• Child Learner — the kid who browses course cards, opens a course, watches the progress bar, and starts and completes quizzes.
• Parent or Guardian — the adult who guides course choice and reviews the child's course and quiz completion progress.

Accepted behaviour

• A colourful course catalog of disaster-learning course cards, including Earthquake Safety and Emergency Kit, each with a cute illustration icon and a progress bar.
• A course detail view hosting the selected course content and its visible progress bar, with a "Start Quiz" action.
• A focused quiz journey launched from that action, recording quiz completion toward learning progress.
• A parent/guardian progress view for reviewing the child's course and quiz completion.

Ownership and access

• The application owns identity. First-use enrollment (Sign Up) and returning verification (Login) are anonymously reachable entry surfaces; the learning and progress surfaces are protected and role-aware, separating child learning activity from parent/guardian progress review.
• All current surfaces are first-party custom pages owned by the application.

Narrow exclusions

• No photography, no realistic or frightening disaster imagery (flames, collapsing buildings, frightened faces), no glassmorphism or heavy backdrop blur.
• No blue/indigo-on-white generic SaaS look; no Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui for headings or body.
• No adjacent account-management capabilities beyond first-use enrollment and returning verification.

2a. Product Interpretation and Delivery Boundary

kids-disaster-learning is a current, first-party, browser-delivered mobile web application. Everything a child or parent does — browsing courses, opening a course, taking a quiz, reviewing progress — happens in the application's own custom UI. There is no provider-owned or external-only surface in the current scope, and no headless delivery.

Access ownership. Because a child's course progress and quiz results must persist and be resumable, and because a parent must be able to review the correct child's progress, the application owns identity. The Landing page is the anonymous first impression that explains the app before identity is established. Sign Up and Login are anonymously reachable entry surfaces — a protected destination cannot own the interaction that grants access to itself. Course Catalog, Course Details, Quiz and Parent Progress are protected and role-aware: the child's learning surfaces are separated from the parent/guardian progress review.

Current vs. future. All requirements in this document are current. No future-horizon capabilities are accepted; nothing in this document should be read as committing to features beyond the course-card catalog, course detail with progress, quiz, and parent progress review.

2c. Page Content and Component Coverage

Landing

• Information/state: Anonymous first impression. Full-width cream stage with a coral blob bleeding off the right edge. Stacked headline in Baloo 2 — "Learn to be safe, one adventure at a time" — over three lines, with a short reassuring subline in Nunito. An illustrated cast (a child crouching under a table, a parent holding an emergency kit, a waving mascot) overlaps the coral blob and is cropped off the right viewport edge by design. Beneath the hero, a horizontally scrolling strip of the six course cards peeks off both edges.
• Primary actions: Coral pill CTA "Start learning" (routes to Sign Up). Secondary text link "I'm a parent" (routes to Sign Up / Login for the guardian path).
• Supporting actions: Course strip cards are readable as they pass; each shows its own cute icon, title and mini progress bar.
• Domain entities: Course (title, colour field, illustration icon, progress).
• Component responsibilities: Hero stage; coral blob decoration; headline block; subline; CTA pill; secondary text link; illustrated cast; horizontally scrolling course strip.
• States:
  • Loading: hero illustration and course strip render progressively; text is present immediately.
  • Empty: not applicable — the six course cards are fixed content.
  • Success: hero and strip render; CTA and secondary link are tappable.
  • Error: if the course strip fails to load, the hero and both entry actions remain fully usable.
  • Recovery: the strip retries on next visit; the entry actions never depend on it.
  • Reduced motion: the course strip stops scrolling and wraps into whole rows.

Sign Up

• Information/state: First-use enrollment for independently starting child learners and their parents or guardians. No invitation, provisioning, provider or pre-existing-account boundary exists, so enrollment is self-service.
• Primary actions: Create an account and choose the role context (child learner or parent/guardian).
• Supporting actions: Link across to Login for returning users.
• Domain entities: Account (identity, role context).
• Component responsibilities: Enrollment form; role selection; submit pill; cross-link to Login.
• States:
  • Loading: submit pill shows an in-progress state; inputs remain readable.
  • Empty: blank form with helper text in muted #6B6B8A.
  • Success: account created; the actor continues to Course Catalog (child) or Parent Progress (guardian).
  • Error: inline, friendly, non-alarming message identifying the field that needs attention; entered values are preserved.
  • Recovery: the actor corrects the field and resubmits without re-entering everything.

Login

• Information/state: Returning verification for both child learners and parents or guardians so durable course progress can be resumed and reviewed.
• Primary actions: Verify identity and resume.
• Supporting actions: Link across to Sign Up for first-time users.
• Domain entities: Account (identity, role context).
• Component responsibilities: Verification form; submit pill; cross-link to Sign Up.
• States:
  • Loading: submit pill shows an in-progress state.
  • Empty: blank form.
  • Success: verified; the child lands on Course Catalog, the guardian lands on Parent Progress.
  • Error: friendly, non-alarming message; entered values preserved.
  • Recovery: retry without re-entering everything.

Course Catalog

• Information/state: The colourful catalog of disaster-learning course cards. Each card is a full colour field — Earthquake Safety #FF6B4A, Emergency Kit #FFC93C, Flood Safety #6FC7B6, Fire Safety #FF8A5B, Tsunami Awareness #7FA8FF, First Aid #B49BFF — with the illustration, title and progress bar living inside the colour, not on a white card. Ink text (#20203A) or white text is chosen for contrast; never coral-on-coral.
• Primary actions: Select a course card to open Course Details.
• Supporting actions: Read each card's progress bar; scan the catalog.
• Domain entities: Course (title, colour field, illustration icon, progress bar value).
• Component responsibilities: Colour-blocked card grid; per-card illustration; per-card title; per-card progress bar; sticker-shadow treatment (0 6px 0 rgba(32,32,58,0.12)).
• States:
  • Loading: cards spring in with a small overshoot on scroll-reveal.
  • Empty: not applicable — the catalog is a fixed set of course cards.
  • Success: all cards render with their colour field, illustration, title and progress bar.
  • Error: if progress values fail to load, cards still render and remain selectable; progress bars show an indeterminate state.
  • Recovery: progress values refresh on next visit.
  • Reduced motion: cards appear instantly; no spring or overshoot.

Course Details

• Information/state: Hosts the selected course content and its visible progress bar before the learner starts a quiz. A stacked lesson list with one large Start Quiz pill pinned to the bottom of the content column.
• Primary actions: "Start Quiz" — begins the quiz for this course.
• Supporting actions: Read the lesson list; read the course progress bar.
• Domain entities: Course (title, colour field, illustration icon, progress bar value); Lesson (title, order).
• Component responsibilities: Course header with illustration and title; stacked lesson list; progress bar with mascot head travelling along the track; pinned Start Quiz pill.
• States:
  • Loading: course header and lesson list render; the Start Quiz pill is present but disabled until content is ready.
  • Empty: if a course has no lessons yet, a friendly placeholder explains the course is being prepared and the Start Quiz pill is not offered.
  • Success: lessons listed; progress bar reflects current completion; Start Quiz is tappable.
  • Error: if course content fails to load, a friendly retry affordance appears; the learner is never left on a blank screen.
  • Recovery: retry reloads the course content in place.
  • Reduced motion: the progress bar fills instantly; no eased sweep.

Quiz

• Information/state: The focused quiz journey launched from a course's Start Quiz action. Quiz answers are presented as rounded tiles (20px radius) and flip with a soft scale on selection.
• Primary actions: Answer each question; advance through the quiz; finish.
• Supporting actions: See the current question position within the quiz.
• Domain entities: Quiz (questions, answers); Quiz Result (completion, score); Course progress.
• Component responsibilities: Question tile; answer tiles; progress indicator; completion state with confetti pop and badge stamp.
• States:
  • Loading: the first question renders; answer tiles are present but not yet selectable.
  • Empty: not applicable — a quiz is only reachable from a course that offers one.
  • Success: quiz completion is recorded toward the course's learning progress; the progress bar advances; at 100% a confetti pop and badge stamp appear.
  • Error: if a submission fails, the answer is preserved and the learner can retry the submission without losing their place.
  • Recovery: retry the failed submission; the quiz position is retained.
  • Reduced motion: answer tiles flip instantly; confetti is replaced by a static badge.

Parent Progress

• Information/state: A calm, ruled table of child, course, progress bar and last activity — deliberately quieter than the kid surfaces so adults can scan it. Hairline dividers inside the table are the only sharp corners in the product.
• Primary actions: Review the child's course and quiz completion progress.
• Supporting actions: Scan by child, by course, and by last activity.
• Domain entities: Child (name); Course (title); Progress (bar value); Last Activity (timestamp).
• Component responsibilities: Ruled progress table; per-row progress bar; last-activity column.
• States:
  • Loading: table skeleton with muted placeholders.
  • Empty: if the child has not started any course, a friendly empty state explains that progress will appear once learning begins.
  • Success: rows show child, course, progress bar and last activity.
  • Error: if progress fails to load, a friendly retry affordance appears.
  • Recovery: retry reloads the table in place.
  • Reduced motion: progress bars render at their final value instantly.

3. Functional Requirements

FR-1 — Responsive mobile web delivery (explicit) As a Child Learner or Parent or Guardian, I should be able to use kids-disaster-learning as a responsive mobile web application, so that I can learn or review progress on a phone and on a larger screen.

• Trigger/input: opening the application in a mobile or desktop browser.
• Observable result: a single-column layout at 375px that opens into a two-column catalog and a three-column progress dashboard at 1280px.
• Access state: anonymous on Landing, Sign Up and Login; protected on Course Catalog, Course Details, Quiz and Parent Progress.
• Failure/recovery: if a viewport is narrower than expected, content wraps or scales (clamp()) rather than overflowing.
• Continuation: the actor proceeds to the relevant surface for their role.

FR-2 — Bright, friendly, clean visual design (explicit) As a Child Learner, I should see bright and friendly colours with a clean interface, so that the app feels welcoming and not scary.

• Trigger/input: any surface render.
• Observable result: warm cream ground (#FFF6E9), white cards, coral primary (#FF6B4A), sunflower accent (#FFC93C), ink text (#20203A), muted secondary (#6B6B8A); big soft radii; sticker-shadow cards; no sharp corners on kid-facing surfaces.
• Access state: all surfaces.
• Failure/recovery: not applicable — this is a presentation constraint.
• Continuation: the actor continues with the surface's primary action.

FR-3 — Colourful course cards with cute illustration icons (explicit) As a Child Learner, I should see colourful course cards, including "Earthquake Safety" and "Emergency Kit", each with a cute illustration icon, so that I can recognise and choose a course I want to learn.

• Trigger/input: opening Course Catalog.
• Observable result: each card is a full colour field — Earthquake Safety #FF6B4A, Emergency Kit #FFC93C, Flood Safety #6FC7B6, Fire Safety #FF8A5B, Tsunami Awareness #7FA8FF, First Aid #B49BFF — with its illustration, title and progress bar inside the colour, using ink or white text chosen for contrast.
• Access state: protected; Child Learner.
• Failure/recovery: if progress values fail to load, cards still render and remain selectable.
• Continuation: the learner selects a card to open Course Details.

FR-4 — Progress bar for course progress (explicit) As a Child Learner, I should see a progress bar showing how far I have come in a course, so that I can tell what I have finished and what is left.

• Trigger/input: viewing a course card or a course detail.
• Observable result: a rounded pill progress bar with a mascot head that travels along the track as the fill advances; at 100% a confetti pop and badge stamp appear.
• Access state: protected; Child Learner.
• Failure/recovery: if the progress value is unavailable, the bar shows an indeterminate state rather than a wrong value.
• Continuation: the learner continues the course or starts the quiz.

FR-5 — "Start Quiz" button (explicit) As a Child Learner, I should be able to tap a "Start Quiz" button, so that I can begin a quiz for the course I am studying.

• Trigger/input: tapping the Start Quiz pill on Course Details.
• Observable result: the Quiz surface opens with the first question.
• Access state: protected; Child Learner.
• Failure/recovery: if the quiz cannot be loaded, a friendly retry affordance appears and the learner keeps their place in the course.
• Continuation: the learner answers the quiz questions.

FR-6 — Quiz completion recorded toward learning progress (explicit) As a Child Learner, I should have my quiz completion recorded toward my learning progress, so that finishing a quiz visibly advances my progress bar.

• Trigger/input: completing the quiz.
• Observable result: the course progress bar advances; at 100% a confetti pop and badge stamp appear.
• Access state: protected; Child Learner.
• Failure/recovery: if a submission fails, the answer is preserved and the learner can retry without losing their place.
• Continuation: the learner returns to Course Details or Course Catalog and sees the updated progress.

FR-7 — Parent or guardian progress review (explicit) As a Parent or Guardian, I should be able to review my child's course and quiz completion progress, so that I can confirm learning is happening and guide what comes next.

• Trigger/input: opening Parent Progress.
• Observable result: a calm, ruled table of child, course, progress bar and last activity.
• Access state: protected; Parent or Guardian (role-aware, separated from the child's learning surfaces).
• Failure/recovery: if progress fails to load, a friendly retry affordance appears; if the child has not started, a friendly empty state explains progress will appear once learning begins.
• Continuation: the guardian guides the child's next course choice.

FR-8 — Self-service enrollment (required_inference) As a Child Learner or Parent or Guardian, I should be able to enroll myself on first use, so that I can start learning or reviewing without an invitation or a pre-existing account.

• Trigger/input: choosing "Start learning" or "I'm a parent" on Landing.
• Observable result: an account is created with the actor's role context; the child continues to Course Catalog, the guardian to Parent Progress.
• Access state: anonymous entry on Sign Up.
• Failure/recovery: inline, friendly, non-alarming error identifying the field that needs attention; entered values are preserved.
• Continuation: the actor proceeds to their role's landing surface.

FR-9 — Returning verification (required_inference) As a Child Learner or Parent or Guardian, I should be able to verify my identity when I return, so that I can resume my courses, quizzes and progress review.

• Trigger/input: opening Login.
• Observable result: verified identity; the child lands on Course Catalog, the guardian on Parent Progress.
• Access state: anonymous entry on Login.
• Failure/recovery: friendly, non-alarming error; entered values preserved; retry without re-entering everything.
• Continuation: the actor resumes their role's work.

FR-10 — Role-aware authorization (required_inference) As a Parent or Guardian, I should have my progress review separated from my child's learning activity, so that the child's learning surfaces and the guardian's review surface each show the right work to the right person.

• Trigger/input: accessing Course Catalog, Course Details, Quiz or Parent Progress.
• Observable result: the child's learning surfaces and the guardian's progress review are distinct; each actor sees their own role's surface.
• Access state: protected; role-restricted.
• Failure/recovery: an actor reaching the wrong surface is returned to their own role's surface.
• Continuation: the actor continues in their own role's work.

4. User Personas

Child Learner

• Product context: A kid roughly 6–11 using the responsive mobile web app to learn disaster preparedness. They arrive through the Landing page, enroll or verify, and land on the Course Catalog.
• Primary goal: Complete lessons and quizzes and see their progress advance.
• Distinct accepted responsibilities: Browsing colourful course cards such as "Earthquake Safety" and "Emergency Kit"; opening a course and reading its lesson list; watching the progress bar; tapping "Start Quiz"; answering quiz questions; seeing quiz completion recorded toward progress.
• Relevant inputs or decisions: Which course card to open; when to start the quiz; which answer to choose.
• Interactions with other accepted participants: The child's progress is what the Parent or Guardian reviews on Parent Progress; the guardian may guide which course the child works through.
• Observable success: The course progress bar advances after quiz completion, and at 100% a confetti pop and badge stamp appear.
• Source-backed constraints: The interface must be bright, friendly and clean, with cute illustration icons, soft gradients and a Figma-style vector aesthetic — never scary or realistic.

Parent or Guardian

• Product context: An adult who guides a child's disaster-learning activity in this kids-oriented app. They arrive through the Landing page's "I'm a parent" link, enroll or verify, and land on Parent Progress.
• Primary goal: The child completes the safety courses and quizzes with visible progress.
• Distinct accepted responsibilities: Choosing which course the child works through; checking the child's progress bar to confirm learning is happening; reviewing the ruled table of child, course, progress bar and last activity.
• Relevant inputs or decisions: Which course to guide the child toward; whether the observed progress confirms learning is happening.
• Interactions with other accepted participants: The guardian's review is of the Child Learner's course and quiz completion; the guardian's guidance shapes which course the child opens next.
• Observable success: Parent Progress shows the child's course and quiz completion with an advancing progress bar and a recent last-activity value.
• Source-backed constraints: The guardian's surface is deliberately quieter than the kid surfaces so adults can scan it; hairline dividers inside the progress table are the only sharp corners in the product.

5. Core User Flows

Flow A — Child Learner: first visit, enroll, and start learning

1. The child opens kids-disaster-learning in a mobile browser and lands on Landing (anonymous).
2. The child reads the headline "Learn to be safe, one adventure at a time" and the reassuring subline, and sees the illustrated cast and the horizontally scrolling course strip.
3. The child taps the coral pill "Start learning" and arrives at Sign Up (anonymous).
4. The child creates an account and selects the child learner role context.
5. On success, the child lands on Course Catalog (protected, Child Learner).
6. The child scans the colour-blocked course cards — Earthquake Safety #FF6B4A, Emergency Kit #FFC93C, Flood Safety #6FC7B6, Fire Safety #FF8A5B, Tsunami Awareness #7FA8FF, First Aid #B49BFF — each with its illustration, title and progress bar.
7. The child selects "Earthquake Safety" and arrives at Course Details.
8. The child reads the stacked lesson list and sees the progress bar with the mascot head at the start of the track.
9. The child taps the pinned "Start Quiz" pill and arrives at Quiz.
10. The child answers each question; answer tiles flip with a soft scale on selection.
11. On completion, the quiz result is recorded toward the course's learning progress and the progress bar advances.
12. The child returns to Course Details or Course Catalog and sees the updated progress bar.
13. Failure/recovery: if a quiz submission fails, the answer is preserved and the child retries the submission without losing their place. If course content fails to load, a friendly retry affordance appears and the child is never left on a blank screen.
14. Continuation: the child opens another course card, or returns later via Login to resume.

Flow B — Child Learner: returning to resume and finish a course

1. The child opens the app and arrives at Landing.
2. The child taps "Start learning" and, being a returning user, follows the cross-link to Login.
3. The child verifies their identity and lands on Course Catalog.
4. The child sees their existing progress bars on the course cards and opens the course they were working through.
5. On Course Details, the child continues the lesson list and taps "Start Quiz".
6. The child completes the quiz; the progress bar advances.
7. When the progress bar reaches 100%, a confetti pop and badge stamp appear.
8. Failure/recovery: if verification fails, a friendly, non-alarming message appears and entered values are preserved for retry.
9. Continuation: the child opens the next course card.

Flow C — Parent or Guardian: enroll, guide, and review progress

1. The guardian opens the app and lands on Landing.
2. The guardian taps the secondary text link "I'm a parent" and arrives at Sign Up.
3. The guardian creates an account and selects the parent/guardian role context.
4. On success, the guardian lands on Parent Progress (protected, Parent or Guardian).
5. The guardian sees the calm, ruled table of child, course, progress bar and last activity.
6. The guardian reads the child's course and quiz completion and confirms learning is happening.
7. The guardian guides the child toward the next course.
8. Failure/recovery: if the child has not started any course, a friendly empty state explains that progress will appear once learning begins. If progress fails to load, a friendly retry affordance appears.
9. Continuation: the guardian returns later via Login to re-check progress.

Flow D — Parent or Guardian: returning to re-check progress

1. The guardian opens the app and lands on Landing.
2. The guardian taps "I'm a parent" and follows the cross-link to Login.
3. The guardian verifies their identity and lands on Parent Progress.
4. The guardian scans the updated rows — child, course, progress bar, last activity — and sees the child's progress has advanced.
5. Failure/recovery: if verification fails, a friendly, non-alarming message appears and entered values are preserved for retry.
6. Continuation: the guardian confirms the child's learning is on track and closes the app.

6. Visuals Colors and Theme

Muse: Pablo Stanley. Headline direction: Warm, human, a little funny — a disaster-safety playground kids actually want to open.

Pablo Stanley's language — modular character illustration, sunny primaries with pastel supports, big radii, pill buttons and sticker shapes — is the natural fit for a kids' disaster-learning product that must feel friendly while communicating structured course progress. The muse's friendliness is deliberately applied to a serious subject: safety content is illustrated, not dramatised, so nothing reads as frightening.

Palette (light mode)

Course card colour fields (always with ink #20203A or white text chosen for contrast, never coral-on-coral):

Ratio: 60% cream/white, 25% card colour fields, 10% coral, 5% sunflower. Soft gradients are permitted only as two-stop washes inside illustration areas and card art, never behind body copy.

Typography

• Headings: Baloo 2 at 700–800, generous rounded terminals, leading 1.05–1.15, slightly negative tracking on the largest sizes. Sentence case everywhere — never all-caps for headings.
• Body: Nunito.
• Scale: 1.25 modular with a wide display step — 44px mobile → 76px desktop hero, 32/40px section heads, 24px card titles, 18px body, 15px labels and progress captions. Line-height 1.5 for body, 1.1 for display. All sizes via clamp() so nothing overflows at 375px.

Shape language

• Big soft radii: 28px on course cards, 999px on every button and pill, 20px on inputs and quiz answer tiles.
• Sticker-style shapes (rounded blobs, speech bubbles, rounded stars) sit behind or beside content as decoration only.
• Cards use a soft offset shadow 0 6px 0 rgba(32,32,58,0.12) that reads as a physical sticker rather than a blurry glass panel.
• No sharp corners anywhere except hairline dividers inside the parent progress table.

Layout

• Mobile-first single column at 375px that opens into a two-column catalog and a three-column progress dashboard at 1280px.
• The course catalog is a colour-blocked card grid where each card is a full illustration field with the course title and a progress bar inside it.
• Course Details is a stacked lesson list with one large Start Quiz pill pinned to the bottom of the content column.
• Parent Progress is a calm, ruled table of child, course, progress bar and last activity, deliberately quieter than the kid surfaces so adults can scan it.
• Navigation is a bottom tab bar on mobile (Learn, Progress, Profile) that becomes a top pill nav at desktop; the wordmark sits in a rounded capsule.

Imagery

Modular vector illustration in the Pablo Stanley manner: rounded, simple-limbed characters of mixed ages (a kid, a parent, a teacher) shown doing safe things — crouching under a table, packing a bag, holding a flashlight. Objects are drawn as friendly icons: a wobbly earthquake line, a first-aid kit with a smile, a water bottle, a whistle. Illustration is flat with two-tone shading and soft gradient washes, always on cream or a card colour field. No photography, no realistic disaster imagery, no frightened faces, no clip art, no glassmorphism.

Avoid: blue or indigo primary buttons on a white ground; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui for headings or body; centred headline + subtext + button + gradient-blob hero; a grid of identical hover-lift cards with no colour differentiation; frosted glass panels, glassmorphism or heavy backdrop blur; scary or realistic disaster imagery — flames, collapsing buildings, frightened faces; photography-led hero sections or stock people; sharp-cornered cards, hairline-only borders and dense data tables on kid-facing surfaces.

Readable text and controls stay whole at every viewport: headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut exactly as the direction asks, as long as it covers no readable text or control. Moving and scrollable content may cross the viewport or container edge by design; with prefers-reduced-motion it stops and shows whole items.

7. Signature Design Concept

The Landing hero is a full-width cream stage with a coral blob shape bleeding off the right edge.

On the left, a stacked headline in Baloo 2 at 44px mobile / 76px desktop reads "Learn to be safe, one adventure at a time" over three lines, with a short reassuring subline in Nunito and one coral pill CTA "Start learning" plus a secondary text link "I'm a parent". On the right, an illustrated cast — a child crouching under a table, a parent holding an emergency kit, a waving mascot — overlaps the coral blob and is cropped off the right viewport edge by design.

Beneath the hero, a horizontally scrolling strip of the six course cards peeks off both edges, each card a flat colour field with its own cute icon, title and mini progress bar. With reduced motion the strip becomes a wrapped grid.

No centred headline, no gradient blob, no blue button. The signature moves that carry through the whole product:

• Course cards as full colour fields — each card is a solid kid-palette block with the illustration, title and progress bar living inside the colour, not on a white card.
• A sticker-shadow card treatment — 0 6px 0 solid ink shadow instead of a soft blur — so every card and button looks pressable and physical, lifting 4px with a 3° illustration tilt on hover.
• The progress bar is a rounded pill with a mascot head that travels along the track as the fill advances, and a confetti pop plus badge stamp when it hits 100%.
• Bottom tab bar on mobile morphs into a top pill nav at desktop, with the wordmark in a rounded capsule and the active tab marked by a colour-filled pill, not an underline.
• A horizontally scrolling "course strip" under the hero that deliberately bleeds off both viewport edges, each card fully readable as it passes; under reduced motion it wraps into whole rows.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The illustrated cast — a child crouching under a table, a parent holding an emergency kit, and a waving mascot — overlapping the coral blob that bleeds off the right edge.
• Input → transformation → outcome thesis: As the hero enters the viewport, the coral blob and the illustrated cast settle into place with a gentle layered-2d parallax offset, the headline and subline fade up in sequence, and the course strip beneath begins its continuous horizontal scroll — so the first frame the child sees is a friendly, moving playground of courses rather than a static poster.
• Motion vocabulary: Cards spring in with a small overshoot on scroll-reveal; progress bars fill with an eased 600ms sweep and a tiny confetti pop on completion; hover/tap lifts a card by 4px and rotates its illustration 3°; illustration characters blink or wave once on entry; quiz answers flip with a soft scale. All motion is transform/opacity only, capped under 700ms.
• Composed first frame: Cream stage, coral blob bleeding off the right edge, stacked Baloo 2 headline on the left, illustrated cast overlapping the blob on the right, coral pill CTA and secondary text link below the subline, and the course strip peeking off both edges beneath the hero.
• Reduced-motion state: All motion becomes instant; the course strip stops scrolling and wraps into whole rows; the confetti pop is replaced by a static badge; the progress bar fills instantly.

9. Non-Functional Requirements

• NFR-1 — Responsive mobile web delivery (explicit): The application must be a responsive mobile web application, mobile-first at 375px and opening into a two-column catalog and three-column progress dashboard at 1280px. Rationale: explicit hard constraint in the authoritative source.
• NFR-2 — Kid-oriented visual design (explicit): Bright and friendly colours, a clean interface, soft gradients and a Figma-style UI vector aesthetic. Rationale: explicit hard constraint in the authoritative source.
• NFR-3 — Readable text and controls stay whole (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 to fit, with no other element covering any part of them. Rationale: explicit creative-direction constraint.
• NFR-4 — Motion accessibility (explicit): All motion must be transform/opacity only, capped under 700ms, and fully disabled under prefers-reduced-motion; states become instant, confetti is replaced by a static badge, and the course strip wraps into whole rows. Rationale: explicit creative-direction constraint.
• NFR-5 — No frightening imagery (explicit): No photography, no realistic disaster imagery, no frightened faces, no clip art, no glassmorphism. Rationale: explicit creative-direction constraint for a child audience.
• NFR-6 — Identity continuity (required_inference): Course progress and quiz results must persist and be resumable, and a parent's progress review must be bound to the correct child. Rationale: required to make the accepted resume-and-review journeys executable.
• NFR-7 — Role-aware separation (required_inference): The child's learning surfaces and the guardian's progress review must be separated so each actor sees their own role's work. Rationale: required to make the accepted parent-review journey executable without exposing the child's learning surfaces as the guardian's own.

10. Tech Stack

• Frontend: React — responsive mobile web application, mobile-first at 375px, opening to two-column catalog and three-column progress dashboard at 1280px.
• Styling: CSS with clamp() type scale, custom properties for the palette tokens, and prefers-reduced-motion media queries.
• Fonts: Baloo 2 (headings, 700–800) and Nunito (body), loaded as web fonts.
• Backend: Python / FastAPI — serves course catalog, course content, quiz questions, quiz results, and progress data.
• Storage: A relational database for accounts, courses, lessons, quizzes, quiz results and progress records.
• Deployment: Docker / docker-compose for local and single-host deployment.

11. Assumptions and Constraints

• Assumption (narrow): The six course cards named in the creative direction — Earthquake Safety, Emergency Kit, Flood Safety, Fire Safety, Tsunami Awareness, First Aid — are the current catalog. The authoritative source explicitly names "Earthquake Safety" and "Emergency Kit"; the remaining four are supplied by the creative direction's fixed kid-friendly colour set.
• Assumption (narrow): Children and parents enroll independently and self-service, because no invitation, provisioning, provider or pre-existing-account boundary is established in the source.
• Assumption (narrow): A parent's progress review is bound to their own child's progress, since the accepted journey is a guardian reviewing the child's learning.
• Constraint (explicit): The application is a responsive mobile web application — not a native app.
• Constraint (explicit): Bright and friendly colours, clean interface, soft gradients, Figma-style UI vector aesthetic.
• Constraint (explicit): No blue or indigo primary buttons on a white ground; no Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins or system-ui for headings or body; no centred headline + subtext + button + gradient-blob hero; no glassmorphism; no scary or realistic disaster imagery; no photography-led hero sections; no sharp-cornered cards on kid-facing surfaces.
• Constraint (explicit): Readable text and controls stay whole at every viewport; imagery and decoration may bleed, but never over readable text or controls.
• Constraint (explicit): All motion is transform/opacity only, capped under 700ms, and fully disabled under prefers-reduced-motion.
• Boundary: No adjacent account-management capabilities beyond first-use enrollment and returning verification. No future-horizon capabilities are accepted in the current scope.

12. Glossary

• Child Learner — The kid (roughly 6–11) who browses course cards, opens a course, watches the progress bar, and starts and completes quizzes.
• Parent or Guardian — The adult who guides the child's course choice and reviews the child's course and quiz completion progress.
• Course — A disaster-safety learning unit presented as a colour-blocked card with an illustration icon, a title and a progress bar. Current courses include Earthquake Safety and Emergency Kit.
• Course Card — A full colour field containing the course illustration, title and progress bar, using ink or white text chosen for contrast.
• Progress Bar — A rounded pill showing how far a learner has come in a course, with a mascot head that travels along the track as the fill advances.
• Start Quiz — The pinned coral pill action on Course Details that begins the quiz for that course.
• Quiz — The focused question-and-answer journey launched from Start Quiz; completion is recorded toward the course's learning progress.
• Parent Progress — The calm, ruled table of child, course, progress bar and last activity, used by the Parent or Guardian to review learning.
• Sticker Shadow — The 0 6px 0 rgba(32,32,58,0.12) offset shadow that makes cards and buttons read as physical stickers rather than blurry glass panels.
• Course Strip — The horizontally scrolling row of course cards beneath the Landing hero that bleeds off both viewport edges; under reduced motion it wraps into whole rows.