System Requirements Document for meteor-sekolah

1. Introduction

This document specifies the system requirements for meteor-sekolah, the official website of SMAS Pangudi Luhur Santo Yohanes Ketapang — a Catholic senior secondary school (Sekolah Menengah Atas) in Ketapang, West Kalimantan, operated by the Pangudi Luhur foundation.

The product intent is to give the school a truthful, warm, and credible public presence on the web: a place where prospective students and their parents can learn who the school is, what it offers, and how to begin enrollment; where current students can find school news, announcements, and activities; and where teachers and school staff can publish and maintain that information themselves behind a protected login.

The audience is threefold:

• Prospective students and parents — many are first-time secondary-school decision makers reading on mid-range Android phones over mobile data. They need to evaluate the school's identity, programs, and admission path, and to submit an enrollment inquiry.
• Current students — enrolled students who need to stay informed about school news, announcements, and activities.
• Teachers and school staff — the people responsible for keeping the school's published information accurate and current.

The site must feel institutional enough to earn a parent's trust and human enough to speak to teenagers, and it must remain fast and readable on modest devices and connections.

2. System Overview

meteor-sekolah is a custom web application with a public-facing school website and a protected content-management surface for authorized school staff.

Current delivery. The system delivers seven first-party pages: a public Landing entry, a public About page, a public Programs page, a public News page, a public Admissions page, an anonymous Login page for returning authorized staff, and a protected Content Management page for publishing and maintaining school content. Public pages are anonymously reachable. Content Management is restricted to authorized teachers and school staff who have been invited or provisioned and who complete returning verification.

Actors. Three accepted human personas use the system: Prospective Student / Parent, Current Student, and Teacher / School Staff. The system itself (backend, storage, and delivery infrastructure) is a non-persona actor that persists published content and serves it to later visitors.

Accepted behavior. Visitors read the school's profile, programs, news, and admission information. Prospective families submit an enrollment inquiry through the Admissions page. Authorized staff sign in and publish, update, and maintain school information, news, announcements, and activities, which then persist and become visible to students and families.

Narrow exclusions. This document does not introduce student accounts, gradebooks, learning management, payment processing, or any capability not accepted in the authoritative requirement thread. The only protected surface is Content Management, and the only identity in the system belongs to teachers and school staff.

2a. Product Interpretation and Delivery Boundary

The school's public information is owned and served by this application. Anyone — a parent comparing schools, a student checking an announcement, a visitor who simply wants the address — can read the public pages without an account. No login is required to browse the Landing, About, Programs, News, or Admissions pages.

The one place identity matters is publishing. Because the school's published information must remain accurate and must be authored by the school itself, the Content Management surface is protected: teachers and staff receive an invitation or provisioning from the school before their first access, and they complete returning verification each time they come back to maintain content. That verification happens on the anonymous Login page, which is reachable without being signed in; the protected Content Management surface is not.

Everything published through Content Management persists and is served to later visitors — students and families returning to the site see the same maintained information.

This document covers the current delivery only. No future-horizon capabilities are specified here.

2c. Page Content and Component Coverage

Landing

• Information and state. The school's identity and one-line promise; an arch-framed hero photograph of the school; a ruled statistics band with three label/value pairs (Tahun Berdiri, Jurusan, Siswa); a preview of the school's programs; a strip of recent news with date stamps; an admissions block; a footer carrying the foundation's name and address.
• Primary actions. Navigate to About, Programs, News, or Admissions; follow the terracotta "Informasi Pendaftaran" call to action into Admissions; open the mobile menu.
• Supporting actions. Follow the "Kenali sekolah kami →" text link into About; open an individual news item from the news strip.
• Domain entities. School profile summary, statistics (founding year, number of programs, number of students), program previews, news items with dates, admission call to action, foundation contact details.
• Component responsibilities. Slim top bar with wordmark and five navigation links; full-screen oat mobile menu panel with stacked Fraunces links; arch-framed hero with overlapping wordmark and oat scrim; ruled statistics band; three tall rounded program cards; vertical news list with terracotta date column; admissions block with two-column form/step layout; sage footer.
• States. Loading: hero photograph and news strip resolve progressively; text content renders immediately. Empty: if no news has been published, the news strip shows a quiet placeholder rather than an empty band. Success: all sections render with current published content. Error: if the news strip fails to load, the rest of the page remains usable and the strip shows a retry affordance. Recovery: retry reloads only the failed section.

Login

• Information and state. A returning-verification form for authorized teachers and school staff; a short statement that access is limited to invited school staff.
• Primary actions. Submit credentials to sign in.
• Supporting actions. Return to the public site.
• Domain entities. Staff identity, session.
• Component responsibilities. Credential form; submit control; inline validation and error messaging; link back to the public site.
• States. Loading: submit control shows a pending state during verification. Empty: the form is presented with empty fields on first arrival. Success: the staff member is taken to Content Management. Error: invalid credentials show an inline message without clearing the entered identifier; a failed or expired session returns the staff member here with an explanatory message. Recovery: the staff member can correct the entry and resubmit.

About

• Information and state. The school's profile and identity in detail: its history and foundation, its Catholic character, its mission of forming whole persons, and its location in Ketapang.
• Primary actions. Read the school profile; navigate to Programs, News, or Admissions.
• Supporting actions. Reach the school's contact details.
• Domain entities. School profile, foundation identity, mission and character, location.
• Component responsibilities. Prose column at a comfortable reading measure; arch-framed portrait of the head of school; quiet material imagery; navigation and footer.
• States. Loading: text renders immediately; imagery resolves progressively. Empty: not applicable — the profile is maintained content. Success: the full profile renders. Error: if imagery fails, the prose remains fully readable. Recovery: imagery retries on reload.

Programs

• Information and state. The school's academic programs and offerings, presented for evaluation by prospective families.
• Primary actions. Read each program's description; navigate to Admissions to inquire.
• Supporting actions. Move between programs; return to About or News.
• Domain entities. Program name, program description, program offerings.
• Component responsibilities. Asymmetric two-column split with a sticky program name on the left and description on the right; navigation and footer.
• States. Loading: program names render first, descriptions follow. Empty: if no programs are published, the page states that program information is being updated. Success: all published programs render. Error: a failed program load shows a retry affordance without breaking the page. Recovery: retry reloads the program list.

News

• Information and state. School news, announcements, and activities, each with a date.
• Primary actions. Read a news item; navigate to Admissions or other public pages.
• Supporting actions. Scan the list by date; open an individual item.
• Domain entities. News item title, body, publication date, category or activity label.
• Component responsibilities. Two-up card grid on desktop, one-up on mobile; terracotta date numerals in a fixed-width left column; navigation and footer.
• States. Loading: the list renders with placeholder rows. Empty: when nothing has been published, the page states that there is no news yet. Success: published items render newest first. Error: a failed load shows a retry affordance. Recovery: retry reloads the list.

Admissions

• Information and state. Admission information for prospective students and parents, and an enrollment-inquiry form.
• Primary actions. Submit an enrollment inquiry with the prospective student's and parent's contact details.
• Supporting actions. Read the admission steps; reach the school's contact details.
• Domain entities. Inquiry submission (prospective student name, parent/guardian name, contact details, message), admission steps, school contact details.
• Component responsibilities. Two-column form/step layout; inquiry form with validation; confirmation state; navigation and footer.
• States. Loading: the form is usable immediately; submission shows a pending state. Empty: the form is presented with empty fields. Success: a confirmation message acknowledges the inquiry and states what happens next. Error: validation errors appear inline against the offending field; a failed submission preserves the entered values and offers retry. Recovery: the submitter can correct and resubmit without re-entering everything.

Content Management

• Information and state. The school's published content in a dense, utilitarian working view: school information, news, announcements, and activities, with their current publication status.
• Primary actions. Create, edit, and publish school information, news, announcements, and activities.
• Supporting actions. Review existing entries; update or unpublish an entry; sign out.
• Domain entities. Content entry (title, body, date, category), publication status, authoring staff member.
• Component responsibilities. Sage top bar; table rows with hairline rules; terracotta "Publish" action; entry editor; sign-out control.
• States. Loading: the table renders with placeholder rows while entries load. Empty: when no content exists yet, the surface invites the staff member to create the first entry. Success: a published entry appears in the table with its status and becomes visible on the corresponding public page. Error: a failed save preserves the draft and shows an inline error with retry; an expired session returns the staff member to Login with an explanatory message. Recovery: the staff member can retry the save or sign in again and continue.

3. Functional Requirements

FR-1 — Public school website. As a visitor, I should be able to reach the school's public website and understand what SMAS Pangudi Luhur Santo Yohanes Ketapang is, who it serves, and what I can find there. (provenance: explicit)

• Trigger: the visitor opens the site.
• Observable result: the Landing page presents the school's identity, a one-line promise, key statistics, a program preview, recent news, and an admissions call to action.
• Access state: anonymous; no account required.
• Failure/recovery: if a section fails to load, the remaining sections stay usable and the failed section offers retry.
• Continuation: the visitor navigates to About, Programs, News, or Admissions.

FR-2 — School profile. As a prospective student or parent, I should be able to read the school's profile and identity in detail so I can judge whether it is the right school. (provenance: required_inference)

• Trigger: the visitor opens About.
• Observable result: the school's history, foundation, Catholic character, mission, and location are presented as readable prose.
• Access state: anonymous.
• Failure/recovery: if imagery fails, the prose remains fully readable.
• Continuation: the visitor moves to Programs or Admissions.

FR-3 — Program information. As a prospective student or parent, I should be able to review the school's academic programs and offerings so I can evaluate them. (provenance: required_inference)

• Trigger: the visitor opens Programs.
• Observable result: each published program is presented with its name and description.
• Access state: anonymous.
• Failure/recovery: a failed program load shows a retry affordance without breaking the page.
• Continuation: the visitor proceeds to Admissions to inquire.

FR-4 — School news and announcements. As a current student or family member, I should be able to read school news, announcements, and activities so I stay informed. (provenance: required_inference)

• Trigger: the visitor opens News.
• Observable result: published items appear with their dates, newest first.
• Access state: anonymous.
• Failure/recovery: a failed load shows a retry affordance; an empty list states that there is no news yet.
• Continuation: the visitor opens an individual item or moves to another public page.

FR-5 — Enrollment inquiry submission. As a prospective student or parent, I should be able to submit an enrollment inquiry with our contact details so the school can follow up. (provenance: required_inference)

• Trigger: the visitor completes and submits the inquiry form on Admissions.
• Observable result: the submission is accepted and a confirmation states what happens next.
• Access state: anonymous.
• Failure/recovery: validation errors appear inline; a failed submission preserves entered values and offers retry.
• Continuation: the submitter waits for the school's follow-up and may return to the public pages.

FR-6 — Staff invitation or provisioning. As a teacher or school staff member, I should receive an invitation or provisioning from the school before my first access, so that only authorized staff can maintain school content. (provenance: required_inference)

• Trigger: the school authorizes a staff member.
• Observable result: the staff member holds credentials that permit first access.
• Access state: pre-access; no self-registration.
• Failure/recovery: if credentials are not received or do not work, the staff member contacts the school.
• Continuation: the staff member proceeds to returning verification.

FR-7 — Returning verification. As an authorized teacher or school staff member, I should complete returning verification before maintaining school content, so that published content stays under the school's control. (provenance: required_inference)

• Trigger: the staff member opens Login and submits credentials.
• Observable result: on success the staff member reaches Content Management; on failure an inline message explains the problem.
• Access state: anonymous entry to Login; protected state becomes available only after verification.
• Failure/recovery: invalid credentials show an inline message without clearing the entered identifier; an expired session returns the staff member to Login with an explanation.
• Continuation: the staff member maintains content, or corrects the entry and resubmits.

FR-8 — Content publishing and maintenance. As a teacher or school staff member, I should be able to publish and maintain school information, news, announcements, and activities so that accurate, up-to-date information is available on the site. (provenance: required_inference)

• Trigger: the staff member creates, edits, or publishes an entry in Content Management.
• Observable result: the entry appears in the working table with its status and becomes visible on the corresponding public page.
• Access state: restricted to verified teachers and school staff.
• Failure/recovery: a failed save preserves the draft and shows an inline error with retry; an expired session returns the staff member to Login.
• Continuation: the staff member continues maintaining content or signs out.

FR-9 — Persistence of published content. As a current student or family member, I should see the school's published content persist so that information remains available when I return later. (provenance: required_inference)

• Trigger: a visitor opens a public page after content has been published.
• Observable result: the same published content is served to the visitor.
• Access state: anonymous.
• Failure/recovery: a failed content load shows a retry affordance on the affected section.
• Continuation: the visitor reads the content and navigates onward.

4. User Personas

Prospective Student / Parent (Calon Siswa & Orang Tua)

Product context. This persona is evaluating SMAS Pangudi Luhur Santo Yohanes Ketapang, often for the first time and often on a mid-range Android phone over mobile data. Many are first-time secondary-school decision makers, so they are comparing the school against alternatives and looking for signals of credibility: who the school is, what it teaches, and how one enrolls.

Primary goal. To reach an informed decision about the school and to submit an enrollment inquiry or registration.

Distinct responsibilities. This persona reads the school's profile on About, evaluates the academic offerings on Programs, scans News for signs of an active school community, and completes the inquiry form on Admissions. Their work is evaluative and outward-facing: they consume information and produce a single commitment — an inquiry.

Inputs and decisions. They bring their own questions about curriculum, character formation, and location, and they decide whether to inquire. The decisive input is the school's published profile and program information; the decisive action is submitting the inquiry form with contact details.

Interactions with other participants. They never interact directly with staff through the site; their inquiry is the handoff. The content they read was authored by Teacher / School Staff, so the quality and currency of that content directly shapes their decision.

Observable success. They have read the school's profile and programs, and they have received a confirmation that their enrollment inquiry was submitted.

Current Student (Siswa)

Product context. This persona is already enrolled at the school and uses the site as a source of school information — schedules, announcements, and academic or extracurricular details — typically on a phone.

Primary goal. To stay informed and to access the school resources they need.

Distinct responsibilities. This persona reads News and announcements, checks the school's published information, and returns to the site when something new is announced. Their work is recurrent and informational rather than transactional.

Inputs and decisions. They bring a need for a specific piece of information and decide whether the site answers it. They do not submit inquiries or publish content.

Interactions with other participants. They consume content authored by Teacher / School Staff and share the public pages with Prospective Student / Parent, but they do not interact with either directly through the site.

Observable success. They find the announcement or school information they came for and can act on it.

Teacher / School Staff (Guru & Staf)

Product context. This persona is responsible for the school's public information. They are authorized by the school, receive an invitation or provisioning before first access, and work behind a login in a denser, more utilitarian interface than the public site.

Primary goal. To keep accurate, up-to-date school information available on the site.

Distinct responsibilities. This persona signs in through Login, then creates, edits, and publishes school information, news, announcements, and activities in Content Management. Their work is authorial and ongoing: they are the only persona who changes the state of the site.

Inputs and decisions. They bring the school's actual information and decide what to publish, when to update it, and when to unpublish it. The decisive action is publishing an entry.

Interactions with other participants. Their published content is what Prospective Student / Parent and Current Student read. The inquiry submitted by a prospective family is the downstream consequence of the content they maintain.

Observable success. A published entry appears on the corresponding public page and remains accurate over time.

5. Core User Flows

Flow 1 — A prospective family evaluates the school and inquires

1. A parent opens the site on a phone and lands on Landing. The hero presents the school's name and one-line promise, and the statistics band shows the founding year, number of programs, and number of students.
2. The parent follows "Kenali sekolah kami →" into About and reads the school's history, foundation, Catholic character, mission, and location.
3. The parent opens Programs and reviews each program's description in the asymmetric split view.
4. The parent opens News and scans recent announcements, noting the dates.
5. Convinced enough to act, the parent follows the terracotta "Informasi Pendaftaran" call to action into Admissions.
6. On Admissions, the parent reads the admission steps and completes the enrollment-inquiry form with the prospective student's name, their own name, contact details, and a message.
7. The parent submits. The form shows a pending state, then a confirmation acknowledging the inquiry and stating what happens next.
8. Failure path: if a required field is missing or malformed, an inline error appears against that field and the entered values are preserved; the parent corrects and resubmits. If the submission fails, the values are preserved and a retry is offered.
9. Continuation: the parent waits for the school's follow-up and may return to the public pages at any time.

Flow 2 — A current student checks school news

1. A student opens the site and lands on Landing.
2. The student opens News and scans the list, newest first, using the terracotta date column to find recent items.
3. The student opens an individual item and reads it.
4. Failure path: if the news list fails to load, a retry affordance appears and the rest of the site remains usable.
5. Continuation: the student returns to the list or moves to another public page.

Flow 3 — A teacher publishes a school announcement

1. The school has authorized the teacher and issued an invitation or provisioning, so the teacher holds credentials for first access.
2. The teacher opens Login and submits those credentials.
3. Failure path: if the credentials are invalid, an inline message explains the problem without clearing the entered identifier; the teacher corrects the entry and resubmits. If the session has expired, the teacher is returned to Login with an explanation.
4. On success, the teacher reaches Content Management, where the school's published content appears as table rows with hairline rules and current publication status.
5. The teacher creates a new announcement, entering its title, body, date, and category.
6. The teacher uses the terracotta "Publish" action.
7. Failure path: if the save fails, the draft is preserved and an inline error offers retry; the teacher retries without losing the entry.
8. On success, the entry appears in the table with its published status and becomes visible on the corresponding public page.
9. Continuation: the teacher continues maintaining content or signs out.

Flow 4 — A teacher updates existing school information

1. The teacher opens Login and completes returning verification.
2. In Content Management, the teacher locates the existing entry in the table.
3. The teacher edits the entry's content and republishes it.
4. Failure path: a failed save preserves the edit and offers retry; an expired session returns the teacher to Login.
5. On success, the updated content is served on the corresponding public page.
6. Continuation: a returning student or family member sees the updated information, satisfying the persistence of published content.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. The muse is Yves Béhar: soft forms wrapped around serious technology, warm materials, and wellbeing-first pacing — credible without being cold, warm without being childish.

Headline. Humane technology for a school that forms whole people.

Colour tokens (light mode).

Proportion: roughly 70% oat/paper, 20% sage, 8% ink, 2% terracotta. Terracotta is used sparingly: the active nav underline, the admission CTA, date stamps on news, and the numeral in statistics. No blue anywhere; no gradients; no glow.

Typography.

• Headings: Fraunces, optical size 72, weight 500–600 for section heads and weight 400 for oversized display lines, tracking -0.02em, sentence case (never all-caps).
• Body: Work Sans 400/500 at 17–18px with 1.65 line-height, tracking 0.
• Labels and metadata: Work Sans 500 uppercase at 12px with 0.12em tracking.
• Scale: 1.25 modular on mobile, 1.333 on desktop. Display 40px mobile → 88px desktop (clamp); H1 32→56; H2 26→40; H3 20→26; Body 17→18; Small 14; Label 12 uppercase.
• Line-height: 1.05 for display, 1.2 for heads, 1.65 for body. Max reading measure 68ch.

Shape language. Soft continuous forms: 20–28px radii on cards and image frames, 999px pill buttons and pill tags, no sharp corners anywhere except hairline rules. Sections are separated by generous vertical space (96–140px desktop, 56–72px mobile) rather than heavy dividers. A single recurring motif: a thin sage arch — a rounded-top rectangle, radius 50% on the top corners only — used as the frame for the hero photograph and the head-of-school portrait, reading as a doorway. Shadows are almost invisible: 0 1px 2px rgba(34,33,30,0.04) at most.

Layout. Mobile-first single column with a 12-column desktop grid and a 720px reading column for prose. Navigation is a slim top bar on oat with the wordmark left and five links right; on mobile it collapses to a full-width pill menu button that opens a full-screen oat panel with links stacked at 28px in Fraunces. Landing order: arch-framed hero photograph with the school name and one-line promise overlapping its lower-left corner; a horizontal band of three key numbers (tahun berdiri, jurusan, siswa) as ruled label/value pairs; a Programs preview as three tall rounded cards; a News strip as a vertical list with terracotta date stamps; an Admissions block with a two-column form/step layout; footer in sage with the foundation's name and address. Programs uses an asymmetric two-column split (sticky program name left, description right). News uses a 2-up card grid on desktop, 1-up on mobile. Content Management reuses the same grid in a denser, more utilitarian mode: table rows with hairline rules, sage top bar, terracotta "Publish" action.

Imagery. Natural-light photography only: students in class, in the chapel, in the schoolyard in Ketapang; teachers mid-conversation; hands on books and lab equipment; a wide shot of the school building under West Kalimantan sky. Warm colour grading, soft shadows, no heavy filters, no stock-photo smiles-at-camera. Photographs are cropped into the sage arch frame or into 4:5 rounded cards. Secondary imagery is quiet and material: a close-up of a school pin, a stack of textbooks, a chalkboard edge, a rain tree. No vector illustration of people, no 3D blobs, no icons used as decoration — icons appear only where they carry meaning (contact, location, calendar).

Avoid. Blue or indigo anywhere in the palette (no #2563EB, #4F46E5, #7C3AED, or their neighbours); a centred hero with headline, subtext, and a blue button over a gradient blob; Inter, Roboto, Poppins, Open Sans, Lato, or system-ui for headings or body; glassmorphism, frosted panels, or translucent cards; a grid of identical hover-lift cards with uniform 16:9 images; stock photography of smiling students looking directly at camera; cartoon vector people or 3D blob illustrations; any motion that bounces, springs, or plays continuously without user intent. The generic indigo/blue-on-white SaaS template is forbidden for this project.

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

7. Signature Design Concept

The public entry is composed as a doorway into the school.

The hero is a full-bleed photograph of the school's front courtyard or a classroom in warm afternoon light, cropped tall on mobile (4:5) and wide on desktop (16:9), sitting inside a sage arch frame that bleeds off the right edge on desktop. The arch — a rounded-top rectangle reading as a doorway — is the site's single recurring motif and the first thing a visitor sees.

The school wordmark in Fraunces 500 at 40px mobile → 88px desktop sits in the lower-left, overlapping the arch's inner edge, in ink on a soft oat scrim so contrast stays above 7:1. Beneath it, one line in Work Sans 18px: "Sekolah menengah atas Katolik di Ketapang — membentuk pribadi yang cerdas, berkarakter, dan peduli." A single terracotta pill CTA, "Informasi Pendaftaran", sits under the line, with a small text link "Kenali sekolah kami →" beside it.

The composition is left-weighted and asymmetric, with the arch and photograph carrying the right two-thirds. There is no centred stack, no gradient, and no floating UI mockup. Directly beneath the hero, a ruled statistics band presents three label/value pairs — Tahun Berdiri, Jurusan, Siswa — in Work Sans 12px uppercase labels above Fraunces 40px numerals, separated by full-width hairline rules rather than cards. The terracotta numeral is the only hot colour in the band, and it is the first rhythmic appearance of the accent that continues down the News page as a vertical stripe of date stamps.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief.

• Focal subject: the arch-framed photograph of the school's front courtyard or a classroom in warm afternoon light, with the oversized Fraunces wordmark overlapping its lower-left corner on a soft oat scrim.
• Input → transformation → outcome thesis: as the visitor arrives, the hero photograph drifts very slowly (a 1.02 scale over 20s, transform only, GPU-friendly) while the wordmark, promise line, and terracotta CTA resolve into their final positions; the outcome is a composed, still-feeling first frame that reads as a doorway rather than a moving banner.
• Motion vocabulary: one purposeful reveal per section — content fades up 12px over 400ms with cubic-bezier(0.22, 0.61, 0.36, 1), triggered once by IntersectionObserver, staggered 60ms across siblings. Hover on cards lifts by 2px and deepens the hairline border — no scale, no glow. Buttons respond in 120ms. No parallax, no cursor effects, no marquees.
• Composed first frame: the arch bleeds off the right edge on desktop (centred on mobile), the wordmark sits lower-left over the arch's inner edge on its oat scrim, the promise line sits beneath it, and the terracotta pill CTA and text link sit under the line — all fully inside the viewport at 375px, 768px, and 1280px.
• Reduced-motion state: with prefers-reduced-motion, all reveals resolve to their final state instantly and the hero drift stops, leaving the composed first frame as a static arrangement.

9. Non-Functional Requirements

NFR-1 — Mobile-first readability. The site must be readable on a mid-range Android phone over mobile data. Body text is set at 17–18px with 1.65 line-height, and the reading measure is capped at 68ch. (provenance: explicit — creative direction)

NFR-2 — Fast load on school wifi. Motion is restrained and imagery is progressively resolved so the site loads quickly on school wifi and mobile data. (provenance: explicit — creative direction)

NFR-3 — Text and control integrity. Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering any part of them. (provenance: explicit — creative direction)

NFR-4 — Reduced-motion support. With prefers-reduced-motion, all reveals resolve to their final state instantly and the hero drift stops. (provenance: explicit — creative direction)

NFR-5 — Contrast. The wordmark over the hero photograph sits on a soft oat scrim so contrast stays above 7:1. (provenance: explicit — creative direction)

NFR-6 — Content persistence. Published school content must persist and be served to later visitors, so students and families see the same maintained information on return. (provenance: required_inference)

NFR-7 — Access restriction. Content Management is reachable only by verified teachers and school staff; the public pages are anonymously reachable. (provenance: required_inference)

10. Tech Stack

• Frontend: React, delivered as a responsive web application. (provenance: basic_default — not specified by user)
• Backend: Python with FastAPI, providing the content API and staff verification. (provenance: basic_default — not specified by user)
• Storage: A relational database for school content, news entries, and staff identity. (provenance: basic_default — not specified by user)
• Deployment: Docker and docker-compose for local and single-host deployment. (provenance: basic_default — not specified by user)

No source-specified technology choices were provided; the above are labeled defaults and may be replaced without changing product behavior.

11. Assumptions and Constraints

• A-1. The school authorizes teachers and staff and issues their invitation or provisioning; the system does not offer self-registration. (required_inference)
• A-2. The only protected surface is Content Management; all other pages are anonymously reachable. (required_inference)
• A-3. The school's published content is authored by the school itself; no external content provider is specified. (required_inference)
• A-4. The site is delivered in Indonesian, matching the school's context and the creative direction's copy. (basic_default)
• A-5. No student accounts, gradebooks, learning management, or payment processing are in scope; none were accepted in the requirement thread. (explicit exclusion)
• A-6. The creative direction's palette, typography, shape language, layout, imagery, and motion constraints are binding for this project. (explicit)
• A-7. The generic indigo/blue-on-white SaaS template is forbidden. (explicit)
• A-8. No future-horizon capabilities are specified in this document. (explicit)

12. Glossary

• SMAS — Sekolah Menengah Atas Swasta; a private senior secondary school.
• Pangudi Luhur — The Catholic foundation that operates the school.
• Ketapang — The regency in West Kalimantan, Indonesia, where the school is located.
• Tahun Berdiri — The year the school was founded; one of the three statistics in the Landing band.
• Jurusan — Academic program or specialization; one of the three statistics in the Landing band.
• Siswa — Student; one of the three statistics in the Landing band.
• Calon Siswa & Orang Tua — Prospective student and parent; the family evaluating the school.
• Guru & Staf — Teacher and school staff; the persona authorized to publish content.
• Content Management — The protected surface where authorized staff publish and maintain school information, news, announcements, and activities.
• Returning verification — The sign-in step an authorized staff member completes before maintaining content.
• Sage arch — The recurring rounded-top frame motif used for the hero photograph and portraits.
• Oat scrim — The soft background behind the wordmark that keeps contrast above 7:1 over the hero photograph.