System Requirements Document for kalimat-normalnya

1. Introduction

kalimat-normalnya is a teaching and self-study surface for English suffix pronunciation. It presents the two suffix systems that most often trip up learners of English — the -s/-es endings (/s/, /z/, /ɪz/) and the -ed endings (/d/, /t/, /ɪd/) — as a set of poster-like rule pages plus two gap-fill practice tasks.

The product intent is narrow and explicit: give learners the pronunciation rules with their phonetic environments and example words, give them the practice word sets, and then let them drill the two gap-fill exercises where each item supplies a phonetic transcription with a missing suffix slot and the learner must supply both the correct suffix sound and the normal spelling of the word.

The audience is two-fold: English Pronunciation Learner, who studies the rules and completes the gap-fill tasks, and Teacher / Material Preparer, who uses the same rules, example sets, and practice word lists to teach from and to check learner answers against.

2. System Overview

kalimat-normalnya is a small, fully public, no-account web surface. It has five destinations: a Landing poster that introduces the material and routes into the rules and practice, two rule pages (-ed Rules, -s/-es Rules), and two practice pages (-s/-es Practice, -ed Practice). Every destination is anonymously reachable; no identity, sign-in, or stored learner state is required or provided.

The current delivery covers:

• The -ed material: past tense and past participle forms (heated, finished, stuffed, lived); the /d/ rule after voiced sounds with examples lived, bathed, loathed; the /t/ rule after voiceless sounds with examples laughed, pushed; the /ɪd/ rule after root-final alveolar stops with examples wanted, founded; and the practice word set managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled.
• The -s/-es material: the /s/, /z/, and /ɪz/ sounds and their normal spellings.
• Two gap-fill tasks: one for /z/, /s/, or /ɪz/ over fifteen transcriptions, and one for /d/, /t/, or /ɪd/ over fifteen transcriptions, each item also requiring the normal spelling of the word.

Narrow exclusions: there is no account system, no progress tracking, no scoring history, no audio playback requirement, no content authoring tool, and no material beyond the suffix rules and practice items listed above.

2a. Product Interpretation and Delivery Boundary

Everything in kalimat-normalnya is delivered as first-party custom pages owned by the application. There is no provider-owned surface, no external destination, and no headless delivery: the rules and the practice tasks are the product, and they are rendered directly.

Access is deliberately open. The source material is classroom drill material meant to be projected, read from a phone, and worked through without ceremony, so every page — including both practice pages — is reachable anonymously. No page establishes identity, and no page requires it. Because no accepted journey depends on a learner privately owning or resuming durable state, no account lifecycle is inferred and none is added.

The current horizon is the complete set of rules, examples, and practice items listed in the source. Nothing in the source describes a future phase, so no future section is carried.

2b. Source Content Inventory

The authoritative source supplies the following verified content, preserved in full.

-ed suffix — past tense and past participle forms: heated, finished, stuffed, lived.

-ed suffix — /d/ examples: played, arranged, robbed, cared.

-ed suffix — /t/ examples: wiped, kissed, danced.

-ed suffix — /ɪd/ examples: hated, added, ended, permitted.

-ed suffix — /d/ rule: /d/ after voiced sounds: /b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/ + vowel sounds. Examples: lived, bathed, loathed.

-ed suffix — /t/ rule: /t/ after voiceless sounds: /p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/. Examples: laughed, pushed.

-ed suffix — /ɪd/ rule: /ɪd/ after root-final alveolar stops: /t/, /d/. Examples: wanted, founded.

-ed practice word set: managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled.

-s/-es gap-fill task — fill in /z/, /s/, or /ɪz/, with the normal spelling of each word:

-ed gap-fill task — fill in /d/, /t/, or /ɪd/, with the normal spelling of each word:

2c. Page Content and Component Coverage

Landing

• Information and state: An anonymous poster entry. The dominant element is the word -ED set in Anton at viewport-spanning scale, bleeding off the left edge, over a diagonal Scher red band. Three stacked sound-category chips — /d/, /t/, /ɪd/ — sit pinned to the right third, each with its example word beneath in Oswald. A yellow band across the bottom carries the primary call to action and a secondary text link into the rules. No account state, no learner state, no personalization.
• Primary action: Enter the practice — the MULAI LATIHAN call to action in the yellow band, routing to -ed Practice.
• Supporting actions: Follow the secondary text link into the rules (-ed Rules); use the fixed top navigation to reach -s/-es Rules and -s/-es Practice directly.
• Domain entities: Sound category (/d/, /t/, /ɪd/), example word, rule page, practice page.
• Component responsibilities: Hero poster block (oversized -ED wordmark, diagonal red band, halftone dot screen at 8% over the warm ground); sound-category chip stack (three chips, each a solid colour block with the IPA symbol centred and its example word beneath); bottom yellow CTA band (primary CTA plus secondary rules link); fixed top navigation bar (black caps on the warm ground, hard red underline on the active page).
• States: Loading — static content, no loading state. Empty — not applicable; the poster content is fixed. Success — the poster renders at full viewport with the -ED wordmark, the three chips, and the CTA band all fully inside the viewport at 375px, 768px, and 1280px. Error — not applicable; no data fetch. Recovery — not applicable.

-ed Rules

• Information and state: The complete -ed rule material. Past tense and past participle forms: heated, finished, stuffed, lived. The /d/ rule after voiced sounds (/b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/ + vowel sounds) with examples lived, bathed, loathed. The /t/ rule after voiceless sounds (/p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/) with examples laughed, pushed. The /ɪd/ rule after root-final alveolar stops (/t/, /d/) with examples wanted, founded. The practice word set: managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled.
• Primary action: Read the rule statement and its example words; move into -ed Practice to drill the same material.
• Supporting actions: Use the fixed top navigation to move to -s/-es Rules, -s/-es Practice, or back to Landing.
• Domain entities: Rule (sound category, phonetic environment, example words), example word, practice word set item.
• Component responsibilities: Dense two-column rule poster — left column the rule statement in 56px caps, right column the example words stacked flush-right with their IPA, separated by a 6px black rule; full-bleed colour bands with diagonal cut edges (clip-path at ~-4deg) separating the /d/, /t/, and /ɪd/ sections, with /d/ and /t/ on Scher red and /ɪd/ on yellow; IPA transcription chips as rectangular solid-colour blocks with the symbol centred; the practice word set rendered as a dense poster grid of flat blocks; optional high-contrast black-and-white cut-out mouth or ear diagram cropped hard to the grid.
• States: Loading — static content, no loading state. Empty — not applicable. Success — every rule statement, phonetic environment, example word, and practice word set item is fully readable and inside its container at 375px, 768px, and 1280px. Error — not applicable. Recovery — not applicable.

-s/-es Rules

• Information and state: The /s/, /z/, and /ɪz/ suffix sounds and their normal spellings, presented as the counterpart rule page to -ed Rules.
• Primary action: Read the sound rules and their normal spelling patterns; move into -s/-es Practice to drill the same material.
• Supporting actions: Use the fixed top navigation to move to -ed Rules, -ed Practice, or back to Landing.
• Domain entities: Suffix sound (/s/, /z/, /ɪz/), normal spelling pattern, example word.
• Component responsibilities: Dense two-column rule poster in the same structure as -ed Rules — rule statement in 56px caps on the left, example words and IPA stacked flush-right, 6px black rule between; full-bleed colour bands with diagonal cut edges, with /s/ and /z/ on Scher red and /ɪz/ on yellow so the extra-syllable sound is the loudest colour; IPA transcription chips as solid-colour rectangular blocks.
• States: Loading — static content, no loading state. Empty — not applicable. Success — every sound rule and normal spelling pattern is fully readable and inside its container at 375px, 768px, and 1280px. Error — not applicable. Recovery — not applicable.

-s/-es Practice

• Information and state: The /z/, /s/, or /ɪz/ gap-fill task. Fifteen items, each showing a phonetic transcription with a trailing underscore gap: /bəʊt_/, /desk_/, /mɒs_/, /sɑːm_/, /'wɪndəʊ_/, /wɒ\xca\xa7_/, /'rɪvə_/, /bʌs_/, /'kɪdni_/, /pɪ\xca\xa7_/, /steriəʊ_/, /'neɪbə_/, /'bɒtl_/, /siː_/, /eə_/. Each item also requires the normal spelling of the word. A thin marquee band of IPA symbols runs along the top of the practice grid.
• Primary action: For each item, choose the correct suffix sound — /z/, /s/, or /ɪz/ — and supply the normal spelling of the word.
• Supporting actions: Reveal an item's answer by hovering (hard cut, no fade) or by keyboard focus; consult -s/-es Rules via the fixed top navigation.
• Domain entities: Practice item (transcription, gap, correct suffix sound, normal spelling), suffix sound choice (/z/, /s/, /ɪz/).
• Component responsibilities: Practice grid — 3-up on desktop, stacking to 1-up at 375px; each chip a colour block holding the IPA transcription, the underscore gap, the suffix-sound answer control, and the normal spelling revealed beneath; pill-shaped answer chips for the suffix-sound choice (the only rounded shape in the product); IPA marquee band above the grid; fixed top navigation bar.
• States: Loading — static content, no loading state. Empty — not applicable; all fifteen items are always present. Success — the learner selects a suffix sound and supplies a normal spelling for an item, and the item's correct suffix sound and normal spelling are available to check against. Error — an incorrect suffix sound or normal spelling is not accepted as the item's answer; the item remains open for another attempt. Recovery — the learner re-selects the suffix sound or re-enters the normal spelling for the same item; the answer remains available inline. Under prefers-reduced-motion, the marquee wraps into a static row of symbols and each chip shows its answer label inline instead of on flip.

-ed Practice

• Information and state: The /d/, /t/, or /ɪd/ gap-fill task. Fifteen items, each showing a phonetic transcription with a trailing underscore gap: /ə'laʊ_/, /kəʊm_/, /dɪ'veləp_/, /dɑːns_/, /\xca\xa4ɔɪn_/, /mɔːn_/, /əʊ'beɪ_/, /rɪ'gret_/, /rɒk_/, /treɪd_/, /jɔːn_/, /ə'nɔɪ_/, /griːs_/, /hæ\xc6\x9e_/, /gɑːd_/. Each item also requires the normal spelling of the word. A thin marquee band of IPA symbols runs along the top of the practice grid.
• Primary action: For each item, choose the correct suffix sound — /d/, /t/, or /ɪd/ — and supply the normal spelling of the word.
• Supporting actions: Reveal an item's answer by hovering (hard cut, no fade) or by keyboard focus; consult -ed Rules via the fixed top navigation.
• Domain entities: Practice item (transcription, gap, correct suffix sound, normal spelling), suffix sound choice (/d/, /t/, /ɪd/).
• Component responsibilities: Practice grid — 3-up on desktop, stacking to 1-up at 375px; each chip a colour block holding the IPA transcription, the underscore gap, the suffix-sound answer control, and the normal spelling revealed beneath; pill-shaped answer chips for the suffix-sound choice; IPA marquee band above the grid; fixed top navigation bar.
• States: Loading — static content, no loading state. Empty — not applicable; all fifteen items are always present. Success — the learner selects a suffix sound and supplies a normal spelling for an item, and the item's correct suffix sound and normal spelling are available to check against. Error — an incorrect suffix sound or normal spelling is not accepted as the item's answer; the item remains open for another attempt. Recovery — the learner re-selects the suffix sound or re-enters the normal spelling for the same item; the answer remains available inline. Under prefers-reduced-motion, the marquee wraps into a static row of symbols and each chip shows its answer label inline instead of on flip.

3. Functional Requirements

FR-1 — -ed past tense and past participle forms (explicit) As an English Pronunciation Learner, I should see the -ed suffix presented as past tense and past participle forms with the examples heated, finished, stuffed, and lived, so that I understand what the -ed ending is attached to.

• Trigger/input: opening -ed Rules.
• Observable result: the four forms heated, finished, stuffed, lived are displayed as the -ed past tense and past participle examples.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: read the /d/, /t/, and /ɪd/ rules below.

FR-2 — /d/ rule after voiced sounds (explicit) As an English Pronunciation Learner, I should see the /d/ rule stating that /d/ follows voiced sounds /b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/ and vowel sounds, with the examples lived, bathed, and loathed, so that I can identify which -ed words take /d/.

• Trigger/input: opening -ed Rules.
• Observable result: the /d/ rule with its full voiced-sound environment and the examples lived, bathed, loathed is displayed.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: read the /t/ rule.

FR-3 — /t/ rule after voiceless sounds (explicit) As an English Pronunciation Learner, I should see the /t/ rule stating that /t/ follows voiceless sounds /p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/, with the examples laughed and pushed, so that I can identify which -ed words take /t/.

• Trigger/input: opening -ed Rules.
• Observable result: the /t/ rule with its full voiceless-sound environment and the examples laughed, pushed is displayed.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: read the /ɪd/ rule.

FR-4 — /ɪd/ rule after root-final alveolar stops (explicit) As an English Pronunciation Learner, I should see the /ɪd/ rule stating that /ɪd/ follows root-final alveolar stops /t/ and /d/, with the examples wanted and founded, so that I can identify which -ed words take /ɪd/.

• Trigger/input: opening -ed Rules.
• Observable result: the /ɪd/ rule with its /t/, /d/ environment and the examples wanted, founded is displayed.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: read the practice word set.

FR-5 — -ed practice word set (explicit) As an English Pronunciation Learner, I should see the -ed practice word set managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, and filled, so that I have the words to work through before drilling.

• Trigger/input: opening -ed Rules.
• Observable result: all fifteen practice words are displayed.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: move into -ed Practice.

FR-6 — -s/-es material covering /s/, /z/, and /ɪz* (explicit) As an English Pronunciation Learner, I should see the -s/-es suffix material covering the /s/, /z/, and /ɪz/ sounds and their normal spellings, so that I can learn the counterpart suffix system to -ed.

• Trigger/input: opening -s/-es Rules.
• Observable result: the /s/, /z/, and /ɪz/ sounds and their normal spellings are displayed.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: move into -s/-es Practice.

FR-7 — /z/, /s/, or /ɪz/ gap-fill task (explicit) As an English Pronunciation Learner, I should fill in /z/, /s/, or /ɪz/ for each of the given phonetic transcriptions /bəʊt_/, /desk_/, /mɒs_/, /sɑːm_/, /'wɪndəʊ_/, /wɒ\xca\xa7_/, /'rɪvə_/, /bʌs_/, /'kɪdni_/, /pɪ\xca\xa7_/, /steriəʊ_/, /'neɪbə_/, /'bɒtl_/, /siː_/, /eə_/, so that I can practise choosing the correct -s/-es suffix sound.

• Trigger/input: opening -s/-es Practice and selecting a suffix sound for an item.
• Observable result: the learner's chosen suffix sound for the item is recorded against that item, and the item's correct suffix sound is available to check against.
• Access state: anonymous.
• Failure/recovery: an incorrect suffix sound is not accepted as the item's answer; the item stays open and the learner can choose again.
• Continuation: move to the next item, or reveal the answer for the current item.

FR-8 — /d/, /t/, or /ɪd/ gap-fill task (explicit) As an English Pronunciation Learner, I should fill in /d/, /t/, or /ɪd/ for each of the given phonetic transcriptions /ə'laʊ_/, /kəʊm_/, /dɪ'veləp_/, /dɑːns_/, /\xca\xa4ɔɪn_/, /mɔːn_/, /əʊ'beɪ_/, /rɪ'gret_/, /rɒk_/, /treɪd_/, /jɔːn_/, /ə'nɔɪ_/, /griːs_/, /hæ\xc6\x9e_/, /gɑːd_/, so that I can practise choosing the correct -ed suffix sound.

• Trigger/input: opening -ed Practice and selecting a suffix sound for an item.
• Observable result: the learner's chosen suffix sound for the item is recorded against that item, and the item's correct suffix sound is available to check against.
• Access state: anonymous.
• Failure/recovery: an incorrect suffix sound is not accepted as the item's answer; the item stays open and the learner can choose again.
• Continuation: move to the next item, or reveal the answer for the current item.

FR-9 — Normal spelling for every gap-fill item (explicit) As an English Pronunciation Learner, I should also provide the normal spelling of the word for every gap-fill item in both tasks, so that I connect the phonetic transcription to the written word.

• Trigger/input: working an item in -s/-es Practice or -ed Practice.
• Observable result: each item carries a normal-spelling field alongside its suffix-sound choice, and the item's correct normal spelling is available to check against.
• Access state: anonymous.
• Failure/recovery: an incorrect normal spelling is not accepted as the item's answer; the item stays open and the learner can re-enter it.
• Continuation: move to the next item, or reveal the answer for the current item.

FR-10 — Answer reveal on practice items (required_inference) As an English Pronunciation Learner, I should be able to reveal an item's correct suffix sound and normal spelling, so that I can check my own answer and continue without being stuck.

• Trigger/input: hovering an item chip, or focusing it by keyboard.
• Observable result: the item's correct suffix sound and normal spelling become visible — on hover by a hard cut with no fade, and inline for keyboard and reduced-motion users.
• Access state: anonymous.
• Failure/recovery: if the reveal is not triggered, the item simply remains in its unanswered presentation; nothing is lost.
• Continuation: continue to the next item.

FR-11 — Teacher use of the same rules, examples, and practice lists (explicit) As a Teacher / Material Preparer, I should use the same rules, example sets, and practice word lists to present the material to students and to prepare exercises and answer keys, so that I can teach from the surface and check learner answers against it.

• Trigger/input: opening any rules page or practice page.
• Observable result: the rules, examples, and practice items are displayed in a form that can be presented to a class and read from across a room, with each practice item's correct suffix sound and normal spelling available to check against.
• Access state: anonymous.
• Failure/recovery: not applicable; static content.
• Continuation: move between rules and practice pages via the fixed top navigation.

FR-12 — Navigation between the rules and practice surfaces (required_inference) As an English Pronunciation Learner or Teacher / Material Preparer, I should move between the Landing, the two rules pages, and the two practice pages from a fixed top navigation bar, so that I can go from a rule to its practice and back without losing my place in the material.

• Trigger/input: selecting an item in the fixed top navigation bar.
• Observable result: the selected page is shown, and the active page carries a hard red underline in the navigation bar.
• Access state: anonymous.
• Failure/recovery: not applicable; navigation is always available.
• Continuation: continue reading or practising on the selected page.

4. User Personas

English Pronunciation Learner

Product context. A learner of English pronunciation working through suffix material on their own, most often on a phone. They arrive at the material without an account and without any prior state in the product; the surface is a poster they read and a set of drills they work.

Primary goal. Correctly identify the pronunciation of each suffix — /s/, /z/, /ɪz/ for -s/-es and /d/, /t/, /ɪd/ for -ed — and write the corresponding normal word form for each practice item.

Distinct accepted responsibilities. This persona studies the rules: the -ed past tense and past participle forms (heated, finished, stuffed, lived); the /d/ rule after voiced sounds with lived, bathed, loathed; the /t/ rule after voiceless sounds with laughed, pushed; the /ɪd/ rule after root-final alveolar stops with wanted, founded; and the -s/-es material covering /s/, /z/, and /ɪz/ and their normal spellings. They then work the two gap-fill tasks: choosing /z/, /s/, or /ɪz/ across fifteen transcriptions, and choosing /d/, /t/, or /ɪd/ across fifteen transcriptions, supplying the normal spelling of each word in both.

Relevant inputs and decisions. For each practice item, the learner reads the phonetic transcription with its trailing underscore gap and decides which suffix sound belongs in the gap, then decides how the word is normally spelled. They decide when to reveal an item's answer rather than attempt it.

Interactions with other accepted participants. The learner does not interact with the Teacher / Material Preparer inside the product; the two share the same rules, examples, and practice items, and the learner's work is what the teacher checks against.

Observable success. Every practice item carries a chosen suffix sound and a normal spelling, and the learner can see each item's correct suffix sound and normal spelling to compare against their own.

Teacher / Material Preparer

Product context. A teacher or material preparer who needs the suffix material in a form that can be presented to a class — projected, read from across a room, or handed out — and who needs the practice items with their answers available for checking.

Primary goal. Have the organized rules, examples, and practice items available to teach from and to check learner answers against.

Distinct accepted responsibilities. This persona presents the -ed and -s/-es rules and their example sets to students, and prepares exercises and answer keys from the same practice word lists and gap-fill items the learner works. Their work is presentational and verificatory rather than drill-based: they read the rule statements and example words at scale, and they use each practice item's correct suffix sound and normal spelling as the key.

Relevant inputs and decisions. The teacher decides which rule section to present and in what order, and which practice items to set; they read the correct suffix sound and normal spelling for each item to check a learner's answer.

Interactions with other accepted participants. The teacher does not interact with the English Pronunciation Learner inside the product. The shared material — the rules, the example sets, the practice word lists, and the per-item answers — is the point of contact.

Observable success. The rules, examples, and practice items are readable at presentation scale, and each practice item's correct suffix sound and normal spelling are available to check against.

5. Core User Flows

Flow 1 — Learner studies the -ed rules and drills the -ed practice

1. The learner opens Landing anonymously. The poster shows the oversized -ED wordmark over the diagonal Scher red band, with the three sound-category chips /d/, /t/, /ɪd/ stacked on the right third, each with its example word beneath.
2. The learner follows the secondary text link into -ed Rules.
3. On -ed Rules, the learner reads the -ed past tense and past participle forms — heated, finished, stuffed, lived — then the three rule sections: the /d/ rule after voiced sounds (/b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/ + vowel sounds) with lived, bathed, loathed; the /t/ rule after voiceless sounds (/p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/) with laughed, pushed; and the /ɪd/ rule after root-final alveolar stops (/t/, /d/) with wanted, founded. Each rule statement sits in 56px caps on the left, its example words and IPA stacked flush-right across a 6px black rule.
4. The learner reads the practice word set — managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled — and then moves into -ed Practice from the fixed top navigation.
5. On -ed Practice, the learner works the fifteen items. For the first item, /ə'laʊ_/, they read the transcription, decide the suffix sound is /d/, and select it from the pill-shaped answer chips on that item's colour block. They then supply the normal spelling, allow.
6. The item's correct suffix sound and normal spelling are available to check against. If the learner's choice is wrong, the item is not accepted as answered and stays open; the learner selects again or re-enters the spelling.
7. The learner continues through the remaining items — /kəʊm_/, /dɪ'veləp_/, /dɑːns_/, /\xca\xa4ɔɪn_/, /mɔːn_/, /əʊ'beɪ_/, /rɪ'gret_/, /rɒk_/, /treɪd_/, /jɔːn_/, /ə'nɔɪ_/, /griːs_/, /hæ\xc6\x9e_/, /gɑːd_/ — choosing /d/, /t/, or /ɪd/ and supplying each normal spelling.
8. On any item the learner is unsure of, they hover the chip to reveal the answer with a hard cut, or focus it by keyboard to see the answer inline. Under prefers-reduced-motion, the answer label is shown inline on the chip and the IPA marquee above the grid wraps into a static row.
9. The learner finishes the set with every item carrying a chosen suffix sound and a normal spelling, and can compare each against its correct answer.

Flow 2 — Learner studies the -s/-es rules and drills the -s/-es practice

1. The learner opens -s/-es Rules from the fixed top navigation, or from Landing.
2. On -s/-es Rules, the learner reads the /s/, /z/, and /ɪz/ sounds and their normal spellings, laid out as a dense two-column poster with the rule statement in caps on the left and the example words and IPA stacked flush-right. The /s/ and /z/ sections sit on Scher red; the /ɪz/ section sits on yellow, so the extra-syllable sound is the loudest colour on the page.
3. The learner moves into -s/-es Practice from the fixed top navigation.
4. On -s/-es Practice, the learner works the fifteen items. For the first item, /bəʊt_/, they read the transcription, decide the suffix sound is /s/, and select it from the pill-shaped answer chips on that item's colour block. They then supply the normal spelling, boat.
5. The item's correct suffix sound and normal spelling are available to check against. If the learner's choice is wrong, the item is not accepted as answered and stays open; the learner selects again or re-enters the spelling.
6. The learner continues through the remaining items — /desk_/, /mɒs_/, /sɑːm_/, /'wɪndəʊ_/, /wɒ\xca\xa7_/, /'rɪvə_/, /bʌs_/, /'kɪdni_/, /pɪ\xca\xa7_/, /steriəʊ_/, /'neɪbə_/, /'bɒtl_/, /siː_/, /eə_/ — choosing /z/, /s/, or /ɪz/ and supplying each normal spelling.
7. On any item the learner is unsure of, they hover the chip to reveal the answer with a hard cut, or focus it by keyboard to see the answer inline. Under prefers-reduced-motion, the answer label is shown inline on the chip and the IPA marquee above the grid wraps into a static row.
8. The learner finishes the set with every item carrying a chosen suffix sound and a normal spelling, and can compare each against its correct answer.

Flow 3 — Learner enters directly into practice from the Landing poster

1. The learner opens Landing anonymously and reads the poster: the -ED wordmark bleeding off the left edge, the diagonal red band behind it, and the three chips /d/, /t/, /ɪd/ with their example words.
2. The learner selects the MULAI LATIHAN call to action in the yellow band across the bottom.
3. The learner lands on -ed Practice and works the fifteen /d/, /t/, or /ɪd/ items as in Flow 1, steps 5–9.
4. If the learner wants the rules first, they use the fixed top navigation to reach -ed Rules and return to -ed Practice when ready.

Flow 4 — Teacher presents the rules and checks answers against the practice items

1. The teacher opens -ed Rules anonymously and presents the rule sections to the class: the -ed past tense and past participle forms, then the /d/, /t/, and /ɪd/ rules with their phonetic environments and example words, read at 56px caps from across the room.
2. The teacher moves to -s/-es Rules from the fixed top navigation and presents the /s/, /z/, and /ɪz/ sounds and their normal spellings in the same two-column poster layout.
3. The teacher opens -ed Practice and sets items from the fifteen /d/, /t/, or /ɪd/ transcriptions, or opens -s/-es Practice and sets items from the fifteen /z/, /s/, or /ɪz/ transcriptions.
4. For each item the teacher sets, the correct suffix sound and the normal spelling are available on the item to check a learner's answer against — for example /ə'laʊ_/ → /d/, allow; /bəʊt_/ → /s/, boat.
5. The teacher moves between the rules pages and the practice pages via the fixed top navigation, with the active page marked by a hard red underline, and continues presenting or checking as needed.

6. Visuals Colors and Theme

Muse and headline. Typography as architecture after Paula Scher. The headline idea: the lesson is a poster — IPA symbols and suffix rules are already typographic artefacts, so the type itself is the hero, set loud enough to teach from across a room.

Colour tokens — light mode.

Proportion: roughly 55% warm ground, 25% red, 12% yellow, 8% black/white. Text on red and yellow is always black or white at AA contrast — never grey. No blue or indigo anywhere; no blue-on-white ground.

Typography.

• Headings: Anton, maximum weight, all-caps, tracking tightened to -0.02em, set at viewport-spanning sizes so single words like -ED or PRACTISE become architecture. Headlines stack and rotate slightly off-axis, with IPA symbols set in the same face at the same scale so /d/, /t/, /ɪd/, /s/, /z/, /ɪz/ read as poster glyphs, not notation.
• Body: Oswald, medium weight; all-caps for labels and micro-headings, sentence case for reading text, generous line-height so dense rule lists stay legible.
• Scale: 1.414 modular poster scale — display 64px mobile → 180px desktop (clamp); section head 40/56; sub-head 28/34; body 18/20; label 13/14 all-caps tracked +0.08em; IPA display glyph 48/96.

Shape language. Hard edges only — no border radius anywhere except pill-shaped answer chips in the practice tasks. Full-bleed colour bands with diagonal cut edges (clip-path at ~-4deg) separate rule sections. Thick 6px black rules underline section titles and divide data rows. IPA transcription chips are rectangular blocks of solid colour with the symbol centred, sized like poster stamps. Cards do not float or lift; they are flat blocks butted against each other in a dense poster grid.

Spacing rhythm. Dense poster grid on a 12-column asymmetric layout; headlines break out of the column and span the viewport edge-to-edge. Rules pages are dense two-column text posters. Practice pages are a 3-up grid of gap-fill chips on desktop, stacking to 1-up at 375px. Navigation is a fixed top bar of black caps on the warm ground with a hard red underline on the active page — no rounded tabs, no glass.

Imagery style. Typography is the image. No photography, no illustration, no 3D. The visual material is the IPA symbols themselves set as oversized display glyphs, the example word lists, and flat colour blocks. Where texture is needed, a subtle halftone dot screen in black at 8% opacity over the warm ground evokes printed poster stock. An occasional high-contrast black-and-white cut-out of a mouth or ear diagram is permitted only on the rules pages, cropped hard to the grid.

7. Signature Design Concept

The poster that teaches. The public entry is a full-viewport printed poster, not a SaaS hero. The word -ED is set in Anton at clamp(120px, 28vw, 380px) and fills the left two-thirds of the screen, bleeding off the left edge so the E is cut by the viewport. A solid Scher red (#E03C31) band runs diagonally behind it from bottom-left to top-right. The three sound categories /d/, /t/, /ɪd/ sit as three stacked black-on-colour chips pinned to the right third at 96px, each with its example word beneath in Oswald. A single yellow (#F2B705) horizontal band across the bottom holds the CTA MULAI LATIHAN in black caps plus a secondary text link to the rules.

There is no centred headline, no subtext paragraph, no gradient, and no button-with-blob. The composition is a printed poster with the type as the dominant element and the colour blocks as its ground. The gesture of the cut E is carried by the wordmark itself as decoration; the CTA label, the chip symbols, and the example words stay whole and inside the viewport at 375px, 768px, and 1280px.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief.

• Focal subject: the -ED wordmark in Anton, bleeding off the left edge over the diagonal Scher red band, with the three sound-category chips /d/, /t/, /ɪd/ pinned to the right third.
• Input → transformation → outcome thesis: on load, the headline words snap into place one after another in a staggered reveal with no easing theatrics; as the poster settles, the red band wipes across the section boundary and the three chips arrive in sequence. The outcome is the fully composed poster — the same arrangement the learner reads from, with nothing added that is not accepted content.
• Motion vocabulary: staggered word reveals (hard snaps, no easing theatrics); colour-block wipes that slide a red or yellow band across a section boundary as it enters view; a marquee of IPA symbols running along a thin band above the practice grid; hover on a practice chip flips it to reveal the answer with a hard cut, not a fade.
• Composed first frame: the -ED wordmark already in place and cut by the left edge, the diagonal red band behind it, the three chips stacked on the right third, and the yellow CTA band across the bottom — the poster at rest, before any reveal plays.
• Reduced-motion state: under prefers-reduced-motion everything resolves to its static arrangement — words appear at once, the marquee becomes a wrapped row of symbols, and chips show their answer label inline instead of on flip.

9. Non-Functional Requirements

NFR-1 — Anonymous access to every page (explicit) Every page — Landing, -ed Rules, -s/-es Rules, -s/-es Practice, -ed Practice — is reachable without an account, sign-in, or any identity step. Rationale: the source material is classroom drill material meant to be projected and worked through without ceremony, and no accepted journey depends on privately owned or resumable learner state.

NFR-2 — No stored learner state (required_inference) No learner answers, progress, or history are persisted or bound to a person. Rationale: no accepted requirement asks for saved progress, scoring history, or resumption, and adding persistence would introduce an account lifecycle the source does not accept.

NFR-3 — Readable text and controls stay whole 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 (for example font-size: clamp(...) with its mobile size) 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 as the creative direction asks, as long as they cover no readable text or control.

NFR-4 — Moving and scrollable content stays fully readable (explicit) The IPA marquee band above each practice grid may cross the viewport or container edge by design; every symbol must become fully readable as it passes. Under prefers-reduced-motion, the marquee wraps into a static row so each symbol can be brought fully into view.

NFR-5 — Reduced-motion support (explicit) Under prefers-reduced-motion, staggered word reveals resolve to their final arrangement at once, colour-block wipes do not play, the IPA marquee becomes a wrapped static row, and practice chips show their answer label inline instead of on flip.

NFR-6 — Contrast (explicit) Text on the red (#E03C31) and yellow (#F2B705) colour blocks is always black or white at AA contrast — never grey. Muted grey (#6E6A63) is reserved for secondary metadata and rules.

NFR-7 — No blue or indigo (explicit) No blue or indigo appears anywhere in the palette — no #0057FF, #2563EB, #4F46E5 or neighbours — and no blue-on-white ground. The ground stays warm poster stock #F2EDE4.

NFR-8 — Static content delivery (required_inference) The rules, examples, and practice items are fixed content; there is no content authoring, editing, or upload surface. Rationale: the source supplies a closed set of rules, examples, and practice items and asks for no authoring capability.

10. Tech Stack

• React for the client application, rendering the five pages as a single-page surface with client-side routing between Landing, -ed Rules, -s/-es Rules, -s/-es Practice, and -ed Practice.
• Python / FastAPI for the application service that serves the page shell and the fixed rule, example, and practice-item content.
• Storage: none required for learner data, since no learner state is persisted (NFR-2). The rule, example, and practice-item content is fixed and can be served from the application itself.
• Docker / docker-compose for local packaging and running the client and service together.
• Kubernetes: not required; the deployment is a single small public surface with no scaling or orchestration requirement in the source.

11. Assumptions and Constraints

• A-1 (assumption) The -s/-es rules page presents the /s/, /z/, and /ɪz/ sounds and their normal spellings as the counterpart to the -ed rules page. The source names the -s/-es material and its three sounds but does not enumerate its example words, so no example word list is invented for it.
• A-2 (assumption) The normal spelling supplied for each gap-fill item is the standard written form of the word whose phonetic transcription is given — for example /bəʊt_/ → boat, /ə'laʊ_/ → allow. The source requires the normal spelling for every item but does not print the answers, so the answers are derived from the transcriptions.
• A-3 (assumption) The practice word set managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled is presented on the -ed rules page as the words to work through before drilling. The source lists it under "Let's practise!" without naming a page.
• A-4 (assumption) The CTA label MULAI LATIHAN and the poster copy are presentation-layer text in Indonesian, matching the user's context (ID). The rule, example, and practice content itself stays in the source's English and IPA.
• C-1 (constraint) No account, sign-in, or identity step exists anywhere in the product.
• C-2 (constraint) No learner answers, progress, or history are stored.
• C-3 (constraint) No blue or indigo appears in the palette, and the ground is never clinical white.
• C-4 (constraint) Headings and body use Anton and Oswald; Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are not used for headings or body.
• C-5 (constraint) No photography, illustration, or 3D imagery; typography, IPA glyphs, and flat colour blocks are the visual material.
• C-6 (constraint) No content authoring, editing, or upload capability is provided.

12. Glossary

• -ed suffix — The English past tense and past participle ending, pronounced /d/, /t/, or /ɪd/ depending on the final sound of the root.
• -s/-es suffix — The English plural and third-person singular ending, pronounced /s/, /z/, or /ɪz/ depending on the final sound of the root.
• Voiced sound — A speech sound produced with vocal fold vibration; the /d/ environment: /b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/, plus vowel sounds.
• Voiceless sound — A speech sound produced without vocal fold vibration; the /t/ environment: /p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/.
• Root-final alveolar stop — A root ending in /t/ or /d/; the /ɪd/ environment.
• IPA — The International Phonetic Alphabet; the transcription system used throughout the material, e.g. /bəʊt_/.
• Gap-fill item — A practice item showing a phonetic transcription with a trailing underscore where the suffix sound is missing, e.g. /pɪ\xca\xa7_/.
• Normal spelling — The standard written form of the word whose phonetic transcription is given, e.g. pitch for /pɪ\xca\xa7_/.
• Sound-category chip — A solid-colour rectangular block holding an IPA symbol centred, sized like a poster stamp, e.g. the /d/, /t/, /ɪd/ chips on the Landing poster.
• Marquee band — The thin band of IPA symbols running along the top of a practice grid, which wraps into a static row under prefers-reduced-motion.