System Requirements Document for bisnis-saham-pelajar-smp-sma

1. Introduction

This document specifies a static website on the topic "bisnis saham pelajar SMP dan SMA" — stock investing for Indonesian middle-school (SMP) and high-school (SMA) students. The site is a free, public, no-account reading resource that teaches the fundamentals of stock investing to students aged roughly 12–18, and to the parents and teachers who share the link with them.

The product intent, derived from the authoritative user requirement thread, is:

• Publish a static website (no dynamic backend) on the topic of stock investing for SMP/SMA students.
• Contain at least 6 investment guide articles.
• Have a complete structure like a static website in general (home/landing, article index, individual article pages, and the supporting static pages that make a site complete).
• Be delivered as a final ZIP file that the owner uploads to hosting.

The audience is the student reader (the primary persona) and the site owner/manager who commissions, reviews, and uploads the site (the secondary persona). The register is energetic and poster-loud — like a school event poster or a zine — while the content itself stays sober and responsible about risk.

2. System Overview

The product is a statically generated / hand-authored website consisting of HTML, CSS, JavaScript, and image assets. There is no server-side application logic, no database, and no user accounts. All content is baked into the delivered files. The site is delivered as a ZIP archive whose extracted contents can be uploaded directly to shared hosting.

Actors:

• Pelajar SMP/SMA (pembaca panduan investasi) — the student reader who browses the landing page, opens the article index, and reads the six-plus investment guide articles.
• Pemilik/pengelola website statis — the owner/manager who commissions the content, reviews the complete static structure, and uploads the ZIP to hosting.

Accepted behavior:

• An anonymous landing page introduces the site and routes readers into the guides.
• An article index lists all guide articles with numbered rows and category tags.
• Six guide articles cover: Dasar Saham, Memulai Investasi, Analisis Saham, Risiko Saham, Strategi Pelajar, and Etika Investasi.
• Each article page provides long-form reading with a sticky contents rail and a "Panduan Lainnya" list.
• Every page ends with a full-bleed black band carrying the next-article CTA.
• The owner receives a ZIP archive ready for hosting.

Ownership and boundaries:

• All pages are application-owned custom pages with access_requirement: none (anonymous, public).
• There is no application-owned identity, no login, no accounts, and no session continuity. This is a hard constraint: the site is static and the landing hero explicitly states "TANPA AKUN".
• There is no dynamic backend, no API, no database, and no server-side rendering at request time.
• The ZIP deliverable is produced by the build/packaging process, not by a runtime service.

Narrow exclusions:

• No live stock price tables presented as real trading data.
• No user accounts, login, or personalization.
• No comments, forums, or user-generated content.
• No e-commerce, payments, or subscriptions.
• No dynamic backend or database.

2a. Product Interpretation and Delivery Boundary

The user asked for a static website on stock investing for SMP/SMA students, with at least 6 investment guide articles and a complete static-site structure, delivered as a ZIP file for hosting upload.

This is a content publication product, not a web application. The delivery boundary is therefore:

• Current (in scope): A set of static HTML pages (landing, article index, six article pages, plus the supporting static pages that make a site complete — about, contact, privacy, and a 404 page), styled per the creative direction, with all assets bundled into a ZIP archive.
• Access ownership: All pages are public and anonymous. No identity is established, owned, or required. The landing hero explicitly communicates "TANPA AKUN" (no account).
• Future (out of scope): Any dynamic behavior, user accounts, live data feeds, or interactive tools. These are not part of the current delivery and must not appear in current pages or acceptance criteria.

The ZIP is the final artifact. The owner extracts it and uploads the contents to shared hosting. No build step is required on the host.

2b. Source Content Inventory

No reference directive with content_source authority was supplied. This section is omitted.

2c. Page Content and Component Coverage

The page inventory is the closed, ordered page contract supplied by Planning Scope (page_contract_version=1). Each page is listed exactly once.

Landing

• Information/state: Anonymous public entry. Full-viewport poster hero. Headline "BISNIS SAHAM UNTUK PELAJAR SMP & SMA" in Anton, uppercase, stacked across four flush-left lines ("BISNIS" / "SAHAM" / "UNTUK PELAJAR" / "SMP & SMA"), with "SAHAM" reversed out in paper colour inside a solid black block. Right column (4 of 12, dropped 96px): a short Archivo 18px paragraph explaining this is a free, six-part guide to learning stock investing responsibly as a student. Beneath it: a solid scarlet rectangular CTA "MULAI DARI DASAR" with uppercase label and 1px black outline, and a thin ruled row of three metadata items: "6 PANDUAN · GRATIS · TANPA AKUN". Background warm paper #F4EFE4 with a 3px black rule running full viewport width beneath the headline block. A rotated duotone photo cutout bleeds off the bottom-right corner.
• Primary actions: Click "MULAI DARI DASAR" → navigates to the Articles index. Click any topic in the marquee band → navigates to the corresponding article.
• Supporting actions: Navigate to About, Contact, Privacy via footer. Navigate to Articles via header nav.
• Domain entities: Guide topic (name, category tag, article URL), metadata item (label, value).
• Component responsibilities:
  • Header / top navigation bar: Left — wordmark "BISNIS SAHAM PELAJAR" in Anton, uppercase, white on black. Right — nav links: "ARTIKEL", "TENTANG", "KONTAK". Hard-edged, no radius.
  • Hero poster panel: Full-width colour field. Left 8 columns: oversized Anton headline. Right 4 columns: supporting paragraph, scarlet CTA, metadata row. 3px black rule beneath.

• Type marquee band: Full-bleed black strip. Slow-scrolling uppercase Anton text: "DASAR SAHAM · MEMULAI INVESTASI · ANALISIS · RISIKO · STRATEGI PELAJAR · ETIKA INVESTASI ·". Scarlet dots separate topics. Under prefers-reduced-motion, becomes a static wrapped row of tags.
• Topic grid / poster panels: Vertical sequence of full-width colour fields, each with an asymmetric 7/5 or 8/4 split between headline and supporting text. Colour-block wipes reveal section headlines on scroll (400ms cubic-bezier(0.2, 0.8, 0.2, 1)).
• Duotone photo cutout: High-contrast black-and-white photographic cutout treated as duotone (paper + black), hard-edged rectangle rotated 2–4°, bleeding off the bottom-right corner. Never crosses a headline, body text, or control.
• Footer: Full-bleed black band. Links to About, Contact, Privacy. Copyright line. Uppercase Archivo 700 labels.
• States:
  • Loading: Static HTML — no loading state. Fonts load via font-display: swap.
  • Empty: Not applicable (static content).
  • Success: Page renders with hero, marquee, topic panels, and footer.
  • Error: If a font fails to load, fallback to system sans-serif; layout remains intact.
  • Recovery: Not applicable (static).

Articles

• Information/state: Anonymous public article index. Dense 3px-ruled list — not cards. Each row is a 3px-ruled band with a numbered index (01–06+), a colour-coded category tag, the title in Anton, and a one-line summary, all aligned to shared columns. Rows invert to black on hover with a 120ms instant colour flip.
• Primary actions: Click a row → navigates to the corresponding article page.
• Supporting actions: Navigate to Landing, About, Contact, Privacy.
• Domain entities: Article (index number, title, category tag, one-line summary, URL), category (name, colour code: amber #F2B705 for "Dasar", teal #0E7C6B for "Risiko", scarlet #E4002B for others).
• Component responsibilities:
  • Header / top navigation bar: Same as Landing.
  • Page title block: Anton section opener "SEMUA PANDUAN" at clamp(36px, 6vw, 84px), uppercase, flush-left.
  • Article index list: 3px-ruled rows. Each row: numbered index (01–06+), category tag (uppercase Archivo 700, 13px, 0.12em tracking, colour-coded), title in Anton, one-line summary in Archivo 18px. Rows invert to black on hover.
  • Footer: Same as Landing.
• States:
  • Loading: Static HTML — no loading state.
  • Empty: Not applicable (at least 6 articles are guaranteed).
  • Success: All article rows render with correct numbering, tags, titles, and summaries.
  • Error: If an article URL is broken, the row still renders but navigation fails; the 404 page handles the error.
  • Recovery: Not applicable (static).

Dasar Saham

• Information/state: Anonymous public article page. Two-column layout: 68ch reading column plus a narrow right rail holding a sticky "Daftar Isi" contents list and a "Panduan Lainnya" list, both ruled with hairlines. Article title in Anton at clamp(26px, 3.4vw, 44px). Body copy Archivo 18px/1.65 desktop, 17px/1.6 mobile, measure capped at 68ch. Category tag "DASAR" in amber #F2B705.
• Primary actions: Read the article. Click a "Daftar Isi" item → scrolls to the corresponding section. Click a "Panduan Lainnya" item → navigates to that article.
• Supporting actions: Navigate to Articles, Landing, About, Contact, Privacy.
• Domain entities: Article (title, category, body sections, contents list, related articles), section (heading, anchor).
• Component responsibilities:
  • Header / top navigation bar: Same as Landing.
  • Article header: Category tag, Anton title, metadata row (date, reading time) in muted #6B6459.
  • Reading column: 68ch measure. Body copy Archivo 18px/1.65. Sub-headings Archivo 800 uppercase at 20–28px with 0.08em tracking. No italics. Emphasis via colour blocks and scale.
  • Right rail: Sticky "Daftar Isi" contents list and "Panduan Lainnya" list, both ruled with hairlines. At 375px, the rail moves below the article body.
  • Next-article CTA band: Full-bleed black band at the end of the page carrying the next-article CTA.
  • Footer: Same as Landing.
• States:
  • Loading: Static HTML — no loading state.
  • Empty: Not applicable (article content is authored).

• Success: Article renders with correct title, body, contents rail, and next-article CTA.
• Error: If an anchor link is broken, the page still renders; the browser stays at the top.
• Recovery: Not applicable (static).

Memulai Investasi

• Information/state: Anonymous public article page. Same two-column layout as Dasar Saham. Category tag "MULAI" in scarlet #E4002B.
• Primary actions: Read the article. Click a "Daftar Isi" item → scrolls to the corresponding section. Click a "Panduan Lainnya" item → navigates to that article.
• Supporting actions: Navigate to Articles, Landing, About, Contact, Privacy.
• Domain entities: Article (title, category, body sections, contents list, related articles), section (heading, anchor).
• Component responsibilities: Same as Dasar Saham, with article-specific content.
• States: Same as Dasar Saham.

Analisis Saham

• Information/state: Anonymous public article page. Same two-column layout as Dasar Saham. Category tag "ANALISIS" in scarlet #E4002B.
• Primary actions: Read the article. Click a "Daftar Isi" item → scrolls to the corresponding section. Click a "Panduan Lainnya" item → navigates to that article.
• Supporting actions: Navigate to Articles, Landing, About, Contact, Privacy.
• Domain entities: Article (title, category, body sections, contents list, related articles), section (heading, anchor).
• Component responsibilities: Same as Dasar Saham, with article-specific content.
• States: Same as Dasar Saham.

Risiko Saham

• Information/state: Anonymous public article page. Same two-column layout as Dasar Saham. Category tag "RISIKO" in teal #0E7C6B.
• Primary actions: Read the article. Click a "Daftar Isi" item → scrolls to the corresponding section. Click a "Panduan Lainnya" item → navigates to that article.
• Supporting actions: Navigate to Articles, Landing, About, Contact, Privacy.
• Domain entities: Article (title, category, body sections, contents list, related articles), section (heading, anchor).
• Component responsibilities: Same as Dasar Saham, with article-specific content.
• States: Same as Dasar Saham.

Strategi Pelajar

• Information/state: Anonymous public article page. Same two-column layout as Dasar Saham. Category tag "STRATEGI" in scarlet #E4002B.
• Primary actions: Read the article. Click a "Daftar Isi" item → scrolls to the corresponding section. Click a "Panduan Lainnya" item → navigates to that article.
• Supporting actions: Navigate to Articles, Landing, About, Contact, Privacy.
• Domain entities: Article (title, category, body sections, contents list, related articles), section (heading, anchor).
• Component responsibilities: Same as Dasar Saham, with article-specific content.
• States: Same as Dasar Saham.

Etika Investasi

• Information/state: Anonymous public article page. Same two-column layout as Dasar Saham. Category tag "ETIKA" in scarlet #E4002B.
• Primary actions: Read the article. Click a "Daftar Isi" item → scrolls to the corresponding section. Click a "Panduan Lainnya" item → navigates to that article.
• Supporting actions: Navigate to Articles, Landing, About, Contact, Privacy.
• Domain entities: Article (title, category, body sections, contents list, related articles), section (heading, anchor).
• Component responsibilities: Same as Dasar Saham, with article-specific content.
• States: Same as Dasar Saham.

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-01 — Static website on stock investing for SMP/SMA students

As a Pemilik/pengelola website statis, I should have a static website on the topic "bisnis saham pelajar SMP dan SMA" so that students can learn about stock investing.

• Provenance: explicit
• Actor: Pemilik/pengelola website statis
• Trigger/input: Owner commissions the site.
• Observable result/state change: A set of static HTML, CSS, JS, and image files exists, covering the topic.
• Access state: Public, anonymous.
• Material failure/recovery: If content is missing, the owner reviews and requests additions before packaging.
• Continuation: Owner proceeds to review the complete structure.
• Acceptance: The delivered site contains pages whose content is exclusively about stock investing for SMP/SMA students.

FR-02 — At least 6 investment guide articles

As a Pelajar SMP/SMA (pembaca panduan investasi), I should be able to read at least 6 investment guide articles so that I can learn the fundamentals of stock investing.

• Provenance: explicit
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader opens the Articles index and selects an article.
• Observable result/state change: The reader lands on an article page and reads the full guide.
• Access state: Public, anonymous.
• Material failure/recovery: If an article is missing, the owner adds it before packaging.
• Continuation: Reader returns to the index or follows the next-article CTA.
• Acceptance: The site contains at least 6 distinct article pages, each covering a different investment guide topic.

FR-03 — Complete static-site structure

As a Pemilik/pengelola website statis, I should have a complete static-site structure so that the site feels like a real website and not a single page.

• Provenance: explicit
• Actor: Pemilik/pengelola website statis
• Trigger/input: Owner reviews the site structure.
• Observable result/state change: The site includes a landing page, an article index, six article pages, and supporting static pages (about, contact, privacy, 404).
• Access state: Public, anonymous.
• Material failure/recovery: If a page is missing, the owner requests it before packaging.
• Continuation: Owner proceeds to package the site.
• Acceptance: The site includes all pages listed in the page contract, each reachable via navigation.

FR-04 — ZIP deliverable ready for hosting

As a Pemilik/pengelola website statis, I should receive the final result as a ZIP file so that I can upload it to hosting.

• Provenance: explicit
• Actor: Pemilik/pengelola website statis
• Trigger/input: Owner requests the final deliverable.
• Observable result/state change: A ZIP archive is produced containing all site files.
• Access state: N/A (deliverable artifact).
• Material failure/recovery: If the ZIP is malformed, the owner re-requests it.
• Continuation: Owner extracts the ZIP and uploads the contents to hosting.
• Acceptance: The ZIP extracts to a directory whose index.html opens the landing page, and all internal links resolve.

FR-05 — Anonymous landing page

As a Pelajar SMP/SMA (pembaca panduan investasi), I should see a landing page that introduces the site so that I understand what it offers and where to start.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader opens the site root.
• Observable result/state change: The landing page renders with the hero headline, supporting paragraph, CTA, metadata row, marquee band, topic panels, and footer.
• Access state: Public, anonymous. No account required.
• Material failure/recovery: If fonts fail to load, fallback to system sans-serif; layout remains intact.
• Continuation: Reader clicks "MULAI DARI DASAR" or a marquee topic to enter the guides.
• Acceptance: The landing page renders at 375px, 768px, and 1280px with all readable text and controls fully inside the viewport and their containers.

FR-06 — Article index with numbered rows

As a Pelajar SMP/SMA (pembaca panduan investasi), I should see a dense, numbered list of all guide articles so that I can choose what to read next.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader navigates to the Articles page.
• Observable result/state change: The index renders with 3px-ruled rows, each showing a numbered index (01–06+), a colour-coded category tag, the title in Anton, and a one-line summary.
• Access state: Public, anonymous.
• Material failure/recovery: If an article URL is broken, the row still renders; the 404 page handles the error.
• Continuation: Reader clicks a row to open the article.
• Acceptance: All articles appear in the index with correct numbering, tags, titles, and summaries.

FR-07 — Article reading experience with contents rail

As a Pelajar SMP/SMA (pembaca panduan investasi), I should read a long-form article with a sticky contents rail and a related-articles list so that I can navigate within the article and discover more guides.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader opens an article page.
• Observable result/state change: The article renders in a 68ch reading column with a sticky "Daftar Isi" contents list and a "Panduan Lainnya" list in the right rail.
• Access state: Public, anonymous.
• Material failure/recovery: If an anchor link is broken, the page still renders; the browser stays at the top.
• Continuation: Reader clicks a contents item to scroll, or a related-article item to navigate.
• Acceptance: At 375px, the right rail moves below the article body; all readable text and controls remain fully inside the viewport and their containers.

FR-08 — Next-article CTA band

As a Pelajar SMP/SMA (pembaca panduan investasi), I should see a next-article CTA at the end of every article so that I can continue reading without returning to the index.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader scrolls to the end of an article.
• Observable result/state change: A full-bleed black band renders with the next-article CTA.
• Access state: Public, anonymous.
• Material failure/recovery: If the next article is missing, the CTA links back to the Articles index.
• Continuation: Reader clicks the CTA to open the next article.
• Acceptance: Every article page ends with a full-bleed black band carrying a working next-article CTA.

FR-09 — Category colour coding

As a Pelajar SMP/SMA (pembaca panduan investasi), I should see colour-coded category tags on articles so that I can quickly identify beginner and risk-related material.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader views the article index or an article page.
• Observable result/state change: Category tags render in amber #F2B705 for "Dasar", teal #0E7C6B for "Risiko", and scarlet #E4002B for others.
• Access state: Public, anonymous.
• Material failure/recovery: If a tag colour is missing, fall back to scarlet #E4002B.
• Continuation: Reader uses the tag to decide what to read.
• Acceptance: Every article displays a category tag with the correct colour.

FR-10 — Responsive layout

As a Pelajar SMP/SMA (pembaca panduan investasi), I should read the site comfortably on a phone, tablet, or desktop so that I can learn anywhere.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader opens the site on any device.
• Observable result/state change: The layout adapts: 12-column poster grid at desktop, single column at 375px; display type scales via clamp; the right rail moves below the article body at 375px.
• Access state: Public, anonymous.
• Material failure/recovery: If the viewport is narrower than 375px, the layout still collapses to a single column without horizontal overflow of readable text or controls.
• Continuation: Reader continues reading.
• Acceptance: At 375px, 768px, and 1280px, all readable text and controls stay entirely inside the viewport and their containers.

FR-11 — Reduced-motion support

As a Pelajar SMP/SMA (pembaca panduan investasi), I should have a usable static arrangement when I prefer reduced motion so that I can read without distraction.

• Provenance: required_inference
• Actor: Pelajar SMP/SMA (pembaca panduan investasi)
• Trigger/input: Reader's OS has prefers-reduced-motion: reduce.
• Observable result/state change: The marquee becomes a static wrapped row of tags; all reveals render in their final state.
• Access state: Public, anonymous.
• Material failure/recovery: If the media query is unsupported, the animated version renders.
• Continuation: Reader continues reading.
• Acceptance: Under prefers-reduced-motion, no motion occurs and all content is readable.

FR-12 — Supporting static pages

As a Pemilik/pengelola website statis, I should have supporting static pages (about, contact, privacy, 404) so that the site is complete like a static website in general.

• Provenance: required_inference
• Actor: Pemilik/pengelola website statis
• Trigger/input: Owner reviews the site structure.
• Observable result/state change: The site includes About, Contact, Privacy, and 404 pages, each reachable via the footer.
• Access state: Public, anonymous.
• Material failure/recovery: If a page is missing, the owner requests it before packaging.
• Continuation: Owner proceeds to package the site.
• Acceptance: All supporting pages render and are reachable via the footer.

4. User Personas

Pelajar SMP/SMA (pembaca panduan investasi)

• Product context: A student in Indonesian middle school (SMP) or high school (SMA), aged roughly 12–18, curious about money and investing but easily bored by dense financial text. They arrive from a shared link, a teacher, or a parent.
• Primary goal: Understand the basics of stock investing — what stocks are, how to start, how to analyze, what the risks are, what strategies suit a student, and what ethical responsibilities apply — well enough to begin learning responsibly.
• Distinct accepted responsibilities: Browse the landing page, choose a guide from the article index, read the full article, navigate within it via the contents rail, and continue to the next article via the CTA.
• Relevant inputs or decisions: Which article to read first; whether to continue to the next article or return to the index; whether to share the link with a friend.
• Interactions with other accepted participants: None directly. The student is the sole reader; the owner is not present in the reading experience.
• Observable success: The student finishes at least one guide and can explain one concept (e.g., what a stock is, or why risk matters) in their own words.

Pemilik/pengelola website statis

• Product context: The person who commissioned the site (Rey Hartono) and will upload the final ZIP to shared hosting. They are not a developer and do not want to run a build step on the host.
• Primary goal: Receive a complete, self-contained static website with at least 6 investment guide articles, review its structure, and upload it to hosting so students can access it.
• Distinct accepted responsibilities: Commission the content, review the complete static structure (landing, index, six articles, supporting pages), verify the ZIP extracts correctly, and upload the contents to hosting.
• Relevant inputs or decisions: Whether the structure is complete; whether the ZIP is ready; where to upload it.
• Interactions with other accepted participants: None directly. The owner prepares the site for the student reader but does not interact with them in the product.
• Observable success: The ZIP extracts to a directory whose index.html opens the landing page, all internal links resolve, and the site is live on hosting.

5. Core User Flows

Flow 1 — Student discovers the site and starts reading

1. Starting context: The student opens the site root URL on a phone or laptop.
2. Actor action: The student lands on the Landing page.
3. Observable result: The hero renders with the headline "BISNIS SAHAM UNTUK PELAJAR SMP & SMA", the supporting paragraph, the scarlet CTA "MULAI DARI DASAR", and the metadata row "6 PANDUAN · GRATIS · TANPA AKUN".
4. Actor decision: The student reads the metadata and decides the site is for them.
5. Actor action: The student clicks "MULAI DARI DASAR".
6. Observable result: The Articles page opens.
7. Next step: The student scans the numbered rows and picks an article.

Flow 2 — Student browses the article index

1. Starting context: The student is on the Articles page.
2. Actor action: The student scans the 3px-ruled rows, each showing a numbered index (01–06+), a colour-coded category tag, the title in Anton, and a one-line summary.
3. Observable result: Rows invert to black on hover, confirming interactivity.
4. Actor decision: The student chooses an article — for example, "Dasar Saham" because the amber "DASAR" tag signals beginner material.
5. Actor action: The student clicks the row.
6. Observable result: The Dasar Saham article page opens.
7. Next step: The student reads the article.

Flow 3 — Student reads an article and continues

1. Starting context: The student is on the Dasar Saham article page.
2. Actor action: The student reads the 68ch reading column, using the sticky "Daftar Isi" rail to jump between sections.
3. Observable result: The page scrolls to the selected section; the rail stays visible.
4. Actor decision: The student finishes the article and wants to continue.
5. Actor action: The student scrolls to the end and sees the full-bleed black band with the next-article CTA.
6. Observable result: The CTA links to the next article (e.g., "Memulai Investasi").
7. Actor action: The student clicks the CTA.
8. Observable result: The Memulai Investasi article page opens.
9. Next step: The student continues reading, or returns to the Articles index via the header nav.

Flow 4 — Student uses the contents rail to navigate within an article

1. Starting context: The student is on the Risiko Saham article page.
2. Actor action: The student clicks a "Daftar Isi" item in the right rail.
3. Observable result: The page scrolls to the corresponding section heading.
4. Actor decision: The student reads the section and decides to jump to another.
5. Actor action: The student clicks another "Daftar Isi" item.
6. Observable result: The page scrolls to the new section.
7. Next step: The student finishes the article and uses the next-article CTA.

Flow 5 — Student discovers related articles

1. Starting context: The student is on the Analisis Saham article page.
2. Actor action: The student scans the "Panduan Lainnya" list in the right rail.
3. Observable result: The list shows related articles with titles and category tags.
4. Actor decision: The student picks "Strategi Pelajar".
5. Actor action: The student clicks the item.
6. Observable result: The Strategi Pelajar article page opens.
7. Next step: The student reads the article.

Flow 6 — Student reads on a phone

1. Starting context: The student opens the site on a phone at 375px width.
2. Actor action: The student lands on the Landing page.
3. Observable result: The 12-column grid collapses to a single column; display type scales via clamp; the hero headline, CTA, and metadata row remain fully inside the viewport.
4. Actor action: The student navigates to an article.
5. Observable result: The right rail moves below the article body; the reading column remains 68ch-capped and readable.
6. Next step: The student continues reading.

Flow 7 — Student prefers reduced motion

1. Starting context: The student's OS has prefers-reduced-motion: reduce.
2. Actor action: The student opens the Landing page.
3. Observable result: The marquee becomes a static wrapped row of tags; all reveals render in their final state.
4. Actor action: The student reads the page.
5. Observable result: No motion occurs; all content is readable.
6. Next step: The student navigates to an article.

Flow 8 — Owner reviews the complete static structure

1. Starting context: The owner receives the final ZIP.
2. Actor action: The owner extracts the ZIP to a local directory.
3. Observable result: The directory contains index.html, the article pages, the supporting pages, and all assets.
4. Actor action: The owner opens index.html in a browser.
5. Observable result: The Landing page renders correctly.
6. Actor action: The owner clicks through the header nav, the article index, and each article.
7. Observable result: All internal links resolve; all pages render.
8. Next step: The owner uploads the contents to hosting.

Flow 9 — Owner uploads the site to hosting

1. Starting context: The owner has verified the extracted site locally.
2. Actor action: The owner uploads the extracted contents to shared hosting via FTP or the host's file manager.
3. Observable result: The site is live at the hosting URL.
4. Actor action: The owner opens the live URL.
5. Observable result: The Landing page renders; all internal links resolve.
6. Next step: The owner shares the link with students, parents, and teachers.

6. Visuals Colors and Theme

The CREATIVE DIRECTION is authoritative for this section.

Muse: Paula Scher. Headline: Typography as architecture for teenage investors — words fill the frame, colour blocks collide, energy over polish.

Colour tokens (light mode)

Ratio target: 60% paper, 25% black type and blocks, 12% white reading surface, 3% accent. Accent is never used for body text.

Typography

• Headings: Anton, uppercase, weight 400, tracking -0.01em to -0.02em, leading 0.86–0.92. Set enormous and stacked in 2–4 flush-left lines. Words may break mid-phrase for rhythm.
• Sub-headings: Archivo 800 uppercase at 20–28px with 0.08em tracking.
• Body: Archivo. 18px/1.65 desktop, 17px/1.6 mobile, measure capped at 68ch.
• Labels and tags: 13px Archivo 700 uppercase, 0.12em tracking.
• No italics anywhere. Emphasis is done with colour blocks and scale, not style.

Type scale

• Display: 1.5 modular. Hero clamp(52px, 11vw, 148px); section openers clamp(36px, 6vw, 84px); article titles clamp(26px, 3.4vw, 44px).
• Text: 1.25 modular. 28/22/18/16/14.

Shape language

• Hard edges only — zero border radius on every element including buttons, cards, inputs, and images.
• Structure comes from thick black rules (3px) and full-bleed flat colour bands that run edge to edge.
• Composition is built from rectangles: a black block, a scarlet block, an amber block, a photo cutout rotated 2–4°.
• Diagonal bands at -6° slice between major sections.
• Buttons are solid rectangles with 1px black outline and uppercase label; on hover the block inverts to black with paper-coloured text.
• No shadows, no blur, no gradients, no glass.

Layout

• Visible 12-column poster grid with 24px gutters, max width 1440px, page padding 20px mobile / 40px tablet / 64px desktop.
• Landing page: vertical sequence of poster panels, each a full-width colour field with type locked to the grid and an asymmetric split (7/5 or 8/4) between headline and supporting text.
• Article index: dense ruled list — not cards. Each row is a 3px-ruled band with a numbered index (01–06+), a colour-coded category tag, the title in Anton, and a one-line summary, all aligned to shared columns; rows invert to black on hover.
• Article pages: two-column layout — a 68ch reading column plus a narrow right rail holding a sticky "Daftar Isi" contents list and a "Panduan Lainnya" list, both ruled with hairlines.
• Every page ends with a full-bleed black band carrying the next-article CTA.
• At 375px the grid collapses to a single column, the right rail moves below the article body, and all display type scales via clamp so nothing overflows its container.

Imagery

• Typography is the image — oversized Anton words are the primary visual asset, set as full-bleed compositions on flat colour.
• Supporting imagery is limited to high-contrast black-and-white photographic cutouts treated as duotone (paper + black) and placed as hard-edged rectangles or slightly rotated panels: a hand holding a phone showing a chart, a school desk with a notebook and pencil, a stack of coins, a classroom window.
• Cutouts may bleed off the left or right edge or overlap a colour block, but never cross a headline, body text, or control.
• No stock-photo smiling teenagers, no 3D blobs, no gradients.
• Simple flat pictograms (arrow, chart line, shield, rupiah sign) drawn in thick 3px strokes sit inside colour blocks as topic markers.

7. Signature Design Concept

Concept: The Poster Wall.

The public entry (Landing) is a full-viewport poster, not a SaaS hero. It is built from the creative direction's hero direction and signature moves, recomposing only accepted content, states, and controls.

Composition:

• Left 8 of 12 columns: The headline "BISNIS SAHAM UNTUK PELAJAR SMP & SMA" set in Anton at clamp(52px, 11vw, 148px), uppercase, stacked across four flush-left lines with leading 0.88, filling the column edge to edge and breaking mid-phrase — "BISNIS" / "SAHAM" / "UNTUK PELAJAR" / "SMP & SMA" — with the word "SAHAM" reversed out in paper colour inside a solid black block that sits behind it.
• Right 4 columns, dropped 96px below the headline top: A short paragraph in Archivo 18px explaining that this is a free, six-part guide to learning stock investing responsibly as a student, followed by a solid scarlet rectangular CTA "MULAI DARI DASAR" with an uppercase label and a black 1px outline, and beneath it a thin ruled row of three metadata items: "6 PANDUAN · GRATIS · TANPA AKUN".
• Background: Warm paper #F4EFE4 with a 3px black rule running the full viewport width beneath the headline block.
• Bottom-right: A rotated duotone photo cutout bleeding off the corner.
• No centred stack, no gradient blob, no blue button.

Signature moves carried through the site:

1. Oversized Anton headline stacked in four flush-left lines that fill the viewport width, with one word reversed out inside a solid black block behind it.
2. A slow type marquee band on a full-bleed black strip listing the six guide topics in uppercase Anton, separated by scarlet dots.
3. The article index as a dense 3px-ruled list with numbered rows (01–06+) and colour-coded category tags that invert to black on hover — never a grid of identical cards.
4. Colour-block wipes: a flat rectangle scaling in from the left edge to reveal each section headline on scroll.
5. Hard-edged duotone photo cutouts rotated 2–4° and bleeding off the page edge, overlapping colour bands but never text.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: flat

Landing Hero Motion Brief

• Focal subject: The oversized Anton headline "BISNIS SAHAM UNTUK PELAJAR SMP & SMA" with "SAHAM" reversed out in paper colour inside a solid black block.
• Input → transformation → outcome thesis: On page load, the black block behind "SAHAM" scales horizontally from the left edge (400ms cubic-bezier(0.2, 0.8, 0.2, 1)), revealing the reversed-out word; the supporting paragraph, CTA, and metadata row fade in with a 120ms stagger; the marquee band begins its slow scroll. The outcome is a fully composed poster that feels like a school event poster coming together.
• Motion vocabulary: Colour-block wipes (flat rectangle scaling horizontally from the left edge, 400ms cubic-bezier(0.2, 0.8, 0.2, 1)); article index rows invert to black on hover with a 120ms instant colour flip, no lift or shadow; a single type marquee band scrolls slowly across one full-bleed black strip; a scarlet rectangle slides under link text on hover. No parallax, no 3D, no bounce.
• Composed first frame: The headline is fully set in Anton, uppercase, stacked across four flush-left lines. The black block behind "SAHAM" is at scale 0 (invisible). The supporting paragraph, CTA, and metadata row are at opacity 0. The marquee band is at its starting position. The duotone photo cutout is in place, rotated 2–4°, bleeding off the bottom-right corner.
• Reduced-motion state: Under prefers-reduced-motion: reduce, the marquee becomes a static wrapped row of tags; all reveals render in their final state; the black block behind "SAHAM" is at full scale; the supporting paragraph, CTA, and metadata row are at full opacity.

9. Non-Functional Requirements

NFR-01 — Static delivery

• Constraint: The site must be a static website with no dynamic backend.
• Provenance: explicit
• Rationale: The user explicitly requested a static website and a ZIP deliverable for hosting upload.
• Acceptance: The delivered files contain no server-side code, no database, and no runtime API calls.

NFR-02 — ZIP deliverable

• Constraint: The final result must be a ZIP file ready for hosting upload.
• Provenance: explicit
• Rationale: The user explicitly requested a ZIP file to upload to hosting.
• Acceptance: The ZIP extracts to a directory whose index.html opens the landing page, and all internal links resolve.

NFR-03 — Responsive readability

• Constraint: At 375px, 768px, and 1280px, all readable text and controls stay entirely inside the viewport and their containers.
• Provenance: required_inference (from the creative direction's readability rule)
• Rationale: The audience reads on phones; the creative direction mandates readable text and controls stay whole at every viewport.
• Acceptance: No readable text or control is cropped, clipped, covered, or runs off an edge at any of the three viewports.

NFR-04 — Reduced-motion support

• Constraint: Under prefers-reduced-motion: reduce, the marquee becomes a static wrapped row of tags and all reveals render in their final state.
• Provenance: required_inference (from the creative direction's motion rule)
• Rationale: Accessibility for users who prefer reduced motion.
• Acceptance: No motion occurs under prefers-reduced-motion; all content is readable.

NFR-05 — No live stock data

• Constraint: The site must not present dense tables of live stock prices as real trading data.
• Provenance: explicit (creative direction "Avoid" list)
• Rationale: The site is an educational guide, not a trading platform.
• Acceptance: No live price tables appear on any page.

NFR-06 — No accounts

• Constraint: The site must not require or offer user accounts, login, or personalization.
• Provenance: explicit (landing hero states "TANPA AKUN"; static-site constraint)
• Rationale: The site is a static, anonymous reading resource.
• Acceptance: No login, signup, or account UI appears on any page.

NFR-07 — Font loading

• Constraint: Fonts must load with font-display: swap and fall back to system sans-serif.
• Provenance: required_inference
• Rationale: Prevent invisible text during font load.
• Acceptance: If Anton or Archivo fails to load, the page renders in system sans-serif with layout intact.

NFR-08 — No horizontal overflow of readable content

• Constraint: Readable text and controls must not overflow their containers horizontally at any viewport.
• Provenance: required_inference (from the creative direction's readability rule)
• Rationale: The poster grid uses oversized type; clamp and wrapping must prevent overflow.
• Acceptance: At 375px, 768px, and 1280px, no readable text or control overflows its container.

10. Tech Stack

The user did not specify a technology stack. The following defaults are chosen to satisfy the static-site constraint and the ZIP deliverable.

• Markup: Hand-authored HTML5.
• Styling: Plain CSS (no preprocessor required). CSS custom properties for colour tokens. clamp() for fluid type. Media queries for responsive layout and prefers-reduced-motion.
• Scripting: Minimal vanilla JavaScript for the marquee scroll and scroll-triggered colour-block wipes. No framework.
• Fonts: Anton and Archivo, self-hosted or loaded from a font CDN with font-display: swap.
• Images: High-contrast black-and-white photographic cutouts treated as duotone; flat SVG pictograms.
• Build/packaging: A simple script or manual process to produce the ZIP archive. No build step is required on the host.
• Hosting: Shared hosting; the extracted ZIP contents are uploaded directly.

[Default — not specified by user] for all items above except the static-site and ZIP constraints, which are explicit.

11. Assumptions and Constraints

Assumptions

• A-01: The site is authored in Indonesian, matching the user's request language. [Default — not specified by user]
• A-02: The six guide articles cover the topics named in the page contract: Dasar Saham, Memulai Investasi, Analisis Saham, Risiko Saham, Strategi Pelajar, and Etika Investasi. [Default — not specified by user]
• A-03: The owner has access to shared hosting with FTP or a file manager. [Default — not specified by user]
• A-04: The site is a single-language (Indonesian) publication. [Default — not specified by user]

Constraints

• C-01: The website must be static (no dynamic backend). (explicit)
• C-02: The content topic is limited to stock investing for SMP/SMA students. (explicit)
• C-03: The site must contain at least 6 investment guide articles. (explicit)
• C-04: The final result must be a ZIP file for hosting upload. (explicit)
• C-05: All pages are public and anonymous; no accounts. (explicit, from landing hero "TANPA AKUN" and static-site constraint)
• C-06: No live stock price tables presented as real trading data. (explicit, from creative direction "Avoid" list)
• C-07: The generic indigo/blue-on-white SaaS template is forbidden. (explicit, from creative direction)

12. Glossary

• SMP: Sekolah Menengah Pertama — Indonesian middle school (roughly ages 12–15).
• SMA: Sekolah Menengah Atas — Indonesian high school (roughly ages 15–18).
• Saham: Stock; a share of ownership in a company.
• Investasi: Investment.
• Panduan: Guide.
• Daftar Isi: Table of contents.
• Panduan Lainnya: Other guides / related articles.
• Static website: A website made of pre-built HTML, CSS, JS, and image files with no server-side application logic or database.
• ZIP: A compressed archive file format used to bundle the site for hosting upload.
• Duotone: A two-colour image treatment (here, paper + black) applied to high-contrast photographic cutouts.
• Anton: An ultra-condensed sans-serif display typeface used for headlines.
• Archivo: A sans-serif typeface used for body copy, sub-headings, and labels.
• Poster grid: A 12-column layout with 24px gutters, max width 1440px, used to compose full-width colour panels.
• Colour-block wipe: A flat rectangle scaling horizontally from the left edge to reveal a section headline on scroll.
• Marquee band: A full-bleed black strip carrying slowly scrolling uppercase Anton text listing the six guide topics.