System Requirements Document for magic-kids

1. Introduction

magic-kids is a responsive mobile web application that teaches children about disaster preparedness through bright, friendly, illustration-led learning. The product intent is to make serious safety subjects — earthquakes, emergency kits, and related readiness topics — feel approachable, playful, and confidence-building rather than frightening for young learners.

The primary audience is the Child Learner: a kid who browses colorful course cards such as "Earthquake Safety" and "Emergency Kit", tracks their learning through a progress bar, and starts a quiz with a "Start Quiz" button. The experience is designed mobile-first for small fingers and short attention spans, with a clean interface, cute illustration icons, and a warm, reassuring visual register.

The current delivery is a first-party custom web UI. All four accepted destinations — Landing, Courses, Progress, and Quiz — are openly reachable without an account, matching the accepted access contract for this generation.

2. System Overview

magic-kids is a single responsive mobile web application with four first-party pages:

• Landing — the anonymous first impression that explains the kids disaster-learning app and leads children into its courses.
• Courses — the colorful course-card catalog, including "Earthquake Safety" and "Emergency Kit", each with a cute illustration icon, a progress bar, and a "Start Quiz" button.
• Progress — a revisitable view of the learner's progress with a progress bar.
• Quiz — the focused quiz experience launched by the "Start Quiz" action from a course.

The only accepted active human actor is the Child Learner. There are no provider-owned or external destinations in the current scope; all accepted behavior is owned by the first-party application.

2a. Product Interpretation and Delivery Boundary

Delivery. The product is delivered as a responsive mobile web application. It is designed mobile-first at 375px, expands to a two-column course grid at 768px, and to a three-column grid with a left rail at 1280px. There is no native app, no desktop-only surface, and no separate admin product in the current scope.

Access ownership. All four accepted pages are openly reachable with no account requirement. The accepted access contract for this generation sets access_requirement: none for Landing, Courses, Progress, and Quiz. A child can open the app, browse courses, see progress, and take a quiz without signing in. No application-owned identity, login, or account-management capability is part of the current scope.

Current vs. future boundary. Everything described in this document is current. No future-horizon requirements were accepted in the authoritative thread. Anything not explicitly accepted — caregiver accounts, teacher dashboards, certificates, social features, or additional disaster topics beyond the named examples — is out of scope for this generation.

Exclusions. The product must not use photorealistic or frightening disaster imagery (collapsed buildings, fire, injured people). It must not adopt a generic indigo/blue-on-white SaaS template look. It must not use glassmorphism, frosted panels, or soft violet-pink-sky gradient blobs. It must not use Inter, Roboto, Poppins, or system-ui for headings or body. It must not use sharp corners, hairline dividers, or dense data-table treatments.

2c. Page Content and Component Coverage

Landing

• Information / state: The anonymous first impression of magic-kids. Presents the app's purpose — learning disaster safety in a friendly, non-scary way — and leads the child into the courses. No learner-specific state is required to view it.
• Primary action: Enter the course catalog ("Mulai Belajar" / "Lihat Kursus" style entry into Courses).
• Supporting actions: View the headline and hero illustration; view the sticker-style progress card ("Kemajuanmu") with its bouncing tangerine bar; tap the giant pill "Start Quiz" button.
• Domain entities: Course (as a teaser), Learner progress (as a summary chip).
• Component responsibilities:
  • Sticky top bar with the magic-kids wordmark and a big rounded avatar/progress chip.
  • Hero stage: oversized illustrated scene (rounded kid character crouching under a chunky table) with the headline "Belajar Siaga, Tetap Berani!" set in Baloo 2, each line sitting on its own tangerine and raspberry colour block that bleeds slightly off the left edge.
  • Sticker-style progress card ("Kemajuanmu") with a bouncing tangerine progress bar.
  • Giant pill "Start Quiz" button pinned bottom-left of the composition.
  • Bottom sticker dock on mobile: four rounded tiles with cute pictograms (Home, Kursus, Progres, Kuis), active tile lifts 6px with a tangerine under-shadow.
• States:
  • Loading: Skeleton or simple placeholder for the hero illustration and progress chip.
  • Empty: Not applicable — the landing content is static and always present.
  • Success: Hero, progress card, and entry controls render fully; the child can tap into Courses or Quiz.
  • Error: If the progress summary cannot be read, the progress card shows a neutral "Belum ada kemajuan" state and the entry controls remain usable.
  • Recovery: The child can still enter Courses or Quiz regardless of progress-summary availability.

Courses

• Information / state: The catalog of disaster-learning courses. Each course is a tall, illustration-led card with a circular colour-blob illustration badge overlapping the top-left corner, a title, a one-line description, a progress bar, and a "Start Quiz" pill pinned bottom-right. Named courses include "Earthquake Safety" and "Emergency Kit".
• Primary action: Open a course / start its quiz via the "Start Quiz" button.
• Supporting actions: Scroll the course grid; read each course's title and description; read each course's progress bar.
• Domain entities: Course (title, description, illustration icon, progress), Quiz (linked to a course).
• Component responsibilities:
  • Sticky top bar with wordmark and progress chip.
  • Responsive course grid: single column at 375px, two columns at 768px, three columns with a 240px left rail at 1280px.
  • Course card: 3px ink outline, 28px radius, hard offset shadow (0 6px 0 rgba(31,27,46,0.12)), circular colour-blob illustration badge, title in Baloo 2, one-line description in Nunito, segmented progress bar, "Start Quiz" pill.
  • Bottom sticker dock on mobile.
• States:
  • Loading: Card skeletons in the grid shape.
  • Empty: A friendly illustrated empty state ("Kursus segera hadir!") if no courses are available.
  • Success: All course cards render with their illustration badges, titles, descriptions, progress bars, and "Start Quiz" buttons.
  • Error: A friendly retry state if the course list cannot be loaded; the child can retry.
  • Recovery: Retry reloads the course list; the bottom dock remains usable so the child can move to Progress or back to Landing.

Progress

• Information / state: A revisitable view of the learner's progress across courses, with a progress bar. Shows how far the child has come through the available courses and quizzes.
• Primary action: Review overall progress.
• Supporting actions: Return to Courses to continue learning; return to Landing.
• Domain entities: Learner progress (per-course completion, overall completion), Course.
• Component responsibilities:
  • Sticky top bar with wordmark and progress chip.
  • Overall progress bar — segmented into 5 chunky rounded pips that pop in one by one as lessons complete, with a wiggling mascot pin at the current position.
  • Per-course progress rows or cards showing each course's completion.
  • Bottom sticker dock on mobile.
• States:
  • Loading: Skeleton for the progress bar and per-course rows.
  • Empty: A friendly illustrated empty state ("Belum ada kemajuan — ayo mulai belajar!") when the child has not started any course.
  • Success: Overall progress bar and per-course progress render accurately.
  • Error: A friendly retry state if progress cannot be read.
  • Recovery: Retry reloads progress; the child can still navigate to Courses to continue.

Quiz

• Information / state: The focused quiz experience launched by the "Start Quiz" action from a course. Presents one question at a time with four coloured pill-sticker answer options, tracks the child's answers, and shows a result at the end.
• Primary action: Select an answer to each question.
• Supporting actions: Advance to the next question; see correct/incorrect feedback; see the final result; return to Courses or retry the quiz.
• Domain entities: Quiz (linked to a course), Question, Answer option, Quiz result.
• Component responsibilities:
  • Sticky top bar with wordmark and progress chip.
  • Question card with the question text in Baloo 2 and the course's illustration badge.
  • Four coloured pill-sticker answer options that peel and flip on selection.
  • Confetti burst of tiny vector shapes (pure CSS/SVG) on a correct answer.
  • Quiz progress indicator (question N of M).
  • Result screen with the child's score and a friendly message.
  • Bottom sticker dock on mobile.
• States:
  • Loading: Skeleton for the question card and answer pills.
  • Empty: A friendly state if the quiz has no questions ("Kuis ini belum siap — coba kursus lain!").
  • Success: Each question renders with four answer options; selecting an answer gives immediate feedback; the final result screen shows the score.
  • Error: A friendly retry state if the quiz cannot be loaded or an answer cannot be submitted.
  • Recovery: Retry reloads the quiz; the child can return to Courses to pick another course.

3. Functional Requirements

FR-1 — Responsive mobile web delivery As a Child Learner, I should be able to use magic-kids on a mobile web browser so that I can learn disaster safety on the device I already have.

• Provenance: explicit
• Lifecycle: Actor: Child Learner. Trigger: opening the app in a mobile browser. Observable result: the app renders as a responsive mobile web application at 375px, 768px, and 1280px. Access state: open, no account required. Failure/recovery: if the viewport is narrow, the layout reflows to a single column with 20px gutters. Continuation: the child can browse courses, view progress, and take a quiz.
• Acceptance: The app is usable at 375px, 768px, and 1280px; headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at every breakpoint.

FR-2 — Bright, friendly, clean interface As a Child Learner, I should see a bright and friendly interface with a clean layout so that learning about disasters feels safe and fun rather than scary.

• Provenance: explicit
• Lifecycle: Actor: Child Learner. Trigger: viewing any page. Observable result: the interface uses the warm cream/tangerine/raspberry palette, rounded shapes, and cute illustration icons. Access state: open. Failure/recovery: not applicable — this is a persistent visual property. Continuation: the child can keep browsing.
• Acceptance: The interface uses background #FFF3DF, surface #FFFFFF, text #1F1B2E, primary #FF8A3D, accent #FF5C8A, muted #7A6E8A; headings in Baloo 2, body in Nunito; no sharp corners, no glassmorphism, no hairline borders.

FR-3 — Colorful course cards with cute illustration icons As a Child Learner, I should see colorful course cards such as "Earthquake Safety" and "Emergency Kit" with cute illustration icons so that I can recognize and choose a topic that interests me.

• Provenance: explicit
• Lifecycle: Actor: Child Learner. Trigger: opening Courses. Observable result: a grid of tall, illustration-led course cards, each with a circular colour-blob illustration badge, title, one-line description, progress bar, and "Start Quiz" pill. Access state: open. Failure/recovery: if the course list cannot be loaded, a friendly retry state appears. Continuation: the child can open a course or start its quiz.
• Acceptance: "Earthquake Safety" and "Emergency Kit" appear as course cards with cute illustration icons; each card has a 3px ink outline, 28px radius, and hard offset shadow.

FR-4 — Progress bar for learning progress As a Child Learner, I should see a progress bar that shows how far I have come so that I feel encouraged to keep learning.

• Provenance: explicit
• Lifecycle: Actor: Child Learner. Trigger: viewing a course card or the Progress page. Observable result: a segmented progress bar fills with a soft bounce as lessons complete. Access state: open. Failure/recovery: if progress cannot be read, a neutral "Belum ada kemajuan" state appears. Continuation: the child can continue learning.
• Acceptance: A progress bar is visible on course cards and on the Progress page; it is segmented into 5 chunky rounded pips with a wiggling mascot pin at the current position.

FR-5 — "Start Quiz" button As a Child Learner, I should be able to tap a "Start Quiz" button to begin a quiz so that I can test what I have learned.

• Provenance: explicit
• Lifecycle: Actor: Child Learner. Trigger: tapping "Start Quiz" on a course card. Observable result: the Quiz page opens with the first question. Access state: open. Failure/recovery: if the quiz cannot be loaded, a friendly retry state appears. Continuation: the child can answer questions and see a result.
• Acceptance: A "Start Quiz" pill is present on each course card and launches the Quiz page for that course.

FR-6 — Quiz question and answer interaction As a Child Learner, I should be able to answer quiz questions by tapping coloured pill-sticker options so that I can check my understanding.

• Provenance: required_inference
• Lifecycle: Actor: Child Learner. Trigger: viewing a quiz question. Observable result: four coloured pill-sticker answer options peel and flip on selection; a correct answer triggers a confetti burst of tiny vector shapes. Access state: open. Failure/recovery: if an answer cannot be submitted, a friendly retry state appears. Continuation: the child advances to the next question or sees the result.
• Acceptance: Each question shows four answer options; selecting one gives immediate feedback; the quiz advances to the next question or the result screen.

FR-7 — Quiz result As a Child Learner, I should see a friendly result at the end of a quiz so that I know how I did and feel encouraged.

• Provenance: required_inference
• Lifecycle: Actor: Child Learner. Trigger: answering the final question. Observable result: a result screen shows the score and a friendly message. Access state: open. Failure/recovery: if the result cannot be computed, a friendly retry state appears. Continuation: the child can retry the quiz or return to Courses.
• Acceptance: A result screen appears after the final question with the child's score and a friendly message.

FR-8 — Revisitable progress view As a Child Learner, I should be able to revisit a Progress page to see my overall progress so that I can track how much I have learned.

• Provenance: required_inference
• Lifecycle: Actor: Child Learner. Trigger: opening Progress. Observable result: an overall progress bar and per-course progress rows render. Access state: open. Failure/recovery: if progress cannot be read, a friendly retry state appears. Continuation: the child can return to Courses to continue learning.
• Acceptance: The Progress page shows an overall progress bar and per-course progress; it is reachable from the bottom sticker dock.

FR-9 — Bottom sticker dock navigation As a Child Learner, I should be able to navigate between Home, Kursus, Progres, and Kuis using a bottom sticker dock so that I can move around easily with small fingers.

• Provenance: required_inference
• Lifecycle: Actor: Child Learner. Trigger: tapping a dock tile. Observable result: the active tile lifts 6px and gains a tangerine under-shadow; the corresponding page opens. Access state: open. Failure/recovery: not applicable — navigation is always available. Continuation: the child can move freely between pages.
• Acceptance: A bottom sticker dock with four rounded tiles (Home, Kursus, Progres, Kuis) is present on mobile; the active tile lifts 6px with a tangerine under-shadow.

4. User Personas

Child Learner

Product context. The Child Learner is a kid using magic-kids on a mobile web browser to learn about disaster safety. The app is designed for children roughly 6–11 years old, with a reassuring, playful, and confidence-building register rather than a frightening one. The child is likely using the app on a phone or tablet, often with a caregiver nearby, and needs large, tappable controls and short, illustrated content.

Primary goal. To learn how to stay safe during disasters — starting with earthquakes and emergency kits — in a way that feels fun and not scary, and to check their understanding through quizzes.

Distinct accepted responsibilities.

• Browse the colorful course cards on Courses, including "Earthquake Safety" and "Emergency Kit".
• Recognize each course by its cute illustration icon and one-line description.
• Track learning progress through the progress bar on course cards and on the Progress page.
• Start a quiz from a course using the "Start Quiz" button.
• Answer quiz questions by tapping coloured pill-sticker options.
• See a friendly result at the end of a quiz.
• Revisit the Progress page to see overall progress.
• Navigate between Home, Kursus, Progres, and Kuis using the bottom sticker dock.

Relevant inputs or decisions. Which course to open; whether to start a quiz; which answer option to tap; whether to retry a quiz or return to Courses.

Interactions with other accepted participants. None. The Child Learner is the only accepted active human actor in the current scope. There are no caregiver, teacher, or peer participants in the accepted requirements.

Observable success. The child completes lessons and quizzes on disaster safety topics, sees their progress bar fill, and receives friendly feedback on quiz answers.

Constraints. The child's experience must stay bright, friendly, and clean; must avoid frightening imagery; and must keep all readable text and controls whole at every viewport.

5. Core User Flows

Flow 1 — First visit and entry into courses

1. The Child Learner opens magic-kids in a mobile web browser. No account or sign-in is required.
2. The Landing page renders: the sticky top bar with the magic-kids wordmark and progress chip, the hero stage with the illustrated kid character crouching under a chunky table, the headline "Belajar Siaga, Tetap Berani!" on its tangerine and raspberry colour blocks, the sticker-style progress card ("Kemajuanmu") with its bouncing tangerine bar, and the giant pill "Start Quiz" button.
3. The child taps the entry control to enter the course catalog.
4. The Courses page opens, showing the colorful course cards including "Earthquake Safety" and "Emergency Kit", each with its circular colour-blob illustration badge, title, one-line description, progress bar, and "Start Quiz" pill.
5. Observable result: the child sees the full course catalog and can choose a topic.
6. Next step: the child opens a course or taps "Start Quiz" on a card.

Flow 2 — Browsing courses and reading progress

1. The Child Learner is on the Courses page.
2. The child scrolls the course grid. At 375px the grid is a single column; at 768px it becomes two columns; at 1280px it becomes three columns with a 240px left rail.
3. Each course card shows its illustration badge, title, one-line description, and progress bar.
4. Observable result: the child can read each course's topic and see how far they have come.
5. Next step: the child taps "Start Quiz" on a course, or taps the Progres tile in the bottom sticker dock.

Flow 3 — Starting and completing a quiz

1. The Child Learner is on the Courses page and taps the "Start Quiz" pill on a course card (for example, "Earthquake Safety").
2. The Quiz page opens with the first question, the course's illustration badge, and four coloured pill-sticker answer options.
3. The child taps an answer option. The option peels and flips on selection.
4. If the answer is correct, a confetti burst of tiny vector shapes (pure CSS/SVG) appears. If incorrect, the child sees friendly feedback.
5. The child advances to the next question. The quiz progress indicator shows question N of M.
6. The child repeats steps 3–5 until the final question is answered.
7. Observable result: a result screen appears with the child's score and a friendly message.
8. Failure/recovery: if the quiz cannot be loaded or an answer cannot be submitted, a friendly retry state appears; the child can retry or return to Courses.
9. Next step: the child retries the quiz or returns to Courses to pick another course.

Flow 4 — Reviewing progress

1. The Child Learner taps the Progres tile in the bottom sticker dock. The active tile lifts 6px and gains a tangerine under-shadow.
2. The Progress page opens, showing the overall progress bar — segmented into 5 chunky rounded pips with a wiggling mascot pin at the current position — and per-course progress rows.
3. Observable result: the child sees how much they have learned across courses.
4. Empty state: if the child has not started any course, a friendly illustrated empty state ("Belum ada kemajuan — ayo mulai belajar!") appears.
5. Failure/recovery: if progress cannot be read, a friendly retry state appears; the child can retry or navigate to Courses.
6. Next step: the child taps the Kursus tile to return to Courses and continue learning.

Flow 5 — Navigating with the bottom sticker dock

1. The Child Learner is on any page on mobile.
2. The bottom sticker dock shows four rounded tiles with cute pictograms: Home, Kursus, Progres, Kuis.
3. The child taps a tile. The active tile lifts 6px and gains a tangerine under-shadow, and the corresponding page opens.
4. Observable result: the child moves freely between Landing, Courses, Progress, and Quiz.
5. Next step: the child continues learning on the page they opened.

6. Visuals Colors and Theme

Muse: Pablo Stanley. Headline direction: Warm modular illustration and sticker energy for kids disaster learning.

The creative direction is authoritative for this section. It translates into the following concrete tokens.

Colour tokens (light mode)

Supporting sticker colours appear only inside illustrations and category chips, never as the dominant surface.

Typography

• Headings: Baloo 2 — Extra-bold rounded display, warm and slightly bouncy, tight leading, sentence case, letter-spacing 0 to -0.01em.
• Body: Nunito.
• Labels and chips: Nunito ExtraBold uppercase with 0.08em tracking.
• Scale: 1.25 modular with a large display jump — hero 40px mobile / 64px tablet / 88px desktop; section 28/36/44; card title 20/22/24; body 16/17/18; label 12/13/13.

Shape language

• Big soft radii everywhere — 28px on cards, 20px on inner tiles, full pills for buttons and chips.
• Organic blob and sticker shapes as decorative accents behind course icons.
• Soft offset shadows: 0 6px 0 rgba(31,27,46,0.12) that make cards feel like physical stickers.
• Chunky 3px outlines on interactive tiles.
• No sharp corners, no glassmorphism, no hairline borders.

Layout

• Mobile-first single column at 375px with 20px gutters.
• Two-column course grid at 768px.
• Three-column grid with a 240px left rail at 1280px.
• Sticky top bar with the magic-kids wordmark and a big rounded avatar/progress chip.
• Course cards are tall and illustration-led: icon sticker top-left, title, one-line description, progress bar, Start Quiz pill pinned bottom-right.
• Generous vertical rhythm of 24/32/48px between blocks.

Imagery

Modular vector illustration in the Pablo Stanley tradition: rounded chunky characters — a kid with a hard hat under a table, a backpack packed with water and a torch, a friendly seismograph mascot — drawn with 3px warm outlines, flat fills from the sticker palette, and simple dot eyes. Icons live inside circular colour blobs so each course reads as a badge. No photography, no gradients-as-hero, no realistic disaster imagery that could frighten a child.

7. Signature Design Concept

The landing hero is a warm cream stage occupied by one oversized illustrated scene, not a centred text stack.

On desktop, a rounded kid character crouches under a chunky table on the right two-thirds of the composition. The headline "Belajar Siaga, Tetap Berani!" is set in 88px Baloo 2 filling the left third in two stacked lines, each line sitting on its own tangerine and raspberry colour block that bleeds slightly off the left edge. Beneath the headline sits a full-width sticker-style progress card ("Kemajuanmu") with a bouncing tangerine bar, and a giant pill "Start Quiz" button is pinned bottom-left of the composition.

On mobile, the illustration sits above the headline at 60vw width, the colour blocks become full-bleed bands, and the headline drops to 40px so it never clips.

The signature moves that carry the concept across the product:

• Course cards as physical stickers: thick 3px ink outline, 28px radius, hard offset shadow, and a circular colour-blob illustration badge that overlaps the top-left corner of the card.
• Headline lines on flat colour blocks: tangerine, then raspberry, bleeding off the left viewport edge, with tight Baloo 2 leading so the blocks read as poster bands.
• A bouncing sticker progress bar: segmented into 5 chunky rounded pips that pop in one by one as lessons complete, with a wiggling mascot pin at the current position.
• Quiz answers as four coloured pill stickers that peel and flip on selection, with a confetti burst of tiny vector shapes (no particles library, pure CSS/SVG) on a correct answer.
• Navigation as a bottom sticker dock on mobile: four rounded tiles with cute pictograms (Home, Kursus, Progres, Kuis) where the active tile lifts 6px and gains a tangerine under-shadow.

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

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the oversized illustrated scene of a rounded kid character crouching under a chunky table, with the headline "Belajar Siaga, Tetap Berani!" on its tangerine and raspberry colour blocks, the sticker-style progress card ("Kemajuanmu"), and the giant pill "Start Quiz" button.
• Input → transformation → outcome thesis: as the child scrolls or the page loads, the illustration icons give a small nod or wave once when they scroll into view; the progress bar fills with a soft bounce; the "Start Quiz" pill squashes on press and pops back. The outcome is a warm, playful first impression that invites the child to start learning.
• Motion vocabulary: springy micro-interactions at 180–260ms with a gentle overshoot; course cards lift and tilt 2° on hover/press; the progress bar fills with a soft bounce; the Start Quiz pill squashes on press and pops back; illustration icons give a small nod or wave once when they scroll into view; quiz answers flip with a sticker-peel transition.
• Composed first frame: the cream stage with the illustrated kid character crouching under the chunky table on the right two-thirds, the headline on its tangerine and raspberry colour blocks on the left third, the sticker-style progress card beneath the headline, and the giant pill "Start Quiz" button pinned bottom-left.
• Reduced-motion state: everything settles instantly with no overshoot; the progress bar shows its final fill; illustration icons are static; the Start Quiz pill does not squash.

9. Non-Functional Requirements

NFR-1 — Responsive mobile web delivery

• Provenance: explicit
• Constraint: The product is a responsive mobile web application.
• Rationale: Explicit hard constraint in the authoritative user evidence.

NFR-2 — Kid-oriented visual design

• Provenance: explicit
• Constraint: Bright and friendly colors, clean interface, cute illustration icons.
• Rationale: Explicit hard constraint in the authoritative user evidence.

NFR-3 — Readable text and controls stay whole

• Provenance: explicit (creative direction)
• Constraint: Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element covers any part of them.
• Rationale: Ensures the app remains usable for small fingers and small screens.

NFR-4 — Reduced-motion support

• Provenance: explicit (creative direction)
• Constraint: Everything respects prefers-reduced-motion by settling instantly with no overshoot.
• Rationale: Accessibility and comfort for children who are sensitive to motion.

NFR-5 — No frightening imagery

• Provenance: explicit (creative direction)
• Constraint: No photorealistic or frightening disaster imagery (collapsed buildings, fire, injured people).
• Rationale: The emotional register must be reassuring, playful, and confidence-building rather than frightening.

NFR-6 — No generic SaaS template look

• Provenance: explicit (creative direction)
• Constraint: The generic indigo/blue-on-white SaaS template is forbidden for this project. No glassmorphism, frosted panels, or soft violet-pink-sky gradient blobs. No Inter, Roboto, Poppins, system-ui, or any neutral corporate sans for headings or body. No sharp corners, hairline dividers, or dense data-table treatments.
• Rationale: Preserves the warm cream, tangerine, and raspberry identity of the product.

10. Tech Stack

• Frontend: React (responsive mobile web application).
• Styling: CSS with the token system defined in Section 6 (Baloo 2 and Nunito via web font loading; CSS custom properties for the palette; clamp() for the type scale).
• Illustration: Modular vector illustration (SVG) in the Pablo Stanley tradition; pure CSS/SVG for the confetti burst (no particles library).
• Motion: CSS transitions and animations at 180–260ms with a gentle overshoot; prefers-reduced-motion media query for the reduced-motion state.
• Backend: Python / FastAPI for serving course, quiz, and progress data.
• Storage: Appropriate storage for course content, quiz questions, and learner progress.
• Deployment: Docker / docker-compose. Kubernetes only if deployment requires it.

11. Assumptions and Constraints

Assumptions

• [Default — not specified by user] The app is delivered as a single responsive web application with no native app companion.
• [Default — not specified by user] Course content, quiz questions, and progress data are served by a first-party backend.
• [Default — not specified by user] The child's progress is stored locally or in a first-party session without requiring an account, consistent with the accepted access_requirement: none for all four pages.
• [Default — not specified by user] The named courses "Earthquake Safety" and "Emergency Kit" are the initial course set; additional courses may be added later but are not part of the current scope.

Constraints

• The product is a responsive mobile web application (explicit).
• The visual design must be bright, friendly, and clean, with cute illustration icons (explicit).
• All four pages — Landing, Courses, Progress, and Quiz — are openly reachable with no account requirement (accepted access contract).
• The Child Learner is the only accepted active human actor in the current scope.
• No photorealistic or frightening disaster imagery (explicit).
• No generic indigo/blue-on-white SaaS template look (explicit).
• Readable text and controls stay whole at every viewport (explicit).

12. Glossary

• Child Learner: The only accepted active human persona — a kid using magic-kids to learn disaster safety.
• Course: A disaster-learning topic presented as a colorful card, such as "Earthquake Safety" or "Emergency Kit".
• Course card: A tall, illustration-led card with a circular colour-blob illustration badge, title, one-line description, progress bar, and "Start Quiz" pill.
• Progress bar: A segmented bar (5 chunky rounded pips) that fills as lessons complete, with a wiggling mascot pin at the current position.
• Quiz: The focused quiz experience launched by the "Start Quiz" action from a course.
• Start Quiz: The pill button on each course card that launches the Quiz page for that course.
• Sticker dock: The bottom navigation on mobile with four rounded tiles (Home, Kursus, Progres, Kuis).
• Sticker style: The visual language of thick 3px ink outlines, 28px radii, hard offset shadows, and circular colour-blob illustration badges.
• Colour blob: A circular coloured shape behind a course icon that makes each course read as a badge.
• Confetti burst: A burst of tiny vector shapes (pure CSS/SVG) shown on a correct quiz answer.
• Reduced motion: The prefers-reduced-motion state in which all motion settles instantly with no overshoot.