System Requirements Document for pksk-pendidikan

1. Introduction

pksk-pendidikan is an educational application that explains PKSK — Pentaksiran Kemasukan Sekolah Khusus (Special School Entry Assessment) — the national online test administered by Malaysia's Ministry of Education (KPM) that determines which students qualify for the country's elite boarding schools, including SBP (Sekolah Berasrama Penuh), MRSM, and other specialised institutions.

The product intent is explanatory and reference-oriented: the application is the article a parent reads end to end to understand everything they need to know about PKSK as the gateway to these schools. Its central editorial obligation is to state clearly that PKSK is an online objective-format assessment — not a traditional written exam — and that it is completely different from regular school examinations. It must directly address the widespread misconception that PKSK tests subject knowledge such as Mathematics, Science, or Bahasa Melayu in the traditional sense, and clarify that this assumption is incorrect.

Audience. Two accepted human participants read this material:

• Parent/Guardian — a parent whose child dreams of attending an elite boarding school (SBP, MRSM, or another specialised institution), who needs to understand what PKSK actually is and how it works before deciding and preparing.
• Student Candidate — a student who wants to qualify for a specialised or boarding school and needs to know that PKSK is an online objective-format assessment rather than a traditional written exam, and what it covers.

Both audiences are frequently reading on a phone at night, anxious, Malay-first with English mixed. The application is a calm reference document, not a marketing funnel.

2. System Overview

pksk-pendidikan is a content-led, first-party web application with two anonymously reachable pages. It delivers no test-taking, registration, scoring, or school-application capability; it explains the assessment.

Current delivery. A single first-party front end presents long-form explanatory content across two pages:

• Landing — the anonymous public entry surface. It introduces PKSK, states its role as the gateway to SBP, MRSM, and other specialised institutions, and frames what the application provides.
• Assessment Guide — the explanatory body. It describes PKSK as an online objective-format assessment, distinguishes it from traditional written examinations, and corrects the misconception that PKSK tests traditional Mathematics, Science, or Bahasa Melayu subject knowledge.

Actors. The accepted active-human catalog is closed and consists of exactly two personas: Parent/Guardian and Student Candidate. Both read the same explanatory material; neither has a differentiated permission, private record, or role-scoped view. There are no system, provider, or external actors that a human interacts with in the current scope — the application is self-contained explanatory content.

Accepted behavior. Reading, navigating between the two pages, following the margin rail's table of contents, revealing inline glossary definitions for PKSK, SBP, MRSM, and KPM, reading the "Bukan ini / Ini dia" misconception comparison, and following the five-step Aliran Pentaksiran timeline.

Narrow exclusions. The application does not administer PKSK, does not register candidates, does not collect or score answers, does not report results, does not apply to schools on a user's behalf, and does not provide subject tutoring in Mathematics, Science, or Bahasa Melayu. No account, login, or identity establishment is required or provided.

2a. Product Interpretation and Delivery Boundary

Everything in this document is delivered by the application itself, as first-party custom pages. There is no provider-owned surface, no external destination, and no headless delivery in the current scope.

Access ownership. Both pages are anonymously reachable. No accepted journey requires a human to privately own or resume durable actor-specific state, and no commitment, decision, entitlement, or value transfer is bound to a particular participant — the content is identical for every reader. Consequently no application-owned identity is established, no first-use identity interaction exists, and no protected destination exists. This is a deliberate boundary, not an omission: adding accounts would introduce an adjacent capability the source never accepted.

Current versus future. The current horizon covers the two pages above and the explanatory behavior described in Section 3. Anything beyond explanation — practice questions, candidate registration, results, school applications — is outside the current delivery and is not planned as a current page. Section 11 records this boundary as a constraint rather than a roadmap.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares content_source; the authoritative material is the user-authored requirement thread and the project's creative direction, both of which are carried into Sections 3, 6, 7, and 8 rather than reproduced as a separate factual inventory.

2c. Page Content and Component Coverage

Landing

Information and state. The anonymous public entry surface. It carries the hero statement that PKSK is not an ordinary examination, a short standfirst explaining what the application provides, and the framing that PKSK is the gateway to SBP, MRSM, and other specialised institutions. No user-specific state exists; the page is identical for every visitor.

Primary action. Read the hero and follow the single terracotta underlined link "Ketahui apa yang sebenarnya diuji →" into the Assessment Guide.

Supporting actions. Follow the margin rail's table of contents to any section; hover or focus an inline glossary term (PKSK, SBP, MRSM, KPM) to reveal its definition card; scroll to advance the progress indicator.

Domain entities. PKSK (the assessment), KPM (the administering ministry), SBP, MRSM, and other specialised institutions (the destination schools), and the two reader personas.

Component responsibilities.

• Editorial hero — asymmetric two-part composition: left seven columns hold the headline "PKSK bukan peperiksaan biasa." in Fraunces at clamp(44px, 8.5vw, 92px), stacked in three ragged lines, with a single 1px pine rule beneath and a roughly 40-word Literata standfirst; right five columns bleed off the right edge with the hand-drawn illustration.
• Hero illustration — a hand-drawn cream-and-pine depiction of an online objective test screen with a crossed-out Mathematics/Science/Bahasa Melayu book stack beside it; draws itself once on load via SVG stroke-dashoffset.
• Gateway link — the single terracotta accent in the hero, an underlined text link into the Assessment Guide.
• Margin rail — oversized pine section numerals (01–06) pinned on desktop, marking the current section; collapses to a 3px sticky scroll-progress rule under the header on mobile.
• Inline glossary — pine-underlined terms revealing a small definition card on hover and focus.
• Section openers — full-bleed hand-drawn diagrams with the heading overlapping the lower-left corner at clamp(30px, 5vw, 52px).

States.

• Loading — the hero illustration draws once over roughly 900ms ease-out; text is present immediately and never blocked by the drawing.
• Empty — not applicable; the page has no user-supplied or fetched collection.
• Success — the reader reaches the standfirst and the gateway link, and can move into the Assessment Guide.
• Error — if the illustration fails to load, the headline, standfirst, rule, and gateway link remain fully readable and the layout holds; the illustration is decorative and never carries required meaning.
• Recovery — the reader can continue reading and navigate to the Assessment Guide regardless of illustration state.

Assessment Guide

Information and state. The explanatory body of the application. It states that PKSK is an online objective-format assessment, that it is not a traditional written exam, and that it is completely different from regular school examinations. It presents the misconception correction — that PKSK does not test subject knowledge such as Mathematics, Science, or Bahasa Melayu in the traditional sense — and the five-step Aliran Pentaksiran timeline. No user-specific state exists.

Primary action. Read the explanation end to end and understand what PKSK actually assesses.

Supporting actions. Compare the "Bukan ini / Ini dia" columns; follow the Aliran Pentaksiran timeline; reveal inline glossary definitions; use the margin rail to jump between sections; return to the Landing page.

Domain entities. PKSK, KPM, SBP, MRSM, other specialised institutions, the online objective-format assessment, the traditional written examination it is contrasted with, the traditional subject areas Mathematics, Science, and Bahasa Melayu (named only as what is not tested), and the five assessment stages.

Component responsibilities.

• Misconception comparison block — the repeating "Bukan ini / Ini dia" two-column comparison: left column on cream with struck-through subject names in muted grey, right column on near-white with the actual assessed domains in pine, separated by a vertical terracotta rule.
• Aliran Pentaksiran strip — a hand-drawn horizontal timeline of five steps with square numerals; becomes a vertical stacked list below 768px, never a grid of identical cards.
• Section openers — full-bleed hand-drawn diagrams with overlapping headings, alternating prose → diagram → prose → pull-quote.
• Margin rail / table of contents — pinned section numerals on desktop, 3px progress rule on mobile.
• Inline glossary — PKSK, SBP, MRSM, KPM as pine-underlined terms with hover/focus definition cards.
• Reading column — single column, max 720px, Literata at 18–19px with 1.65 line-height and a 62–68 character measure.

States.

• Loading — section openers fade up 12px over 400ms ease as they enter view; the margin rail's active marker slides. Content is readable without motion.
• Empty — not applicable; no user-supplied or fetched collection.
• Success — the reader can state that PKSK is an online objective-format assessment, not a traditional written exam, and that it does not test traditional Mathematics, Science, or Bahasa Melayu subject knowledge.
• Error — if a diagram fails to load, its heading, surrounding prose, and the comparison block remain fully readable; no required meaning lives in an image alone.
• Recovery — the reader can re-read any section via the margin rail, or return to the Landing page, without losing position in the argument.

3. Functional Requirements

Each story point below is a distinct current requirement. Provenance is marked explicit (stated in the authoritative thread), basic_default (accepted default), or required_inference (indispensable mechanics only).

FR-1 — Explain what PKSK is. explicit As a Parent/Guardian, I should read a clear explanation of what PKSK is, so that I understand the assessment my child faces.

• Trigger/input: the reader opens the application.
• Observable result: the reader can state that PKSK stands for Pentaksiran Kemasukan Sekolah Khusus (Special School Entry Assessment) and is the national online test administered by Malaysia's Ministry of Education (KPM).
• Access state: anonymous; no identity required.
• Failure/recovery: if content fails to render, the reader can reload and re-read; no state is lost.
• Continuation: the reader proceeds to what PKSK determines.

FR-2 — Explain what PKSK determines. explicit As a Parent/Guardian, I should understand that PKSK determines which students qualify for Malaysia's elite boarding schools, so that I know what is at stake.

• Trigger/input: reading the Landing and Assessment Guide content.
• Observable result: the reader can name SBP (Sekolah Berasrama Penuh), MRSM, and other specialised institutions as the schools PKSK governs entry to.
• Access state: anonymous.
• Failure/recovery: glossary definitions for SBP and MRSM are available inline so an unfamiliar acronym never blocks comprehension.
• Continuation: the reader continues to the assessment format.

FR-3 — Frame PKSK as the gateway. explicit As a Parent/Guardian, I should see PKSK framed as the gateway to these schools, so that I understand its role if my child dreams of attending one.

• Trigger/input: reading the Landing page.
• Observable result: the reader understands that PKSK is the entry route, not an optional extra.
• Access state: anonymous.
• Failure/recovery: the framing is carried in text, not only in imagery, so it survives any image failure.
• Continuation: the reader follows the gateway link into the Assessment Guide.

FR-4 — State that PKSK is an online objective-format assessment. explicit As a Student Candidate, I should learn that PKSK is an online objective-format assessment, so that I know what kind of test I am preparing for.

• Trigger/input: reading the Assessment Guide.
• Observable result: the reader can state that PKSK is delivered online and uses objective-format items.
• Access state: anonymous.
• Failure/recovery: the statement appears in prose and is reinforced by the hero illustration of an online objective test screen; if the illustration fails, the prose still carries it.
• Continuation: the reader continues to the contrast with written exams.

FR-5 — State that PKSK is not a traditional written exam. explicit As a Student Candidate, I should learn that PKSK is not a traditional written exam, so that I do not prepare in the wrong way.

• Trigger/input: reading the Assessment Guide.
• Observable result: the reader can state that PKSK is not a traditional written examination.
• Access state: anonymous.
• Failure/recovery: the contrast is stated in text and repeated in the comparison block.
• Continuation: the reader continues to how PKSK differs from school examinations.

FR-6 — State that PKSK is completely different from regular school examinations. explicit As a Parent/Guardian, I should understand that PKSK is completely different from regular school examinations, so that I do not map my child's school experience onto it.

• Trigger/input: reading the Assessment Guide.
• Observable result: the reader can state that PKSK is completely different from regular school examinations.
• Access state: anonymous.
• Failure/recovery: the distinction is carried in prose and in the comparison block.
• Continuation: the reader continues to the misconception correction.

FR-7 — Correct the subject-knowledge misconception. explicit As a Parent/Guardian, I should have the misconception that PKSK tests subject knowledge like Mathematics, Science, or Bahasa Melayu in the traditional sense directly addressed and corrected, so that I stop preparing my child for the wrong exam.

• Trigger/input: reading the "Bukan ini / Ini dia" comparison block in the Assessment Guide.
• Observable result: the reader can state that assuming PKSK tests traditional Mathematics, Science, or Bahasa Melayu subject knowledge is incorrect.
• Access state: anonymous.
• Failure/recovery: the correction is delivered as text in both columns, so it survives any styling or image failure; the struck-through subject names remain legible as text.
• Continuation: the reader continues to what PKSK actually assesses.

FR-8 — Explain everything a parent needs to know. explicit As a Parent/Guardian, I should be able to read everything I need to know about PKSK in one place, so that I do not have to assemble the picture from scattered sources.

• Trigger/input: reading the Landing page and the Assessment Guide in sequence.
• Observable result: the reader reaches the end of the material having encountered the definition, the gateway role, the format, the contrast with written exams, and the misconception correction.
• Access state: anonymous.
• Failure/recovery: the margin rail lets the reader re-enter any section without restarting.
• Continuation: the reader can revisit any section or return to the Landing page.

FR-9 — Navigate the explanation by section. required_inference As a Parent/Guardian, I should be able to move between sections of the explanation, so that I can re-read the part I care about without scrolling through everything.

• Trigger/input: selecting a section numeral in the margin rail, or scrolling on mobile.
• Observable result: the reader arrives at the chosen section and the rail marks it as current.
• Access state: anonymous.
• Failure/recovery: if the rail is unavailable, the full document remains linearly readable and no content is reachable only through the rail.
• Continuation: the reader continues reading from the chosen section.

FR-10 — Understand unfamiliar terms without leaving the page. required_inference As a Parent/Guardian, I should be able to look up PKSK, SBP, MRSM, and KPM without leaving the page, so that an unfamiliar acronym never breaks my reading.

• Trigger/input: hovering or focusing a pine-underlined glossary term.
• Observable result: a small definition card appears with the term's meaning.
• Access state: anonymous.
• Failure/recovery: if the card cannot be shown, the term remains readable in place and the surrounding prose still explains it.
• Continuation: the reader resumes reading at the same point.

FR-11 — Follow the assessment flow. required_inference As a Student Candidate, I should be able to follow the five-step Aliran Pentaksiran timeline, so that I understand the sequence of the assessment.

• Trigger/input: reading the Aliran Pentaksiran strip.
• Observable result: the reader can name the five steps in order; on viewports below 768px the strip is a vertical stacked list and every step remains fully readable.
• Access state: anonymous.
• Failure/recovery: the steps are text with square numerals, not image-only, so they remain readable if the drawn line fails.
• Continuation: the reader continues to the next section.

FR-12 — Read comfortably on a phone at night. required_inference As a Parent/Guardian, I should be able to read the whole explanation comfortably on a phone, so that I can finish it in the circumstances I actually read in.

• Trigger/input: opening the application at a narrow viewport.
• Observable result: the reading column, headline, standfirst, labels, numerals, and controls stay entirely inside the viewport and their containers at 375px, 768px, and 1280px, wrapping or scaling to fit, with no element covering any part of them.
• Access state: anonymous.
• Failure/recovery: if motion is reduced, the hero diagram is fully drawn and all content is static and readable.
• Continuation: the reader finishes the material.

4. User Personas

The active-human catalog is closed and contains exactly these two personas. Both are anonymous readers; neither has an account, a private record, or a differentiated permission.

Parent/Guardian

Product context. A parent in Malaysia whose child dreams of attending an elite boarding school — SBP, MRSM, or another specialised institution. They have likely heard the acronym PKSK and may already hold a wrong mental model of it. They are often reading on a phone at night, anxious, Malay-first with English mixed, and they are looking for a reference document they can trust rather than a sales page.

Primary goal. To understand what PKSK actually is and how it works, so they can decide and prepare correctly for their child's entry.

Distinct accepted responsibilities. The Parent/Guardian is the reader for whom the misconception correction matters most. Their recurring responsibility is reading explanatory content about the assessment — specifically, having the assumption that PKSK tests traditional Mathematics, Science, or Bahasa Melayu subject knowledge named and corrected — and understanding PKSK's role as the gateway to SBP, MRSM, and other specialised institutions. They are also the reader most likely to need the inline glossary, because SBP, MRSM, and KPM are terms they may meet here for the first time.

Relevant inputs and decisions. Their input is attention and reading time; their decision is how to prepare their child, which depends on correctly understanding that PKSK is an online objective-format assessment rather than a subject exam.

Interactions with other accepted participants. None directly. The Parent/Guardian and the Student Candidate read the same material independently; there is no handoff, no shared record, and no state passed between them.

Observable success. The parent can state, in their own words, that PKSK is an online objective-format assessment, that it is not a traditional written exam, that it is completely different from regular school examinations, and that assuming it tests traditional Mathematics, Science, or Bahasa Melayu subject knowledge is incorrect.

Student Candidate

Product context. A student, around twelve years old, who wants to qualify for a specialised or boarding school. They may have been told PKSK is "an exam" and may be quietly worried it will test school subjects they find hard. They need reassurance delivered plainly, not a wall of institutional language.

Primary goal. To understand the assessment format so they can prepare appropriately for the entry assessment that determines qualification.

Distinct accepted responsibilities. The Student Candidate's responsibility is narrower and more concrete than the parent's: learning that PKSK is an online objective-format assessment rather than a traditional written exam, and what it covers. They are the reader for whom the Aliran Pentaksiran timeline and the hero illustration of an online objective test screen do the most work, because those make the format concrete rather than abstract.

Relevant inputs and decisions. Their input is reading the format explanation and the five-step timeline; their decision is how to prepare, which depends on knowing the assessment is objective-format and online.

Interactions with other accepted participants. None directly. They read the same pages as the Parent/Guardian, independently and anonymously.

Observable success. The candidate can state that PKSK is an online objective-format assessment, not a traditional written exam, and can name the five steps of the assessment flow in order.

What makes these two roles different. The Parent/Guardian's work is de-escalating a wrong belief they already hold — the misconception correction is aimed at them, and their success is measured by whether they abandon the subject-exam model. The Student Candidate's work is forming a correct expectation from scratch — the format explanation and the timeline are aimed at them, and their success is measured by whether they know what kind of test they are walking into. Same content, different burden of understanding.

5. Core User Flows

Flow A — Parent/Guardian reads everything they need to know about PKSK

1. Starting context. The parent has heard that PKSK is the gateway to SBP, MRSM, or another specialised institution, and opens the application on a phone at night. They are anonymous; no account exists and none is requested.
2. Landing — first impression. The Landing page loads. The headline "PKSK bukan peperiksaan biasa." is present immediately in Fraunces at clamp(44px, 8.5vw, 92px), stacked in three ragged lines, with a 1px pine rule beneath it and a roughly 40-word Literata standfirst. The hero illustration of an online objective test screen with a crossed-out Mathematics/Science/Bahasa Melayu book stack draws itself once over roughly 900ms and then stops.
3. Landing — reading the framing. The parent reads the standfirst and understands that PKSK is the national online test administered by KPM that determines which students qualify for these schools, and that this application explains everything they need to know.
4. Landing — the single accent. The parent notices exactly one terracotta element in the hero: the underlined link "Ketahui apa yang sebenarnya diuji →". They select it.
5. Assessment Guide — the format. The Assessment Guide opens. The parent reads that PKSK is an online objective-format assessment, not a traditional written exam, and that it is completely different from regular school examinations.
6. Assessment Guide — the correction. The parent reaches the "Bukan ini / Ini dia" comparison block. The left column, on cream, shows Mathematics, Science, and Bahasa Melayu struck through in muted grey. The right column, on near-white, shows the actual assessed domains in pine. A vertical terracotta rule separates them. The parent's assumption is named and corrected in place.

7. Assessment Guide — the flow. The parent follows the Aliran Pentaksiran strip, a hand-drawn horizontal timeline of five steps with square numerals. On their phone the strip is a vertical stacked list, and every step is fully readable.
8. Assessment Guide — a term they do not know. The parent hovers or focuses SBP, MRSM, or KPM. A small definition card fades in over 150ms. They read it and resume at the same point without leaving the page.
9. Assessment Guide — re-reading a section. The parent selects a section numeral in the margin rail (on mobile, they scroll and the 3px progress rule advances). The rail marks the current section and they re-read that part.
10. Observable result. The parent can state that PKSK is an online objective-format assessment, that it is not a traditional written exam, that it is completely different from regular school examinations, and that assuming it tests traditional Mathematics, Science, or Bahasa Melayu subject knowledge is incorrect.
11. Failure and recovery. If the hero illustration fails to load, the headline, standfirst, rule, and gateway link remain fully readable and the layout holds. If a section diagram fails, its heading and surrounding prose still carry the meaning. If the glossary card cannot be shown, the term remains readable in place. In every case the parent continues reading without losing their place.
12. Continuation. The parent returns to the Landing page or re-enters any section via the margin rail. With prefers-reduced-motion, the diagram is fully drawn, section openers do not fade, and everything is static and readable.

Flow B — Student Candidate learns what kind of test PKSK is

1. Starting context. A twelve-year-old candidate has been told PKSK is "an exam" and opens the application, possibly on a shared family phone. They are anonymous.
2. Landing — the headline does the work first. The candidate reads "PKSK bukan peperiksaan biasa." before anything else. The statement is in text, so it lands even if the illustration never draws.
3. Landing — the picture makes it concrete. The candidate sees the hand-drawn illustration: an online objective test screen, and beside it a stack of Mathematics, Science, and Bahasa Melayu books crossed out. The format becomes visual, not just verbal.
4. Assessment Guide — the format. The candidate reads that PKSK is an online objective-format assessment rather than a traditional written exam.
5. Assessment Guide — the timeline. The candidate follows the five-step Aliran Pentaksiran timeline with square numerals, and can name the five steps in order. On a narrow screen the steps stack vertically and each remains fully readable.
6. Assessment Guide — the correction. The candidate reads the "Bukan ini / Ini dia" block and understands that the subject books on the left are not what PKSK tests.
7. Observable result. The candidate can state that PKSK is an online objective-format assessment, not a traditional written exam, and can name the five assessment steps in order.
8. Failure and recovery. If the timeline's drawn line fails to render, the five steps remain as text with their square numerals and stay readable in order. If motion is reduced, the timeline is static and complete.
9. Continuation. The candidate re-reads the timeline or returns to the Landing page. No result, score, or registration follows — the application explains the assessment and nothing more.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. It names Frank Chimero as the muse and the headline idea: PKSK explained like a well-set essay, not a brochure — warm editorial clarity for a Malaysian public education information surface, read by anxious parents on phones at night and by twelve-year-old candidates who need reassurance.

Colour tokens — light mode.

Colour proportion. 70% cream, 20% near-white panels, 7% pine, 3% terracotta. No blue anywhere — no #0057FF, #2563EB, or #4F46E5 family, no bootstrap-blue CTAs or links. The cream ground must remain the dominant field; white or near-white as the page base is forbidden.

Typography.

• Headings: Fraunces, weight 500–600, soft optical sizing, slight negative tracking at display sizes. Sentence case, never all-caps.
• Body: Literata at 18–19px, line-height 1.65, measure 62–68 characters.
• Scale: 1.333 modular — hero clamp(44px, 8.5vw, 92px); section opener clamp(30px, 5vw, 52px); subhead 22px → 28px; body 18px → 19px; caption/label 14px → 15px with 0.04em tracking.
• Forbidden: Inter, Roboto, Arial, Helvetica, Poppins, Open Sans, Lato, and system-ui for headings or body.

Shape language. Almost no radius — 2px on inputs, 0 on panels, so the page reads as printed matter rather than app chrome. Structure comes from 1px hairline rules in pine at 25% opacity, thin vertical column markers, and small square numerals. One deliberate exception: illustrated callout blocks carry a soft 12px top-left corner, like a page dog-ear. Rounded 16–24px card radii and drop-shadowed tiles are forbidden.

Spacing rhythm. Single reading column, max 720px, centred on a wider 1200px page, with a persistent left margin rail holding section numerals and a thin progress rule. Long-form rhythm alternates prose → diagram → prose → pull-quote.

Imagery style. Warm flat illustration in the cream/pine/terracotta palette: a child at a laptop with a clock, a stack of "not this" subject books crossed out, a simple five-part assessment diagram, an abstract school-gate illustration. Hand-drawn diagrams with slightly imperfect lines, plus one documentary-style photograph of a Malaysian school corridor treated in warm duotone for the boarding-school section. No stock smiling students in uniforms, no 3D blobs, no gradient meshes.

7. Signature Design Concept

The margin rail as the spine of an essay.

The public entry is composed as a printed essay spread rather than a landing page. On the Landing page, the hero is asymmetric: the left seven columns hold "PKSK bukan peperiksaan biasa." in Fraunces at clamp(44px, 8.5vw, 92px), stacked in three ragged lines that span the viewport width, with a single 1px pine rule beneath it and a roughly 40-word Literata standfirst. The right five columns bleed off the right edge with the hand-drawn illustration of an online objective test screen and the crossed-out Mathematics/Science/Bahasa Melayu book stack, drawing itself once on load. The terracotta accent appears exactly once in the hero: the underlined link "Ketahui apa yang sebenarnya diuji →" under the standfirst. The background is flat cream — no gradient, no glow, no floating cards.

Running down the left edge is the signature element: a margin rail of oversized pine section numerals (01–06) that stays pinned on desktop and marks the current section as the reader moves. On mobile it collapses to a 3px sticky progress rule under the header. The rail is what makes the application read as a reference document with a spine, rather than a scroll of unrelated blocks.

The concept's second move is the misconception correction, shipped as a repeating "Bukan ini / Ini dia" two-column comparison block: left column on cream with Mathematics, Science, and Bahasa Melayu struck through in muted grey; right column on near-white with the actual assessed domains in pine; a vertical terracotta rule between them. This is the one place where the accent colour is allowed to do structural work, because this is the one argument the application exists to win.

Section openers break the reading measure: a full-bleed hand-drawn diagram at 100vw with the heading overlapping its lower-left corner at clamp(30px, 5vw, 52px). The Aliran Pentaksiran strip is drawn as a hand-drawn horizontal timeline with square numerals, becoming a vertical stacked list below 768px — never a grid of identical cards. Inline glossary terms (PKSK, SBP, MRSM, KPM) are pine-underlined and reveal a small definition card on hover or focus, so a parent never leaves the page to understand a term.

Every element above recomposes accepted content, states, and controls. Nothing here introduces a new behaviour, page, or destination.

8. Interaction Model & Motion Direction

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

The direction specifies a restrained tempo with a flat hero and a composed hero drama; the interaction model is therefore written as Static (direction) in substance — the page does not depend on motion, and every state is complete without it.

Landing Hero Motion Brief.

• Focal subject: the hand-drawn cream-and-pine illustration of an online objective test screen, with a crossed-out Mathematics/Science/Bahasa Melayu book stack beside it, bleeding off the right edge of the hero.
• Input → transformation → outcome thesis: on load, the illustration's strokes draw themselves once via SVG stroke-dashoffset over roughly 900ms ease-out, then stop permanently. The transformation is from an undrawn outline to a complete diagram; the outcome is that the reader sees, in one composed frame, that PKSK is an online objective test and that the subject books are not it. No accepted behaviour is added — the drawing only reveals the accepted contrast.
• Motion vocabulary: one purposeful loop that runs once and stops; gentle and editorial. No bounce, no parallax, no particles.
• Composed first frame: flat cream ground; headline "PKSK bukan peperiksaan biasa." in Fraunces at clamp(44px, 8.5vw, 92px) stacked in three ragged lines on the left seven columns; a 1px pine rule beneath; the ~40-word Literata standfirst; the single terracotta underlined link "Ketahui apa yang sebenarnya diuji →"; the illustration entering from the right five columns, bleeding off the edge. The headline, standfirst, rule, and link are fully readable in the first frame, before and independently of the drawing.
• Reduced-motion state: with prefers-reduced-motion, the diagram is rendered fully drawn and static, section openers do not fade up, the margin rail's active marker does not slide, and the glossary card appears without a fade. All content remains readable and every control remains usable.

Scroll behaviour. Section openers fade up 12px with a 400ms ease as they enter view, and the margin rail's active marker slides to the current section. Hover or focus on a glossary term reveals a small definition card with a 150ms fade. On mobile the rail becomes a 3px sticky progress rule under the header.

Readability under motion. Headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their containers at 375px, 768px, and 1280px, wrapping or scaling to fit, with no element covering any part of them. Imagery and decoration may bleed, crop, or overlap exactly as the direction asks, provided they cover no readable text or control.

9. Non-Functional Requirements

NFR-1 — Readability of long-form text. explicit (creative direction) Body text is Literata at 18–19px with 1.65 line-height and a 62–68 character measure, on #FFFDF8 panels against #1E1B16 text, reaching approximately 15:1 contrast. Rationale: the application is a reference document read end to end by non-specialists, often on a phone at night.

NFR-2 — No blue, no white ground. explicit (creative direction) No blue or indigo anywhere in the palette, and the cream #F7F1E6 must remain the dominant field. Rationale: the direction explicitly forbids the generic indigo/blue-on-white SaaS template for this project.

NFR-3 — Responsive integrity of readable content. explicit (creative direction) At 375px, 768px, and 1280px, all headlines, labels, numerals, card text, and controls remain entirely inside the viewport and their containers, wrapping or scaling to fit, with nothing covering them. Rationale: the primary reading device is a phone.

NFR-4 — Reduced-motion support. explicit (creative direction) With prefers-reduced-motion, everything is static and the hero diagram is fully drawn. Rationale: motion is decorative here; no meaning may depend on it.

NFR-5 — No motion beyond the specified vocabulary. explicit (creative direction) No bounce, no parallax, no particles. The hero draws once and stops. Rationale: the direction sets a restrained tempo for an anxious audience.

NFR-6 — Content survives asset failure. required_inference Every required statement — that PKSK is an online objective-format assessment, that it is not a traditional written exam, that it differs completely from school examinations, and that the subject-knowledge assumption is incorrect — is carried in text, not in an image alone. Rationale: the application's entire purpose is explanatory; a failed illustration must not remove the explanation.

NFR-7 — Anonymous access. explicit (planning scope) Both pages are reachable without an account. No identity establishment, login, or session continuity is provided or required. Rationale: no accepted journey requires durable actor-specific state or binds a commitment to a particular participant.

NFR-8 — No data collection. required_inference The application collects no personal data, because no accepted capability requires it. Rationale: the only accepted behaviour is reading explanatory content.

10. Tech Stack

No technology was specified by the user. The following are coherent defaults for a two-page, content-led, first-party web application, labelled as defaults.

• Frontend: React with a component-based page structure for the Landing and Assessment Guide pages. [Default — not specified by user]
• Styling: CSS with custom properties for the palette tokens in Section 6, clamp() for the type scale, and SVG for the hand-drawn hero and section diagrams. [Default — not specified by user]
• Fonts: Fraunces and Literata, self-hosted or loaded from a font service. [Default — not specified by user]
• Backend: None required for the current scope. The application serves static explanatory content; no API, database, or server-side processing is needed by any accepted requirement. [Default — not specified by user]
• Storage: None required. No user data is collected or persisted. [Default — not specified by user]
• Deployment: Static hosting of the built front end. Docker, docker-compose, and Kubernetes are not required for this scope. [Default — not specified by user]

If a backend is later introduced, it should be a single shared service rather than a new container per feature; nothing in the current accepted scope calls for one.

11. Assumptions and Constraints

Assumptions.

• A-1. The application is explanatory only. It does not administer PKSK, register candidates, collect or score answers, report results, or apply to schools on a user's behalf. [Assumption — derived from the accepted requirement thread, which asks for an article explaining PKSK]
• A-2. The content is presented in Malay-first prose with English mixed, matching the audience described in the creative direction. [Assumption — from the creative direction]
• A-3. The five-step Aliran Pentaksiran timeline is a presentation of the assessment flow within the explanatory content; the specific step labels are not supplied by the authoritative source and must not be invented as new product facts. [Assumption — the direction names the strip and its five steps but not their content]
• A-4. The documentary-style photograph of a Malaysian school corridor is used in the boarding-school section as described by the direction. [Assumption — from the creative direction]

Constraints.

• C-1. No blue or indigo anywhere; the cream #F7F1E6 ground must dominate. The generic indigo/blue-on-white SaaS template is forbidden for this project. explicit
• C-2. Headings use Fraunces; body uses Literata. Inter, Roboto, Arial, Helvetica, Poppins, Open Sans, Lato, and system-ui are excluded for headings and body. explicit
• C-3. No gradient-blob heroes, glassmorphism panels, floating card grids with hover-lift, centred headline-plus-button hero compositions, stock photography of smiling students in uniforms, countdown-timer urgency, "limited seats" banners, or exam-fear marketing tone. explicit
• C-4. No rounded 16–24px card radii or drop-shadowed tiles. explicit
• C-5. Readable text and controls stay whole at every viewport; where the direction asks for a crop or bleed, the gesture is carried by imagery or decoration instead. explicit
• C-6. Both pages are anonymously reachable; no account, login, or identity establishment is added. explicit (planning scope)
• C-7. The active-human catalog is closed at exactly two personas: Parent/Guardian and Student Candidate. No additional persona is created. explicit (planning scope)
• C-8. The page inventory is closed at exactly two pages: Landing and Assessment Guide. No page is added, removed, merged, split, renamed, or reordered. explicit (planning scope, page_contract_version=1)
• C-9. No differentiated permissions, RBAC, or role-based visibility exists, because no accepted source or planning fact establishes differentiated control or visibility over shared product state. explicit (planning scope)

Future horizon. Nothing in the authoritative thread requests practice questions, candidate registration, results reporting, school applications, or subject tutoring. These are outside the current delivery and are not planned as current pages or requirements. If they are ever requested, they would be new requirements rather than extensions of the two pages defined here.

12. Glossary

• PKSK — Pentaksiran Kemasukan Sekolah Khusus (Special School Entry Assessment). The national online test administered by Malaysia's Ministry of Education (KPM) that determines which students qualify for the country's elite boarding schools.
• KPM — Kementerian Pendidikan Malaysia, the Ministry of Education, which administers PKSK.
• SBP — Sekolah Berasrama Penuh, a category of elite fully residential boarding school that PKSK governs entry to.
• MRSM — Maktab Rendah Sains MARA, a category of specialised residential school that PKSK governs entry to.
• Specialised institutions — other elite or specialised schools, beyond SBP and MRSM, whose entry is determined by PKSK.
• Online objective-format assessment — the format of PKSK: delivered online, using objective-format items. It is not a traditional written exam.
• Traditional written exam — the examination format PKSK is explicitly contrasted with; PKSK is completely different from regular school examinations.
• Subject-knowledge misconception — the incorrect assumption that PKSK tests subject knowledge such as Mathematics, Science, or Bahasa Melayu in the traditional sense. The application exists in part to correct it.
• Bukan ini / Ini dia — the two-column comparison block that names what PKSK does not test (left, struck through) and what it actually assesses (right, in pine).
• Aliran Pentaksiran — the five-step hand-drawn timeline presenting the assessment flow.
• Margin rail — the pinned column of oversized pine section numerals (01–06) that marks the current section on desktop and collapses to a 3px progress rule on mobile.