System Requirements Document for urban-altruism

1. Introduction

urban-altruism is a five-part reading experience built around a single argumentative student essay. The essay argues that humans are fundamentally selfish: that kindness is driven by survival instincts, the need for inner satisfaction, and the desire for social recognition, and that truly selfless acts may not exist at all.

The product intent is to deliver that essay as a finished, publishable piece of writing — exactly 225 words, in English, paraphrased from the author's supplied draft rather than copied verbatim — and to present it as a poster-like, section-by-section reading journey rather than a plain document. The audience is twofold: the Essay Author, who owns the argument and needs the finished text to reach the required length without padding the introduction, and the Reader, a general reader who arrives with no sign-in and must be pulled through the argument from the opening question to the closing reflection.

The tone is deliberate provocation, not reassurance. The design should make the reader feel the discomfort of the claim before they read a single justification.

2. System Overview

urban-altruism is a custom-UI web reading experience. It has no accounts, no sign-in, and no personal data collection. Every page is publicly reachable.

Current delivery. Six pages, in a fixed order: Landing, Thesis, Survival, Satisfaction, Recognition, Conclusion. The Landing page is a full-viewport poster that poses the essay's central question and lists the five sections as a numbered index. The five section pages carry the essay itself: the opening and thesis, the three body arguments, and the closing reflection.

Actors. Two accepted human personas: the Essay Author, who drafts and expands the essay text so it reaches exactly 225 words while preserving the argument and structure; and the Reader, who reads the finished essay in order without signing in. No system, provider, or external actor is a persona.

Accepted behavior. The essay is presented as a 225-word English paraphrase of the author's supplied text. The author's supplied opening paragraph is kept, followed by three body sections — how survival instincts shape helping behavior, how kindness satisfies inner needs, and how social rewards encourage generosity — and a closing reflection on whether truly selfless acts can exist. Words added to reach 225 go into deepening the three body arguments, not into padding the introduction. A word-count meter on every page tracks progress through the 225 words.

Ownership. All six pages are application-owned custom pages with no access requirement. The essay text itself is authored content, not a generated or fetched artifact.

Narrow exclusions. No sign-in, no accounts, no user profiles, no comments, no sharing features, no analytics dashboards, no editing interface for the Reader, and no stock photography of people helping one another. The essay is not a live collaborative document and is not editable by the Reader.

2a. Product Interpretation and Delivery Boundary

This project delivers one thing: a finished 225-word argumentative essay, presented as a designed reading experience. The delivery boundary is deliberately narrow.

What is current. The six pages, the essay text, the word-count meter, the section index, and the poster-style visual treatment. All of it is first-party and publicly reachable. Nothing on any page requires identity, and no page establishes identity.

What is not current. There is no authoring tool, no draft-saving, no version history, no export, no print stylesheet, no translation, and no reader feedback mechanism. The Essay Author's work — drafting and expanding the text to exactly 225 words — is the source of the content that ships; the product presents that finished content rather than providing an editing surface for it. The Reader's work is reading, in order, from the opening question to the closing reflection.

Access. Every page is open. The absence of sign-in is an explicit constraint, not a default that could be reversed. No page may gate content behind identity, and no page may introduce an account-creation step.

2b. Source Content Inventory

The authoritative content source is the user-supplied essay draft, comprising an opening paragraph and a thesis/roadmap paragraph. The finished essay is a 225-word English paraphrase of this material, preserving its argument and structure. The verified content entities are:

Opening paragraph — the phenomenon and the doubt.

• Humans are often praised for their kindness, yet people rarely act without expecting something in return.
• Every day, people donate to charity, help strangers, and make sacrifices for others.
• These actions are widely seen as proof of human generosity.
• Such behavior is celebrated in religion, education, and everyday culture, which encourages the belief that people are naturally good and caring.
• Human kindness plays an important role in everyday life and helps build relationships between individuals.
• In many societies, helping others is considered a positive value that should be practiced and encouraged.
• The reasons behind these actions are not always easy to understand, as human behavior can be influenced by different motivations and circumstances.
• This makes the motivations behind human kindness an interesting topic to explore further.

Thesis and roadmap paragraph — the argument and its structure.

• Philosophers and psychologists have long debated whether this behavior is truly selfless or ultimately motivated by self-interest.
• If every act of kindness brings some kind of reward to the giver, then the line between altruism and selfishness becomes very difficult to draw.
• The essay argues that humans are fundamentally selfish because they are driven by survival instincts, the need for inner satisfaction, and the desire for social recognition.
• The essay will first explore how survival shapes helping behavior.
• Then it will explore how kindness satisfies inner needs.
• Finally it will explore how social rewards encourage generosity.
• Before considering whether truly selfless acts can exist.

Structural facts. The essay is exactly 225 words. It is written in English. It is a paraphrase, not a verbatim copy. The supplied opening paragraph is kept. Added length goes into the three body arguments, not the introduction. The essay is presented across Landing, Thesis, Survival, Satisfaction, Recognition, and Conclusion. No sign-in is required.

2c. Page Content and Component Coverage

Landing

• Information and state. The essay's central question — "ARE WE KIND, OR ARE WE JUST PAID IN FEELINGS?" — set in Anton, uppercase, in three stacked flush-left lines spanning the full viewport width at clamp(56px, 12vw, 148px). The third line deliberately overruns the right edge so the final word is cropped by the viewport itself. Behind the type, a photographed hand-stamped "SELFISH" in vermilion sits rotated −3° at 60% opacity, bleeding off the bottom-right corner. Beneath the headline, a single vermilion rule spans the full width. Pinned under it on the left is a 2px-bordered rectangular CTA reading "READ THE ARGUMENT" in 13px uppercase tracked ink; to its right, the word count "225 WORDS · 5 SECTIONS" set in monospace in muted grey. Below the fold, the five section names are listed as a numbered index.
• Primary action. Enter the argument — the "READ THE ARGUMENT" CTA leads to Thesis.
• Supporting actions. Jump directly to any of the five sections from the numbered index.
• Domain entities. Essay title question, section index (Thesis, Survival, Satisfaction, Recognition, Conclusion), word count (225), section count (5).
• Component responsibilities. Poster hero (headline stack, stamped "SELFISH" image, vermilion rule); CTA button (2px ink border, 4px hard vermilion offset shadow on hover); word-count metadata line; numbered section index.
• States. Loading: paper-grain texture and hero type render immediately; the stamped image loads progressively with a kraft-paper placeholder. Empty: not applicable — the hero content is static. Success: hero renders at full viewport with the third headline line cropped at the right edge and the stamped mark bleeding off the bottom-right. Error: if the stamped image fails, the hero renders with the type and vermilion rule alone; no layout shift, no broken-image icon. Recovery: the CTA and section index remain fully usable regardless of image state.

Thesis

• Information and state. The essay's opening and its thesis. The supplied opening paragraph is kept: the phenomenon of praised kindness, the everyday examples of donating and helping strangers, the cultural and religious reinforcement of human goodness, the role of kindness in building relationships, the observation that helping others is a positive value in many societies, and the admission that the reasons behind these actions are not always easy to understand. The thesis follows: philosophers and psychologists have long debated whether this behavior is truly selfless or ultimately motivated by self-interest; if every act of kindness brings some reward to the giver, the line between altruism and selfishness becomes very difficult to draw; the essay argues that humans are fundamentally selfish, driven by survival instincts, the need for inner satisfaction, and the desire for social recognition. The roadmap closes the page: survival first, then inner satisfaction, then social rewards, before considering whether truly selfless acts can exist.
• Primary action. Read the opening and thesis, then continue to Survival.
• Supporting actions. Return to Landing; jump to any other section from the persistent rail.
• Domain entities. Opening paragraph, thesis statement, three-part roadmap, section number, word-count position.
• Component responsibilities. Persistent left rail (72px on desktop, hidden below 768px) carrying the section number in Anton at 1.2× body size, a vertical vermilion rule, and the page name rotated 90°; full-width display headline breaking across two or three lines; thick 3px ink rule; 68ch reading column; word-count meter.
• States. Loading: rail and headline render first; body text follows. Empty: not applicable. Success: the full opening and thesis render in the reading column with the word-count meter showing progress. Error: if the body text fails to load, the headline, rail, and meter remain, with a plain retry affordance. Recovery: retry reloads the section body in place without losing scroll position.

Survival

• Information and state. The first body argument: how survival instincts shape the way we help. The section deepens this claim — helping behavior as an inherited response that protects the helper's own standing, resources, and continuity — and carries the added length required to reach 225 words. A pull-quote breaks out of the reading column to full grid width, set in Anton at 1.6× body size with an oversized vermilion quote mark and a halftone dot pattern behind the text at 18% opacity.
• Primary action. Read the survival argument, then continue to Satisfaction.
• Supporting actions. Return to Thesis; jump to any other section from the rail.
• Domain entities. Survival-instinct argument, pull-quote, section number, word-count position.
• Component responsibilities. Persistent left rail with section number and rotated page name; display headline; ink rule; reading column; full-grid pull-quote with halftone backing; word-count meter.
• States. Loading: headline and rail first, then body, then pull-quote. Empty: not applicable. Success: argument and pull-quote render; the pull-quote's quote mark scales from 0.8 to 1 in 90ms on scroll entry. Error: if the pull-quote image or halftone fails, the quote renders as plain Anton type without the backing pattern. Recovery: the argument text is never blocked by a decorative failure.

Satisfaction

• Information and state. The second body argument: how kindness satisfies inner needs. The section deepens this claim — the private payoff of feeling useful, the relief of guilt, the comfort of a coherent self-image — and carries the added length required to reach 225 words. A pull-quote breaks out to full grid width in the same treatment as Survival.
• Primary action. Read the inner-satisfaction argument, then continue to Recognition.
• Supporting actions. Return to Survival; jump to any other section from the rail.
• Domain entities. Inner-satisfaction argument, pull-quote, section number, word-count position.
• Component responsibilities. Persistent left rail; display headline; ink rule; reading column; full-grid pull-quote with halftone backing; word-count meter.
• States. Loading: headline and rail first, then body, then pull-quote. Empty: not applicable. Success: argument and pull-quote render with the stepped headline reveal. Error: decorative failure degrades to plain type. Recovery: argument text remains readable regardless of decorative state.

Recognition

• Information and state. The third body argument: how social rewards encourage generosity. The section deepens this claim — the value of being seen as generous, the reputational return on visible giving, the way praise converts an act into a transaction — and carries the added length required to reach 225 words. A pull-quote breaks out to full grid width in the same treatment as the earlier body sections.
• Primary action. Read the social-rewards argument, then continue to Conclusion.
• Supporting actions. Return to Satisfaction; jump to any other section from the rail.
• Domain entities. Social-recognition argument, pull-quote, section number, word-count position.
• Component responsibilities. Persistent left rail; display headline; ink rule; reading column; full-grid pull-quote with halftone backing; word-count meter.
• States. Loading: headline and rail first, then body, then pull-quote. Empty: not applicable. Success: argument and pull-quote render; the meter approaches completion. Error: decorative failure degrades to plain type. Recovery: argument text remains readable regardless of decorative state.

Conclusion

• Information and state. The closing reflection on whether truly selfless acts can exist. The section returns to the essay's opening doubt and closes the argument without resolving it comfortably. The word-count meter reaches its end and the final total is stamped "225" in Anton.
• Primary action. Read the closing reflection and complete the essay.
• Supporting actions. Return to Recognition; jump back to any earlier section from the rail; return to Landing.
• Domain entities. Closing reflection, final word count (225), section number.
• Component responsibilities. Persistent left rail; display headline; ink rule; reading column; word-count meter with the stamped "225" terminal state.
• States. Loading: headline and rail first, then body, then the stamped total. Empty: not applicable. Success: the reflection renders and the meter stamps "225" in Anton. Error: if the stamped total fails to render, the meter still shows the completed fill and the monospace count. Recovery: the reflection text is never blocked by the meter's terminal state.

3. Functional Requirements

FR-1 — Argumentative essay on human selfishness (explicit) As an Essay Author, I should have my essay argue that humans are fundamentally selfish, driven by survival instincts, the need for inner satisfaction, and the desire for social recognition, so that the thesis is stated and defended rather than merely described.

• Trigger/input: The author's supplied draft and thesis.
• Observable result: The essay states the thesis and develops it across the three named drivers.
• Access state: Public; no sign-in.
• Failure/recovery: If the argument drifts into description without a defended claim, the section is revised to restore the thesis.
• Continuation: The Reader proceeds to the next section of the argument.
• Owner: Thesis, Survival, Satisfaction, Recognition, Conclusion.

FR-2 — Exactly 225 words (explicit) As an Essay Author, I should have the finished essay total exactly 225 words, so that it meets the required length.

• Trigger/input: The drafted essay text.
• Observable result: The word count reads 225, shown live in the word-count meter and stamped "225" in Anton on the Conclusion.
• Access state: Public; no sign-in.
• Failure/recovery: If the count falls short or runs over, the body arguments are adjusted until the total is exactly 225.
• Continuation: The Reader reaches the end of the essay with the count confirmed.
• Owner: All six pages via the word-count meter; terminal state on Conclusion.

FR-3 — Written in English (explicit) As an Essay Author, I should have the essay written in English, so that it meets the required language.

• Trigger/input: The drafted essay text.
• Observable result: All essay prose is in English.
• Access state: Public; no sign-in.
• Failure/recovery: Any non-English passage is rewritten in English.
• Continuation: The Reader reads the essay in English throughout.
• Owner: Thesis, Survival, Satisfaction, Recognition, Conclusion.

FR-4 — Paraphrase, not a verbatim copy (explicit) As an Essay Author, I should have the essay paraphrase my supplied text rather than copy it verbatim, so that the argument and structure are preserved in my own wording.

• Trigger/input: The author's supplied opening paragraph and thesis/roadmap paragraph.
• Observable result: The essay carries the same argument and structure in reworded prose.
• Access state: Public; no sign-in.
• Failure/recovery: Any passage that reproduces the source verbatim is reworded.
• Continuation: The Reader reads a paraphrase that preserves the original argument.
• Owner: Thesis, Survival, Satisfaction, Recognition, Conclusion.

FR-5 — Preserved structure: opening, three body sections, closing reflection (explicit) As an Essay Author, I should have my supplied opening paragraph kept, followed by three body sections — how survival instincts shape helping behavior, how kindness satisfies inner needs, and how social rewards encourage generosity — and a closing reflection on whether truly selfless acts can exist, so that the essay's structure matches what I supplied.

• Trigger/input: The author's supplied draft.
• Observable result: The essay opens with the supplied opening, develops the three named arguments in order, and closes with the reflection.
• Access state: Public; no sign-in.
• Failure/recovery: If a section is missing or reordered, it is restored to its place.
• Continuation: The Reader moves through the sections in the intended order.
• Owner: Thesis (opening and thesis), Survival, Satisfaction, Recognition (three body sections), Conclusion (closing reflection).

FR-6 — Added words deepen the body arguments, not the introduction (explicit) As an Essay Author, I should have the additional words needed to reach 225 go into deepening the three body arguments rather than padding the introduction, so that the essay grows in substance rather than filler.

• Trigger/input: The gap between the current draft length and 225 words.
• Observable result: The Survival, Satisfaction, and Recognition sections carry the added length; the Thesis opening is not padded.
• Access state: Public; no sign-in.
• Failure/recovery: If the introduction grows while the body stays thin, the added material is moved into the body arguments.
• Continuation: The Reader encounters a fuller argument in each body section.
• Owner: Survival, Satisfaction, Recognition.

FR-7 — Presented across the six named pages (explicit) As an Essay Author, I should have the essay presented across Landing, Thesis, Survival, Satisfaction, Recognition, and Conclusion, so that the argument is delivered as a section-by-section reading experience.

• Trigger/input: The finished essay text.
• Observable result: Each page carries its assigned part of the essay, in the fixed order.
• Access state: Public; no sign-in.
• Failure/recovery: If a page is missing or out of order, it is restored.
• Continuation: The Reader can move from any section to the next.
• Owner: Landing, Thesis, Survival, Satisfaction, Recognition, Conclusion.

FR-8 — No sign-in required (explicit) As a Reader, I should be able to use every page without signing in, so that nothing stands between me and the essay.

• Trigger/input: Opening any page.
• Observable result: The page renders its content immediately; no credential prompt appears.
• Access state: Public; no identity established or required.
• Failure/recovery: If any page attempts to gate content, the gate is removed.
• Continuation: The Reader continues reading without interruption.
• Owner: All six pages.

FR-9 — Landing introduces the essay and leads into its sections (explicit) As a Reader, I should arrive on a Landing page that poses the essay's central question and lists its five sections, so that I understand what I am about to read and can choose where to begin.

• Trigger/input: Opening the site.
• Observable result: The poster hero renders with the central question, the "READ THE ARGUMENT" CTA, the word-count metadata, and the numbered section index.
• Access state: Public; no sign-in.
• Failure/recovery: If the stamped hero image fails, the type and rule still render and the CTA and index remain usable.
• Continuation: The Reader enters the argument at Thesis or jumps to any section.
• Owner: Landing.

FR-10 — Reader follows the argument in order (explicit) As a Reader, I should be able to read the full 225-word essay in order — opening, survival, inner satisfaction, social recognition, closing reflection — so that I understand the thesis that human kindness is ultimately self-interested.

• Trigger/input: Entering the argument from Landing.
• Observable result: Each section renders in sequence, with the word-count meter advancing and the final total stamped "225" on Conclusion.
• Access state: Public; no sign-in.
• Failure/recovery: If a section body fails to load, a plain retry reloads it in place without losing scroll position.
• Continuation: The Reader reaches the closing reflection and the completed word count.
• Owner: Thesis, Survival, Satisfaction, Recognition, Conclusion.

FR-11 — Word-count meter tracks progress through the 225 words (explicit) As a Reader, I should see a word-count meter on every page that fills as I progress through the 225 words, so that I always know how far into the argument I am.

• Trigger/input: Reading progress through the sections.
• Observable result: A horizontal ink rule fills in vermilion; the live count is set in monospace; the final total is stamped "225" in Anton on Conclusion.
• Access state: Public; no sign-in.
• Failure/recovery: If the stamped total fails to render, the completed fill and monospace count still show.
• Continuation: The Reader sees the completed count at the end of the essay.
• Owner: All six pages; terminal state on Conclusion.

FR-12 — Persistent section rail (explicit) As a Reader, I should see a persistent left rail on every page carrying the section number, a vertical vermilion rule, and the current page name rotated 90°, so that I always know which part of the argument I am in.

• Trigger/input: Opening any section page.
• Observable result: The rail renders at 72px on desktop and hides below 768px, with the section number moving inline above the headline.
• Access state: Public; no sign-in.
• Failure/recovery: If the rail cannot render, the section number still appears inline above the headline.
• Continuation: The Reader keeps their place in the argument.
• Owner: Thesis, Survival, Satisfaction, Recognition, Conclusion.

4. User Personas

Essay Author

The Essay Author owns the argument. Their product context is a short, high-stakes piece of writing: an argumentative essay that must land at exactly 225 words, in English, paraphrased from their own supplied draft rather than copied, and structured as an opening, three body arguments, and a closing reflection. Their primary goal is a finished essay that states and defends the thesis that humans are fundamentally selfish — driven by survival instincts, inner satisfaction, and social recognition — without the argument thinning out or the introduction swelling to fill space.

What makes this role's work distinct is that it is a length-constrained argumentative task, not a writing-in-general task. The author's recurring decision is where the added words go: the explicit constraint is that they deepen the three body arguments rather than pad the introduction. That single rule shapes every revision. The author also decides how far the closing reflection pushes: the essay must consider whether truly selfless acts can exist without resolving the question comfortably.

The author's inputs are the supplied opening paragraph and thesis/roadmap paragraph. Their observable success is a complete 225-word English essay that preserves the argument and structure of the source, with the added length visible in the Survival, Satisfaction, and Recognition sections. The author does not interact with the Reader directly; the finished text is what passes between them.

Reader

The Reader is a general reader who arrives with no sign-in and no prior commitment to the argument. Their product context is a five-part reading experience that must pull them through an unpopular thesis. Their primary goal is to read the full 225-word essay in order and come away understanding the claim that human kindness is ultimately self-interested.

What makes this role's work distinct is that it is a guided reading task under mild discomfort. The Reader is not browsing; they are being walked from an opening question through three escalating arguments to a closing reflection that refuses to resolve the tension. The design carries weight the short text cannot: the poster hero poses the question before a single justification is read, and the word-count meter makes the 225-word span visible as a finite journey.

The Reader's inputs are the pages themselves — the Landing poster, the section index, the reading column, the pull-quotes, and the meter. Their decisions are where to enter (the CTA or a direct jump from the index) and whether to continue section by section. Their observable success is reaching the Conclusion with the word count stamped "225" and the thesis understood. The Reader never signs in, never edits, and never leaves feedback; the interaction is reading, start to finish.

5. Core User Flows

Flow 1 — Essay Author: reaching exactly 225 words without padding the introduction

1. The Essay Author begins with the supplied opening paragraph and thesis/roadmap paragraph, which together fall short of 225 words.
2. The author identifies the three body arguments that must carry the added length: survival instincts shaping helping behavior, kindness satisfying inner needs, and social rewards encouraging generosity.
3. The author deepens the Survival section, extending the claim that helping behavior is an inherited response protecting the helper's own standing, resources, and continuity.
4. The author deepens the Satisfaction section, extending the claim that kindness pays the giver privately — the relief of guilt, the comfort of a coherent self-image.
5. The author deepens the Recognition section, extending the claim that visible giving returns reputational value and converts an act into a transaction.
6. The author checks the word-count meter. If the total is short, steps 3–5 repeat; if it runs over, the body arguments are tightened.
7. The author confirms the Thesis opening has not been padded — the supplied opening paragraph stands as written.
8. Observable result: the meter reads 225, and the added length sits in the three body sections.
9. Continuation: the finished essay is presented across the six pages for the Reader.

Flow 2 — Reader: entering the argument from the Landing poster

1. The Reader opens the site and lands on the Landing page.
2. The poster hero renders: "ARE WE KIND, OR ARE WE JUST PAID IN FEELINGS?" in three stacked flush-left Anton lines, the third cropped by the viewport edge, with the hand-stamped "SELFISH" bleeding off the bottom-right corner.
3. The Reader reads the word-count metadata — "225 WORDS · 5 SECTIONS" — and sees the five section names listed as a numbered index.
4. The Reader chooses an entry point: the "READ THE ARGUMENT" CTA, or a direct jump to any section from the index.
5. Observable result: the chosen section renders with its rail, headline, and word-count meter.
6. Failure/recovery: if the stamped hero image fails to load, the type and vermilion rule still render and the CTA and index remain fully usable.
7. Continuation: the Reader proceeds into the argument.

Flow 3 — Reader: reading the argument in order

1. The Reader enters at Thesis and reads the opening: the phenomenon of praised kindness, the everyday examples of donating and helping strangers, the cultural and religious reinforcement of human goodness, the role of kindness in building relationships, and the admission that the reasons behind these actions are not always easy to understand.
2. The Reader reaches the thesis: philosophers and psychologists have long debated whether this behavior is truly selfless or ultimately motivated by self-interest; if every act of kindness brings some reward to the giver, the line between altruism and selfishness becomes very difficult to draw.
3. The Reader reads the roadmap — survival, then inner satisfaction, then social rewards, before considering whether truly selfless acts can exist — and continues to Survival.
4. On Survival, the Reader reads the first body argument and encounters a pull-quote breaking out to full grid width, its vermilion quote mark scaling from 0.8 to 1 in 90ms on scroll entry.
5. The Reader continues to Satisfaction and reads the second body argument, with its own full-grid pull-quote.
6. The Reader continues to Recognition and reads the third body argument, with its own full-grid pull-quote.
7. The Reader continues to Conclusion and reads the closing reflection on whether truly selfless acts can exist.
8. Observable result: the word-count meter has filled across the sections and the final total is stamped "225" in Anton.
9. Failure/recovery: if a section body fails to load, a plain retry reloads it in place without losing scroll position; decorative failures degrade to plain type and never block the argument text.
10. Continuation: the Reader may return to any earlier section from the rail or go back to Landing.

Flow 4 — Reader: tracking progress through the 225 words

1. The Reader is on any section page.
2. The persistent left rail shows the section number in Anton at 1.2× body size, a vertical vermilion rule, and the page name rotated 90°.
3. The word-count meter shows a horizontal ink rule filling in vermilion, with the live count in monospace.
4. As the Reader moves from Thesis through Survival, Satisfaction, and Recognition, the meter advances.
5. On Conclusion, the meter reaches its end and the total is stamped "225" in Anton.
6. Observable result: the Reader sees the completed count at the end of the essay.
7. Failure/recovery: if the stamped total fails to render, the completed fill and monospace count still show.
8. Continuation: the Reader has finished the essay.

Flow 5 — Reader on a narrow viewport

1. The Reader opens any section page below 768px.
2. The persistent left rail is hidden.
3. The section number moves inline above the headline.
4. The headline wraps or scales within the viewport; no readable text or control is cropped or covered.
5. The word-count meter and reading column remain fully usable.
6. Observable result: the Reader reads the same argument with the same progress tracking, in a single-column layout.
7. Continuation: the Reader continues through the sections as in Flow 3.

6. Visuals Colors and Theme

Muse: Stefan Sagmeister. The direction is handmade provocation — type built from physical material, imperfection on purpose, wit with an edge. The surface makes an argument rather than decorating one. The essay is short and split across five pages, so the design carries weight the text cannot: a bold, tactile, unapologetically opinionated frame turns a homework-length text into something that feels like a cultural statement.

Headline: Kindness is a transaction. This poster says so.

Colour tokens — light mode

The vermilion is the knife: it appears only on section numbers, the verdict word "SELFISH", the active rule under the current page, and pull-quote quote marks. No gradients. No blue, indigo, or violet anywhere, including links, focus rings, and hover states. No white-first layout — the paper tone is the ground, the ink is the type.

Typography

• Headings: Anton, all caps, tight tracking (−0.02em), very large display sizes, stacked in short line breaks so each phrase reads as a poster line rather than a sentence. Section numbers set in Anton at 1.2× body size so the numeral is a graphic element. Headlines flush left, ragged right, never centred.
• Body: Source Serif 4, 1.65 line-height.
• Scale: 1.5 modular for display, 1.25 modular for reading.
  • Display (Anton): 40 / 64 / 96 / 128px
  • Body (Source Serif 4): 18 / 20 / 24px
  • Labels: 12px uppercase, tracked
  • Numerals: 13px monospace for word counts and section indices

Inter, Roboto, Poppins, and any neutral geometric sans are excluded for both headings and body.

Shape language

Hard edges everywhere — no border radius on any surface, rule, or button. Sections are separated by thick 3px ink rules and thin 1px vermilion rules. The only soft element is the paper grain texture layered at 4% opacity over the whole page. Buttons are rectangles with a 2px ink border and a 4px hard offset shadow in vermilion on hover, like a rubber stamp pressed slightly off-register. No rounded corners, no soft shadows, no glassmorphism panels.

Layout

A single reading column of 68ch maximum, left-aligned on a 12-column grid, with a persistent left rail (72px wide on desktop, hidden below 768px) carrying the section number, a vertical vermilion rule, and the current page name rotated 90°. Each page opens with a full-width display headline that breaks across two or three lines, then a thick ink rule, then the argument body. Pull-quotes break out of the column to the full grid width, set in Anton at 1.6× body size with a vermilion quote mark. The Landing page is a full-bleed poster: the essay's central question set in Anton at viewport-spanning scale, with the five section names listed as a numbered index below it.

Imagery

No stock photography — and specifically no stock photography of people helping each other or holding hands. The visual material is the type itself plus three handmade textures: a scanned paper grain, a halftone dot pattern at 18% opacity used behind pull-quotes, and a single photographed element per page — a torn paper edge, a stamped ink mark, or a hand-printed numeral — cropped and bled off the right edge at large scale. On the Landing page the hero image is a photograph of the word "SELFISH" hand-stamped in vermilion on kraft paper, cropped so the final letter runs off the viewport edge.

Readable-text integrity

Headlines, wordmarks, labels, numbers, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as they cover no readable text or control. Where the direction asks readable text to be cropped, the gesture is carried by imagery or decoration instead.

7. Signature Design Concept

The poster pasted on a wall.

The Landing page is a full-viewport kraft-paper poster, not a centred SaaS header. The dominant element is the essay's central question — "ARE WE KIND, OR ARE WE JUST PAID IN FEELINGS?" — set in Anton, uppercase, in three stacked lines that span the full viewport width at clamp(56px, 12vw, 148px). Each line is flush left. The third line deliberately overruns the right edge so the final word is cropped by the viewport itself — the gesture is carried by the type's composition, not by cutting a readable control.

Behind the type, a photographed hand-stamped "SELFISH" in vermilion sits rotated −3° at 60% opacity, bleeding off the bottom-right corner. Beneath the headline, a single vermilion rule spans the full width. Pinned under it on the left is a 2px-bordered rectangular CTA reading "READ THE ARGUMENT" in 13px uppercase tracked ink, with the word count "225 WORDS · 5 SECTIONS" set in monospace to its right in muted grey.

Below the fold, the five section names are listed as a numbered index — Thesis, Survival, Satisfaction, Recognition, Conclusion — each with its section number set in Anton at 1.2× body size, so the index reads as a table of contents stamped onto the same poster.

The composition is asymmetric, poster-like, and impossible to mistake for a template hero. It uses only accepted content: the essay's central question, the five section names, the word count, and the entry control. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The essay's central question — "ARE WE KIND, OR ARE WE JUST PAID IN FEELINGS?" — set in Anton across three stacked flush-left lines, with the hand-stamped "SELFISH" in vermilion rotated −3° behind it, bleeding off the bottom-right corner.
• Input → transformation → outcome thesis: The reader arrives with no commitment to an unpopular claim. The poster poses the question at viewport scale before a single justification is read; the stamped "SELFISH" sits behind the type as a verdict already pressed onto the paper. The reader's attention moves from the question to the vermilion rule to the "READ THE ARGUMENT" CTA, and the outcome is entry into the argument at Thesis.
• Motion vocabulary: Restrained and tactile. Section headlines enter with a 3-frame stepped reveal (no easing) so they feel stamped rather than animated. Page transitions are a hard 120ms clip-path wipe from left to right, like a poster being peeled. The pull-quote's vermilion quote mark scales from 0.8 to 1 in 90ms on scroll entry. No parallax, no floating, no bounce, no smooth eased animation.
• Composed first frame: The full-viewport kraft poster at rest — three Anton lines flush left, the third cropped by the viewport edge, the stamped "SELFISH" bleeding off the bottom-right at 60% opacity, the vermilion rule spanning the width, the bordered CTA and the monospace word count pinned beneath it.
• Reduced-motion state: With prefers-reduced-motion, all transitions become instant opacity changes and the clip-path wipe is removed. The poster renders in its composed first frame with no stepped reveal and no quote-mark scaling; every section remains fully readable and every control fully usable.

9. Non-Functional Requirements

NFR-1 — Exact word count integrity (explicit) The finished essay must total exactly 225 words. The word-count meter must reflect the actual count, and the terminal state on Conclusion must stamp "225" only when the count is 225. Rationale: the length is an explicit hard constraint.

NFR-2 — English throughout (explicit) All essay prose must be in English. Rationale: explicit hard constraint.

NFR-3 — Paraphrase fidelity (explicit) The essay must preserve the argument and structure of the supplied source while rewording it. No passage may reproduce the source verbatim. Rationale: explicit hard constraint.

NFR-4 — Public access, no sign-in (explicit) Every page must be reachable and fully usable without authentication. No page may gate content behind identity, and no page may introduce an account-creation step. Rationale: explicit hard constraint.

NFR-5 — Readable text and controls stay whole (explicit) Headlines, wordmarks, labels, numbers, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit. No other element may cover any part of them. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, provided they cover no readable text or control. Rationale: explicit accessibility constraint from the creative direction.

NFR-6 — Reduced-motion support (explicit) With prefers-reduced-motion, all transitions must become instant opacity changes and the clip-path wipe must be removed. Every section must remain fully readable and every control fully usable. Rationale: explicit constraint from the creative direction.

NFR-7 — Palette and typography fidelity (explicit) The light-mode palette must use background #F2EDE4, surface #E7DFD2, text #141210, primary #141210, accent #E23B0B, muted #8A8175. Headings must use Anton; body must use Source Serif 4. No blue, indigo, or violet may appear anywhere, including links, focus rings, and hover states. No rounded corners, soft shadows, or glassmorphism panels. Rationale: explicit creative direction.

NFR-8 — No stock photography of helping (explicit) Stock photography of people helping each other or holding hands is excluded. The visual material is the type itself plus the three specified handmade textures. Rationale: explicit creative direction.

NFR-9 — Decorative failure never blocks content (required_inference) If a decorative asset — the stamped hero image, a halftone backing, or a photographed element — fails to load, the argument text, the rail, the meter, and every control must remain fully readable and usable. Rationale: the essay is the product; decoration must not be able to withhold it.

NFR-10 — Section body retry without scroll loss (required_inference) If a section body fails to load, a plain retry must reload it in place without losing the reader's scroll position. Rationale: the reading journey is sequential and a lost position would break the reader's place in the argument.

10. Tech Stack

• Frontend: React, custom UI. Six routes corresponding to Landing, Thesis, Survival, Satisfaction, Recognition, and Conclusion.
• Styling: CSS with the specified tokens — Anton and Source Serif 4 loaded as web fonts, hard-edged surfaces, 3px ink rules and 1px vermilion rules, paper grain texture at 4% opacity, halftone dot pattern at 18% opacity behind pull-quotes.
• Motion: CSS transitions and clip-path wipes; a scroll-entry observer for the pull-quote quote-mark scale. No animation library required.
• Content: The essay text is authored content shipped with the application. No CMS, no database, and no user-generated content.
• Backend: None required. The product is a static reading experience with no server-side behavior, no persistence, and no accounts.
• Deployment: Static hosting of the built frontend. No Docker, no Kubernetes, and no separate services are needed for the current scope.

11. Assumptions and Constraints

Assumptions

• A-1 (narrow): The finished 225-word essay text is authored as part of this project and shipped as static content. The product presents the finished essay; it does not provide an editing surface for the Essay Author. This follows from the accepted requirement that the essay is presented across the six pages, with no authoring tool named.
• A-2 (narrow): The word-count meter counts the essay's words as displayed across the section pages, and the terminal "225" stamp appears only when that count is exactly 225.
• A-3 (narrow): The Reader's progress through the meter is derived from which sections have been read, not from a stored per-reader record. No identity is established, so no progress is persisted across sessions.
• A-4 (narrow): The five section names listed on the Landing index are the five content pages — Thesis, Survival, Satisfaction, Recognition, Conclusion — matching the accepted page contract.

Constraints

• C-1: The essay must be exactly 225 words.
• C-2: The essay must be written in English.
• C-3: The essay must be a paraphrase of the supplied text rather than a verbatim copy.
• C-4: The added length must go into the three body arguments, not the introduction.
• C-5: No sign-in is required to use the pages.
• C-6: The essay is presented across Landing, Thesis, Survival, Satisfaction, Recognition, and Conclusion, in that order.
• C-7: The palette, typography, shape language, layout, imagery, and motion follow the creative direction exactly as specified in sections 6 and 8.
• C-8: No blue, indigo, or violet anywhere; no rounded corners, soft shadows, or glassmorphism; no stock photography of people helping each other or holding hands; no Inter, Roboto, or Poppins; no smooth eased animation.

12. Glossary

• Altruism — Action taken for another's benefit without expectation of return. The essay's central contested term.
• Argument marker — A vermilion element that flags the argument's structure: section numbers, the verdict word "SELFISH", the active rule under the current page, and pull-quote quote marks.
• Body arguments — The three sections that carry the essay's defense: Survival, Satisfaction, and Recognition. These sections absorb the added length needed to reach 225 words.
• Essay Author — The persona who owns the argument and the finished 225-word text.
• Halftone dot pattern — A scanned dot texture at 18% opacity used behind pull-quotes.
• Ink rule — A thick 3px near-black horizontal rule separating sections.
• Paper grain — A scanned texture layered at 4% opacity over the whole page.
• Pull-quote — A passage that breaks out of the 68ch reading column to full grid width, set in Anton at 1.6× body size with an oversized vermilion quote mark.
• Reader — The persona who reads the finished essay in order without signing in.
• Section rail — The persistent left rail (72px on desktop, hidden below 768px) carrying the section number, a vertical vermilion rule, and the rotated page name.
• Selfishness — Action ultimately motivated by the actor's own benefit. The essay's thesis.
• Vermilion rule — A thin 1px accent rule in #E23B0B.
• Word-count meter — The horizontal ink rule that fills in vermilion as the reader progresses through the 225 words, with the live count in monospace and the final total stamped "225" in Anton on Conclusion.