System Requirements Document for azure-ed

1. Introduction

azure-ed is an interactive, self-study pronunciation practice application for English word-ending phonology. It is built directly from a supplied classroom worksheet on the –ed suffix and on plural / third-person ending choices, and it turns that worksheet into a drill the learner works through alone.

The product intent is narrow and exact: a motivated adult learner studying English phonology on their own should be able to see the ending rules as a structure — three sounds, three columns, one rule — and then practise them, item by item, supplying the missing phoneme and the normal spelling of each word, receiving instant feedback, and resuming saved practice in a later session.

The audience is the Self-Study Pronunciation Learner: one person, working alone, with no teacher, no class, no assignment, and no classroom management. The app is not teacher-facing and does not distribute, grade, or assign work to anyone else.

2. System Overview

azure-ed is a web application with a custom first-party interface and application-owned identity. It delivers:

• Reference material — the –ed suffix rules (/d/ after voiced sounds, /t/ after voiceless sounds, /ɪd/ after root-final alveolar stops /t/ and /d/), the supplied practice word list, and the voicing structure behind them.
• Two exercise sets — a plural-ending gap-fill set requiring /z/, /s/, or /ɪz/, and an –ed gap-fill set requiring /d/, /t/, or /ɪd/.
• Two answer input modes, both available — typed phoneme entry and multiple-choice phoneme buttons.
• A required normal-word answer — every item also asks for the ordinary orthographic form of the word (e.g. /bəʊt_/ → /s/ → boats).
• Instant feedback — each submitted answer is checked immediately and shows correctness plus the correct answer for self-correction.
• Durable progress — answers, feedback, and continuation state are saved so the learner can resume later.

Actors. The only active human actor is the Self-Study Pronunciation Learner. There are no teacher, administrator, or peer actors. The application itself owns identity, storage, answer checking, and feedback delivery.

Ownership. All practice surfaces are first-party custom pages owned by the application. Identity is application-owned: a self-starting learner enrolls on first use, and a returning learner verifies identity to resume saved practice.

Exclusions. No teacher-facing assignment, class roster, grading, or classroom management. No speech recording or audio-scoring of the learner's voice. No social, sharing, or leaderboard features. No content beyond the supplied worksheet material.

2a. Product Interpretation and Delivery Boundary

azure-ed is delivered as a first-party web application. The learner reaches it anonymously at a public entry surface that explains what the app is and what it drills; from there, the learner either enrolls for the first time or verifies identity as a returning learner, and then works inside the protected practice surfaces.

The boundary between anonymous and protected is deliberate and minimal. The public entry and the two identity surfaces are reachable without an established session. Everything that carries the learner's own practice state — the rules reference, the word list, both exercise sets, answer entry, choice buttons, word-form entry, feedback, and progress — sits behind identity, because that state must remain bound to the correct learner across sessions.

Nothing in this document is deferred to a future horizon. The worksheet material, both exercise sets, both answer modes, instant feedback, and saved progress are all current commitments. There is no teacher surface, no assignment surface, and no classroom surface in the current or planned product.

2b. Source Content Inventory

The supplied worksheet is the authoritative content source. All of the following is verified source content and must appear in the product exactly as given.

–ed suffix — rule set

• Past tense and past participle: heated, finished, stuffed, lived
• /d/: played, arranged, robbed, cared
• /t/: wiped, kissed, danced
• /ɪd/: hated, added, ended, permitted

–ed suffix — distribution rules

• /d/ — after voiced sounds: /b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/ + vowel sounds. Examples: lived, bathed, loathed.
• /t/ — after voiceless sounds: /p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/. Examples: laughed, pushed.
• /ɪd/ — after root-final alveolar stops: /t/, /d/. Examples: wanted, founded.

–ed practice word list (Let's practise!)

managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled

Plural-ending gap-fill items — fill in with /z/, /s/ or /ɪz/

–ed gap-fill items — fill in with /d/, /t/ or /ɪd/

Required answer format. Every item also requires the normal (orthographic) form of the word, as in the supplied example: /bəʊt_/ → /s/ → boats.

2c. Page Content and Component Coverage

Landing

• Information / state. Anonymous public entry. States the product name AZURE·ED, the headline "THE –ED SUFFIX", the subline "Three sounds. One rule. Say it right.", and the three-way classification of the –ed ending: /d/ (voiced), /t/ (voiceless), /ɪd/ (root-final alveolar stops). States that the app is for self-study.
• Primary action. "START DRILL 01" — a full-width, square-cornered black CTA bar that begins the learner's entry into practice.
• Supporting actions. Navigate to Sign Up (first-time learner) and to Login (returning learner).
• Domain entities. Ending rule, phoneme code (/d/, /t/, /ɪd/), example word.
• Component responsibilities. Full-viewport asymmetric poster: a solid #E2231A block occupying the left 40% edge-to-edge with the wordmark AZURE·ED set vertically (rotated −90°) in white Archivo 800 at 22px with wide tracking; a white panel overlapping the red block's right edge by roughly 120px carrying the headline flush-left in Archivo 900 at clamp(44px, 9vw, 96px) stacked in two lines, a 2px black rule beneath it, and the 19px black subline; to the right, three equal ruled rows for /d/, /t/, /ɪd/, each with a filled circle in red, yellow, or black, its consonant trigger in 11px uppercase grey, and a live example word (lived, pushed, wanted) in 30px black; a single large quarter-circle anchoring the composition.
• States. Loading — the poster renders as static structure; no data dependency. Empty — not applicable; the page is fully static content. Success — CTA and both identity links are reachable. Error — if a destination is unreachable, the CTA remains visible and the learner can retry. Recovery — the learner can return to Landing from any identity surface.

Sign Up

• Information / state. Anonymous first-use enrollment surface. Explains that enrolling associates durable practice progress with the learner.
• Primary action. Submit enrollment credentials to establish the learner's identity.
• Supporting actions. Navigate to Login if the learner already has an identity; return to Landing.
• Domain entities. Learner identity, credential.
• Component responsibilities. Square-cornered form fields with hard 1px/2px black rules, no border radius; a single red #E2231A submit control; inline validation messaging in black on paper.
• States. Loading — submit control shows a mechanical in-progress state. Empty — fields render empty with labels. Success — identity established; the learner proceeds into practice. Error — invalid or incomplete input is reported inline without losing entered values. Recovery — the learner corrects the field and resubmits, or switches to Login.

Login

• Information / state. Anonymous returning-learner verification surface. Explains that verifying identity restores saved practice.
• Primary action. Submit credentials to verify identity and resume saved practice.
• Supporting actions. Navigate to Sign Up if the learner has no identity; return to Landing.
• Domain entities. Learner identity, credential, saved practice state.
• Component responsibilities. Same hard-edged ruled form language as Sign Up; a single red submit control; inline error messaging.
• States. Loading — submit control shows a mechanical in-progress state. Empty — fields render empty with labels. Success — identity verified; the learner resumes at their saved continuation point. Error — incorrect credentials are reported inline without revealing which field failed. Recovery — the learner retries, or switches to Sign Up.

Rules

• Information / state. Protected reference surface. Presents the –ed suffix distribution rules: /d/ after voiced sounds (/b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/ + vowel sounds) with examples lived, bathed, loathed; /t/ after voiceless sounds (/p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/) with examples laughed, pushed; /ɪd/ after root-final alveolar stops (/t/, /d/) with examples wanted, founded. Also presents the past-tense/past-participle framing (heated, finished, stuffed, lived) and the /d/, /t/, /ɪd/ example sets (played, arranged, robbed, cared; wiped, kissed, danced; hated, added, ended, permitted).
• Primary action. Read the rules; move on to a practice set.
• Supporting actions. Navigate to Ed Words, Plural Practice, or Ed Practice.
• Domain entities. Ending rule, consonant class (voiced / voiceless / alveolar stop), phoneme code, example word.
• Component responsibilities. A voicing map diagram: two ruled blocks of consonant symbols with the voiced/voiceless boundary drawn as a hard 2px rule. An alveolar-stop marker: two intersecting circles. Three colour-coded columns — red for /d/, yellow for /t/, black for /ɪd/ — with oversized phoneme tokens at 44px mobile to 96px desktop inside square cells. A persistent numbered left gutter (01 RULES) with a full-width 2px black section rule.
• States. Loading — rule content is static; the surface renders immediately. Empty — not applicable. Success — all three rules and their examples are visible. Error — if the learner's session has lapsed, the surface redirects to Login. Recovery — after re-verification the learner returns to Rules.

Ed Words

• Information / state. Protected reference surface presenting the supplied –ed practice word list: managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled.
• Primary action. Read the word list; move on to the –ed drill.
• Supporting actions. Navigate to Rules for the underlying rule, or to Ed Practice to drill.
• Domain entities. Practice word, ending phoneme.
• Component responsibilities. A ruled list in which each word occupies a three-part row on one baseline: phonemic transcription | answer control | revealed normal word. Words are set in Archivo 400 at clamp(22px, 3.4vw, 40px). Numbered left gutter (03 –ED) with a full-width 2px black section rule.
• States. Loading — the list renders from stored content. Empty — not applicable; the list is fixed source content. Success — all fifteen words are listed. Error — session lapse redirects to Login. Recovery — return to Ed Words after re-verification.

Plural Practice

• Information / state. Protected exercise surface presenting the fifteen supplied plural gap-fill items: /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 requires a choice among /z/, /s/, or /ɪz/ and the normal orthographic form of the word.
• Primary action. Answer each item — select or type the ending phoneme and supply the normal word.
• Supporting actions. Move to the next item; revisit a previous item; switch to Ed Practice.
• Domain entities. Gap-fill item, ending phoneme (/z/, /s/, /ɪz/), normal word form, answer record.
• Component responsibilities. Three-part ruled answer rows on one baseline: phonemic transcription | answer control | revealed normal word. Oversized phoneme tokens in square cells. Numbered left gutter (02 PLURALS) with a full-width 2px black section rule. A 120ms hard colour-bar wipe under a row when it is judged.
• States. Loading — items render in source order. Empty — not applicable; the item set is fixed. Success — the learner's answer is recorded and the row is judged. Error — an incomplete submission (missing phoneme or missing normal word) is flagged on the row without advancing. Recovery — the learner completes the missing part and resubmits.

Ed Practice

• Information / state. Protected exercise surface presenting the fifteen supplied –ed gap-fill items: /ə'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 requires a choice among /d/, /t/, or /ɪd/ and the normal orthographic form of the word.
• Primary action. Answer each item — select or type the ending phoneme and supply the normal word.
• Supporting actions. Move to the next item; revisit a previous item; switch to Plural Practice.
• Domain entities. Gap-fill item, ending phoneme (/d/, /t/, /ɪd/), normal word form, answer record.
• Component responsibilities. Same three-part ruled answer row system as Plural Practice, with the red / yellow / black code applied to /d/, /t/, /ɪd/. Numbered left gutter (03 –ED) with a full-width 2px black section rule.
• States. Loading — items render in source order. Empty — not applicable. Success — answer recorded and row judged. Error — incomplete submission flagged on the row. Recovery — complete the missing part and resubmit.

Answer Entry

• Information / state. Protected typed-entry control for the phoneme of the current item. Accepts a typed phonetic symbol.
• Primary action. Type the phoneme and commit it to the item.
• Supporting actions. Clear the field; switch to Choice Practice for the same item.
• Domain entities. Typed phoneme, current item, answer record.
• Component responsibilities. A square-cornered input with a hard 2px black rule, no border radius, set in Archivo 400 at 17–19px. The oversized phoneme token for the item is displayed at display scale beside it. Hover changes the cell fill from white to paper; nothing moves.
• States. Loading — the field renders empty and focused-ready. Empty — placeholder shows the item's transcription with its gap. Success — the typed symbol is accepted and passed to Feedback. Error — an unrecognised symbol is flagged inline without clearing the field. Recovery — the learner retypes, or switches to Choice Practice.

Choice Practice

• Information / state. Protected multiple-choice control for the phoneme of the current item. Presents the applicable phoneme buttons: /z/, /s/, /ɪz/ for plural items; /d/, /t/, /ɪd/ for –ed items.
• Primary action. Press the phoneme button the learner judges correct.
• Supporting actions. Change the selection before submitting; switch to Answer Entry for the same item.
• Domain entities. Phoneme option, current item, answer record.
• Component responsibilities. Square buttons with hard edges and zero border radius, colour-coded by the three-colour system: red for /d/ and /z/, yellow for /t/ and /s/, black for /ɪd/ and /ɪz/. Hover changes fill from white to paper.
• States. Loading — buttons render in fixed order. Empty — not applicable. Success — the pressed phoneme is accepted and passed to Feedback. Error — no selection made on submit is flagged inline. Recovery — the learner presses a button and resubmits.

Word Forms

• Information / state. Protected control collecting the normal orthographic form of the current item's word, alongside the learner's phoneme answer. This is the required second half of every item, per the supplied example /bəʊt_/ → /s/ → boats.
• Primary action. Type the normal word and commit it with the item.
• Supporting actions. Correct the typed word before submitting; view the revealed normal word after judging.
• Domain entities. Normal word form, current item, answer record.
• Component responsibilities. A square-cornered input with a hard 2px black rule, set in Archivo 400 at 17–19px. After judging, the normal word is revealed in place on the same baseline as the transcription and the answer control.
• States. Loading — the field renders empty. Empty — placeholder indicates the expected normal form. Success — the typed word is accepted and the row is judged. Error — an empty or malformed word is flagged inline without clearing the phoneme answer. Recovery — the learner retypes the word and resubmits.

Feedback

• Information / state. Protected result state for a judged item. Shows whether the submitted answer is correct and, when it is not, the correct answer, so the learner can self-correct without a teacher.
• Primary action. Read the verdict and the correct answer.
• Supporting actions. Continue to the next item; revisit the judged item.
• Domain entities. Verdict (correct / incorrect), correct phoneme, correct normal word, answer record.
• Component responsibilities. A 120ms hard wipe of the colour bar under the answer row on judging — red / yellow / black per the code system. A filled disc marks the correct ending. Score numerals count up in 180ms steps. No easing theatrics, no scroll reveals, no hover lift.
• States. Loading — the verdict resolves immediately on submission. Empty — not applicable. Success — correct verdict shown with the filled disc. Error — incorrect verdict shown together with the correct answer. Recovery — the learner reads the correct answer, continues, and may revisit the item.

Progress

• Information / state. Protected continuation state. Tracks movement through the practice items and preserves the learner's position, answers, and feedback so saved practice can be resumed in a later session.
• Primary action. Continue from the saved position.
• Supporting actions. Review previously answered items; move between Plural Practice and Ed Practice.
• Domain entities. Answer record, feedback record, continuation position, learner identity.
• Component responsibilities. Numbered left gutter (04 DRILL) with a full-width 2px black section rule; score numerals that count up in 180ms steps; ruled rows that preserve the three-part baseline layout for reviewed items.
• States. Loading — saved state is retrieved on entry. Empty — a learner with no saved answers starts at the first item of the chosen set. Success — the saved position and prior answers are restored. Error — if saved state cannot be retrieved, the learner is offered a fresh start rather than a blocked screen. Recovery — the learner restarts the current set; new answers are saved as they are judged.

3. Functional Requirements

FR-01 — Self-study practice of the –ed suffix and plural endings As a Self-Study Pronunciation Learner, I should be able to practise the –ed suffix and plural-ending pronunciation rules on my own, so that I can learn them without a teacher.

• Provenance: explicit.
• Trigger: the learner opens the app and enters a practice set.
• Observable result: the learner works through the supplied items and their answers are judged.
• Access state: protected practice surfaces require an established learner identity.
• Failure / recovery: if the session lapses, the learner re-verifies and returns to the practice set.
• Continuation: the learner moves to the next item or switches sets.

FR-02 — Reference the /d/, /t/, /ɪd/ distribution rules As a Self-Study Pronunciation Learner, I should be able to read the –ed suffix rules — /d/ after voiced sounds, /t/ after voiceless sounds, /ɪd/ after root-final alveolar stops /t/ and /d/ — so that I can work out each ending myself.

• Provenance: explicit.
• Trigger: the learner opens Rules.
• Observable result: all three rules are shown with their consonant sets and examples (lived, bathed, loathed; laughed, pushed; wanted, founded).
• Access state: protected.
• Failure / recovery: session lapse redirects to Login; after verification the learner returns to Rules.
• Continuation: the learner moves to Ed Words or a practice set.

FR-03 — Reference the past tense / past participle framing As a Self-Study Pronunciation Learner, I should be able to see the –ed suffix framed as past tense and past participle, so that I understand what the ending is doing.

• Provenance: explicit.
• Trigger: the learner opens Rules.
• Observable result: the framing and its examples (heated, finished, stuffed, lived) are shown.
• Access state: protected.
• Failure / recovery: as FR-02.
• Continuation: the learner reads the distribution rules.

FR-04 — Reference the /d/, /t/, /ɪd/ example sets As a Self-Study Pronunciation Learner, I should be able to see the supplied example sets for each ending — /d/: played, arranged, robbed, cared; /t/: wiped, kissed, danced; /ɪd/: hated, added, ended, permitted — so that I can anchor each rule to real words.

• Provenance: explicit.
• Trigger: the learner opens Rules.
• Observable result: all three example sets are shown under their respective endings.
• Access state: protected.
• Failure / recovery: as FR-02.
• Continuation: the learner moves to the practice sets.

FR-05 — Practise the supplied –ed word list As a Self-Study Pronunciation Learner, I should be able to work with the supplied –ed practice words — managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled — so that I practise the endings on the worksheet's own vocabulary.

• Provenance: explicit.
• Trigger: the learner opens Ed Words.
• Observable result: all fifteen words are listed with their transcriptions.
• Access state: protected.
• Failure / recovery: session lapse redirects to Login.
• Continuation: the learner moves to Ed Practice.

FR-06 — Practise the plural gap-fill items with /z/, /s/, or /ɪz/ As a Self-Study Pronunciation Learner, I should be able to fill the gaps in the supplied plural items — /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ə_/ — with /z/, /s/, or /ɪz/, so that I learn the plural ending rule.

• Provenance: explicit.
• Trigger: the learner opens Plural Practice.
• Observable result: each item accepts one of the three endings and is judged.
• Access state: protected.
• Failure / recovery: an incomplete submission is flagged on the row without advancing.
• Continuation: the learner moves to the next item.

FR-07 — Practise the –ed gap-fill items with /d/, /t/, or /ɪd/ As a Self-Study Pronunciation Learner, I should be able to fill the gaps in the supplied –ed items — /ə'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_/ — with /d/, /t/, or /ɪd/, so that I learn the –ed ending rule.

• Provenance: explicit.
• Trigger: the learner opens Ed Practice.
• Observable result: each item accepts one of the three endings and is judged.
• Access state: protected.
• Failure / recovery: an incomplete submission is flagged on the row without advancing.
• Continuation: the learner moves to the next item.

FR-08 — Supply the normal form of every word As a Self-Study Pronunciation Learner, I should be able to give the normal (orthographic) form of each word alongside its ending phoneme — as in /bəʊt_/ → /s/ → boats — so that I connect the sound to the spelling.

• Provenance: explicit.
• Trigger: the learner answers any exercise item.
• Observable result: the item requires both the phoneme and the normal word, and both are judged.
• Access state: protected.
• Failure / recovery: a missing or malformed normal word is flagged inline without clearing the phoneme answer.
• Continuation: the learner corrects the word and resubmits.

FR-09 — Type the phoneme As a Self-Study Pronunciation Learner, I should be able to type the phonetic symbol as my answer, so that I can answer in the notation I am learning.

• Provenance: explicit.
• Trigger: the learner uses Answer Entry on an item.
• Observable result: the typed symbol is accepted and judged.
• Access state: protected.
• Failure / recovery: an unrecognised symbol is flagged inline without clearing the field.
• Continuation: the learner retypes, or switches to Choice Practice.

FR-10 — Choose the phoneme from buttons As a Self-Study Pronunciation Learner, I should be able to choose the phoneme from multiple-choice buttons, so that I can answer without typing the symbol.

• Provenance: explicit.
• Trigger: the learner uses Choice Practice on an item.
• Observable result: the pressed phoneme is accepted and judged.
• Access state: protected.
• Failure / recovery: submitting with no selection is flagged inline.
• Continuation: the learner presses a button and resubmits.

FR-11 — Both answer modes are available As a Self-Study Pronunciation Learner, I should be able to use either typed entry or multiple-choice buttons for any item, so that I can practise in whichever mode suits me at that moment.

• Provenance: explicit (the learner selected "Both").
• Trigger: the learner is answering an item.
• Observable result: both Answer Entry and Choice Practice are reachable for the same item, and switching between them preserves the item.
• Access state: protected.
• Failure / recovery: if one mode rejects input, the other remains available for the same item.
• Continuation: the learner submits in either mode.

FR-12 — Instant feedback on each answer As a Self-Study Pronunciation Learner, I should receive instant feedback on my answer, so that I can check and correct myself immediately.

• Provenance: explicit.
• Trigger: the learner submits an item.
• Observable result: the row is judged immediately and shows correctness; when incorrect, the correct answer is shown.
• Access state: protected.
• Failure / recovery: if judging cannot complete, the learner is told and can resubmit the item.
• Continuation: the learner reads the verdict and moves to the next item.

FR-13 — Self-service enrollment before saving progress As a Self-Study Pronunciation Learner, I should be able to enroll myself on first use, so that my practice progress can be saved to me.

• Provenance: required_inference.
• Trigger: a first-time learner chooses to begin practice from Landing.
• Observable result: the learner's identity is established and subsequent answers are associated with it.
• Access state: anonymous entry; the enrollment interaction itself is reachable without an established session.
• Failure / recovery: invalid or incomplete enrollment input is reported inline without losing entered values.
• Continuation: the learner proceeds into practice.

FR-14 — Returning verification before resuming saved practice As a Self-Study Pronunciation Learner, I should be able to verify my identity when I return, so that I can resume the practice I saved.

• Provenance: required_inference.
• Trigger: a returning learner chooses to continue from Landing.
• Observable result: identity is verified and the saved continuation position is restored.
• Access state: anonymous entry; the verification interaction itself is reachable without an established session.
• Failure / recovery: incorrect credentials are reported inline without revealing which field failed; the learner retries or switches to Sign Up.
• Continuation: the learner resumes at the saved position.

FR-15 — Durable storage of answers, feedback, and continuation state As a Self-Study Pronunciation Learner, I should have my answers, feedback, and place in the drill saved, so that I can stop and come back later without losing work.

• Provenance: required_inference.
• Trigger: the learner submits an item or leaves the drill.
• Observable result: the answer, its verdict, and the continuation position persist and are restored on return.
• Access state: protected; state is bound to the verified learner.
• Failure / recovery: if saved state cannot be retrieved, the learner is offered a fresh start rather than a blocked screen.
• Continuation: the learner resumes or restarts the current set.

4. User Personas

Self-Study Pronunciation Learner

Product context. This learner is studying English phonology alone, working from a worksheet on the –ed suffix and on plural / third-person ending choices. They have chosen self-study deliberately — they want to learn the material themselves — and they have chosen to work with both answer modes rather than committing to one. There is no teacher in the loop, no class, no deadline, and no one to mark their work. The app is the whole of their practice environment.

Primary goal. To internalise the ending rules so that the correct pronunciation of -ed and of plural endings becomes automatic — and to be able to check their own answers accurately while doing so.

Distinct accepted responsibilities. This learner is the sole active human actor and carries every human-facing responsibility in the product: reading the distribution rules and the voicing structure behind them; working through the supplied –ed word list; filling the plural gaps with /z/, /s/, or /ɪz/; filling the –ed gaps with /d/, /t/, or /ɪd/; supplying the normal orthographic form of every word alongside its phoneme; choosing between typed phoneme entry and multiple-choice buttons for each item; reading and acting on instant feedback; and returning later to resume saved practice.

Relevant inputs and decisions. The learner supplies two things per item — an ending phoneme and a normal word — and decides, item by item, whether to type the symbol or press a button. They also decide when to consult the rules rather than guess, and when to move between the plural set and the –ed set.

Interactions with other accepted participants. There are none. This learner does not hand work to a teacher, does not receive assignments, does not compare results with peers, and does not manage anyone else's practice. The only counterpart in the product is the application itself, which checks answers and returns feedback.

Observable success. The learner can state the three –ed endings and the three plural endings and the sound classes that trigger them; they can complete every supplied gap-fill item with the correct phoneme and the correct normal spelling; they can see immediately when they are wrong and what the right answer is; and they can close the app and come back to exactly where they left off.

5. Core User Flows

Flow A — First-time learner starts practising

1. The learner arrives at Landing without an established session. The poster states the product name AZURE·ED, the headline "THE –ED SUFFIX", the subline "Three sounds. One rule. Say it right.", and the three ruled rows for /d/, /t/, /ɪd/ with their consonant triggers and example words (lived, pushed, wanted).
2. The learner reads the three-way classification and understands that the app drills ending pronunciation for self-study.
3. The learner presses the black CTA bar "START DRILL 01".
4. Because no identity exists yet, the learner is taken to Sign Up. They enter their enrollment details.
5. On success, the learner's identity is established and they proceed into the protected practice surfaces.
6. The learner lands on Rules and reads the distribution rules: /d/ after voiced sounds, /t/ after voiceless sounds, /ɪd/ after root-final alveolar stops /t/ and /d/, each with its consonant set and examples.
7. The learner moves to Plural Practice and begins the first item, /bəʊt_/.
8. Failure / recovery: if the learner submits the item with the phoneme but no normal word, the row is flagged inline and does not advance; the learner types the normal word and resubmits.

Flow B — Answering a plural item in both modes

1. The learner is on Plural Practice, at the item /bəʊt_/.
2. The learner uses Choice Practice and presses the red /z/ button, because the item is voiced.
3. The learner uses Word Forms and types boats.
4. The learner submits. Feedback judges the row immediately: the colour bar under the row wipes in 120ms, a filled disc marks the correct ending, and the normal word is revealed in place on the same baseline.
5. The learner moves to the next item, /desk_/.
6. This time the learner uses Answer Entry and types the phoneme directly, then types the normal word in Word Forms and submits.
7. Failure / recovery: if the typed symbol is not recognised, the field is flagged inline and the learner's text is preserved; the learner either retypes it or switches to Choice Practice for the same item.
8. The learner continues through the remaining plural items — /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ə_/ — answering each in whichever mode they prefer.

Flow C — Answering an –ed item

1. The learner is on Ed Practice, at the item /ə'laʊ_/.
2. The learner recalls the rule from Rules: /d/ follows voiced sounds.
3. The learner presses the red /d/ button in Choice Practice.
4. The learner types the normal word allow in Word Forms.
5. The learner submits. Feedback judges the row immediately and shows the verdict; if the answer is wrong, the correct phoneme and the correct normal word are shown so the learner can self-correct.
6. The learner continues through the remaining –ed 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_/.
7. Failure / recovery: if the learner submits with no phoneme selected, the row is flagged inline and does not advance; the learner selects an ending and resubmits.

Flow D — Consulting the rules mid-drill

1. The learner is on Ed Practice and is unsure whether /rɪ'gret_/ takes /ɪd/ or /t/.
2. The learner navigates to Rules.
3. The learner reads the /ɪd/ rule — after root-final alveolar stops /t/ and /d/ — and the /t/ rule — after voiceless sounds /p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/ — and the voicing map that draws the voiced/voiceless boundary as a hard 2px rule.
4. The learner returns to Ed Practice and answers the item.
5. Failure / recovery: if the session has lapsed while the learner was reading, the surface redirects to Login; after verification the learner returns to the drill at their saved position.

Flow E — Reviewing the –ed word list

1. The learner opens Ed Words.
2. The learner reads the fifteen supplied practice words — managed, fixed, sniffed, halved, jogged, fined, dropped, kicked, used, pushed, backed, stopped, fired, doomed, filled — each on a ruled row with its transcription.
3. The learner moves to Ed Practice to drill the same vocabulary.
4. Failure / recovery: if the session has lapsed, the surface redirects to Login; after verification the learner returns to Ed Words.

Flow F — Returning learner resumes saved practice

1. The learner returns to Landing in a later session, without an established session.
2. The learner chooses to continue and is taken to Login.
3. The learner submits their credentials.
4. On success, identity is verified and Progress restores the saved continuation position along with previously recorded answers and feedback.
5. The learner resumes at the item where they stopped, with the score numerals counting up in 180ms steps to their saved total.
6. Failure / recovery: if the credentials are incorrect, the error is reported inline without revealing which field failed; the learner retries, or switches to Sign Up.
7. Failure / recovery: if the saved state cannot be retrieved, the learner is offered a fresh start rather than a blocked screen, and new answers are saved as they are judged.
8. The learner continues the drill, or switches between Plural Practice and Ed Practice.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. It names Josef Müller-Brockmann as the muse and "a phoneme grid you can see from across the room" as the headline idea. The register is not playful or corporate: it is the satisfaction of a system snapping into place. The learner should see the rule as a structure, not a list — sounds group, endings follow, and the grid itself teaches before the copy does.

Colour tokens — light mode

The third code colour is black (#111111) for /ɪd/ and /ɪz/, so the system is red / yellow / black — three colours, no more. Proportion is roughly 70% paper, 20% black type and rules, 10% colour blocks. Colour is never decoration; it is always classification.

Typography

• Headings: Archivo at 800–900, set flush-left ragged-right, tracking −0.03em, sentence case for headlines. Uppercase is reserved for micro-labels and column headers at 11–12px with +0.14em tracking.
• Body: Archivo 400 at 17–19px with 1.6 leading.
• Phoneme tokens (/d/, /t/, /ɪd/, /z/, /s/, /ɪz/) are set as display-scale objects — 44px on mobile to 96px on desktop — never as inline text.
• Scale: 1.333 modular — 96 / 72 / 54 / 40 / 30 / 22 / 17. Display clamp(44px, 9vw, 96px); section headline clamp(30px, 5vw, 54px); item word clamp(22px, 3.4vw, 40px); body 17px; micro-label 11px uppercase.

Shape language

Hard edges only — zero border radius anywhere, including buttons and inputs. Structure is expressed with 1px and 2px black rules, hairline column dividers, and solid colour rectangles. The only non-rectangular forms are circles used as phoneme markers (a filled disc for the correct ending) and a single large quarter-circle anchoring the hero. Cells are square or 4:3. Nothing is soft, nothing floats, nothing casts a shadow.

Layout

A visible 12-column modular grid with a persistent left gutter of numbered section labels — 01 RULES, 02 PLURALS, 03 –ED, 04 DRILL — running down the page edge. Content is asymmetric: the exercise column sits in columns 4–12, leaving columns 1–3 as a ruled index. Every practice item is a three-part row on one baseline: phonemic transcription | answer control | revealed normal word. Section boundaries are full-width 2px black rules with the section number in the left gutter. On mobile the grid collapses to a single column, but the ruled rows and numbered gutter labels survive.

Imagery

No photography, no illustration, no 3D. The imagery is the diagram itself: geometric phoneme charts, a voicing map where voiced and voiceless consonant sets are drawn as two ruled blocks, and a mouth-diagram reduced to two intersecting circles for the alveolar-stop rule. Icons are pictograms built from circles, rectangles and 45° lines in the three code colours.

7. Signature Design Concept

The poster that is also the rule. The public entry is a full-viewport asymmetric poster, not a centred SaaS hero.

The left 40% is a solid #E2231A block running edge to edge, floor to ceiling. The wordmark AZURE·ED is set vertically (rotated −90°) in white Archivo 800 at 22px with wide tracking. Overlapping the red block's right edge by roughly 120px, a white panel carries the headline "THE –ED SUFFIX" set flush-left in Archivo 900 at clamp(44px, 9vw, 96px), stacked in two lines, with a 2px black rule under it and the subline "Three sounds. One rule. Say it right." in 19px black.

To the right, occupying the remaining columns, three equal ruled rows — /d/, /t/, /ɪd/ — each with a filled circle in red, yellow or black, its consonant trigger set in 11px uppercase grey, and a live example word (lived, pushed, wanted) in 30px black. A single black CTA bar "START DRILL 01" sits flush against the bottom of the white panel, full width of that panel, square corners.

Nothing is centred. The composition is held by the grid and the two rules. A single large quarter-circle anchors the whole arrangement. The learner reads the three-way classification spatially before reading a single word of copy — which is exactly the teaching the product does.

8. Interaction Model & Motion Direction

Interaction Model: Static Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject. The three ruled phoneme rows — /d/, /t/, /ɪd/ — each with its filled colour disc, its consonant trigger, and its example word, held against the red block and the white headline panel.
• Input → transformation → outcome thesis. The learner's arrival is the input; the composition resolves into three classified columns; the outcome is that the learner sees the ending system as a structure before reading any explanation. No accepted behaviour is added — the hero only recomposes the classification the product already teaches.
• Motion vocabulary. Restrained and mechanical. Instant state changes, no easing theatrics. The only two motions in the product are (1) a 120ms hard wipe of the colour bar under an answer row when it is judged correct or incorrect, and (2) a count-up of the score numerals in 180ms steps. No parallax, no scroll reveals, no hover lift; hover changes a cell's fill from white to paper, and nothing moves.
• Composed first frame. The red block at full height on the left with the vertical wordmark; the white panel overlapping its right edge with the two-line headline, the 2px rule, and the subline; the three ruled rows to the right with their discs and example words; the black CTA bar flush to the bottom of the white panel; the quarter-circle anchoring the composition. Everything flush-left, everything on the grid.
• Reduced-motion state. With prefers-reduced-motion, the hero is fully static: the colour-bar wipe resolves instantly to its final colour and the score numerals render at their final value with no count-up. The three ruled rows, the discs, the rules, and the CTA remain complete and readable. No content is hidden, cropped, or made unreachable.

9. Non-Functional Requirements

• NFR-01 — Self-study scope. The application serves the learner's own practice only. It must not include teacher-facing assignment, class rosters, grading workflows, or classroom management. Provenance: explicit constraint.
• NFR-02 — Content fidelity. The rules, consonant sets, example words, practice word list, and all thirty gap-fill items must appear exactly as supplied in the worksheet, including the IPA transcriptions and their stress marks. Provenance: explicit content source.
• NFR-03 — Dual answer input. Both typed phoneme entry and multiple-choice phoneme buttons must be available for every exercise item; neither may be removed in favour of the other. Provenance: explicit (learner selected "Both").
• NFR-04 — Immediate feedback latency. Feedback on a submitted item must appear without a perceptible wait, so that self-correction is possible in the moment. Provenance: explicit ("instant feedback").
• NFR-05 — Durable progress. Answers, feedback, and continuation position must persist across sessions and be restored to the correct learner. Provenance: required_inference.
• NFR-06 — Identity continuity. Practice state must remain bound to the learner who produced it; a learner must not see another learner's answers. Provenance: required_inference.
• NFR-07 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, item text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element may cover any part of them. Provenance: explicit design constraint.
• NFR-08 — Reduced motion. A usable static arrangement must be provided under prefers-reduced-motion; the colour-bar wipe resolves instantly and score numerals render at their final value. Provenance: explicit design constraint.
• NFR-09 — No blue or indigo. The code system is red / yellow / black only. No blue or indigo accent may appear anywhere in the product. Provenance: explicit design constraint.
• NFR-10 — Hard-edged surfaces. Zero border radius on every element, including buttons and inputs. No soft shadows, floating cards, or glass surfaces. Provenance: explicit design constraint.
• NFR-11 — No photography in practice surfaces. Practice surfaces contain no photography of any kind. Provenance: explicit design constraint.

10. Tech Stack

• Frontend: React — a custom first-party interface implementing the Swiss geometric grid, the three-colour phoneme code, and the three-part ruled answer row.
• Backend: Python with FastAPI — serves the worksheet content, checks submitted answers, returns feedback, and persists practice state.
• Storage: A relational database for learner identity, answer records, feedback records, and continuation position.
• Containerisation: Docker with docker-compose for local and single-host deployment.

Kubernetes is not required for this deployment and is not included.

11. Assumptions and Constraints

Constraints

• C-01. The app is for self-study. It is not teacher-facing and provides no assignment, roster, grading, or classroom-management capability. (explicit)
• C-02. All practice content comes from the supplied worksheet. No additional vocabulary, rules, or exercise items are introduced. (explicit content source)
• C-03. Every exercise item requires both an ending phoneme and the normal orthographic form of the word. (explicit)
• C-04. Both answer modes — typed phoneme entry and multiple-choice buttons — are available for every item. (explicit)
• C-05. The visual system uses exactly three code colours: red #E2231A, yellow #F2C200, and black #111111, on paper #F4F1EA with white #FFFFFF reserved for answer cells. (explicit design constraint)
• C-06. Typography is Archivo throughout, at the specified 1.333 modular scale. (explicit design constraint)
• C-07. Zero border radius; no shadows, floating cards, or glass surfaces. (explicit design constraint)
• C-08. No blue or indigo anywhere in the product. (explicit design constraint)

Assumptions

• A-01. The learner has a modern web browser and a stable connection. (assumption — not specified by user)
• A-02. The learner is studying alone and does not need to share, export, or submit their results to anyone. (assumption — follows from the explicit self-study constraint)
• A-03. The supplied IPA transcriptions are treated as the authoritative answer key for the phoneme half of each item, and the normal word forms are derived from the supplied example convention (/bəʊt_/ → /s/ → boats). (assumption — the worksheet supplies the convention and one worked example)
• A-04. Practice progress is saved per learner and resumed on return; a learner with no saved state starts at the first item of the chosen set. (assumption — required_inference mechanics)

12. Glossary

• –ed suffix — The English past-tense / past-participle ending, pronounced /d/, /t/, or /ɪd/ depending on the final sound of the root.
• /d/ — The voiced allomorph of the –ed ending, used after voiced sounds: /b/, /g/, /v/, /ð/, /z/, /ʒ/, /\xca\xa4/, /m/, /n/, /\xc6\x9e/, /l/, /r/, /j/, and vowel sounds. Examples: lived, bathed, loathed.
• /t/ — The voiceless allomorph of the –ed ending, used after voiceless sounds: /p/, /k/, /f/, /\xc9\xb5/, /s/, /ʃ/, /h/, /\xca\xa7/. Examples: laughed, pushed.
• /ɪd/ — The syllabic allomorph of the –ed ending, used after root-final alveolar stops /t/ and /d/. Examples: wanted, founded.
• /z/ — The voiced plural / third-person ending, used after voiced sounds. Example: boats → /bəʊts/.
• /s/ — The voiceless plural / third-person ending, used after voiceless sounds.
• /ɪz/ — The syllabic plural / third-person ending, used after sibilants.
• Gap-fill item — A worksheet item presented as a phonemic transcription with a trailing underscore, e.g. /bəʊt_/, where the learner supplies the missing ending.
• Normal word form — The ordinary orthographic spelling of a word, required alongside the phoneme answer for every item, as in /bəʊt_/ → /s/ → boats.
• Voicing map — The Rules-page diagram drawing the voiced and voiceless consonant sets as two ruled blocks separated by a hard 2px boundary.
• Alveolar stop — The sounds /t/ and /d/, whose root-final position triggers the /ɪd/ ending; marked in the interface by two intersecting circles.
• Phoneme token — An ending symbol (/d/, /t/, /ɪd/, /z/, /s/, /ɪz/) rendered at display scale inside a square cell, 44px on mobile to 96px on desktop.
• Three-part ruled answer row — The product's core exercise unit: phonemic transcription | answer control | revealed normal word, all on one baseline.
• Numbered left gutter — The persistent ruled index down the page edge carrying the section labels 01 RULES, 02 PLURALS, 03 –ED, 04 DRILL.