System Requirements Document for hukum-perdata

1. Introduction

hukum-perdata is a web platform themed around Indonesian civil law (hukum perdata). Its purpose is to give law undergraduates a curated, readable index of peer-reviewed civil-law journal articles, so that a student hunting references for a paper, a seminar response, or a thesis chapter can find a relevant article and actually read it.

The product intent is deliberately narrow and source-derived:

• Provide a platform themed on civil law.
• Serve students (mahasiswa) as the primary user.
• Focus on the single core need: finding civil-law journal articles.

The audience is the Indonesian law undergraduate — someone who reads late, annotates margins, worries about citation form, and wants the article itself to be the subject of the screen rather than a database record. The interface is therefore built as a warm editorial reading room rather than a campus database or a SaaS search console.

2. System Overview

hukum-perdata is delivered as a first-party custom web application with three destinations: Landing, Articles, and Article Details. All three are anonymously reachable; no account, sign-in, or identity establishment is required or accepted for any current capability.

The single accepted active human actor is Mahasiswa Hukum. There are no other accepted human personas, and no differentiated permissions, roles, or visibility controls exist in the current scope.

Accepted current behavior:

• A public entry surface that explains the platform's civil-law theme, its student audience, and its article-search function.
• A revisitable destination where the student searches and browses civil-law journal articles.
• A focused destination where the student opens and reads a journal article that was found.

Narrow exclusions and boundaries:

• No account creation, sign-in, profile, or saved-library capability is accepted or inferred; the accepted access requirement for every page is none.
• No administrative, editorial, submission, or publishing workflow is accepted.
• No payment, subscription, or entitlement behavior is accepted.
• No role-based or permission-based differentiation of shared product state is accepted.
• No future-horizon requirements were stated by the user.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The platform is a first-party custom UI application. All three destinations — Landing, Articles, and Article Details — are owned and rendered by the application itself. No provider-owned surface, external destination, or headless delivery is accepted for any current capability.

Access ownership. Every accepted destination is publicly reachable without identity. The student arrives anonymously, searches anonymously, and reads anonymously. Because no accepted capability creates a durable, actor-specific obligation, entitlement, value transfer, or resumable private state, no application-owned identity is established and no protected destination exists. The Landing page is the anonymous entry surface; it does not gate anything.

Current vs. future boundary. Everything described in this document is current. The user stated no future requirements, no roadmap items, and no deferred capabilities. Nothing in this document should be read as a commitment to accounts, saved searches, citation export, annotation, or any adjacent scholarly-tooling capability.

Reading the product. The product is a search-and-read tool. Its information architecture follows the student's actual journey: arrive and understand what this is (Landing) → search and browse the corpus (Articles) → open and read one article (Article Details). Each of these is a materially distinct working context with its own state, return point, and completion outcome, which is why each owns its own destination.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares content_source; no verified factual collection, entity list, or media inventory was supplied for preservation.

2c. Page Content and Component Coverage

Landing

Information and state. The public entry surface. It states the platform's subject (Indonesian civil law), its audience (law undergraduates), and its function (a curated index of civil-law journal articles). It carries no user-specific state and no loading state of its own beyond the initial page load.

Primary action. Enter a search query and submit it to reach the Articles destination.

Supporting actions. Follow the section-opener navigation into the Articles destination without a query (browse-all entry). Read the introductory essay framing the corpus.

Domain entities. Journal article (as a previewed record: title, journal, year, author), civil-law subject area, KUHPerdata book structure (Orang, Benda, Perikatan, Pembuktian, Daluwarsa) as an illustrative artefact.

Component responsibilities.

• Title-page hero — oversized Fraunces headline "Hukum Perdata" set in two ragged lines running the full grid width, second line indented past the first.
• Rust baseline rule — full-width 2px rust rule with a small mustard square at its left terminus, sitting beneath the headline block.
• Introductory paragraph — a single ~60ch Literata paragraph explaining that this is a curated index of Indonesian civil-law journal articles for students.
• KUHPerdata structure diagram — a flat hand-drawn rust-and-mustard illustration of the code's book structure, roughly 380×300px, overlapping the rust rule by 16px.
• Ruled search input — a ruled input sitting directly on the cream ground with a 2px ink underline, a small-caps "CARI ARTIKEL" label above it, and a single mustard "Telusuri" button flush right on the same rule. Not a floating pill.
• Illustrated section opener — a hand-drawn rust-and-mustard spot illustration (library shelf) at 120–160px, aligned to the first column.
• Recently indexed list — a short list of recently indexed articles rendered as ruled rows, each with title in Fraunces, small-caps muted metadata, and a rust hairline that extends from 24px to full row width on hover.

States.

• Loading — the recently indexed list shows ruled placeholder rows on cream; no spinner chrome.
• Empty — if no recently indexed items are available, the list area shows a short ruled note in muted small caps and the search input remains the primary affordance.
• Success — the hero, rule, intro, diagram, search input, and recently indexed rows render in the stacked editorial sequence.
• Error — if the recently indexed list cannot be retrieved, the list area is replaced by a muted note; the hero and search input remain fully functional so the student can still search.
• Recovery — submitting a query always routes to Articles regardless of the recently indexed list's state.

Articles

Information and state. The search-and-browse destination. It holds the current query, the active filter selections (subject, year, journal, type), and the current result set. It is revisitable and its state is reconstructible from the query and filters.

Primary action. Search the civil-law journal article corpus and open a result.

Supporting actions. Apply or clear filters by subject, year, journal, and type. Refine the query. Open an individual article from a result row.

Domain entities. Journal article (title, journal name, publication year, author, subject area, article type), filter facet (subject, year, journal, type), result set.

Component responsibilities.

• Illustrated section opener — a hand-drawn rust-and-mustard spot illustration (open code book) at 120–160px, aligned to the first column.
• Search field — the same ruled input treatment as Landing, carrying the current query.
• Filter rail — a 240px left rail on desktop holding subject, year, journal, and type filters; collapses to a horizontal scrolling chip row at 768px; collapses to a disclosure panel at 375px.
• Result rows — dense ruled rows on cream, each with the title in Fraunces, metadata (year, journal, author affiliation) in small-caps muted, and exactly one mustard "Buka" affordance per row. The rust hairline extends from 24px to full row width on hover — the only motion in the list.
• Result count and active-filter summary — a small-caps muted line stating how many articles match and which filters are active.

States.

• Loading — ruled placeholder rows on cream; the filter rail remains interactive.
• Empty (no query yet) — the destination shows the full browsable index as ruled rows with the filter rail available.
• Empty (no matches) — a muted ruled note stating that no articles match, with the active filters listed and a clear affordance to remove them; the search field retains the query for editing.
• Success — matching articles render as ruled rows with title, metadata, and one "Buka" affordance each.
• Error — if the corpus cannot be queried, a muted ruled note appears in the results area; the search field and filter rail remain usable so the student can retry.
• Recovery — retrying the query or clearing filters re-runs the search; the student is never stranded without a way back to a result set.

Article Details

Information and state. The focused reading destination for one journal article. It holds the article's full bibliographic record, abstract, keywords, body text, and related citations.

Primary action. Read the article.

Supporting actions. Copy the article's citation via the sticky citation bar. Follow a related citation to another article's details. Return to the Articles destination with the previous query and filters intact.

Domain entities. Journal article (full record: title, authors, journal, volume, issue, year, pages, DOI or equivalent identifier, abstract, keywords, body), citation string, related citation.

Component responsibilities.

• Sticky rust citation bar — a flat #8A3B24 band pinned to the top of the reading column carrying the article's short citation in small caps, with a mustard "Salin Sitasi" action, so the citation is always one tap away while reading.
• Centred reading column — a 66ch body column with 1.7 leading, set in Literata.
• Margin rail (desktop) — a narrow right rail in muted small caps holding the abstract, keywords, and "sitasi terkait", keeping the body column clean and making the page feel like an annotated offprint.
• Illustrated section opener — a hand-drawn rust-and-mustard spot illustration (stamped journal cover) at 120–160px, aligned to the first column.
• Warm inset image — optionally, a small warmly-toned documentary inset (journal cover or author portrait), never full-bleed.
• Back-to-results affordance — returns to Articles with the prior query and filters preserved.

States.

• Loading — the reading column shows ruled placeholder lines on cream; the citation bar renders with a muted placeholder citation.
• Empty — not applicable to a single-article destination; an unresolvable article identifier resolves to the error state below.
• Success — the citation bar, reading column, margin rail, and section opener render; "Salin Sitasi" copies the citation and confirms inline.
• Error — if the article cannot be retrieved, a muted ruled note appears in the reading column with a link back to Articles; the citation bar is suppressed rather than showing a broken citation.
• Recovery — the back-to-results affordance always returns the student to the Articles destination with the previous query and filters intact.

3. Functional Requirements

FR-1 — Civil-law themed platform As a Mahasiswa Hukum, I should land on a platform that is clearly themed around Indonesian civil law, so that I immediately understand what body of scholarship this index covers.

• Provenance: explicit
• Trigger/input: The student opens the platform's public entry surface.
• Observable result: The Landing destination presents the platform's civil-law subject framing — the "Hukum Perdata" title-page hero, the introductory paragraph describing a curated index of Indonesian civil-law journal articles, and the KUHPerdata structure diagram (Orang, Benda, Perikatan, Pembuktian, Daluwarsa).
• Access state: Anonymous; no identity required.
• Failure/recovery: If the recently indexed list fails to load, the hero, rule, intro, diagram, and search input still render, so the theme and function remain legible.
• Continuation: The student proceeds to search or browse into Articles.
• Owner: Landing (first-party page).

FR-2 — Student-facing framing As a Mahasiswa Hukum, I should see the platform addressed to me as a law student, so that I know it is built for my study and writing needs rather than for practitioners or the public.

• Provenance: explicit
• Trigger/input: The student reads the Landing destination's introductory content.
• Observable result: The introductory paragraph states that this is a curated index of Indonesian civil-law journal articles for students.
• Access state: Anonymous; no identity required.
• Failure/recovery: Static content; no material failure mode.
• Continuation: The student proceeds to search or browse.
• Owner: Landing (first-party page).

FR-3 — Search civil-law journal articles As a Mahasiswa Hukum, I should search for civil-law journal articles by query, so that I can find references relevant to my study or writing.

• Provenance: explicit
• Trigger/input: The student enters a query into the ruled search input (labelled "CARI ARTIKEL") on Landing or Articles and submits it via the mustard "Telusuri" button.
• Observable result: The Articles destination renders the matching articles as dense ruled rows, each with the title in Fraunces, small-caps muted metadata, and one mustard "Buka" affordance, together with a small-caps result count.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the corpus cannot be queried, a muted ruled note appears in the results area while the search field and filter rail remain usable, so the student can retry.
• Continuation: The student refines the query, applies filters, or opens a result.
• Owner: Articles (first-party page).

FR-4 — Browse the article index without a query As a Mahasiswa Hukum, I should browse the article index without entering a query, so that I can survey what the corpus contains before committing to a search.

• Provenance: required_inference — the accepted Articles destination is described as a revisitable place to "mencari dan menelusuri" (search and browse) articles; browsing is the non-query half of that accepted behavior.
• Trigger/input: The student arrives at Articles with no query, or clears the query.
• Observable result: The full browsable index renders as ruled rows with the filter rail available.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the index cannot be retrieved, a muted ruled note appears; the search field remains usable.
• Continuation: The student applies filters, enters a query, or opens a result.
• Owner: Articles (first-party page).

FR-5 — Filter results by subject, year, journal, and type As a Mahasiswa Hukum, I should narrow results by subject, year, journal, and type, so that I can cut a large result set down to the articles that fit my topic and citation needs.

• Provenance: required_inference — the accepted Articles destination is a place to search and browse civil-law journal articles; subject, year, journal, and type are the facets the accepted corpus record carries and the facets the accepted filter rail is specified to hold.
• Trigger/input: The student selects or clears a filter in the 240px left rail (desktop), the horizontal scrolling chip row (768px), or the disclosure panel (375px).
• Observable result: The result rows and the small-caps result count update to reflect the active filters; the active-filter summary lists what is applied.
• Access state: Anonymous; no identity required.
• Failure/recovery: If no articles match, a muted ruled note states this, lists the active filters, and offers a clear affordance to remove them; the query is retained in the search field for editing.
• Continuation: The student removes a filter, changes the query, or opens a result.
• Owner: Articles (first-party page).

FR-6 — Open an article from the result list As a Mahasiswa Hukum, I should open an article from the result list, so that I can move from finding a reference to reading it.

• Provenance: explicit
• Trigger/input: The student activates the single mustard "Buka" affordance on a result row.
• Observable result: The Article Details destination renders that article's citation bar, reading column, and margin rail.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the article cannot be retrieved, a muted ruled note appears in the reading column with a link back to Articles, and the citation bar is suppressed rather than showing a broken citation.
• Continuation: The student reads the article, copies its citation, follows a related citation, or returns to results.
• Owner: Article Details (first-party page).

FR-7 — Read the article body As a Mahasiswa Hukum, I should read the article's full text in a comfortable reading column, so that I can actually study the argument rather than skim a record.

• Provenance: required_inference — the accepted Article Details destination exists so the student can "membuka dan membaca" (open and read) a found article; a readable body column is the indispensable mechanic of that accepted outcome.
• Trigger/input: The student opens an article.
• Observable result: The article body renders in a centred 66ch column at 1.7 leading in Literata, with the abstract, keywords, and "sitasi terkait" held in the desktop margin rail in muted small caps.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the body cannot be retrieved, the reading column shows a muted ruled note with a link back to Articles.
• Continuation: The student continues reading, copies the citation, or follows a related citation.
• Owner: Article Details (first-party page).

FR-8 — Copy the article citation As a Mahasiswa Hukum, I should copy an article's citation at any point while reading, so that I can cite it correctly without losing my place.

• Provenance: required_inference — the accepted Article Details destination is specified with a sticky rust citation bar carrying the article's short citation and a mustard "Salin Sitasi" action; the copy action is the indispensable mechanic of that accepted affordance.
• Trigger/input: The student activates "Salin Sitasi" on the sticky rust citation bar pinned to the top of the reading column.
• Observable result: The article's short citation is copied, and an inline confirmation appears on the bar.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the copy action fails, the citation text remains visible and selectable on the bar so the student can copy it manually.
• Continuation: The student continues reading or returns to results.
• Owner: Article Details (first-party page).

FR-9 — Follow a related citation As a Mahasiswa Hukum, I should follow a related citation to another article, so that I can chase a reference chain without restarting my search.

• Provenance: required_inference — the accepted Article Details destination is specified with a "sitasi terkait" section in the margin rail; navigating to the cited article is the indispensable mechanic of that accepted affordance.
• Trigger/input: The student selects an entry in "sitasi terkait".
• Observable result: The Article Details destination renders the cited article's citation bar, reading column, and margin rail.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the cited article cannot be retrieved, a muted ruled note appears in the reading column with a link back to Articles.
• Continuation: The student reads the cited article or returns to results.
• Owner: Article Details (first-party page).

FR-10 — Return to results with search state intact As a Mahasiswa Hukum, I should return from an article to my result list with my query and filters still applied, so that I do not have to reconstruct my search after reading.

• Provenance: required_inference — the accepted Articles destination is described as revisitable, and the accepted Article Details destination is a focused reading view reached from it; preserving the query and filters is the indispensable mechanic that makes the return usable.
• Trigger/input: The student activates the back-to-results affordance on Article Details.
• Observable result: The Articles destination renders with the previous query in the search field, the previous filters active in the rail, and the previous result rows.
• Access state: Anonymous; no identity required.
• Failure/recovery: If the previous result set cannot be restored, Articles renders the full browsable index with the query retained in the search field so the student can re-run it.
• Continuation: The student opens another result or refines the search.
• Owner: Articles (first-party page).

4. User Personas

Mahasiswa Hukum

Product context. An Indonesian law undergraduate working through civil-law coursework, seminar responses, and a thesis or paper. They read late, in long sittings, and they need peer-reviewed civil-law journal articles — not textbooks, not case reports, not commentary — as the raw material of their writing. Their relationship to the platform is episodic and task-driven: they arrive with a topic in mind, hunt for references, and leave with something to read and cite.

Primary goal. Find civil-law journal articles relevant to their current topic and be able to read them.

Distinct accepted responsibilities. The student is the sole accepted human actor and carries every accepted responsibility in the product:

• Arriving at the platform and understanding what body of scholarship it indexes.
• Formulating a search query for civil-law journal articles.
• Browsing the index when they do not yet have a query.
• Narrowing results by subject, year, journal, and type.
• Selecting an article to open.
• Reading the article's full text.
• Copying the article's citation for use in their own writing.
• Following a related citation to chase a reference chain.
• Returning to their result list without losing their search.

Relevant inputs and decisions. The student supplies the search query and the filter selections. Their central decisions are: which query terms capture their topic, which facets to narrow by, which result to open, and whether a found article is worth citing or worth following further.

Interactions with other accepted participants. None. The student is the only accepted human actor; there is no counterparty, reviewer, editor, or administrator in the current scope. The platform itself is the only other party to the interaction.

Observable success. The student finds a relevant civil-law journal article and can read it — and, having read it, can copy its citation and return to their result list without rebuilding their search.

Constraints carried from source. The student is the explicitly named primary user. No account, sign-in, or identity is required of them at any point in the accepted journeys.

5. Core User Flows

Flow A — Arrive, understand the platform, and search

1. The student opens the platform and lands on Landing anonymously.
2. The Landing destination renders the title-page hero: "Hukum Perdata" in Fraunces, set in two ragged lines running the full grid width, with the second line indented past the first.
3. Beneath the headline, a full-width 2px rust rule with a small mustard square at its left terminus acts as the page's baseline. The hand-drawn rust-and-mustard KUHPerdata structure diagram (Orang, Benda, Perikatan, Pembuktian, Daluwarsa) sits to the right of the headline block, overlapping the rust rule by 16px.
4. The student reads the single ~60ch Literata paragraph explaining that this is a curated index of Indonesian civil-law journal articles for students.
5. The student sees the ruled search input sitting directly on the cream ground with a 2px ink underline, the small-caps "CARI ARTIKEL" label above it, and the mustard "Telusuri" button flush right on the same rule.
6. The student types a civil-law query and activates "Telusuri".
7. Observable result: the Articles destination renders the matching articles as dense ruled rows, each with the title in Fraunces, small-caps muted metadata, and one mustard "Buka" affordance, with a small-caps result count above them.
8. Failure/recovery: if the corpus cannot be queried, a muted ruled note appears in the results area while the search field and filter rail remain usable; the student retries.
9. Continuation: the student refines the query, applies filters, or opens a result (Flow B or Flow C).

Flow B — Browse and narrow the index

1. The student arrives at Articles anonymously, either with no query or after clearing the query.
2. The Articles destination renders the full browsable index as ruled rows on cream, with the illustrated open-code-book section opener at the top of the first column.
3. The student surveys the rows, reading titles in Fraunces and metadata (year, journal, author affiliation) in small-caps muted.
4. The student narrows the set using the filter rail — subject, year, journal, and type — presented as a 240px left rail on desktop, a horizontal scrolling chip row at 768px, or a disclosure panel at 375px.
5. Observable result: the result rows and the small-caps result count update to reflect the active filters, and the active-filter summary lists what is applied.
6. Failure/recovery: if no articles match, a muted ruled note states this, lists the active filters, and offers a clear affordance to remove them; the query is retained in the search field for editing.
7. Continuation: the student removes a filter, changes the query, or opens a result (Flow C).

Flow C — Open and read an article

1. From Articles, the student activates the single mustard "Buka" affordance on a result row.
2. Observable result: the Article Details destination renders the article, with the flat #8A3B24 sticky citation bar pinned to the top of the reading column carrying the article's short citation in small caps and the mustard "Salin Sitasi" action.
3. The student reads the article body in the centred 66ch column at 1.7 leading in Literata, with the abstract, keywords, and "sitasi terkait" held in the desktop margin rail in muted small caps.
4. Failure/recovery: if the article cannot be retrieved, a muted ruled note appears in the reading column with a link back to Articles, and the citation bar is suppressed rather than showing a broken citation.
5. Continuation: the student copies the citation (Flow D), follows a related citation (Flow E), or returns to results (Flow F).

Flow D — Copy the citation

1. While reading on Article Details, the student activates "Salin Sitasi" on the sticky rust citation bar.
2. Observable result: the article's short citation is copied, and an inline confirmation appears on the bar.
3. Failure/recovery: if the copy action fails, the citation text remains visible and selectable on the bar so the student can copy it manually.
4. Continuation: the student continues reading or returns to results (Flow F).

Flow E — Follow a related citation

1. While reading on Article Details, the student selects an entry in "sitasi terkait" in the margin rail.
2. Observable result: the Article Details destination renders the cited article's citation bar, reading column, and margin rail.
3. Failure/recovery: if the cited article cannot be retrieved, a muted ruled note appears in the reading column with a link back to Articles.
4. Continuation: the student reads the cited article, copies its citation (Flow D), or returns to results (Flow F).

Flow F — Return to results with search state intact

1. From Article Details, the student activates the back-to-results affordance.
2. Observable result: the Articles destination renders with the previous query in the search field, the previous filters active in the rail, and the previous result rows.
3. Failure/recovery: if the previous result set cannot be restored, Articles renders the full browsable index with the query retained in the search field so the student can re-run it.
4. Continuation: the student opens another result (Flow C) or refines the search (Flow B).

6. Visuals, Colors, and Theme

The creative direction is authoritative for this section. The muse is Frank Chimero; the headline is a warm editorial reading room for civil-law scholarship. The register is scholarly but not institutional-cold — a considered journal issue, not a campus database or a SaaS search console.

Color tokens — light mode

No blue anywhere in the system. No #2563EB, no #4F46E5, no "academic trust blue." The white ground is forbidden: the paper stays cream #F4EDE1 with #FBF6EC panels.

Typography

• Headings — Fraunces, with the SOFT and WONK axes engaged at moderate values. A warm, slightly bookish display serif with visible ink traps. Set in sentence case at 600–700 weight, tight tracking (−0.02em), leading 0.95–1.02. Headlines are the loudest thing on the page and are allowed to run very large. Section openers use the same face at 400 weight and italic for essay-like framing lines.
• Body — Literata.
• Scale — 1.333 modular:
  • display: 48px mobile / 96px tablet / 132px desktop (clamp)
  • h2: 32 / 44 / 56
  • h3: 22 / 26 / 30
  • body: 17 / 18 / 19
  • meta: 13px uppercase, +0.08em tracking
  • caption: 12px
• Measure: body capped at 68ch; article body at 66ch with 1.7 leading.

Forbidden typefaces for headings or body: Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, system-ui.

Shape language

Soft paper geometry. 2px hairline rules in rust and warm grey. 4–6px radii on cards — almost square, never pill. 1px inset borders instead of shadows on list rows. A single recurring motif: a thin rust rule with a small mustard square at its left terminus, used as the section opener. No blobs, no glass, no drop shadows beyond a 2px warm-tinted offset on the one featured card.

Layout

Single-column reading measure as the spine of the site, with a wider editorial grid only where browsing demands it.

• Landing — a stacked editorial sequence: oversized display line, a full-width rust rule, a two-column intro (essay text left, hand-drawn diagram of the civil-law code structure right), then a "recently indexed" list as ruled rows.
• Articles — a left rail of filters (subject, year, journal, type) at 240px on desktop, collapsing to a horizontal scrolling chip row at 768px and a disclosure panel at 375px, with results as dense ruled rows: title in Fraunces, metadata in small-caps muted, one mustard "Buka" affordance per row.
• Article Details — a centred 66ch reading column with a sticky rust citation bar at the top and a margin rail on desktop holding abstract, keywords, and "sitasi terkait".

Imagery

Warm flat illustration and hand-drawn diagram work in the Chimero register — spot art of a law library shelf, an open code book, a fountain pen, a stamped journal cover — drawn in rust, mustard, and ink on cream with visible hand-line quality. One illustrated section opener per major page. Documentary-quality photography is permitted only as a small, warmly-toned inset on the article detail page (journal cover or author portrait), never as a full-bleed hero. No stock students, no laptops-and-lattes, no 3D renders.

Avoid

Any blue or indigo; white ground; Inter/Roboto/Arial/Helvetica/Open Sans/Lato/Poppins/system-ui for headings or body; gradient-blob heroes, glassmorphism, frosted panels, or floating pill search bars; a grid of identical hover-lift cards for search results; stock photography of students, laptops, gavels, or courthouse columns; dashboard chrome (KPI tiles, sparklines, sidebar icon grids, dark-mode toggle theatrics); bouncy or springy easing, cursor-following effects, marquees, and any looping animation.

Viewport integrity

Readable text and controls stay whole at every viewport. 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. Moving and scrollable content (the 768px filter chip row) may cross the container edge by design; every item must become fully readable as it passes. With prefers-reduced-motion, the chip row stops and shows whole items — wrapping into rows or sitting in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling.

7. Signature Design Concept

The title page and the ruled index.

The public entry is composed as a printed title page rather than a centred SaaS stack. On the cream ground #F4EDE1, the word "Hukum Perdata" is set in Fraunces at 48px on mobile rising to 132px on desktop, breaking across two ragged lines that run to the right edge of the 12-column grid, with the second line indented past the first so the composition reads as a printed title page. Beneath it, a full-width 2px rust rule #8A3B24 carries a small mustard square #C98A2E at its left terminus — the page's baseline and the site's recurring section-opener motif.

To the right of the headline block, a hand-drawn rust-and-mustard diagram of the KUHPerdata's book structure — Orang, Benda, Perikatan, Pembuktian, Daluwarsa — sits as a flat illustrated artefact roughly 380×300px, overlapping the rust rule by 16px. It is drawn, not rendered: visible hand-line quality, no 3D, no gradient.

Below the rule, a single ~60ch paragraph in Literata explains that this is a curated index of Indonesian civil-law journal articles for students.

The search field is not a floating pill. It is a ruled input sitting directly on the cream ground with a 2px ink underline, a small-caps "CARI ARTIKEL" label above it, and a single mustard "Telusuri" button flush right on the same rule. No gradient, no blob, no centred stack.

The concept then carries into the corpus itself: search results are never a grid of identical hover-lift cards. They are dense ruled rows on cream, each with the title in Fraunces, small-caps muted metadata, and a rust hairline that extends from 24px to full row width on hover — the only motion in the list. The interface stays quiet so the article remains the subject.

8. Interaction Model & Motion Direction

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

The direction specifies a restrained, page-like tempo with a flat depth ceiling. Nothing loops, nothing follows the cursor, and there is no spring or bounce.

Landing Hero Motion Brief

• Focal subject. The oversized Fraunces "Hukum Perdata" headline in two ragged lines, the full-width rust rule with its mustard square, and the hand-drawn KUHPerdata structure diagram overlapping that rule by 16px.
• Input → transformation → outcome thesis. On first scroll, the landing's ruled rows — the "recently indexed" list — reveal in a single staggered sequence. The input is the student's scroll; the transformation is a staggered reveal of the ruled rows on the cream ground; the outcome is the full recently indexed list, settled and readable. No bounce, no spring, no looping.
• Motion vocabulary. 180–240ms crossfades on route change. A single staggered reveal of the landing's ruled rows on first scroll. A hover state on article rows where the rust rule extends from 24px to full row width. Nothing else moves.
• Composed first frame. The title-page hero at rest: "Hukum Perdata" in Fraunces running the full grid width in two ragged lines, the rust rule and mustard square beneath it as the baseline, the KUHPerdata diagram overlapping the rule at right, the 60ch Literata paragraph below, and the ruled search input with its "CARI ARTIKEL" label and mustard "Telusuri" button flush right on the same rule.
• Reduced-motion state. With prefers-reduced-motion, all reveals resolve instantly and the row-rule expansion becomes a static underline. The 768px filter chip row stops and shows whole items, wrapping into rows or sitting in a horizontally scrollable row whose further items are reached by scrolling.

9. Non-Functional Requirements

NFR-1 — Anonymous access throughout Every accepted destination — Landing, Articles, and Article Details — must be reachable without an account, sign-in, or any identity establishment. No accepted capability creates a durable, actor-specific obligation, entitlement, value transfer, or resumable private state, so no application-owned identity is established and no destination is protected.

• Provenance: explicit (the accepted access requirement for all three pages is none).
• Rationale: The user named students as the audience and article search as the need; nothing in the accepted thread requires identity, and adding it would gate the core capability behind an unaccepted step.

NFR-2 — Readable measure and contrast Body text must be capped at 68ch and article body at 66ch with 1.7 leading. Ink #1F1B16 on the cream ground #F4EDE1 yields approximately 13:1 contrast.

• Provenance: explicit (creative direction).
• Rationale: The product's subject is the article; a comfortable reading measure is the primary quality bar.

NFR-3 — Viewport integrity for readable text and controls Headlines, wordmarks, labels, numbers, cards' text, and controls must 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. Imagery, decoration, and motion may be cropped, bled, rotated, overlapped, or cut as the direction asks, provided they cover no readable text or control.

• Provenance: explicit (creative direction).
• Rationale: The direction's overlapping and bleeding gestures must never cost legibility.

NFR-4 — Reduced-motion compliance With prefers-reduced-motion, all reveals must resolve instantly, the row-rule expansion must become a static underline, and the 768px filter chip row must stop and show whole items — wrapping into rows or sitting in a horizontally scrollable row whose further items are reached by scrolling.

• Provenance: explicit (creative direction).
• Rationale: The direction's restrained motion must degrade to stillness without losing any content.

NFR-5 — No looping or cursor-following motion No looping animation, marquee, ticker, cursor-following effect, or springy/bouncy easing may be used anywhere in the product.

• Provenance: explicit (creative direction).
• Rationale: The direction's tempo is page-like and restrained; the article, not the interface, is the subject.

NFR-6 — Palette and typeface integrity No blue or indigo may appear anywhere in the system. The ground must remain cream #F4EDE1 with #FBF6EC panels — never white. Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui are forbidden for headings and body.

• Provenance: explicit (creative direction).
• Rationale: The generic indigo/blue-on-white SaaS template is explicitly forbidden for this project.

NFR-7 — Search state continuity The Articles destination must preserve the student's query and active filters across navigation to Article Details and back, so that reading an article does not destroy the search that found it.

• Provenance: required_inference — the accepted Articles destination is described as revisitable and the accepted Article Details destination is a focused reading view reached from it; preserving search state is the indispensable mechanic that makes the return usable.
• Rationale: Without it, the accepted "revisitable destination" would not be revisitable in any meaningful sense.

10. Tech Stack

No technology choices were stated by the user. The following are coherent defaults for the accepted scope and are labeled as such.

• Frontend: React with a component-based page structure for the three accepted destinations (Landing, Articles, Article Details). [Default — not specified by user]
• Styling: CSS with custom properties for the palette tokens (#F4EDE1, #FBF6EC, #1F1B16, #8A3B24, #C98A2E, #6E6355), clamp() for the 1.333 modular type scale, and prefers-reduced-motion media queries for the reduced-motion states. [Default — not specified by user]
• Fonts: Fraunces (headings, with SOFT and WONK axes) and Literata (body), self-hosted or served as variable fonts. [Default — not specified by user]
• Backend: Python with FastAPI, serving the article corpus query, filter facets, and single-article retrieval. [Default — not specified by user]
• Storage: A relational database holding the article records (title, authors, journal, volume, issue, year, pages, identifier, abstract, keywords, body, subject, type) and the related-citation links. [Default — not specified by user]
• Packaging and deployment: Docker with docker-compose for local and single-host deployment. Kubernetes is not required by any accepted constraint and is therefore omitted. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• A-1. The article corpus is available to the application as structured records carrying at minimum title, journal, year, author, subject, and type, since the accepted Articles destination filters on exactly those facets. [Assumption — required_inference]
• A-2. Each article record carries a short citation string suitable for the sticky citation bar, and a set of related-citation links suitable for the margin rail's "sitasi terkait". [Assumption — required_inference]
• A-3. The "recently indexed" list on Landing is drawn from the same corpus as the Articles destination. [Assumption — required_inference]
• A-4. The KUHPerdata structure diagram is a static illustrated artefact, not a data-driven visualization. [Assumption — creative direction]

Constraints

• C-1. The active human persona set is closed at exactly one: Mahasiswa Hukum. No additional personas may be introduced.
• C-2. The page contract is closed and ordered at exactly three destinations: Landing, Articles, Article Details. No page may be added, removed, merged, split, renamed, or reordered.
• C-3. All three destinations are anonymously reachable. No account creation, sign-in, profile, or saved-library capability is accepted or may be inferred.
• C-4. No role-based or permission-based differentiation of shared product state exists or may be introduced.
• C-5. No administrative, editorial, submission, publishing, payment, or subscription workflow is accepted.
• C-6. No future-horizon requirements were stated; nothing in this document commits to deferred capabilities.
• C-7. The creative direction's palette, typography, shape language, layout, imagery, and motion rules are binding, including the prohibition on blue/indigo, on a white ground, and on the listed typefaces.
• C-8. The generic indigo/blue-on-white SaaS template is forbidden for this project.

12. Glossary

• Hukum Perdata — Indonesian civil law; the subject domain of the platform and the body of scholarship its article index covers.
• Mahasiswa Hukum — Law student; the single accepted active human persona and the platform's primary user.
• KUHPerdata — Kitab Undang-Undang Hukum Perdata, the Indonesian Civil Code. Its book structure — Orang (persons), Benda (property), Perikatan (obligations), Pembuktian (evidence), Daluwarsa (prescription/limitation) — is used as the illustrated artefact on the Landing destination.
• Artikel jurnal — Journal article; the unit of content the platform indexes, searches, and presents for reading.
• Ruled row — The result-list presentation unit: a dense row on cream with the title in Fraunces, small-caps muted metadata, and a rust hairline that extends from 24px to full row width on hover. Used instead of cards.
• Section opener — The recurring motif of a thin rust rule with a small mustard square at its left terminus, accompanied by a hand-drawn spot illustration at 120–160px aligned to the first column.
• Citation bar — The flat #8A3B24 band pinned to the top of the Article Details reading column, carrying the article's short citation in small caps and the mustard "Salin Sitasi" action.
• Margin rail — The narrow right rail on the Article Details destination (desktop) holding the abstract, keywords, and "sitasi terkait" in muted small caps, keeping the 66ch body column clean.
• Sitasi terkait — Related citations; the reference links in the margin rail that lead to other articles' details.
• Salin Sitasi — Copy citation; the mustard action on the citation bar that copies the article's short citation.
• Telusuri — Search; the mustard submit button on the ruled search input.
• Buka — Open; the single mustard affordance on each result row that opens the article's details.