System Requirements Document for salinlahi-kagay-anon

1. Introduction

Salinlahi is a cultural-preservation platform for PHINMA COC (Cagayan de Oro College) students in Cagayan de Oro, Philippines. Its purpose is to preserve Kagay-anon cultural identity among PHINMA COC college students by giving students a durable, browsable archive of Kagay-anon heritage material and by giving designated cultural custodians a focused workspace to gather, add, and maintain that material.

The product intent is drawn directly from the authoritative requirement: build a project called "Salinlahi" aimed at preserving Kagay-anon cultural identity among PHINMA COC college students, serving those students as its audience. Salinlahi is therefore a two-role system: students who browse and read the archive, and Cultural Content Contributors / Custodians who maintain it. The platform is delivered as a first-party web application with application-owned identity, so that a student's or contributor's work and the archive itself persist across visits.

The audience is PHINMA COC college students and the cultural contributors/custodians who serve them. The tone of the product is that of public cultural infrastructure — a library, a transit map, a museum catalogue — carrying heritage content with wayfinding clarity and quiet seriousness.

2. System Overview

Salinlahi is a web application with a public entry surface, self-service identity surfaces, a student-facing content library, and a contributor-facing content editor. It is backed by a server-side application that owns the durable archive of Kagay-anon cultural content, the identity records of its users, and the role distinction between students and contributors/custodians.

Actors

• College Student (Phinma COC) — the primary audience. Browses and reads Kagay-anon cultural identity content in the Content Library and reaches a stronger sense of local cultural identity.
• Cultural Content Contributor / Custodian — the maintainer. Gathers and shares Kagay-anon cultural heritage material, adds and maintains it in the Content Editor, and sees it reach the student audience.

Accepted current behavior

• A public Landing surface introduces Salinlahi, its PHINMA COC student audience, and its purpose of preserving Kagay-anon cultural identity before any protected use.
• Self-service enrollment (Sign Up) lets an actor begin using Salinlahi.
• Returning verification (Login) lets an actor regain access on subsequent visits.
• The Content Library provides the student-facing browse and view experience for Kagay-anon cultural identity content.
• The Content Editor provides contributors with a focused workspace to add and maintain durable Kagay-anon cultural content.
• Contributor authorization distinguishes Cultural Content Contributor / Custodian maintenance access from student viewing access.

Ownership and delivery boundary

Salinlahi is delivered as a first-party application with custom UI and application-owned identity. The Landing, Sign Up, and Login surfaces are anonymously reachable; the Content Library and Content Editor are protected and require an established identity. The archive content, the identity records, and the role distinction are owned and persisted by the Salinlahi application itself — no external provider owns the archive or the identity.

Narrow exclusions

This document does not introduce adjacent capabilities that the source did not accept: no social feed, no messaging, no event management, no e-commerce, no external content-provider integration, and no account-management surface beyond the self-service enrollment and returning verification needed to make the accepted journeys executable. No future-horizon requirements were stated by the user; nothing is deferred.

2a. Product Interpretation and Delivery Boundary

Salinlahi is a preservation platform, not a general-purpose content site. Its defining commitment is that Kagay-anon cultural identity material survives in a durable, organized archive that PHINMA COC students can actually reach, and that a designated custodian role keeps that archive accurate and growing.

Delivery is first-party and web-based. The public entry (Landing) is reachable without an identity and exists to state what Salinlahi is, who it serves, and how to enter. Because the archive is durable and role-differentiated, Salinlahi owns its own identity: a new actor establishes an identity through self-service enrollment (Sign Up), and a returning actor verifies through Login. The Content Library is the student's working surface for reading the archive; the Content Editor is the custodian's working surface for maintaining it. These two protected surfaces are separated because their working context, authoritative state, lifecycle, and completion outcomes differ: a student's outcome is having read and understood heritage material, while a custodian's outcome is having published or updated an archive entry.

Everything in this document is current. No future-horizon requirements were stated, and no capability is deferred.

2b. Source Content Inventory

Not applicable. No reference directive in this request declares a content_source, so no source content inventory is produced.

2c. Page Content and Component Coverage

Landing

• Information and state: Public, anonymously reachable. States the project name Salinlahi, its PHINMA COC college-student audience, and its purpose of preserving Kagay-anon cultural identity. Presents a plain-language definition of the project, the audience, the custodian role, and the access path into the archive.
• Primary actions: Enter the archive (routes an actor toward the protected Content Library, requiring identity). Sign up as contributor (routes toward Sign Up).
• Supporting actions: Navigate to Login for a returning actor; navigate to Sign Up for a new actor.
• Domain entities: Project identity (Salinlahi), audience (PHINMA COC students), role (Cultural Content Contributor / Custodian), access state (anonymous).
• Component responsibilities: A wayfinding header carrying the project name and numbered section stops; a definition block stating what Salinlahi is; an aligned label/value block stating Audience, Custodians, and Access; a documentary image band cropped to the grid; primary and secondary call-to-action controls; a persistent left rail acting as the page's transit line.
• States: Loading — the surface renders its static content immediately; no data fetch is required for the public entry. Empty — not applicable; the Landing always carries its definitional content. Success — the actor understands what Salinlahi is and which entry path applies to them. Error — if a navigation target is unreachable, the control reports the failure and the actor can retry or use the alternate entry path. Recovery — the actor can always return to Landing and choose the other entry path (Login vs. Sign Up).

Sign Up

• Information and state: Public, anonymously reachable. Collects the information needed to establish a new Salinlahi identity. States that enrollment is self-service and that the actor will be able to browse the archive after enrolling.
• Primary actions: Submit enrollment to create the identity.
• Supporting actions: Navigate to Login if the actor already has an identity; return to Landing.
• Domain entities: Actor identity record, credential, role assignment (student by default; contributor/custodian where the actor is enrolling as a contributor).
• Component responsibilities: Enrollment form with aligned label/value pairs; validation messaging; submit control; link to Login.
• States: Loading — the submit control shows an in-progress state while the identity is created. Empty — the form renders with empty fields. Success — the identity is created and the actor proceeds to the archive. Error — invalid or incomplete input is reported against the specific field; a duplicate or rejected identity is reported with a clear message and the actor can correct and resubmit. Recovery — the actor's entered values are preserved on validation failure so they can correct only what is wrong.

Login

• Information and state: Public, anonymously reachable. Verifies a returning actor's identity before protected use.
• Primary actions: Submit credentials to verify identity.
• Supporting actions: Navigate to Sign Up if the actor has no identity; return to Landing.
• Domain entities: Actor identity record, credential, role assignment.
• Component responsibilities: Credential form with aligned label/value pairs; validation and failure messaging; submit control; link to Sign Up.
• States: Loading — the submit control shows an in-progress state while verification runs. Empty — the form renders with empty fields. Success — the actor is verified and routed to the surface matching their role (Content Library for students, Content Editor for contributors/custodians). Error — incorrect credentials are reported without revealing which field was wrong; the actor can retry. Recovery — the actor can retry, or navigate to Sign Up if they do not have an identity.

Content Library

• Information and state: Protected; requires an established identity. Presents the durable archive of Kagay-anon cultural identity content as a ruled, tabular index. Each entry shows a category line-chip, title, category, contributor, and date. The surface carries the student line (red signal) as its role code.
• Primary actions: Browse the index; open an entry to read its full content.
• Supporting actions: Filter or scan by category; return to the index from an open entry.
• Domain entities: Archive entry (title, category, contributor, date, body content), category taxonomy (textile, ritual, language, music, place), contributor attribution.
• Component responsibilities: Ruled index rows with aligned columns and tabular mono numerals; category line-chips; entry detail view; empty and loading states; the persistent left rail with the active stop marked.
• States: Loading — the index shows a loading state while entries are retrieved. Empty — when the archive contains no entries, the surface states that no content is available yet rather than showing a blank index. Success — entries render as ruled rows; opening an entry shows its full content. Error — a failed retrieval is reported with a retry action; a failed entry open returns the actor to the index with a message. Recovery — the actor can retry retrieval or reopen the entry.

Content Editor

• Information and state: Protected; requires an established identity with contributor/custodian authorization. Provides a focused workspace to add and maintain durable Kagay-anon cultural content. Presents form fields on the left and a live preview on the right, with a persistent status bar showing draft or published state. The surface carries the custodian line (amber signal) as its role code.
• Primary actions: Create a new archive entry; edit an existing entry; save as draft; publish an entry.
• Supporting actions: Preview the entry as it will appear in the Content Library; discard unsaved changes; return to the index.
• Domain entities: Archive entry (title, category, contributor, date, body content), publication status (draft, published), contributor attribution.
• Component responsibilities: Aligned label/value form fields with uppercase small labels; live preview pane; persistent status bar with a coloured line segment for draft/published; save and publish controls; validation messaging.
• States: Loading — an existing entry shows a loading state while it is retrieved for editing. Empty — a new entry starts with empty fields and a draft status. Success — saving preserves the entry as a draft; publishing makes it visible in the Content Library. Error — validation failures are reported against the specific field; a failed save or publish is reported and the actor's unsaved content is preserved. Recovery — the actor can correct the field, retry the save or publish, or discard changes and return to the index.

3. Functional Requirements

FR-1 — Public introduction of Salinlahi As a visitor (College Student or Cultural Content Contributor / Custodian), I should see a public Landing surface that introduces Salinlahi, its PHINMA COC student audience, and its purpose of preserving Kagay-anon cultural identity, so that I understand what the project is before any protected use.

• Provenance: explicit (project purpose and audience) with required_inference for the public entry surface.
• Lifecycle: Trigger — the actor opens Salinlahi without an established identity. Input — none. Observable result — the Landing renders the project name, audience, purpose, and entry paths. Access state — anonymous. Failure/recovery — if an entry path is unreachable, the actor can use the alternate path. Continuation — the actor proceeds to Sign Up or Login.

FR-2 — Self-service enrollment As a College Student or Cultural Content Contributor / Custodian beginning to use Salinlahi, I should be able to enroll myself through Sign Up, so that I can establish an identity and reach the archive.

• Provenance: required_inference (required to make the accepted current journey executable).
• Lifecycle: Trigger — the actor chooses to begin using Salinlahi. Input — the enrollment information required to establish an identity. Observable result — an identity record is created and the actor proceeds to the archive. Access state — anonymous entry, protected state unavailable until identity is established. Failure/recovery — invalid or incomplete input is reported per field and the actor's values are preserved for correction; a rejected or duplicate identity is reported with a clear message and the actor can correct and resubmit. Continuation — the actor reaches the Content Library (student) or Content Editor (contributor/custodian).

FR-3 — Returning verification As a returning College Student or Cultural Content Contributor / Custodian, I should be able to verify my identity through Login, so that I can regain access to the archive on subsequent visits.

• Provenance: required_inference (required to make the accepted current journey executable).
• Lifecycle: Trigger — the actor returns to Salinlahi with an existing identity. Input — credentials. Observable result — the actor is verified and routed to the surface matching their role. Access state — anonymous entry, protected state unavailable until verification succeeds. Failure/recovery — incorrect credentials are reported without revealing which field was wrong, and the actor can retry or navigate to Sign Up. Continuation — the actor reaches the Content Library or Content Editor.

FR-4 — Browse the Kagay-anon cultural archive As a College Student (Phinma COC), I should be able to browse the Content Library as a ruled index of Kagay-anon cultural identity entries, so that I can find heritage material relevant to my cultural identity.

• Provenance: required_inference (the student-facing browse experience for Kagay-anon cultural identity content).
• Lifecycle: Trigger — the student reaches the Content Library after verification. Input — browsing and scanning the index. Observable result — entries render as ruled rows with category line-chip, title, category, contributor, and date. Access state — protected; requires an established identity. Failure/recovery — a failed retrieval is reported with a retry action. Continuation — the student opens an entry to read it.

FR-5 — Read a Kagay-anon cultural entry As a College Student (Phinma COC), I should be able to open an archive entry and read its full content, so that I engage with Kagay-anon cultural identity material and strengthen my sense of local cultural identity.

• Provenance: required_inference (the student-facing view experience for Kagay-anon cultural identity content).
• Lifecycle: Trigger — the student selects an entry from the index. Input — the selected entry. Observable result — the entry's full content is displayed with its category, contributor, and date. Access state — protected; requires an established identity. Failure/recovery — a failed entry open returns the student to the index with a message and the entry can be reopened. Continuation — the student returns to the index and continues browsing.

FR-6 — Add durable Kagay-anon cultural content As a Cultural Content Contributor / Custodian, I should be able to create a new archive entry in the Content Editor, so that Kagay-anon cultural heritage material is gathered and made available to students.

• Provenance: required_inference (the contributor workspace to add durable Kagay-anon cultural content).
• Lifecycle: Trigger — the contributor reaches the Content Editor after verification. Input — the entry's title, category, and body content. Observable result — the entry is saved as a draft and can be published to the archive. Access state — protected; requires an established identity with contributor/custodian authorization. Failure/recovery — validation failures are reported per field and unsaved content is preserved; a failed save is reported and can be retried. Continuation — the contributor previews, saves, or publishes the entry.

FR-7 — Maintain existing Kagay-anon cultural content As a Cultural Content Contributor / Custodian, I should be able to edit an existing archive entry in the Content Editor, so that the archive stays accurate and current for the student audience.

• Provenance: required_inference (the contributor workspace to maintain durable Kagay-anon cultural content).
• Lifecycle: Trigger — the contributor opens an existing entry for editing. Input — the revised entry content. Observable result — the entry is updated and, when published, the updated content is what students see in the Content Library. Access state — protected; requires an established identity with contributor/custodian authorization. Failure/recovery — a failed save or publish is reported and unsaved content is preserved; the contributor can retry or discard changes. Continuation — the contributor returns to the index or continues editing.

FR-8 — Publish an entry to the student audience As a Cultural Content Contributor / Custodian, I should be able to publish an entry so that it becomes visible in the Content Library, so that the material I gathered actually reaches PHINMA COC students.

• Provenance: required_inference (the contributor sees their content reach the student audience).
• Lifecycle: Trigger — the contributor completes an entry and chooses to publish. Input — the entry content and its publication decision. Observable result — the entry's status changes from draft to published and it appears in the Content Library for students. Access state — protected; requires an established identity with contributor/custodian authorization. Failure/recovery — a failed publish is reported and the entry remains a draft with content preserved; the contributor can retry. Continuation — the contributor sees the published entry in the archive and can continue maintaining other entries.

FR-9 — Role-differentiated access As the Salinlahi system, I should distinguish Cultural Content Contributor / Custodian maintenance access from student viewing access, so that only authorized contributors can add and maintain archive content while students can browse and read it.

• Provenance: required_inference (contributor authorization must distinguish maintenance access from student viewing access).
• Lifecycle: Trigger — an actor reaches a protected surface. Input — the actor's established identity and role. Observable result — a student reaches the Content Library; a contributor/custodian reaches the Content Editor; a student cannot reach the Content Editor. Access state — protected surfaces require an established identity; the Content Editor additionally requires contributor/custodian authorization. Failure/recovery — an actor without the required authorization is returned to the surface their role permits, with a message. Continuation — the actor continues in the surface their role permits.

4. User Personas

College Student (Phinma COC)

Product context. A PHINMA COC college student in Cagayan de Oro who is studying away from, or at a distance from, the everyday practice of Kagay-anon culture and wants to stay connected to it. Salinlahi is the archive they return to when they want to read about the heritage of the place they are studying in.

Primary goal. To reach a stronger sense of local Kagay-anon cultural identity by engaging with cultural content and identity-related material in the product.

Distinct accepted responsibilities. The student browses the Content Library and reads archive entries. The student does not add or maintain archive content — that is the custodian's responsibility, and the student's access does not include the Content Editor.

Relevant inputs and decisions. The student decides what to read next by scanning the index's categories, titles, contributors, and dates. The student's inputs are their browsing choices and their selection of an entry to open.

Interactions with other accepted participants. The student is the audience for the Cultural Content Contributor / Custodian's work: the entries the student reads are the entries the custodian gathered, added, and published. The student sees the custodian's attribution on each entry.

Observable success. The student has found and read Kagay-anon cultural identity material in the Content Library and can return to the archive on later visits with their identity intact.

Cultural Content Contributor / Custodian

Product context. A person responsible for gathering and sharing Kagay-anon cultural heritage material so that PHINMA COC students can access it. They treat the archive as something that must be accurate, attributed, and durable — not as a personal publishing outlet.

Primary goal. To add and maintain cultural content and see it reach the student audience.

Distinct accepted responsibilities. The contributor creates new archive entries, edits existing ones, saves drafts, and publishes entries to the Content Library. The contributor's access is distinguished from the student's: the contributor reaches the Content Editor, which students cannot.

Relevant inputs and decisions. The contributor supplies entry titles, categories, and body content, and decides when an entry is ready to move from draft to published. The contributor decides what to revise when existing archive content needs correction.

Interactions with other accepted participants. The contributor serves the College Student audience: publishing an entry is what makes it visible to students, and the contributor's attribution appears on the entry the student reads.

Observable success. The contributor's entry is published and appears in the Content Library for students, and the contributor can return to the Content Editor to maintain it.

5. Core User Flows

Flow A — A new student enrolls and reads the archive

1. The student opens Salinlahi and lands on Landing without an established identity. The Landing states what Salinlahi is, that its audience is PHINMA COC students, and that its purpose is preserving Kagay-anon cultural identity.
2. The student reads the definition block and the aligned label/value block (Audience, Custodians, Access) and decides to enter the archive.
3. Because the archive is protected, the student proceeds to Sign Up and completes self-service enrollment, supplying the information needed to establish an identity.
4. The student submits. The submit control shows an in-progress state while the identity is created. On success, the identity is created and the student proceeds to the archive.
5. If validation fails, the specific field is reported and the student's entered values are preserved; the student corrects only what is wrong and resubmits. If the identity is rejected or duplicated, the message is shown and the student can correct and resubmit.
6. The student arrives at the Content Library, which carries the student line (red signal) as its role code. The index renders as ruled rows with a category line-chip, title, category, contributor, and date in aligned columns.
7. If the archive contains no entries, the surface states that no content is available yet rather than showing a blank index. If retrieval fails, the failure is reported with a retry action and the student retries.
8. The student scans the index and selects an entry. The entry's full content is displayed with its category, contributor, and date.
9. If the entry fails to open, the student is returned to the index with a message and can reopen it.
10. The student finishes reading, returns to the index, and continues browsing. The student's identity persists, so on a later visit they can return through Login instead of enrolling again.

Flow B — A returning student verifies and resumes reading

1. The student returns to Salinlahi and goes to Login.
2. The student submits their credentials. The submit control shows an in-progress state while verification runs.
3. On success, the student is verified and routed to the Content Library, the surface matching their student role.
4. If the credentials are incorrect, the failure is reported without revealing which field was wrong; the student retries. If the student does not have an identity, they navigate to Sign Up.
5. The student resumes browsing the index and reading entries, continuing from Flow A step 8.

Flow C — A contributor enrolls and publishes a new archive entry

1. The contributor opens Salinlahi and lands on Landing without an established identity. They read the definition block and the label/value block, which names the custodian role.
2. The contributor chooses Sign up as contributor and proceeds to Sign Up, completing self-service enrollment as a Cultural Content Contributor / Custodian.
3. The contributor submits. On success, the identity is created with contributor/custodian authorization and the contributor proceeds to the Content Editor. If validation fails, the specific field is reported and the contributor's values are preserved for correction.
4. The contributor arrives at the Content Editor, which carries the custodian line (amber signal) as its role code. A new entry starts with empty fields and a draft status.
5. The contributor supplies the entry's title, category, and body content in the form fields on the left, and watches the live preview on the right.
6. The contributor saves the entry as a draft. The persistent status bar shows the draft state as a coloured line segment. If the save fails, the failure is reported and the contributor's unsaved content is preserved; the contributor retries.
7. The contributor reviews the preview and chooses to publish. On success, the entry's status changes from draft to published and it appears in the Content Library for students.
8. If publishing fails, the failure is reported and the entry remains a draft with its content preserved; the contributor retries.
9. The contributor sees the published entry in the archive and can continue maintaining other entries.

Flow D — A contributor maintains an existing archive entry

1. The contributor verifies through Login and is routed to the Content Editor, the surface matching their contributor/custodian role.
2. The contributor opens an existing entry for editing. The entry shows a loading state while it is retrieved.
3. The contributor revises the entry's content in the form fields and reviews the live preview.
4. The contributor saves or publishes the revision. On success, the entry is updated and, when published, the updated content is what students see in the Content Library.
5. If the save or publish fails, the failure is reported and the contributor's unsaved content is preserved; the contributor retries, or discards the changes and returns to the index.
6. The contributor returns to the index or continues editing other entries.

Flow E — A student reads content the contributor published

1. The student verifies through Login and reaches the Content Library.
2. The student scans the ruled index and finds the entry the contributor published, identified by its title, category, contributor, and date.
3. The student opens the entry and reads its full content, seeing the contributor's attribution.
4. The student returns to the index and continues browsing. The contributor's published work has reached its student audience.

Flow F — Role-differentiated access is enforced

1. A student with an established identity reaches a protected surface. The system resolves their role and routes them to the Content Library.
2. If the student attempts to reach the Content Editor, the system returns them to the surface their role permits, with a message.
3. A contributor/custodian with an established identity reaches a protected surface and is routed to the Content Editor.
4. In both cases, the actor continues in the surface their role permits.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Erik Spiekermann, and the headline idea is typographic infrastructure for a living heritage — Kagay-anon culture as a wayfinding system. Salinlahi should read as public infrastructure for identity: closer to a library, a transit map, or a museum catalogue than to a SaaS dashboard. Information-heavy, role-differentiated, warm inside order.

Colour tokens (light mode)

Proportion: ~70% paper, ~20% ink, ~7% red, ~3% amber. Two signal colours maximum on screen at once; never introduce a third.

Contrast rules: ink on paper is ~15:1. Red on paper is ~5.4:1 and is used at 16px+ or as a 3px rule, never for small body text. Amber is never used for text on paper — only as a rule, a tag fill with ink text, or an icon fill.

Typography

• Headings: Fira Sans at 700–800 weight, tracked tight (−0.02em), sentence case, with a numbered prefix (01, 02, 03) set in Fira Sans Mono at 400 weight sitting above or beside them like a station number.
• Body: Fira Sans.
• Labels, role names, tags, table headers: Fira Sans 600, uppercase, letter-spaced +0.08em, 11–12px — the wayfinding voice.
• Scale: 1.25 modular from a 16px base — 11 / 12 / 14 / 16 / 20 / 25 / 31 / 39 / 49 / 61 / 76 / 96. Display clamp(40px, 9vw, 96px); section heading clamp(28px, 4.5vw, 44px); card title 20px; body 16px with 1.6 line-height; metadata 12px uppercase tracked.
• Numerals: always Fira Sans Mono tabular, so counts, dates, and archive numbers align in columns.
• Display headlines may run large but never more than one display line per section; hierarchy comes from weight, rule, and number, not from many sizes.

Shape language

Rectilinear and honest. 2px radius on inputs and buttons — enough to feel handled, not enough to look soft. 1px hairline rules in #1C1A17 at 12% opacity as the primary structural device; 3px solid signal-colour rules mark active lines and section starts. No shadows except a single 1px bottom border on sticky headers. No blobs, no pills, no rounded cards with soft offset shadows. Circular elements are reserved for one thing only: the role indicator dot and small step markers, echoing transit stops.

Layout

A 12-column grid with a visible left rail at 1280px: a 64px-wide vertical strip carrying a red line, numbered section stops, and rotated uppercase micro-labels — the page literally reads as a transit line you scroll along. Content occupies columns 3–11 for reading measure, columns 1–12 for full-bleed rules and image bands. Every section begins with a horizontal 3px signal rule spanning the full grid, then a numbered label pair (number left, label right, aligned to the grid) — a wayfinding header, not a marketing header. The Content Library is a tabular, colour-coded index: each heritage entry is a ruled row with an amber or red line-chip on the left, title, category, contributor, and date in aligned columns; on mobile those rows reflow to stacked blocks with the chip as a top border. The Content Editor is a two-pane split: form fields left (aligned label/value pairs, labels uppercase small), live preview right, with a persistent status bar at the bottom showing draft/published as a coloured line segment.

Imagery

Documentary and diagrammatic, never decorative. Photography: high-contrast, warm-toned documentary photographs of Cagayan de Oro — markets, fiesta, weaving, river, campus life — always cropped hard to the grid, duotone-treated in ink + paper with the signal colour used as a single overlay band on one edge, and captioned with a numbered figure label. Plus one pictogram set: simple 2px-stroke line icons for archive categories (textile, ritual, language, music, place) drawn on the same 24px grid as the type, so image and type feel cut from the same system. No stock people, no 3D renders, no gradient blobs.

7. Signature Design Concept

The public entry is a full-viewport wayfinding poster, not a centred SaaS hero.

• The left 64px rail carries a red vertical line with three numbered stops and a rotated uppercase label reading SALINLAHI — KAGAY-ANON ARCHIVE.
• The composition is asymmetric. On the right two-thirds, an oversized Fira Sans 800 headline SALINLAHI is set at clamp(56px, 14vw, 176px), flush left, with the word KAGAY-ANON directly beneath it in the same size but rendered as an outlined/knockout treatment — so the two words stack as a solid line and a hollow line, the archive's name as a two-line transit sign.
• Below, a single 3px red rule spans the full grid. Under it, a two-column row: on the left, a three-line plain-language definition of the project in ink at 20px; on the right, aligned label/value pairs — Audience: PHINMA COC students / Custodians: Cultural Contributors / Access: Sign in to browse.
• The bottom edge of the viewport is a full-bleed documentary photograph cropped to a 28vh band, duotone ink/paper with a red edge band.
• No illustration, no 3D, no gradient.
• The primary CTA Enter the archive is a solid red rectangle with an uppercase tracked label pinned to the rule; Sign up as contributor sits beside it as an amber-outlined rectangle.

This concept recomposes only accepted content, states, and controls: the project name, the audience, the custodian role, the access path, and the two entry actions.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the two-line transit sign — SALINLAHI solid over KAGAY-ANON outlined — anchored by the left rail's red line and the full-bleed documentary photograph band at the viewport's bottom edge.
• Input → transformation → outcome thesis: as the visitor scrolls the Landing, the left rail's red line draws downward and the active numbered stop fills solid; the section rules wipe in from the left at 200ms on first entry. The outcome is that the visitor reads the page as a transit line they are moving along, arriving at the entry controls with the archive's purpose and audience understood.
• Motion vocabulary: functional and short — 120–180ms ease-out on hover and focus; instant state change on selection (no bounce, no spring); the one deliberate loop is the scroll-linked rail draw; section rules wipe in from the left at 200ms on first entry; role switching flips the signal colour (red ↔ amber) with a 150ms crossfade of the chip and rail only.
• Composed first frame: the rail's red line at full height with stop 01 filled solid; the oversized two-line wordmark flush left; the 3px red rule spanning the grid; the definition and label/value row beneath it; the documentary photograph band cropped to 28vh at the bottom edge; the red Enter the archive rectangle and the amber-outlined Sign up as contributor rectangle pinned to the rule.
• Reduced-motion state: under prefers-reduced-motion, the rail line is static and full-height, stops are shown filled, and all entrances render at final state. No scroll-linked draw, no rule wipe, no crossfade.

9. Non-Functional Requirements

• NFR-1 — Durable archive state. The archive of Kagay-anon cultural content and the identity records of Salinlahi's users must persist across sessions and visits, so that a contributor's published work remains available to students and a returning actor's identity is preserved. Provenance: explicit (durable_state_required: true).
• NFR-2 — Application-owned identity. Salinlahi owns its own identity records and role assignments; no external identity provider owns them. Provenance: explicit (app_owned_identity: true).
• NFR-3 — Role-differentiated authorization. The system must enforce the distinction between student viewing access and contributor/custodian maintenance access on protected surfaces, so that a student cannot reach the Content Editor. Provenance: required_inference (contributor authorization must distinguish maintenance access from student viewing access).
• NFR-4 — Readable text and controls at every viewport. Headlines, wordmarks, labels, numbers, card text, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, with no other element covering any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the creative direction asks, as long as they cover no readable text or control. Provenance: explicit (creative direction).
• NFR-5 — Reduced-motion support. Under prefers-reduced-motion, the rail line is static and full-height, stops are shown filled, and all entrances render at final state. Provenance: explicit (creative direction).
• NFR-6 — Signal-colour discipline. No more than two signal colours on screen at once; signal colour is never used for small body text; amber is never used for text on paper. Provenance: explicit (creative direction).

• NFR-7 — No blue/indigo. Blue or indigo must not appear as a primary or accent colour anywhere; the signal colours are red #B4372A and amber #D89A1E only. Provenance: explicit (creative direction).
• NFR-8 — Motion ceiling. Motion is functional and short: 120–180ms ease-out on hover and focus, instant state change on selection, and nothing over 200ms except the scroll-linked rail draw. Provenance: explicit (creative direction).

10. Tech Stack

• Frontend: React (web), rendering the Landing, Sign Up, Login, Content Library, and Content Editor surfaces. [Default — not specified by user]
• Backend: Python / FastAPI, owning the archive content, identity records, role assignments, and the API routes that serve the frontend. [Default — not specified by user]
• Storage: A relational database for durable archive entries, identity records, and role assignments. [Default — not specified by user]
• Containerization: Docker and docker-compose for local and deployment runs. [Default — not specified by user]
• Typography: Fira Sans and Fira Sans Mono, as specified by the creative direction. Provenance: explicit (creative direction).

11. Assumptions and Constraints

• A-1. Salinlahi is delivered as a first-party web application with custom UI and application-owned identity. Provenance: explicit (custom_ui: true, app_owned_identity: true).
• A-2. Self-service enrollment is the identity-establishment path, because no invitation, provisioning, provider, or pre-existing-account boundary is established by the source. Provenance: required_inference.
• A-3. The Landing, Sign Up, and Login surfaces are anonymously reachable; the Content Library and Content Editor are protected. Provenance: explicit (page contract access requirements).
• A-4. The Content Library is the student-facing surface and the Content Editor is the contributor/custodian-facing surface; the two are separated because their working context, authoritative state, lifecycle, and completion outcomes differ. Provenance: required_inference.
• A-5. A student's default role is student viewing access; contributor/custodian authorization is required for maintenance access. Provenance: required_inference.
• A-6. No future-horizon requirements were stated by the user; all requirements in this document are current. Provenance: explicit (no future requirements in the source).
• C-1. Blue and indigo are prohibited as primary or accent colours. Provenance: explicit (creative direction).
• C-2. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are prohibited for headings and body. Provenance: explicit (creative direction).
• C-3. Rounded-pill buttons, soft offset shadows, glassmorphism, and frosted panels are prohibited. Provenance: explicit (creative direction).
• C-4. Decorative illustration, 3D renders, and stock photography of smiling students are prohibited. Provenance: explicit (creative direction).

• C-5. A grid of identical hover-lift cards for the Content Library is prohibited; the ruled index is used instead. Provenance: explicit (creative direction).
• C-6. Bouncy or springy motion is prohibited. Provenance: explicit (creative direction).

12. Glossary

• Salinlahi — The project name; the cultural-preservation platform for PHINMA COC college students described in this document.
• Kagay-anon — Pertaining to Cagayan de Oro and its people, culture, and heritage.
• PHINMA COC — Cagayan de Oro College, the institution whose college students are Salinlahi's audience.
• Archive — The durable collection of Kagay-anon cultural identity content maintained in Salinlahi and browsed in the Content Library.
• Archive entry — A single item of Kagay-anon cultural content, carrying a title, category, contributor, date, and body content.
• Category — The classification of an archive entry; the pictogram set covers textile, ritual, language, music, and place.
• Cultural Content Contributor / Custodian — The persona responsible for gathering, adding, and maintaining Kagay-anon cultural heritage material in the archive.
• College Student (Phinma COC) — The persona who browses and reads the archive.
• Content Library — The protected, student-facing surface presenting the archive as a ruled, tabular index.
• Content Editor — The protected, contributor/custodian-facing surface for creating, editing, saving, and publishing archive entries.
• Draft — The publication status of an archive entry that is saved but not yet visible to students.
• Published — The publication status of an archive entry that is visible in the Content Library.
• Signal colour — One of the two coded colours used like transit lines: red #B4372A (student/main line) and amber #D89A1E (contributor/custodian line).

• Left rail — The persistent 64px vertical strip carrying the red line, numbered section stops, and rotated uppercase micro-labels; collapsed to a 4px top progress bar at 375px and 768px.
• Wayfinding header — The numbered section header consisting of a full-grid 3px signal rule followed by a number and an uppercase tracked label split to the far left and right of the grid.