System Requirements Document for eighth-amendment

1. Introduction

Product intent. eighth-amendment is a self-contained practice activity that asks a learner to place the phrases of the Eighth Amendment of the United States Constitution back into their correct order. The product presents four phrases — "Excessive bail shall not be required,", "nor excessive fines imposed,", "nor cruel and", and "unusual punishment imposed." — in a shuffled arrangement and lets the learner arrange them into the single correct sequence. The exercise is a short, exacting text-reconstruction task: the learner reads the phrases, orders them, and checks the result against the correct amendment text.

Audience. The audience is a self-studying learner — a student, a civics refresher, or a bar-prep-adjacent reader — working alone on a brief constitutional-literacy exercise. The product is not playful and not solemn-legalistic; it carries the quiet authority of a well-set public document, because the content is the text of the Constitution and getting the order right is the whole point.

Scope of this document. This SRD defines the current, accepted product: an anonymous, self-contained phrase-ordering exercise with a public entry surface, a practice workspace, and a results view. It preserves the exact four phrases, the exact ordering interaction, and the exact visual and typographic direction supplied for the project. It does not add adjacent capabilities such as accounts, scoring systems, lesson libraries, or social features.

2. System Overview

eighth-amendment is a small, browser-delivered practice application with three first-party pages:

• Landing — an anonymous public entry surface that explains the exercise and presents the amendment as a diagrammatic, colour-coded statement of the problem.
• Practice — the self-contained practice workspace where the learner arranges the four shuffled phrases into a sequence using drag or arrange interaction.
• Results — a ruled comparison table showing the learner's order, the correct order, and a colour-coded match/mismatch marker, with the correct amendment text set beneath it.

Actors. The only accepted active human actor is the Learner. There are no other human personas, no administrators, no instructors, and no reviewers in the current product. There are no external providers, no third-party services, and no outbound recipients in the current product; all work is performed by the application itself.

Accepted behaviour. The learner reads the four phrases, arranges them into a sequence, submits the arrangement, and sees whether the sequence is correct. The exercise is self-contained: it begins and ends within the product, requires no account, and can be attempted unlimited times.

Ownership. All three pages are owned by the application and are anonymously reachable. No page requires identity establishment, and no durable learner-specific state must be privately owned or resumed across sessions. The exercise is a single-session practice activity.

Narrow exclusions. The current product does not include: user accounts or authentication; saved progress or history; scoring, grading, or badges; additional amendments or constitutional texts; instructor or classroom features; sharing or export; or any provider-owned or external-destination surface. These are not current capabilities and are not implied by the exercise.

2a. Product Interpretation and Delivery Boundary

Delivery. The product is delivered as a first-party web application with custom UI. All three pages — Landing, Practice, and Results — are application-owned and anonymously accessible. There is no provider-owned surface, no external destination, and no headless delivery in the current product.

Access. The exercise is anonymous and self-contained. The learner does not create an account, does not sign in, and does not need to establish identity to begin, complete, or repeat the exercise. No durable learner-specific state must be privately owned or resumed, so no application-owned identity is required. The Landing page is the anonymous entry surface; Practice and Results are reached from it and remain anonymously reachable.

Current versus future. The current product is the phrase-ordering exercise described in this document. Future ideas — additional amendments, saved progress, scoring, or classroom features — are not current commitments and are excluded from current pages and acceptance. They are recorded only in the future section (Section 11) as non-binding horizons.

2b. Source Content Inventory

The authoritative source supplies the exact content of the exercise. The four phrases to be ordered, preserved exactly as given, are:

1. "Excessive bail shall not be required,"
2. "nor excessive fines imposed,"
3. "nor cruel and"
4. "unusual punishment imposed."

The correct order of the phrases, as they appear in the Eighth Amendment, is:

"Excessive bail shall not be required, nor excessive fines imposed, nor cruel and unusual punishment imposed."

The learner's task is to reconstruct this sequence from the four shuffled phrases. The phrases are presented in a shuffled arrangement in the practice workspace; the correct order is revealed on the Results page.

2c. Page Content and Component Coverage

Landing

• Information and state. The Landing page is the anonymous public entry surface. It explains what the exercise is and presents the amendment as a diagrammatic, colour-coded statement of the problem. It carries no learner-specific state.
• Primary action. A single black rectangular button labelled "BEGIN EXERCISE" with a small right-pointing arrow glyph, flush-left under the colour bands, which navigates the learner to the Practice page.
• Supporting actions. None beyond beginning the exercise. There is no sign-in, no account creation, and no secondary navigation.
• Domain entities. The Eighth Amendment as a set of four ordered phrases; the four clause codes (red, blue, yellow, green) that identify each phrase.
• Component responsibilities.
  • Header rule. A full-width black horizontal rule at the very top of the viewport, with the all-caps label "EIGHTH AMENDMENT · PHRASE ORDERING EXERCISE" set at 11px with wide tracking in the far-left grid column.
  • Headline block. An 88px Archivo 700 headline "PUT THE AMENDMENT BACK IN ORDER." spanning eight of twelve columns flush-left, with the words "IN ORDER" set in #D6291E.
  • Metadata block. A stacked metadata block in the remaining four columns: "FOUR PHRASES", "ONE CORRECT SEQUENCE", "UNLIMITED ATTEMPTS" in all-caps 13px with hairline rules between each line.
  • Signature bands. The amendment rendered as four stacked full-width colour bands (red #D6291E, blue #1B5FA8, yellow #F2B705, green #1E7A4C), each band containing its clause text in white 18px Archivo, deliberately shuffled out of order — the visual statement of the problem and the entry point into the exercise.
  • Three-step strip. A numbered three-step strip (01 Read / 02 Order / 03 Check) separated by vertical rules.
  • Begin button. A single black rectangular button "BEGIN EXERCISE" with a small right-pointing arrow glyph, flush-left under the bands.
• States.
  • Loading. Static content; no loading state is required.
  • Empty. Not applicable; the page always presents the exercise explanation and the four bands.
  • Success. The learner reaches the page and can begin the exercise.
  • Error. Not applicable; the page has no data dependencies.
  • Recovery. Not applicable.

Practice

• Information and state. The Practice page is the self-contained practice workspace. It holds the current arrangement of the four phrases and the live reconstructed amendment text. It carries no learner-specific state beyond the current arrangement.
• Primary action. The learner arranges the four shuffled phrases into a sequence by dragging or arranging them into the numbered drop slots, then submits the arrangement.
• Supporting actions. The learner may reorder phrases before submitting, and may return to the Landing page.
• Domain entities. The four phrases; the four numbered drop slots (01–04); the live reconstructed amendment text.
• Component responsibilities.
  • Source row. A row of the four shuffled colour-coded phrases at the top of the page. Each phrase card is a flat white rectangle with a 6px solid colour bar on its left edge (the clause code) and a 1px #111111 border.
  • Drop column. A numbered 01–04 vertical drop column below the source row. Each slot is an outlined rectangle with a 1px dashed #6E6A63 border that becomes a 2px solid #F2B705 border when active. Each slot is labelled with its position number in all-caps (01–04) in Archivo 600 at 11px with +0.14em tracking.
  • Live rail. A persistent right-hand rail that typesets the reconstructed amendment live as the learner drops each phrase, so the sentence assembles itself in real time like a document being set.
  • Grid hairlines. Thin #E2DED5 hairlines visible on the practice page so the reader can see the system.
  • Submit control. A control to submit the arrangement for checking.
• States.
  • Loading. Static content; no loading state is required.
  • Empty. The drop column is empty and the live rail shows no reconstructed text until the learner places the first phrase.
  • Success. The learner places all four phrases and submits; the arrangement is checked and the learner is taken to the Results page.
  • Error. If the learner submits an incomplete arrangement, the product indicates that all four phrases must be placed before checking.
  • Recovery. The learner can continue arranging phrases and resubmit.

Results

• Information and state. The Results page displays the outcome of the submitted arrangement: the learner's order, the correct order, and a colour-coded match/mismatch marker for each position. It also presents the correct amendment text as a clean typeset block.
• Primary action. The learner reviews the comparison and may return to the Practice page to try again.
• Supporting actions. The learner may begin a new attempt.
• Domain entities. The learner's submitted order; the correct order; the match/mismatch markers; the correct amendment text.
• Component responsibilities.
  • Comparison table. A ruled comparison table with the learner's order in column one, the correct order in column two, and a colour-coded match/mismatch marker in column three, with a 1px black rule between every row.
  • Reveal rule. On a correct submission, a black horizontal rule draws left-to-right across the results panel in 400ms.
  • Correct text block. The full amendment set beneath the rule as one clean paragraph, presented as a document, not as a card.
  • Retry control. A control to return to the Practice page for another attempt.
• States.
  • Loading. Static content; no loading state is required.
  • Empty. Not applicable; the page always presents a result for a submitted arrangement.
  • Success. The learner's order matches the correct order; the reveal rule draws and the correct amendment text sets beneath it.
  • Error. The learner's order does not match the correct order; the comparison table shows the mismatches.
  • Recovery. The learner can return to the Practice page and try again.

3. Functional Requirements

FR-1 — Present the four Eighth Amendment phrases for ordering. As a Learner, I should see the four phrases of the Eighth Amendment presented so that I can place them in order.

• Provenance: explicit.
• Lifecycle: The Learner opens the Practice page and sees the four phrases — "Excessive bail shall not be required,", "nor excessive fines imposed,", "nor cruel and", and "unusual punishment imposed." — presented in a shuffled arrangement.
• Observable acceptance: All four phrases are visible and available to be arranged.
• Failure/recovery: If the phrases do not load, the Learner can reload the page.
• Continuation: The Learner proceeds to arrange the phrases.

FR-2 — Arrange the phrases into a sequence. As a Learner, I should arrange the four phrases into a sequence by dragging or arranging them, so that I can reconstruct the amendment.

• Provenance: explicit.
• Lifecycle: The Learner drags or arranges each phrase into a numbered drop slot (01–04). The live rail updates as each phrase is placed.
• Observable acceptance: The phrases occupy the drop slots in the order the Learner chooses, and the live rail reflects the current arrangement.
• Failure/recovery: If a phrase is placed incorrectly, the Learner can move it to another slot.
• Continuation: The Learner continues until all four phrases are placed.

FR-3 — Submit the arrangement for checking. As a Learner, I should submit my arrangement so that I can see whether the sequence is correct.

• Provenance: explicit.
• Lifecycle: The Learner submits the arrangement. The product checks the sequence against the correct order.
• Observable acceptance: The Learner is taken to the Results page, which shows the outcome.
• Failure/recovery: If the arrangement is incomplete, the product indicates that all four phrases must be placed before checking.
• Continuation: The Learner reviews the result.

FR-4 — See the outcome of the arrangement. As a Learner, I should see the outcome of my submitted arrangement so that I can verify whether I ordered the phrases correctly.

• Provenance: explicit.
• Lifecycle: The Results page displays the Learner's order, the correct order, and a colour-coded match/mismatch marker for each position.
• Observable acceptance: The comparison table shows the Learner's order, the correct order, and the match/mismatch markers.
• Failure/recovery: If the Learner's order does not match, the mismatches are shown.
• Continuation: The Learner may return to the Practice page to try again.

FR-5 — See the correct amendment text. As a Learner, I should see the correct amendment text so that I can read the amendment as a complete document.

• Provenance: explicit.
• Lifecycle: On a correct submission, a black horizontal rule draws left-to-right across the results panel in 400ms, then the full amendment sets beneath it as one clean paragraph.
• Observable acceptance: The correct amendment text is displayed as a typeset block.
• Failure/recovery: If the submission is incorrect, the correct text is still available for the Learner to read.
• Continuation: The Learner may return to the Practice page.

FR-6 — Attempt the exercise unlimited times. As a Learner, I should be able to attempt the exercise unlimited times so that I can practice until I get the order right.

• Provenance: explicit.
• Lifecycle: The Learner returns to the Practice page from the Results page and begins a new attempt.
• Observable acceptance: The Practice page presents a fresh shuffled arrangement for each attempt.
• Failure/recovery: Not applicable.
• Continuation: The Learner repeats the exercise as desired.

FR-7 — Begin the exercise from the Landing page. As a Learner, I should begin the exercise from the Landing page so that I can start the practice activity.

• Provenance: required_inference.
• Lifecycle: The Learner opens the Landing page, reads the explanation, and activates the "BEGIN EXERCISE" button to reach the Practice page.
• Observable acceptance: The Learner is taken to the Practice page.
• Failure/recovery: If the button does not respond, the Learner can reload the page.
• Continuation: The Learner proceeds to arrange the phrases.

4. User Personas

Learner

Product context. The Learner is a self-studying user practicing constitutional text. They may be a student, a civics refresher, or a bar-prep-adjacent reader working alone on a short, exacting text-reconstruction task. They arrive at the product without an account and without prior setup, expecting a brief, precise exercise.

Primary goal. To place the four phrases of the Eighth Amendment into their correct order and verify that the sequence is right.

Distinct accepted responsibilities. The Learner reads the four phrases, arranges them into a sequence using drag or arrange interaction, submits the arrangement, reviews the outcome, and may repeat the exercise. Their recurring responsibility is completing the ordering exercise and seeing whether the sequence is correct.

Relevant inputs or decisions. The Learner decides the order in which the four phrases belong. The phrases are: "Excessive bail shall not be required,", "nor excessive fines imposed,", "nor cruel and", and "unusual punishment imposed." The Learner's decision is which phrase comes first, second, third, and fourth.

Interactions with other accepted participants. There are no other accepted human participants in the current product. The Learner works alone. The product itself provides the phrases, checks the arrangement, and displays the result.

Observable success. The Learner's arrangement matches the correct order of the amendment, and the Results page shows the correct amendment text as a complete document.

Constraints and provenance. The Learner is a required-inference persona derived from the accepted product commitment to an interactive phrase-ordering exercise. The Learner's work is anonymous and self-contained; no account, sign-in, or saved progress is required.

5. Core User Flows

Flow 1 — Begin the exercise from the Landing page

1. The Learner opens the Landing page.
2. The Learner reads the explanation of the exercise and sees the amendment rendered as four stacked colour bands, deliberately shuffled out of order.
3. The Learner reads the metadata block: "FOUR PHRASES", "ONE CORRECT SEQUENCE", "UNLIMITED ATTEMPTS".
4. The Learner activates the "BEGIN EXERCISE" button.
5. The product navigates the Learner to the Practice page.
6. Next step: The Learner proceeds to arrange the phrases.

Flow 2 — Arrange the phrases into a sequence

1. The Learner arrives at the Practice page and sees the four phrases presented in a shuffled arrangement in the source row.
2. The Learner selects a phrase and drags it into a numbered drop slot (01–04).
3. The product places the phrase in the slot and updates the live rail, which typesets the reconstructed amendment as the Learner drops each phrase.
4. The Learner repeats the arrangement for the remaining phrases.
5. Observable result: All four phrases occupy the drop slots in the order the Learner chooses, and the live rail reflects the current arrangement.
6. Failure/recovery: If the Learner places a phrase incorrectly, they can move it to another slot.
7. Next step: The Learner submits the arrangement.

Flow 3 — Submit the arrangement and see the outcome

1. The Learner has placed all four phrases into the drop slots.
2. The Learner submits the arrangement.
3. The product checks the sequence against the correct order.
4. The product navigates the Learner to the Results page.
5. Observable result: The Results page displays a ruled comparison table with the Learner's order in column one, the correct order in column two, and a colour-coded match/mismatch marker in column three, with a 1px black rule between every row.
6. Failure/recovery: If the arrangement is incomplete, the product indicates that all four phrases must be placed before checking.
7. Next step: The Learner reviews the result.

Flow 4 — Review a correct submission

1. The Learner's submitted arrangement matches the correct order.
2. The product draws a black horizontal rule left-to-right across the results panel in 400ms.
3. The product sets the full amendment beneath the rule as one clean paragraph.
4. Observable result: The Learner sees the correct amendment text as a complete document.
5. Next step: The Learner may return to the Practice page or finish.

Flow 5 — Review an incorrect submission and try again

1. The Learner's submitted arrangement does not match the correct order.
2. The product displays the comparison table with the mismatches marked.
3. The product makes the correct amendment text available for the Learner to read.
4. Observable result: The Learner sees which positions were incorrect and reads the correct order.
5. Recovery: The Learner activates the retry control to return to the Practice page.
6. Next step: The Learner begins a new attempt with a fresh shuffled arrangement.

Flow 6 — Repeat the exercise

1. The Learner returns to the Practice page from the Results page.
2. The product presents a fresh shuffled arrangement of the four phrases.
3. The Learner arranges the phrases again and submits.
4. Observable result: The Learner sees a new outcome on the Results page.
5. Continuation: The Learner may repeat the exercise as many times as desired.

6. Visuals Colors and Theme

Muse and headline. Systematic clarity after Massimo Vignelli — the amendment as a coded information system. The register is the quiet authority of a well-set public document: a subway map, a signage manual, an official form. The product must feel trustworthy, precise, and slightly institutional, because the content is the text of the Constitution and getting the order right is the whole point.

Colour tokens (light mode).

Proportion: ~70% paper, ~20% black type and rules, ~10% colour codes. Colour is always a code, never decoration.

Typography.

• Headings: Archivo — Helvetica-class grotesque, set flush-left ragged-right, never centred. Headlines in Archivo 700 at large scale with tight tracking (-0.02em) and tight leading (0.95), always all-caps for section titles and title-case for the amendment text itself.
• Body: Archivo.
• Labels and metadata: Archivo 600 all-caps at 11–12px with +0.14em letterspacing.
• Amendment phrases: Archivo 400/500 at reading size, never italic, never serif — the text is treated as signage.
• Type scale: 1.333 modular on a 4pt baseline — 88 / 56 / 36 / 24 / 18 / 16 / 13 / 11. Display 88px for the landing headline, 56px for page titles, 36px for the phrase cards, 18px for the amendment reading text, 11–13px for all-caps labels and metadata.

Shape language. Hard edges everywhere — 0px radius on cards, buttons, inputs, and panels. Structure comes from 1px and 2px black rules, not from shadows or rounding. The four phrase cards are flat white rectangles with a 6px solid colour bar on their left edge (the clause code) and a 1px #111111 border. Drop slots are outlined rectangles with a 1px dashed #6E6A63 border that becomes a 2px solid #F2B705 border when active. Buttons are solid black rectangles with white all-caps labels, or outlined rectangles for secondary actions. No pill shapes, no soft shadows, no blur.

Layout. A strict 12-column grid on a 1200px max width with 32px gutters and 48px outer margins, visible as thin #E2DED5 hairlines on the practice page so the reader can see the system. Landing: a full-width black rule under the header, then an 8-column headline block on the left with a 4-column "what this is" metadata block on the right, then a numbered three-step strip (01 Read / 02 Order / 03 Check) separated by vertical rules. Practice: two stacked zones — a "source" row of the four shuffled colour-coded phrases at the top, and a numbered 01–04 vertical drop column below, each slot labelled with its position number in all-caps. A persistent right-hand rail shows the reconstructed amendment text updating live. Results: a tabular comparison — user's order in column one, correct order in column two, a colour-coded match/mismatch marker in column three, with a black rule between every row.

Imagery. No photography, no illustration, no 3D. The imagery is the typographic system itself: colour-coded rule bars, numbered position markers, hairline grid lines, and — on the landing page — one diagrammatic treatment of the amendment as four stacked horizontal bands in the four code colours, like a transit line map. Small pictogram-style icons (a numbered square, a checkmark drawn from two 2px strokes, an arrow) replace any decorative art. The correct-order reveal on Results is presented as a clean typeset block of the amendment text, set as a document, not as a card.

7. Signature Design Concept

The signature concept is the amendment as a transit-line diagram. On the Landing page, the amendment is rendered as four stacked full-width colour bands — red #D6291E, blue #1B5FA8, yellow #F2B705, green #1E7A4C — each band containing its clause text in white 18px Archivo, deliberately shuffled out of order. This is the visual statement of the problem and the entry point into the exercise: the reader sees the constitutional text as a coded information system, and the grid itself teaches that there is one correct order.

The same concept carries into the Practice page: every phrase card carries a 6px solid colour bar on its left edge matching its clause code, and every drop slot is labelled with an all-caps position number (01–04) in Archivo 600 at 11px with +0.14em tracking. The grid is visible and does the teaching. A persistent right-hand rail typesets the reconstructed amendment live as the learner drops each phrase, so the sentence assembles itself in real time like a document being set.

The Results page completes the concept as a ruled comparison table — user's order / correct order / match marker — with a 1px black rule between every row. No cards, no confetti, no score badge. The single motion flourish: on a correct submission, a black horizontal rule draws left-to-right across the results panel in 400ms, then the full amendment sets beneath it as one clean paragraph.

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

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

Landing Hero Motion Brief.

• Focal subject. The four stacked full-width colour bands rendering the amendment as a transit-line diagram, deliberately shuffled out of order.
• Input → transformation → outcome thesis. The learner reads the shuffled bands (input), activates "BEGIN EXERCISE" (transformation), and arrives at the Practice page where the same colour-coded phrases become arrangeable units (outcome). The motion is minimal and instant, in the spirit of signage: 120–160ms