System Requirements Document for portal-snpmb-id

1. Introduction

This document specifies the system requirements for portal-snpmb-id, a public website to be built and delivered at the existing portal address https://portal.snpmb.id/.

The product intent is a single, publicly reachable entry surface for the national student admission portal branded Portal SNPMB 2026. The site presents the portal identity and its motivational tagline, and it directs arriving visitors to the portal's content and services — most importantly the start of new-student registration, the sign-in path for visitors who already hold an account, the latest announcements, and the UTBK registration page.

The audience is prospective new university students — specifically Indonesian high-school students preparing to register for state universities through the SNBP (Seleksi Nasional Berdasarkan Prestasi) and SNBT (Seleksi Nasional Berdasarkan Tes) pathways — together with the families and helpers who accompany them through that process.

The website is a presentation and routing surface. It does not itself perform registration, authentication, announcement publishing, or UTBK registration; those remain with their existing owners at their existing addresses.

2. System Overview

The current delivery is a single first-party custom page, Landing, served anonymously at https://portal.snpmb.id/. The Landing page is the website: it carries the portal wordmark, the tagline, the two canonical calls to action, the announcement band, the registration-flow explanation, and the FAQ, and it routes visitors outward to the portal's existing services.

Actors

• Portal Visitor (active human persona) — a prospective new student or accompanying family member who arrives at the portal address and uses the public entry surface to reach the site's content and services.
• Outbound destinations (non-persona, external owners) — reg.snpmb.id (registration start), the account sign-in destination for returning visitors, snpmb.id (Beranda SNPMB announcements), and pendaftaran-utbk.snpmb.id (UTBK registration). These are external destinations owned outside this website; the website links to them and does not implement their behavior.

Accepted behavior

• Present the Portal SNPMB 2026 identity and tagline at the portal address.
• Offer the primary call to action "Mulai Pendaftaran", which routes the visitor to reg.snpmb.id.
• Offer the secondary call to action "Sudah Memiliki Akun? Masuk", which routes a returning visitor to the account sign-in destination.
• Provide access to the latest announcements via Beranda SNPMB at snpmb.id.
• Provide a direct reference to the UTBK registration page at pendaftaran-utbk.snpmb.id.
• Explain the registration flow and answer common questions so a visitor can decide which action applies to them.

Ownership

All accepted human-facing behavior on this website is owned by the single first-party page Landing, which is anonymously reachable. No application-owned identity, account, session, or permission model is introduced: the website has no protected destinations, and the sign-in path belongs to the external account destination, not to this site.

Narrow exclusions

• The website does not implement registration, account creation, sign-in, credential handling, or account recovery.
• The website does not implement announcement authoring or publishing.
• The website does not implement UTBK registration.
• The website does not introduce any additional page, route, or destination beyond the Landing page.

2a. Product Interpretation and Delivery Boundary

What is being delivered. A public website at the address https://portal.snpmb.id/. It is the front door of the SNPMB 2026 portal: it states who the portal is for, offers the two actions a visitor actually needs, and sends them to the correct existing service.

Who owns what. This website owns presentation, orientation, and routing. Everything a visitor does after choosing an action — creating a registration, signing in to an existing account, reading the full announcement feed, or registering for UTBK — happens on the destination that already owns that work:

Access boundary. The Landing page is public and anonymous. A visitor needs no account to read the portal identity, understand the registration flow, read the FAQ, or follow any of the four canonical links. Because the website holds no visitor-specific state, no identity establishment or verification step is required to use it, and no destination on this website is protected.

Current vs. future. Only the Landing page and the behavior described in this document are current. Nothing in this document commits the project to additional pages, an application account system, or any capability owned by the external destinations.

2c. Page Content and Component Coverage

Landing

The single public page of the website, served anonymously at https://portal.snpmb.id/. It is a single-column, generously margined composition capped at 1120px, with a two-part hero, a curved announcement band, a numbered registration-flow sequence, a quiet FAQ accordion, and a footer carrying the four canonical links.

Information and state

• Portal identity: the wordmark "Portal SNPMB 2026".
• Tagline: "Raih masa depanmu di Portal SNPMB", set as the display headline.
• A short supporting line in body type explaining that this is the entry point for SNBP and SNBT registration.
• A live deadline chip above the headline: "SNBP 2026 · tutup dalam 14 hari", with tabular numerals counting the days remaining until SNBP close.
• The four canonical destinations and what each one is for.
• The registration flow, expressed as an ordered sequence of numbered steps.
• Frequently asked questions with their answers.
• No visitor-specific state is held; the page renders the same content for every visitor.

Primary actions

• "Mulai Pendaftaran" — solid sage-pine pill; routes the visitor to reg.snpmb.id. This is the primary action for a visitor who has not yet registered.
• "Sudah Memiliki Akun? Masuk" — terracotta-outline pill; routes a returning visitor to the account sign-in destination. This is the secondary action and is deliberately a different color from the primary so new and returning visitors are distinguished at a glance.

Supporting actions

• Beranda SNPMB link in the announcement band — routes to snpmb.id for the latest announcements.
• UTBK registration link — routes to pendaftaran-utbk.snpmb.id.
• FAQ accordion rows — expand and collapse to reveal answers.
• Footer links — repeat the four canonical destinations so they remain reachable after the visitor has read the page.

Domain entities

• Portal identity — wordmark, tagline, and the SNPMB 2026 branding.
• Canonical destination — a named external service with a label, a purpose, and an address (reg.snpmb.id, the sign-in destination, snpmb.id, pendaftaran-utbk.snpmb.id).
• Registration step — an ordered item in the registration flow with a step number, a title, and a short description.
• FAQ item — a question with its answer.
• Deadline — the SNBP 2026 close date and the derived days-remaining value shown in the chip.

Component responsibilities

• Application card (hero panel) — a large white rounded panel on the left at 60% width holding the wordmark, the deadline chip, the tagline headline, the supporting line, and the two CTA pills. It reads as a physical form the visitor could pick up.
• Hero photographic column — a warm documentary photograph of a student at a laptop on the right at 40% width, bled off the right viewport edge and cropped by a soft 32px-radius mask on its left side only, with a single 8%-opacity sage organic blob floating behind it.
• Deadline chip — the only motion on the page that carries information; it ticks its last digit once on first view.
• Announcement band — a sage-pine band with a 40px-radius top edge carrying the Beranda SNPMB link and the latest news, giving the four canonical destinations a single unmistakable home.
• Alur Pendaftaran sequence — full-width numbered rows separated by 1px warm-grey hairlines, with the step number set in Fraunces at 48px in sage.
• FAQ accordion — quiet, single-column rows that open with a soft height ease.
• Footer — the four canonical links plus the portal identity.

States

• Loading — the hero panel fades up 12px once on load; the deadline chip renders its value and ticks its last digit on first view. No skeleton is required because the page holds no fetched visitor data.
• Empty — not applicable to the page's own content; the page always has its identity, tagline, CTAs, flow, and FAQ. If the announcement band has no current item to surface, the band still renders with the Beranda SNPMB link so the destination remains reachable.
• Success — the visitor reads the page and follows a canonical link; the destination opens at its own address.
• Error — if the deadline value cannot be resolved, the chip renders its label without a count rather than showing a wrong number, and the page remains fully usable.
• Recovery — every canonical destination is reachable from at least two places (hero CTA or announcement band, and footer), so a visitor who misses one entry point can still reach the intended service.

3. Functional Requirements

FR-1 — Portal identity and tagline at the portal address (explicit) As a Portal Visitor, I should see the website served at https://portal.snpmb.id/ presenting the portal identity "Portal SNPMB 2026" and the tagline "Raih masa depanmu di Portal SNPMB", so that I know I have arrived at the correct national admissions portal.

• Trigger: the visitor opens https://portal.snpmb.id/.
• Observable result: the Landing page renders with the wordmark and the tagline as the display headline.
• Access state: anonymous; no account required.
• Failure/recovery: if the page cannot be reached, the visitor retries the address; no partial state is presented.
• Continuation: the visitor reads the two calls to action and the registration flow.

FR-2 — Start a new registration (explicit) As a Portal Visitor who has not yet registered, I should be able to choose "Mulai Pendaftaran" and be taken to reg.snpmb.id, so that I can begin my SNPMB registration.

• Trigger: the visitor activates the "Mulai Pendaftaran" pill.
• Observable result: the visitor arrives at reg.snpmb.id, which owns the registration work.
• Access state: anonymous on this website; any identity requirement belongs to the registration destination.
• Failure/recovery: if the destination does not open, the visitor can retry from the hero CTA or from the footer link.
• Continuation: registration proceeds on reg.snpmb.id, outside this website.

FR-3 — Sign in as a returning visitor (explicit) As a Portal Visitor who already has an account, I should be able to choose "Sudah Memiliki Akun? Masuk" and be taken to the account sign-in destination, so that I can continue with my existing account.

• Trigger: the visitor activates the "Sudah Memiliki Akun? Masuk" pill.
• Observable result: the visitor arrives at the sign-in destination, which owns authentication.
• Access state: anonymous on this website; the website never collects credentials and holds no session.
• Failure/recovery: if the destination does not open, the visitor can retry from the hero CTA or from the footer link.
• Continuation: sign-in proceeds on the external destination, outside this website.

FR-4 — Reach the latest announcements (explicit) As a Portal Visitor, I should be able to follow Beranda SNPMB to snpmb.id to read the latest announcements, so that I stay informed about the admission process.

• Trigger: the visitor activates the Beranda SNPMB link in the announcement band or the footer.
• Observable result: the visitor arrives at snpmb.id, which owns announcement publishing.
• Access state: anonymous.
• Failure/recovery: the link is present in both the announcement band and the footer, so either entry point recovers the other.
• Continuation: the visitor returns to the portal to act on what they read.

FR-5 — Reach UTBK registration (explicit) As a Portal Visitor, I should be able to follow the UTBK registration reference to pendaftaran-utbk.snpmb.id, so that I can reach the UTBK registration page directly from the portal.

• Trigger: the visitor activates the UTBK registration link.
• Observable result: the visitor arrives at pendaftaran-utbk.snpmb.id, which owns UTBK registration.
• Access state: anonymous.
• Failure/recovery: the link is present in the announcement band and the footer.
• Continuation: UTBK registration proceeds on its own destination.

FR-6 — Understand the registration flow (required_inference) As a Portal Visitor, I should be able to read the Alur Pendaftaran sequence as ordered numbered steps, so that I can decide which of the two canonical actions applies to me.

• Trigger: the visitor scrolls to the Alur Pendaftaran section.
• Observable result: the steps render as full-width numbered rows separated by hairlines, each with a step number, a title, and a short description.
• Access state: anonymous.
• Failure/recovery: the sequence is static content; if it cannot render, the two CTAs remain available and the visitor can still proceed.
• Continuation: the visitor chooses "Mulai Pendaftaran" or "Sudah Memiliki Akun? Masuk".

FR-7 — Read answers to common questions (required_inference) As a Portal Visitor, I should be able to open and close FAQ rows to read answers, so that I can resolve a doubt without leaving the portal.

• Trigger: the visitor activates an FAQ row.
• Observable result: the row expands with a soft height ease to reveal its answer; activating it again collapses it.
• Access state: anonymous.
• Failure/recovery: if a row cannot expand, its question remains visible and the canonical links remain available.
• Continuation: the visitor follows the relevant canonical destination.

FR-8 — See the SNBP deadline (required_inference) As a Portal Visitor, I should see a deadline chip above the headline reading "SNBP 2026 · tutup dalam 14 hari" with tabular numerals, so that I understand how much time remains before SNBP closes.

• Trigger: the visitor loads the Landing page.
• Observable result: the chip renders above the headline and ticks its last digit once on first view.
• Access state: anonymous.
• Failure/recovery: if the remaining-days value cannot be resolved, the chip renders its label without a count rather than a wrong number.
• Continuation: the visitor proceeds to the appropriate canonical action.

FR-9 — Reach every canonical destination from the footer (required_inference) As a Portal Visitor, I should find the four canonical destinations repeated in the footer, so that I can still reach the service I need after reading the whole page.

• Trigger: the visitor scrolls to the footer.
• Observable result: the footer lists reg.snpmb.id, the sign-in destination, snpmb.id, and pendaftaran-utbk.snpmb.id.
• Access state: anonymous.
• Failure/recovery: the same destinations are also reachable from the hero and the announcement band.
• Continuation: the visitor leaves for the chosen destination.

4. User Personas

Portal Visitor

Product context. The Portal Visitor is a prospective new university student — typically an Indonesian high-school student preparing to register for a state university through SNBP or SNBT — or a family member or helper accompanying them. They arrive at https://portal.snpmb.id/ from a search result, a school notice, or a shared link, often on a shared phone or a school laptop, frequently on modest bandwidth, and usually under deadline pressure. They are not looking for a product tour; they are looking for the one correct next step.

Primary goal. Reach the right service for their situation — start a new registration, sign in to an existing account, read the latest announcements, or reach UTBK registration — without confusion about which action applies to them.

Distinct accepted responsibilities.

• Read the portal identity and tagline to confirm they are at the correct national admissions portal.
• Determine whether they are a new registrant or a returning account holder, and choose the corresponding action.
• Follow the canonical destination that matches their intent.
• Read the registration flow to understand the sequence before committing.
• Resolve a doubt from the FAQ without leaving the portal.
• Note the SNBP deadline so they act in time.

Relevant inputs and decisions. The visitor's key decision is binary and is made on the Landing page: "Mulai Pendaftaran" (new registrant) versus "Sudah Memiliki Akun? Masuk" (returning account holder). The two pills are deliberately different colors so this decision is legible at a glance. A secondary decision is which of the two remaining canonical destinations — Beranda SNPMB or UTBK registration — matches their need.

Interactions with other accepted participants. The Portal Visitor is the only active human persona on this website. Every other participant in their journey is an external destination that owns the work after the handoff: the registration service at reg.snpmb.id, the account sign-in destination, Beranda SNPMB at snpmb.id, and the UTBK registration service at pendaftaran-utbk.snpmb.id. The visitor's interaction with those destinations happens on those destinations, not here.

Observable success. The visitor arrives at the intended destination address — reg.snpmb.id, the sign-in destination, snpmb.id, or pendaftaran-utbk.snpmb.id — having chosen it confidently from the portal entry point, and can return to the portal to reach any of the others.

What makes this role distinct. The Portal Visitor never creates or holds state on this website. Their entire responsibility here is orientation and routing: understand the portal, pick the correct one of four canonical destinations, and leave. That is why the website needs no account, no session, and no protected destination — and why the two calls to action must be visually distinguishable rather than interchangeable.

5. Core User Flows

Flow 1 — A new student starts their registration

1. The Portal Visitor opens https://portal.snpmb.id/ on a shared phone or school laptop.
2. The Landing page renders: the application card fades up 12px once, showing the wordmark "Portal SNPMB 2026", the deadline chip "SNBP 2026 · tutup dalam 14 hari" ticking its last digit, and the tagline "Raih masa depanmu di Portal SNPMB" as the display headline.
3. The visitor reads the short supporting line and recognizes that this is the SNBP/SNBT entry point.
4. The visitor scrolls through the Alur Pendaftaran numbered rows to confirm they have not yet registered.
5. The visitor activates the solid sage-pine pill "Mulai Pendaftaran".
6. Observable result: the visitor arrives at reg.snpmb.id, which owns the registration work.
7. Continuation: registration proceeds on reg.snpmb.id. If the destination does not open, the visitor retries from the hero CTA or from the same link in the footer.

Flow 2 — A returning account holder signs in

1. The Portal Visitor opens https://portal.snpmb.id/.
2. The Landing page renders with the wordmark, the deadline chip, the tagline headline, and the two CTA pills.
3. The visitor recognizes that they already hold an account and activates the terracotta-outline pill "Sudah Memiliki Akun? Masuk" — visually distinct from the primary action so the choice is unambiguous.
4. Observable result: the visitor arrives at the account sign-in destination, which owns authentication. The website never collects credentials and holds no session.
5. Continuation: sign-in proceeds on the external destination. If it does not open, the visitor retries from the hero CTA or from the footer link.

Flow 3 — A visitor checks the latest announcements

1. The Portal Visitor opens https://portal.snpmb.id/ and scrolls past the hero.
2. The Landing page presents the curved sage-pine announcement band with its 40px-radius top edge, carrying the Beranda SNPMB link and the latest news.
3. The visitor activates Beranda SNPMB.
4. Observable result: the visitor arrives at snpmb.id, which owns announcement publishing.
5. Continuation: the visitor reads the announcements and returns to the portal to act on what they read, using the footer links if they have scrolled to the bottom.

Flow 4 — A visitor reaches UTBK registration

1. The Portal Visitor opens https://portal.snpmb.id/ looking specifically for UTBK registration.
2. The Landing page presents the UTBK registration reference in the announcement band and repeats it in the footer.
3. The visitor activates the UTBK registration link.
4. Observable result: the visitor arrives at pendaftaran-utbk.snpmb.id, which owns UTBK registration.
5. Continuation: UTBK registration proceeds on its own destination.

Flow 5 — A visitor resolves a doubt before choosing

1. The Portal Visitor opens https://portal.snpmb.id/ but is unsure whether they are a new registrant or a returning account holder.
2. The visitor reads the Alur Pendaftaran numbered rows to understand the sequence.
3. The visitor opens a FAQ row; it expands with a soft height ease to reveal its answer. Activating it again collapses it.
4. Observable result: the visitor's doubt is resolved without leaving the portal, and the deadline chip has already told them how much time remains.
5. Continuation: the visitor returns to the hero and activates "Mulai Pendaftaran" or "Sudah Memiliki Akun? Masuk", continuing into Flow 1 or Flow 2.

Flow 6 — A visitor recovers a missed destination

1. The Portal Visitor has read the whole Landing page and scrolled to the footer without activating any link.
2. The footer lists all four canonical destinations: reg.snpmb.id, the sign-in destination, snpmb.id, and pendaftaran-utbk.snpmb.id.
3. The visitor activates the destination matching their need.
4. Observable result: the visitor arrives at that destination.
5. Continuation: the work proceeds on the destination that owns it.

6. Visuals Colors and Theme

The creative direction is authoritative for this section. The muse is Yves Béhar; the headline is humane technology for a national milestone — soft forms, warm ground, calm confidence. The register is high-stakes but hopeful: trustworthy and official without feeling cold or bureaucratic, lowering the heart rate rather than raising it. The generic indigo/blue-on-white SaaS template is forbidden for this project, and no blue appears anywhere in the palette.

Color tokens — light mode

The two canonical actions are never the same color: "Mulai Pendaftaran" is solid sage-pine, "Masuk" is terracotta-outline. Links use sage-pine with a terracotta underline.

Typography

• Headings: Fraunces, variable, optical size soft, weight 500–600, SOFT axis high; tight leading 0.98–1.05; tracking −0.02em; sentence case, never all-caps.
• Body: Work Sans at 400/500; line-height 1.65; tracking +0.005em for readability on low-DPI school screens.
• Scale: 1.333 modular — 68 / 48 / 32 / 22 / 17 / 15.
• Display headline: clamp(40px, 8vw, 96px) on the hero. Section headings: clamp(28px, 4.5vw, 44px). Card titles: 22px. Body: 17px. Labels: 15px with 0.04em tracking.
• Numerals are tabular for deadline counts.

Shape language

• Soft continuous curves throughout: 20px card radii, 999px pill buttons, 32px hero panel radius.
• Section boundaries are gently curved — a 40px-radius top edge on the announcement band — never hard-cut.
• No sharp corners on interactive elements; no perfectly square panels.
• Icons: single-weight 1.75px strokes with rounded caps.
• One soft organic blob shape (sage, 8% opacity) floats behind the hero panel as the only decorative form.

Spacing rhythm

• Single-column, generous-margin layout capped at 1120px.
• 96–128px vertical rhythm on desktop; 56px on mobile.

Imagery style

• Warm documentary photography of Indonesian students in natural light — studying at a desk, walking a school corridor, a hand on a laptop keyboard. Shot warm (golden hour or window light), never stock-corporate, never blue-tinted.
• One macro texture image (warm paper or linen) used as a subtle 4% overlay on the announcement band.
• No 3D renders, no abstract gradients, no illustrated characters.

Readable text and controls stay whole at every viewport: headlines, wordmarks, labels, numbers, card 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, with no other element covering any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as they cover no readable text or control.

7. Signature Design Concept

The application card. The public entry is an asymmetric two-column hero on the warm oat ground — not a centred stack.

• Left 60%: a large white rounded panel (radius 32px, soft shadow) that reads as a physical form you could pick up. It holds, top to bottom: the wordmark "Portal SNPMB 2026"; the live terracotta deadline chip "SNBP 2026 · tutup dalam 14 hari" with tabular numerals; the tagline "Raih masa depanmu di Portal SNPMB" as a Fraunces display headline at clamp(40px, 8vw, 96px) with tight leading; a short supporting line in Work Sans; then two adjacent CTA pills — a solid sage-pine "Mulai Pendaftaran" beside a terracotta-outline "Sudah Memiliki Akun? Masuk".
• Right 40%: a warm documentary photograph of a student at a laptop, bled off the right viewport edge and cropped by a soft 32px-radius mask on its left side only, with a single 8%-opacity sage organic blob floating behind it.

Supporting signature moves. Below the hero, a curved announcement band (40px-radius top edge) in sage-pine carries the Beranda SNPMB link and the latest news, giving the four canonical destinations a single unmistakable home. The Alur Pendaftaran sequence follows as full-width numbered rows separated by 1px warm-grey hairlines — not a grid of cards — with the step number set in Fraunces at 48px in sage, reading like a printed instruction sheet. A quiet FAQ accordion follows, then a footer with the four canonical links.

The concept recomposes only accepted content, states, and controls: the wordmark, tagline, deadline chip, two CTA pills, announcement band, numbered flow, FAQ, and footer links. It introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the white application card floating on the warm oat ground, with the warm documentary photograph of a student at a laptop bleeding off the right viewport edge behind it.
• Input → transformation → outcome thesis: on load, the hero panel fades up 12px once and settles; the deadline chip ticks its last digit on first view; the visitor reads the wordmark, tagline, and deadline, and the two differently-colored CTA pills resolve into a clear choice between starting a new registration and signing in to an existing account.
• Motion vocabulary: breathing pace — 400–600ms with cubic-bezier(0.22, 1, 0.36, 1) easing. Buttons compress 2% on press. The FAQ accordion opens with a soft height ease. Nothing loops, nothing bounces, nothing autoplays beyond the one counter.
• Composed first frame: the application card already in place at its final position with the wordmark, deadline chip, tagline headline, supporting line, and both CTA pills fully legible; the photograph composed in its masked column; the sage blob at 8% opacity behind the panel. The first frame is a complete, readable composition, not a blank stage.
• Reduced-motion state: under prefers-reduced-motion, all transitions collapse to instant opacity swaps and the deadline counter renders its final value statically. The page remains fully readable and every control remains reachable.

9. Non-Functional Requirements

NFR-1 — Delivery address (explicit) The website must be built and served at the existing portal address https://portal.snpmb.id/. This is a hard constraint from the authoritative source.

NFR-2 — Anonymous public access (required_inference) The Landing page must be reachable without an account, a session, or any identity step. The website holds no visitor-specific state, so no identity establishment or verification is required to use it, and no destination on this website is protected.

NFR-3 — No credential handling (explicit, from source boundaries) The website must not collect, transmit, or store credentials. Sign-in belongs to the external account destination.

NFR-4 — Low-bandwidth and low-DPI readability (required_inference, from the creative direction's audience) The page must remain readable and fully usable on shared phones and school laptops on modest bandwidth: body text at 17px with 1.65 line-height and positive tracking, tabular numerals for the deadline count, and no dependency on heavy media for the page to be understood.

NFR-5 — Responsive integrity of readable content (required_inference, from the creative direction) 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 to fit, with no other element covering any part of them. Imagery and decoration may be cropped or bled off an edge as the direction asks, provided they cover no readable text or control.

NFR-6 — Reduced-motion support (required_inference, from the creative direction) Under prefers-reduced-motion, all transitions must collapse to instant opacity swaps and the deadline counter must render its final value statically, with the page remaining fully usable.

NFR-7 — Accessible contrast (required_inference, from the creative direction) Body text at #1E2A26 on the #F3EEE6 ground must retain the direction's 12:1 contrast. Muted #8A8578 is reserved for metadata, timestamps, and helper text and must never be used for body copy.

NFR-8 — No blue in the palette (explicit, from the creative direction) No blue or indigo may appear anywhere in the palette, including for links. Links use sage-pine with a terracotta underline.

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for a single-page public website, labeled as defaults.

• Frontend: React with a modern build tool, rendering the single Landing page. [Default — not specified by user]
• Styling: CSS with custom properties for the color, type, radius, and spacing tokens defined in Section 6, so the palette and shape language stay consistent. [Default — not specified by user]
• Fonts: Fraunces (variable, soft optical size) for headings and Work Sans for body, self-hosted or served from a font CDN with font-display: swap. [Default — not specified by user]
• Backend: None required. The website presents static content and routes visitors to external destinations; it holds no visitor state and performs no server-side work. [Default — not specified by user]
• Storage: None required. [Default — not specified by user]
• Deployment: Static hosting at https://portal.snpmb.id/. Containerization and orchestration are not required for this delivery. [Default — not specified by user]

11. Assumptions and Constraints

Constraints

• C-1 (explicit) The website is to be built at the existing portal address https://portal.snpmb.id/.
• C-2 (explicit, from source boundaries) Registration, sign-in, announcement publishing, and UTBK registration are owned by their existing external destinations and are not implemented by this website.
• C-3 (explicit, from the creative direction) The generic indigo/blue-on-white SaaS template is forbidden; no blue or indigo appears anywhere in the palette.
• C-4 (explicit, from the creative direction) The two canonical actions are never the same color: "Mulai Pendaftaran" is solid sage-pine #2F5D50; "Masuk" is terracotta-outline #C75B39.
• C-5 (explicit, from the creative direction) Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, and system-ui must not be used for any text; headings use Fraunces and body uses Work Sans.
• C-6 (explicit, from the creative direction) No hard 90° corners on cards, buttons, or section boundaries; no glassmorphism, frosted panels, or neon glows.

Assumptions

• A-1 (assumption) The four canonical destinations — reg.snpmb.id, the account sign-in destination, snpmb.id, and pendaftaran-utbk.snpmb.id — remain available at their existing addresses and own their respective work. The website links to them and does not implement their behavior.
• A-2 (assumption) The sign-in destination's exact address is not shown in the source material; the "Sudah Memiliki Akun? Masuk" action routes to the portal's existing account sign-in destination, whose address is resolved at implementation time.
• A-3 (assumption) The deadline chip's value "SNBP 2026 · tutup dalam 14 hari" is the source-stated example; the chip reflects the actual SNBP 2026 close date, and if that value cannot be resolved the chip renders its label without a count rather than a wrong number.
• A-4 (assumption) The FAQ questions and answers, and the specific text of the Alur Pendaftaran steps, are portal content to be supplied; the website provides the structure and presentation for them.
• A-5 (assumption) The announcement band surfaces the latest news from Beranda SNPMB; if no current item is available, the band still renders with the Beranda SNPMB link so the destination remains reachable.

Future (not current)

• No future requirements were stated by the user. Nothing in this document commits the project to additional pages, an application account system, or any capability owned by the external destinations.

12. Glossary

• SNPMB — Seleksi Nasional Penerimaan Mahasiswa Baru; the Indonesian national university admission system.
• SNBP — Seleksi Nasional Berdasarkan Prestasi; the achievement-based national admission pathway.
• SNBT — Seleksi Nasional Berdasarkan Tes; the test-based national admission pathway.
• UTBK — Ujian Tulis Berbasis Komputer; the computer-based written examination used in the SNBT pathway.
• Portal SNPMB 2026 — the branded portal identity presented at https://portal.snpmb.id/.
• Beranda SNPMB — the announcements home at snpmb.id.
• Landing — the single public page of this website, served anonymously at https://portal.snpmb.id/.
• Application card — the white rounded hero panel holding the wordmark, deadline chip, tagline headline, supporting line, and the two CTA pills.
• Canonical destination — one of the four external services the portal routes to: reg.snpmb.id, the account sign-in destination, snpmb.id, and pendaftaran-utbk.snpmb.id.
• Alur Pendaftaran — the numbered registration-flow sequence presented as full-width ruled rows.
• Deadline chip — the terracotta chip above the hero headline showing the SNBP 2026 close countdown with tabular numerals.