System Requirements Document for prime-christian

1. Introduction

prime-christian (product name: Praise) is a Christian app. It exists so that a Christian individual — the Believer — can engage with faith content: recurring daily devotionals and Bible reading. The product intent derived from the authoritative requirement thread is narrow and deliberate: a Christian app, built, and free to use with no paid offering of any kind.

The audience is the single accepted active human persona, the Believer: a Christian who returns to the app for Scripture and reflection. The register of the product is quiet, devotional, and unhurried — a reading product, not a dashboard, not a social feed, and not a marketplace. There is no onboarding flow, no community layer, no gamification, and no child audience.

Because the app must be free, every tool, service, library, and dependency used to build and run it must itself be free of charge. No paid tier, no subscription prompt, no paid API, no paid font licence, no paid hosting plan, and no paid third-party service may appear anywhere in the product or its stack.

2. System Overview

Praise is delivered as a first-party custom web application with three pages, all reachable without an account:

• Landing — the anonymous public entry surface. It states that Praise is a free Christian app and directs the Believer into its faith content.
• Devotionals — recurring daily devotional faith content, presented as a ruled catalogue list and a single centred reading artefact.
• Bible — Bible reading content, presented as a book/chapter index beside a wide reading measure.

The only accepted human actor is the Believer. There are no other personas, no administrators, no moderators, and no community participants. The application itself is the owner of all three pages; there is no provider-owned or external-destination surface in the current product.

Accepted current behavior is limited to: presenting the app's identity and free status, presenting daily devotional content, and presenting Bible reading content. Everything else — accounts, payments, subscriptions, social features, notifications, streaks, and content authoring tools — is outside the current product.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. Praise is a first-party custom application. All three pages are owned and rendered by the application itself. No accepted behavior is delegated to a provider surface or an external destination, and no part of the product is headless or API-only from the Believer's point of view.

Access ownership. All three pages are reachable anonymously. The Believer does not create an account, does not sign in, and does not verify an identity in order to read devotionals or Scripture. Nothing in the accepted requirements establishes durable, privately owned, actor-specific state that must be resumed across sessions or bound to a particular person, and nothing establishes a commitment, entitlement, or value transfer that must remain attached to the correct participant. Application-owned identity is therefore not introduced. There is no sign-up, no sign-in, no password reset, no profile, and no account management of any kind.

Free-of-charge boundary. The "only free" constraint is a hard, current, product-wide constraint. It governs the product experience (no paid tier, no subscription prompt, no pricing table, no upsell language, no implication that anything is purchasable) and it governs the implementation stack (only free tools, services, libraries, fonts, and dependencies). It does not prohibit the app from existing, from being built, or from serving content; it prohibits charging for it and prohibits paid components inside it.

Current vs. future. Only the three pages above and the behavior described in this document are current. Anything not stated here — including but not limited to accounts, giving/donations, audio playback, offline downloads, sharing, comments, prayer requests, reading plans, and notifications — is not part of the current product and must not be built as if it were.

2b. Source Content Inventory

Not applicable. No reference directive in the authoritative sources declares a content_source, so no verified factual inventory is carried into this document. Devotional and Scripture content presented by the app is drawn from free, openly licensed sources at implementation time; no specific passages, dates, or references were supplied by the user and none are invented here.

2c. Page Content and Component Coverage

Landing

• Information and state presented: the product wordmark PRAISE; a statement that Praise is a Christian app; a statement that it is free; the day's verse as a single centred artefact; a metadata block beneath the verse in the form DATE · SEASON · PASSAGE; a season code strip showing the five liturgical season colours with only the current season outlined in spot red.
• Primary action: a single hairline-outlined square button labelled "Begin today's reading", sitting directly beneath the metadata block, not centred and not filled, which takes the Believer into the day's devotional reading.
• Supporting actions: the three stacked uppercase navigation labels in the fixed left rail (Landing, Devotionals, Bible), each separated by a hairline; at 375px these collapse behind a single Menu label in the top bar.
• Domain entities: Verse (text, reference), Season (name, code colour), Day (date), Passage reference.
• Component responsibilities:
  • Vertical wordmark rail — 56px fixed left rail holding PRAISE set vertically at 0.3em letterspacing, plus the three nav labels.
  • Verse plate — a solid #141416 square with the day's verse set in Cormorant Garamond Light, centred, ragged-right, occupying no more than eight of twelve columns, with a 1px hairline rule above it and a 2px spot-red rule flush left of the verse, 96px tall, like a spine.
  • Metadata block — Archivo SemiBold 11px uppercase, 0.18em letterspacing, in muted #8A867C.
  • Season code strip — five small squares in the fixed liturgical palette, current season outlined in spot red.
  • Entry button — hairline-outlined square, zero border-radius, no fill.
• States:

• Loading — the verse plate holds its square proportion and shows the hairline rule and metadata skeleton; no spinner, no shimmer.
• Empty — if no verse is available for the day, the plate shows the metadata block with the date and season and a plain statement that today's reading is not yet available, plus the entry button disabled.
• Success — verse, reference, date, and season render fully; the entry button is active.
• Error — a plain inline line beneath the metadata stating the reading could not be loaded, with a retry control that re-requests the day's verse.
• Recovery — retry re-requests the verse; if it fails again the Believer can still navigate to Devotionals or Bible from the rail.

Devotionals

• Information and state presented: a ruled catalogue list of devotionals, each row reading date | season chip | title | reading time, separated by 1px dividers with no card containers; and, for a selected devotional, a single centred reading artefact with the devotional heading in Cormorant Garamond Light, the body in Archivo at a 62ch measure, and a metadata block beneath.
• Primary action: select a devotional row to read it.
• Supporting actions: return to the index from a reading view; move to the next or previous devotional in the list; navigate to Landing or Bible from the rail.
• Domain entities: Devotional (date, season, title, reading time, heading, body), Season (name, code colour), Day (date).
• Component responsibilities:
  • Ruled list — 1px-divided rows, no hover-lift; hovering a row fades a spot-red rule in from the left in 180ms.
  • Season chip — a small square drawn from the fixed five-colour liturgical code.
  • Reading view — the verse-plate treatment applied to the devotional: centred artefact, hairline rule above, 11px uppercase metadata block below.
  • Reading-progress rule — a 2px spot-red rule pinned flush to the top of the reading view, scaling horizontally with scroll and never thickening, with the current reference set in Archivo 11px uppercase at its right end.
• States:
  • Loading — the ruled list renders its 1px dividers with placeholder rows; the reading view holds its measure.
  • Empty — the list shows a plain statement that no devotionals are available yet, with no card and no illustration.
  • Success — rows render date, season chip, title, and reading time; selecting a row opens the reading view with the progress rule tracking scroll.

• Error — a plain inline line stating the devotionals could not be loaded, with a retry control.
• Recovery — retry reloads the list; a failed individual devotional shows an inline retry inside the reading view while the index remains usable.

Bible

• Information and state presented: a narrow left index of books and chapters set as a numbered list; a wide right reading measure of 62ch showing the selected passage; a thin red progress rule pinned to the top of the viewport; the current verse reference in Archivo 11px uppercase at the right end of the progress rule.
• Primary action: select a book and chapter from the index to read it.
• Supporting actions: move to the next or previous chapter; navigate to Landing or Devotionals from the rail.
• Domain entities: Book (name, order), Chapter (number), Verse (number, text), Passage reference.
• Component responsibilities:
  • Book/chapter index — numbered list in the narrow left column, 1px dividers, no card containers.
  • Reading measure — 62ch column, Archivo Regular 17–19px, 1.7 line-height; verse numbers in Cormorant old-style figures.
  • Progress rule — 2px spot red, flush to the top of the viewport, scaling with scroll.
• States:
  • Loading — the index renders its numbered structure; the reading measure holds its width.
  • Empty — if a chapter has no content available, the reading measure states plainly that this passage is not available, and the index remains usable.
  • Success — the selected chapter renders in the reading measure with verse numbers and the progress rule tracking scroll.
  • Error — a plain inline line stating the passage could not be loaded, with a retry control.
  • Recovery — retry re-requests the chapter; the Believer can select a different book or chapter from the index at any time.

• Responsive behavior: at 375px the rail collapses to a top bar with the wordmark left and a single Menu label right; the ruled list keeps its rules but stacks date above title; the reading measure goes full width with 20px gutters.

3. Functional Requirements

FR-1 — Christian app identity As a Believer, I should encounter an app that presents itself clearly as a Christian app, so that I immediately understand what Praise is.

• Provenance: explicit.
• Trigger/input: the Believer opens the app.
• Observable result: the Landing page presents the wordmark PRAISE and a statement that Praise is a Christian app.
• Access state: anonymous; no account required.
• Failure/recovery: if the page fails to load, a plain retry is offered.
• Continuation: the Believer proceeds to the day's reading, Devotionals, or Bible.

FR-2 — Free to use, with no paid offering As a Believer, I should be able to use every part of Praise at no cost, so that nothing in the app asks me to pay.

• Provenance: explicit (hard constraint).
• Trigger/input: any use of the app.
• Observable result: no pricing table, subscription prompt, paid tier, upsell language, or purchase control appears anywhere; all content is reachable without payment.
• Access state: anonymous; no account and no payment method required.
• Failure/recovery: not applicable — this is a standing constraint on the product, not an operation that can fail.
• Continuation: the Believer continues reading.

FR-3 — Free-only implementation stack As a Believer, I should be served by a product built entirely from free tools, services, and dependencies, so that the app's free status is real and not subsidised by a paid component.

• Provenance: explicit (hard constraint applied to implementation).
• Trigger/input: build and runtime of the app.
• Observable result: every library, font, service, and dependency used is free of charge; no paid API, paid font licence, paid hosting plan, or paid third-party service is present.
• Access state: not applicable.
• Failure/recovery: if a candidate dependency requires payment, it is replaced with a free alternative rather than adopted.
• Continuation: the app remains free to operate and free to use.

FR-4 — Anonymous entry to the app As a Believer, I should reach Praise's content without creating an account or signing in, so that nothing stands between me and the reading.

• Provenance: required_inference (indispensable prerequisite for the accepted reading journeys; no accepted requirement establishes durable actor-specific state that would justify application-owned identity).
• Trigger/input: the Believer opens the app.
• Observable result: Landing, Devotionals, and Bible all render their content without any sign-up, sign-in, or verification step.
• Access state: anonymous on all three pages.
• Failure/recovery: if content fails to load, an inline retry is offered in place; no access step is introduced as a remedy.
• Continuation: the Believer reads.

FR-5 — Daily devotional content As a Believer, I should read a devotional for the day, so that I have a recurring point of reflection.

• Provenance: required_inference (the accepted "Christian app" commitment made usable as a recurring devotional reading).
• Trigger/input: the Believer selects the day's reading from Landing, or selects a devotional row from the Devotionals index.
• Observable result: the devotional renders as a single centred artefact with its heading in Cormorant Garamond Light, its body in Archivo at a 62ch measure, and a metadata block beneath it.
• Access state: anonymous.
• Failure/recovery: if the devotional fails to load, an inline retry appears inside the reading view while the index stays usable.
• Continuation: the Believer returns to the index or moves to the next devotional.

FR-6 — Devotional index as a ruled catalogue As a Believer, I should see devotionals listed as a ruled catalogue, so that I can find and choose one quickly.

• Provenance: required_inference (indispensable selection step for FR-5).
• Trigger/input: the Believer opens Devotionals.
• Observable result: rows read date | season chip | title | reading time, separated by 1px dividers, with no card containers; hovering a row fades a spot-red rule in from the left in 180ms.
• Access state: anonymous.
• Failure/recovery: if the list fails to load, a plain inline line with a retry control replaces the rows.
• Continuation: the Believer selects a row and reads.

FR-7 — Bible reading content As a Believer, I should read Scripture in the app, so that Bible reading is part of the same free experience.

• Provenance: required_inference (the accepted "Christian app" commitment made usable as Bible reading).
• Trigger/input: the Believer opens Bible and selects a book and chapter from the index.
• Observable result: the selected chapter renders in a 62ch reading measure with verse numbers in Cormorant old-style figures, and a 2px spot-red progress rule pinned to the top of the viewport tracks scroll with the current verse reference in Archivo 11px uppercase at its right end.
• Access state: anonymous.
• Failure/recovery: if the passage fails to load, a plain inline line with a retry control appears in the reading measure; the index remains usable so another passage can be chosen.
• Continuation: the Believer moves to the next or previous chapter, or returns to Landing or Devotionals.

FR-8 — Bible book and chapter index As a Believer, I should navigate Scripture by book and chapter, so that I can reach a specific passage.

• Provenance: required_inference (indispensable selection step for FR-7).
• Trigger/input: the Believer opens Bible.
• Observable result: a narrow left index lists books and chapters as a numbered list with 1px dividers and no card containers.
• Access state: anonymous.
• Failure/recovery: if the index fails to load, a plain inline line with a retry control replaces it.
• Continuation: the Believer selects a chapter and reads.

FR-9 — Liturgical season signalling As a Believer, I should see which liturgical season the day falls in, so that the reading is placed in its season.

• Provenance: required_inference (indispensable metadata for the accepted devotional and Scripture reading experience).
• Trigger/input: the Believer views Landing, Devotionals, or Bible.
• Observable result: a season code strip shows five small squares in the fixed liturgical palette — Advent gold #C9A227, Lent violet #5B4B8A, Easter white #F2F0EA, Pentecost red #E8503A, Ordinary green #3F6B4F — with only the current season outlined in spot red; the season name also appears in the metadata block.
• Access state: anonymous.
• Failure/recovery: if the season cannot be determined, the strip renders without an outlined square and the metadata block omits the season rather than showing a wrong one.
• Continuation: the Believer continues reading.

FR-10 — Navigation between the three pages As a Believer, I should move between Landing, Devotionals, and Bible, so that I can reach any part of the app from anywhere.

• Provenance: required_inference (indispensable continuity across the accepted pages).
• Trigger/input: the Believer selects a nav label in the fixed left rail, or the Menu label in the top bar at 375px.
• Observable result: the selected page renders; the active nav item is marked with a 2px spot-red rule.
• Access state: anonymous.
• Failure/recovery: if a destination fails to load, the rail remains available so another destination can be chosen.
• Continuation: the Believer continues on the selected page.

FR-11 — Readable text and controls at every viewport As a Believer, I should be able to read every headline, label, number, and control at 375px, 768px, and 1280px, so that nothing is cut off or covered.

• Provenance: explicit (creative direction constraint).
• Trigger/input: the Believer views any page at any supported viewport.
• Observable result: headlines, the wordmark, labels, numbers, and controls stay entirely inside the viewport and their container, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit; no other element covers any part of them.
• Access state: anonymous.
• Failure/recovery: if a string would overflow, it wraps or scales rather than clipping.
• Continuation: the Believer reads and acts normally.

FR-12 — Reduced-motion support As a Believer who prefers reduced motion, I should get a usable static arrangement, so that the app does not animate against my preference.

• Provenance: explicit (creative direction constraint).
• Trigger/input: the operating system or browser reports prefers-reduced-motion: reduce.
• Observable result: all fades become instant cuts; the 2px spot-red reading-progress rule still tracks scroll; any horizontally scrollable content wraps into rows or remains scrollable so every item can be brought fully into view.
• Access state: anonymous.
• Failure/recovery: not applicable.
• Continuation: the Believer reads normally.

4. User Personas

Believer

Product context. The Believer is a Christian individual who uses the free Praise app to engage with faith content. Praise is not a tool they administer and not a community they post into; it is a quiet place they return to. They arrive on a near-black page with a single verse set large, and they read.

Primary goal. To stay connected to what matters spiritually through recurring, free access to devotional and Scripture content.

Distinct accepted responsibilities.

• Reading the day's devotional, either from the day's reading on Landing or by choosing a row from the Devotionals index.
• Reading Scripture by selecting a book and chapter from the Bible index and reading the passage in the wide measure.
• Noticing the liturgical season the day falls in, via the season code strip and the metadata block.
• Moving between Landing, Devotionals, and Bible as their attention shifts.

Relevant inputs and decisions. The Believer decides what to read now — today's devotional, an earlier devotional from the ruled list, or a passage of Scripture — and where to go next once a reading is finished. They supply no account details, no payment details, and no personal data; the app asks nothing of them before it gives them something to read.

Interactions with other accepted participants. There are none. The Believer is the only accepted human actor in Praise. The app itself is the counterparty: it presents the verse, the devotional, the passage, the season, and the metadata. No other persona reads, responds, approves, or is notified.

Observable success. The Believer opens Praise and reaches a devotional or a passage of Scripture without encountering a sign-up wall, a payment prompt, or a subscription offer; the reading renders as a single well-set artefact with its date, season, and passage reference beneath it; and the Believer can move to another reading and continue.

What makes this role's work different. The Believer is a reader, not an operator. There is no data to enter, no state to configure, no other party to coordinate with, and no output to produce. Their entire interaction is selection and reading, and the product's success is measured by whether that reading is uninterrupted, unhurried, and free.

5. Core User Flows

Flow 1 — The Believer opens Praise and reads the day's devotional

1. The Believer opens Praise. The Landing page loads anonymously; no account, sign-in, or verification step appears.
2. Landing presents a full-viewport near-black field (#0B0B0C) with the wordmark PRAISE set vertically in the 56px left rail, and a single centred artefact: the day's verse in Cormorant Garamond Light, ragged-right, occupying no more than eight of twelve columns, with a 1px hairline rule above it and a 2px spot-red rule flush left of the verse.
3. Beneath the verse, the Believer reads the metadata block in Archivo 11px uppercase: DATE · SEASON · PASSAGE. The season code strip shows five small squares with only the current season outlined in spot red.
4. The Believer selects the hairline-outlined square button "Begin today's reading", sitting directly beneath the metadata block.
5. The Devotionals page opens on the day's devotional, rendered as a single centred artefact: heading in Cormorant Garamond Light, body in Archivo at a 62ch measure, metadata block beneath.
6. The Believer reads. The 2px spot-red progress rule pinned flush to the top of the reading view scales horizontally with scroll and never thickens; the current reference sits in Archivo 11px uppercase at its right end.
7. Observable result: the devotional is fully read, with its date, season, and reference visible.
8. Continuation: the Believer returns to the ruled index or moves to the next devotional.

Failure and recovery. If the day's verse fails to load on Landing, a plain inline line beneath the metadata states the reading could not be loaded and offers a retry; the rail remains usable so the Believer can go straight to Devotionals or Bible. If the devotional itself fails to load, an inline retry appears inside the reading view while the index stays usable.

Flow 2 — The Believer browses the devotional catalogue and chooses an earlier reading

1. The Believer opens Devotionals from the left rail (or from the Menu label in the top bar at 375px).
2. The page presents a ruled catalogue list: each row reads date | season chip | title | reading time, separated by 1px dividers, with no card containers.
3. The Believer moves down the list. Hovering a row fades a spot-red rule in from the left in 180ms; there is no hover-lift and no card.
4. The Believer selects a row.
5. The reading view opens with that devotional as a single centred artefact, hairline rule above and metadata block below.
6. The Believer reads, with the progress rule tracking scroll.
7. Observable result: the chosen devotional is read in full.
8. Continuation: the Believer moves to the next or previous devotional in the list, or returns to the index.

Failure and recovery. If the list fails to load, a plain inline line with a retry control replaces the rows. If a single devotional fails to open, an inline retry appears inside the reading view and the index remains usable so another can be chosen.

Flow 3 — The Believer reads Scripture

1. The Believer opens Bible from the left rail.
2. The page presents a two-column desktop layout: a narrow left index of books and chapters set as a numbered list with 1px dividers, and a wide right reading measure of 62ch.
3. The Believer selects a book and chapter from the index.
4. The selected chapter renders in the reading measure: Archivo Regular 17–19px, 1.7 line-height, verse numbers in Cormorant old-style figures.
5. The Believer reads. The 2px spot-red progress rule pinned flush to the top of the viewport scales with scroll, with the current verse reference in Archivo 11px uppercase at its right end.
6. Observable result: the passage is read in full, with its reference visible.
7. Continuation: the Believer moves to the next or previous chapter, or returns to Landing or Devotionals.

Failure and recovery. If the passage fails to load, a plain inline line with a retry control appears in the reading measure; the index remains usable so a different book or chapter can be selected immediately. If a chapter has no content available, the reading measure states plainly that this passage is not available.

Flow 4 — The Believer moves between the three pages

1. From any page, the Believer selects a nav label in the fixed left rail: Landing, Devotionals, or Bible, each a stacked uppercase label separated by hairlines.
2. The selected page renders, and the active nav item is marked with a 2px spot-red rule.
3. At 375px, the rail has collapsed to a top bar with the wordmark left and a single Menu label right; the Believer selects Menu and then the destination.
4. Observable result: the Believer is on the chosen page with its content rendered.
5. Continuation: the Believer reads, or moves again.

Failure and recovery. If a destination fails to load, the rail (or the Menu label) remains available so another destination can be chosen.

Flow 5 — The Believer reads with reduced motion enabled

1. The Believer's system reports prefers-reduced-motion: reduce.
2. The Believer opens Praise and moves between pages.
3. All fades become instant cuts; panel-to-panel transitions and the verse-plate crossfade no longer animate.
4. The 2px spot-red reading-progress rule still tracks scroll.
5. Any horizontally scrollable content wraps into rows or remains scrollable so every item can be brought fully into view.
6. Observable result: the Believer reads the same content with no motion against their preference.
7. Continuation: the Believer reads normally.

6. Visuals, Colors and Theme

Muse: Peter Saville. Headline direction: Austere reverence — one exact spot colour carrying a whole faith identity.

The surface reads as a well-set prayer book or a Factory Records sleeve: a single artefact, precise metadata, and a lot of silence around it. It is deliberately not the generic "clean modern Christian app" with a soft blue gradient and a friendly rounded sans.

Colour tokens

Dark mode (primary and only mode):

Liturgical season code (fixed five-colour alphabet):

Proportion: ~85% black ground, ~12% off-white type, ~3% colour. Colour is a signal, never decoration. No blue anywhere in the system — no #0057FF, #2563EB, #4F46E5 or neighbours, including links and focus rings; focus uses the spot red.

Typography

• Headings: Cormorant Garamond Light (300), very large sizes, tight leading (0.95), slight negative tracking (-0.01em). Verse numbers and chapter numerals use Cormorant's old-style figures.
• Body and UI: Archivo. Metadata in Archivo SemiBold 11px uppercase with 0.18em letterspacing (the catalogue-number voice); body reading in Archivo Regular 17–19px with 1.7 line-height and a 62ch measure.
• No display sans, rounded sans, or system font. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, Montserrat, and system-ui are excluded for headings and body.
• Type scale (1.5 modular): 96 / 64 / 40 / 27 / 18 / 17 / 13 / 11.
• Hero display: clamp(56px, 11vw, 128px). Section headings: clamp(32px, 5vw, 56px). Devotional body: 17px mobile → 19px desktop. Metadata: 11px fixed.

Shape language

Hard edges only — zero border-radius on cards, images, and buttons. Structure comes from a 1px hairline rule (#2A2A2C) and a strict 12-column grid, with one 2px spot-red rule marking the active season. Square proportions dominate: a square verse plate, a square season chip, a square reading-progress bar. Nothing is soft; nothing is pill-shaped.

Layout

Gallery-like. A fixed left rail (56px wide) holds only a vertical wordmark and three nav items as stacked uppercase labels with hairline separators. Content sits in a centred 8-of-12 column with wide outer margins. Landing is a sequence of full-height panels, each a single centred artefact with its metadata block beneath it — never a grid of feature cards. The Devotionals index is a ruled list (date | season chip | title | reading time) with 1px dividers and no card containers, like a catalogue of works. The Bible reading view is a two-column desktop layout: a narrow left index of books/chapters as a numbered list, and a wide right reading measure of 62ch with a thin red progress rule pinned to the top of the viewport.

At 375px: the rail collapses to a top bar with the wordmark left and a single Menu label right; the ruled list keeps its rules but stacks date above title; the reading measure goes full width with 20px gutters.

Imagery

Almost no photography. The visual content is the typography itself plus two coded artefacts: (1) a square verse plate — a solid #141416 square with the day's verse in Cormorant Garamond Light, centred, with the reference in Archivo uppercase metadata beneath it; (2) a season code strip — five small squares in the fixed liturgical palette with the current one outlined in spot red. Where imagery is needed on landing panels, use one high-contrast monochrome photograph per panel (stone arches, water, wheat, an open book on a plain ground), desaturated to near-duotone and cropped hard to the grid — never a stock photo of a smiling congregation. No illustration; no icons beyond a 1px-stroke set.

Avoid

Any blue or indigo; rounded corners, pill buttons, soft drop shadows, hover-lift cards; gradient-blob heroes, glassmorphism, frosted panels, translucent overlays; the excluded sans families; stock photography of smiling congregations or sunsets with lens flare; feature-card grids, pricing tables, subscription prompts, or any paid-tier language; playful micro-interactions, confetti, streak counters, gamified badges, bouncy easing; and the centred headline + subtext + filled CTA + gradient background hero composition.

7. Signature Design Concept

The gallery wall label for a sacred object.

The first screen is a full-viewport near-black field (#0B0B0C) holding a single centred artefact: the day's verse set in Cormorant Garamond Light at clamp(56px, 11vw, 128px), ragged-right, occupying no more than eight of twelve columns. A 1px hairline rule sits above it. A 2px spot-red rule sits flush left of the verse, 96px tall, like a spine. Beneath the verse, a metadata block in Archivo 11px uppercase reads DATE · SEASON · PASSAGE. The wordmark PRAISE is set vertically in the 56px left rail at 0.3em letterspacing. The single CTA — "Begin today's reading" — is a hairline-outlined square button sitting directly beneath the metadata, not centred and not filled.

There is no gradient, no illustration, no floating UI, and no blue. The composition is a gallery wall label for a sacred object, and that is the point: the app presents one thing at a time, precisely labelled, with silence around it.

The concept recomposes only accepted content and controls — the day's verse, its date, season, and passage reference, the season code strip, the wordmark, the rail navigation, and the single entry button. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the day's verse, set as a single centred artefact on a near-black field, with the 2px spot-red spine rule flush left of it and the metadata block beneath.
• Input → transformation → outcome thesis: the Believer arrives on the near-black field and the verse is already present as a composed object; scrolling moves the page through full-height panels, each fading in at 400ms opacity with no translate, so the outcome is a sequence of single artefacts read one at a time rather than a page of competing elements.
• Motion vocabulary: precise fades only. Panel-to-panel transitions are 400ms opacity fades with no translate. The verse plate swaps content with a 200ms crossfade. Season chip colour changes are instant. The only continuous motion is the 2px spot-red reading-progress rule, which scales horizontally with scroll and never thickens. Hovering a devotional row fades in its spot-red rule from left to right in 180ms. No parallax, no bounces, no particles.
• Composed first frame: near-black field; PRAISE vertical in the left rail at 0.3em letterspacing; the day's verse large, ragged-right, in the upper-centre eight columns; 1px hairline above it; 2px spot-red spine rule flush left; metadata block DATE · SEASON · PASSAGE in Archivo 11px uppercase beneath; season code strip with the current season outlined in spot red; the hairline-outlined square button "Begin today's reading" directly beneath the metadata, left-aligned to the verse block, not centred and not filled.
• Reduced-motion state: under prefers-reduced-motion: reduce, all fades become instant cuts — panel transitions and the verse-plate crossfade no longer animate — while the 2px spot-red reading-progress rule still tracks scroll. The first frame is unchanged and fully readable.

9. Non-Functional Requirements

NFR-1 — Free of charge, end to end. Provenance: explicit. Every tool, service, library, font, and dependency used to build and run Praise must be free of charge. No paid API, paid font licence, paid hosting plan, paid analytics service, or paid third-party component may be used. Rationale: the "only free" constraint is a hard, product-wide requirement; a paid component would contradict the product's stated nature.

NFR-2 — No paid-tier language in the interface. Provenance: explicit. No pricing table, subscription prompt, upgrade control, trial language, or upsell copy may appear anywhere in the product. Rationale: the interface must never imply that anything is purchasable.

NFR-3 — Anonymous access on all pages. Provenance: required_inference. Landing, Devotionals, and Bible are all reachable without an account, sign-in, or verification step. No account-management capability is introduced. Rationale: no accepted requirement establishes durable, privately owned, actor-specific state or a commitment bound to a particular participant, so application-owned identity is not justified.

NFR-4 — Readable text and controls at every viewport. Provenance: explicit (creative direction). Headlines, the wordmark, 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. Where the direction asks for a cropped or bled gesture, the gesture is carried by imagery or decoration, never by readable text or a control. Rationale: legibility is a hard constraint that outranks decorative cropping.

NFR-5 — Reduced-motion support. Provenance: explicit (creative direction). Under prefers-reduced-motion: reduce, all fades become instant cuts and the reading-progress rule still tracks scroll. Any horizontally scrollable content wraps into rows or remains scrollable so every item can be brought fully into view. Rationale: the app must remain usable for Believers who prefer reduced motion.

NFR-6 — Contrast. Provenance: explicit (creative direction). Body text #F2F0EA on the #0B0B0C ground holds approximately 15:1 contrast. Focus indication uses the spot red #E8503A, never blue. Rationale: the palette is fixed by the direction and must remain legible and non-blue.

NFR-7 — No blue in the system. Provenance: explicit (creative direction). No blue or indigo appears anywhere, including links and focus rings. Rationale: the direction forbids it, and the generic indigo/blue-on-white SaaS template is explicitly excluded for this project.

NFR-8 — Square geometry. Provenance: explicit (creative direction). Zero border-radius on cards, images, and buttons; structure comes from 1px hairlines and a 12-column grid. Rationale: the shape language is part of the product's identity.

NFR-9 — Responsive collapse. Provenance: explicit (creative direction). At 375px the left rail collapses to a top bar with the wordmark left and a single Menu label right; the ruled list stacks date above title; the reading measure goes full width with 20px gutters. Rationale: the layout must remain usable on small viewports.

NFR-10 — Content licensing. Provenance: required_inference. Devotional and Scripture content presented by the app must come from free, openly licensed sources consistent with the free-only constraint. Rationale: paid content licensing would contradict the product's free status.

10. Tech Stack

The user specified no technology. The following are coherent defaults chosen to satisfy the free-only constraint and the accepted behavior, and are labeled as defaults.

• Frontend: React with a modern build tool. [Default — not specified by user] Chosen for the three-page reading experience, the ruled-list and reading-measure layouts, and the scroll-linked progress rule.
• Styling: plain CSS with custom properties for the colour tokens, type scale, and hairline rules. [Default — not specified by user] No CSS framework is required, and avoiding one keeps the dependency set small and free.
• Fonts: Cormorant Garamond and Archivo, both self-hosted from their free, openly licensed distributions. [Default — not specified by user] Both families are free of charge; no paid font licence is used.
• Backend: Python with FastAPI, serving the devotional and Bible content endpoints. [Default — not specified by user] Free and open source.
• Storage: a lightweight free database for devotional and Scripture content. [Default — not specified by user] Content is read-only from the Believer's perspective; no user data is stored because there are no accounts.
• Containerization: Docker with docker-compose for local and single-host deployment. [Default — not specified by user] Free and open source.
• Kubernetes: not required. The product is a three-page reading app with no independent queue worker, no separate service class, and no scaling requirement that justifies it. [Default — not specified by user]

No paid service, paid API, paid font licence, or paid hosting plan appears in this stack.

11. Assumptions and Constraints

Assumptions

• A1 (narrow). The Believer reads on a modern browser at 375px, 768px, or 1280px. No native mobile app, desktop app, or offline mode is assumed.
• A2 (narrow). Devotional and Scripture content is available from free, openly licensed sources at implementation time. No specific translation, devotional author, or publishing schedule was supplied by the user.
• A3 (narrow). The liturgical season for a given date can be determined from a fixed calendar rule. No external liturgical calendar service is assumed.
• A4 (narrow). Dark mode is the only mode. The creative direction specifies a dark-mode palette and no light-mode palette was supplied.

Constraints

• C1 (explicit, hard). Praise is a Christian app.
• C2 (explicit, hard). The app must be free to use — only free, no paid tier. This applies to the product experience and to every tool, service, library, font, and dependency used to build and run it.
• C3 (explicit, hard). The app must be built.
• C4 (explicit, hard). The palette, fonts, surfaces, tone, and layout specified in the creative direction are preserved. The catalogue fills unspecified details only.
• C5 (explicit, hard). No blue or indigo anywhere in the system, including links and focus rings.
• C6 (explicit, hard). Readable text and controls stay whole at 375px, 768px, and 1280px; no element covers any part of them.
• C7 (explicit, hard). Under prefers-reduced-motion, provide a usable static arrangement.
• C8 (explicit, hard). The generic indigo/blue-on-white SaaS template is forbidden for this project.
• C9 (scope). The current product consists of exactly three pages — Landing, Devotionals, and Bible — all anonymously reachable. No accounts, payments, subscriptions, social features, notifications, streaks, or content authoring tools are part of the current product.

12. Glossary

• Believer — the single accepted active human persona of Praise: a Christian individual who uses the free app to engage with devotional and Scripture content.
• Devotional — a dated piece of Christian reflection content, presented as a single centred reading artefact with a heading, body, and metadata block.
• Verse plate — the signature presentation of a passage: a solid #141416 square with the verse set in Cormorant Garamond Light, centred, with the reference in Archivo uppercase metadata beneath it.
• Season code strip — five small squares in the fixed liturgical palette (Advent gold, Lent violet, Easter white, Pentecost red, Ordinary green) with only the current season outlined in spot red.
• Spot red — #E8503A, the single liturgical spot colour used only for the current season marker, the active nav rule, one hairline, the reading-progress rule, and focus indication. Never a button fill.
• Reading-progress rule — the 2px spot-red rule pinned flush to the top of the reading view, scaling horizontally with scroll and never thickening, with the current reference in Archivo 11px uppercase at its right end.
• Ruled catalogue list — the Devotionals and Bible index presentation: 1px-divided rows with no card containers and no hover-lift.
• Hairline — a 1px structural rule in #2A2A2C used in place of borders, shadows, and card containers.
• Free-only constraint — the hard requirement that Praise be free to use with no paid offering, and that every tool, service, library, font, and dependency used to build and run it be free of charge.