System Requirements Document for indigo-ppt

1. Introduction

indigo-ppt is a presentation product for Indonesian civic education (Pendidikan Kewarganegaraan, PKN). It delivers a ready-to-use 15-slide deck for BAB 2 of the Kelas 11 SMK (Grade 11 vocational school) PKN curriculum, intended to be presented by a PKN teacher in class and read by Grade 11 SMK students as learning material.

The product intent is a single, self-contained, presentation-paced deck: 15 slides that carry the identity of BAB 2 PKN Kelas 11 SMK, state the learning objectives, lay out the structure and scope of the chapter, explain its core concepts and principles, place them in the context of national and civic life, illustrate them with examples, deepen them through analysis and discussion, direct a learning activity, summarise the material, prompt student reflection, and close with a short comprehension quiz.

The audience is two-fold and closed: the Guru PKN SMK Kelas 11 who prepares and presents the material, and the Siswa Kelas 11 SMK who reads and understands it. The deck is authoritative and institutional in register, legible when projected, and readable on a phone.

2. System Overview

indigo-ppt is a first-party, browser-delivered presentation experience. It consists of one anonymous public entry surface (Landing) and the 15-slide deck itself, whose slides are the ordered pages Cover, Objectives, Structure, Overview, Concepts, Principles, Context, Examples, Analysis, Discussion, Activity, Summary, Reflection, Quiz — 14 slides following the Landing entry, giving the required total of 15 slides.

All 15 pages are application-owned and require no account, sign-in, or identity of any kind. There is no authentication, no user profile, no saved state, and no differentiated permission model: every visitor — teacher or student — sees the same complete deck. Navigation is linear and presentation-paced, with the slide number as the primary wayfinding device.

The deck is static content: it presents accepted PKN BAB 2 material. It does not grade, store, transmit, or persist anything the teacher or student does. The Quiz slide presents questions and answer options for in-class checking of understanding; it does not record or report answers.

Exclusions. No account creation, login, or user management. No backend data storage, database, or analytics of learner responses. No editing, authoring, or upload of custom slide content. No export to other file formats beyond the delivered presentation experience. No content outside BAB 2 PKN Kelas 11 SMK, and no slide count other than 15.

2a. Product Interpretation and Delivery Boundary

The product is delivered as a first-party web presentation. The Landing page is the anonymous public entry: it introduces the BAB 2 PKN Kelas 11 SMK presentation and its purpose in learning, and it is the only page a visitor meets before the deck. From there the visitor enters the deck at Cover and moves through the 14 slides in order.

Access ownership is deliberately flat. Because the deck is a shared classroom artefact — the teacher projects it, students read it — no page is protected and no page owns an identity interaction. There is no anonymous-to-authenticated boundary to reconcile, because no accepted journey requires durable actor-specific state, a commitment, an entitlement, or a value transfer bound to a particular participant. The teacher's and the student's work is reading and presenting the same fixed material.

Everything described in this document is current. No future-horizon capabilities were accepted, and none are described here.

2b. Source Content Inventory

Not applicable. No reference directive in this project declares a content_source, so no verified factual inventory is reproduced. The PKN BAB 2 subject matter is presented as curriculum material within the deck's own pages, not as an external content inventory.

2c. Page Content and Component Coverage

Landing

• Information / state: Anonymous public entry. Introduces the presentation: that it is BAB 2 PKN for Kelas 11 SMK, that it contains 15 slides, and what it is for in classroom learning. No user state, no session, no stored data.
• Primary action: Enter the deck (go to Cover).
• Supporting actions: Read the short framing of the deck's purpose and audience.
• Domain entities: Presentation (title, subject PKN, chapter BAB 2, level Kelas 11 SMK, slide count 15).
• Component responsibilities: Full-viewport civic-poster composition per the creative direction — red block on the left 7 columns carrying the stacked reversed-out headline, off-white right column carrying the four-dot colour-coded table of contents, bottom band with the slide count and studio footer. The entry control is a single, grid-aligned, hard-edged element; no centred hero, no gradient.
• States: Loading — static content, no loading state required. Empty — not applicable; the page always carries its fixed framing. Success — the visitor reads the framing and enters the deck. Error / recovery — if the deck cannot be entered, the entry control remains visible and retryable; the framing text stays readable.

Cover

• Information / state: Slide 1 of 15. Identity of the deck: BAB 2, PKN, Kelas 11 SMK. Section label and category dot in the top-left anchor; slide number 01 / 15 in the bottom-left anchor; 1px full-width rule above the footer band.
• Primary action: Advance to Objectives.
• Supporting actions: Read the deck title and the four-section wayfinding key.
• Domain entities: Presentation identity (subject, chapter, level, slide count), section list.
• Component responsibilities: Full-viewport civic poster — solid red block on the left 7 columns with reversed-out Archivo 800 stacked headline PENDIDIKAN / PANCASILA / KEWARGANEGARAAN and BAB 2 · KELAS 11 SMK below a 3px white rule; off-white right column with four colour dots (red, blue, yellow, green) and 14px all-caps labels naming the deck's four sections; bottom band with 15 SLIDE and the muted-grey footer.
• States: Loading — none. Empty — not applicable. Success — the cover renders fully and the advance control is available. Error / recovery — if the advance control fails, it remains visible and retryable; all cover text stays whole and inside the viewport at 375px, 768px, and 1280px.

Objectives

• Information / state: Slide 2 of 15. The learning objectives of BAB 2 PKN Kelas 11 SMK — what the teacher should achieve in presenting and what students should take away.
• Primary action: Advance to Structure.
• Supporting actions: Return to Cover; read each objective.
• Domain entities: Learning objective (statement, ordering).
• Component responsibilities: Aligned label/value or numbered objective list on the 12-column grid; section label and category dot top-left; slide number 02 / 15 bottom-left; hairline rules between entries; no cards.
• States: Loading — none. Empty — not applicable; objectives are fixed content. Success — objectives render as a readable ordered list. Error / recovery — if navigation fails, the current slide stays readable and the control remains retryable.

Structure

• Information / state: Slide 3 of 15. The structure and order of BAB 2 PKN content, so the material reads as a coherent sequence for classroom delivery.
• Primary action: Advance to Overview.
• Supporting actions: Return to Objectives; read the sequence.
• Domain entities: Section (name, order, category colour).
• Component responsibilities: Ordered structure list with colour-coded category dots; tabular alignment on the grid; slide number 03 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — the full structure is visible in order. Error / recovery — navigation control remains visible and retryable.

Overview

• Information / state: Slide 4 of 15. General overview of the scope of BAB 2 material as an introduction before the main discussion.
• Primary action: Advance to Concepts.
• Supporting actions: Return to Structure.
• Domain entities: Topic (name, short description).
• Component responsibilities: Overview text in the grid's right columns with black labels in the left columns; slide number 04 / 15; footer rule; at most four coded colours on the slide.
• States: Loading — none. Empty — not applicable. Success — the overview reads as a scannable introduction. Error / recovery — navigation control remains visible and retryable.

Concepts

• Information / state: Slide 5 of 15. The core concepts needed to understand BAB 2 PKN.
• Primary action: Advance to Principles.
• Supporting actions: Return to Overview; read each concept and its definition.
• Domain entities: Concept (term, definition, category dot).
• Component responsibilities: Aligned label/value table — black label in the left grid columns, value in the right columns, hairline rules between rows, colour-coded category dots; slide number 05 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — every concept and definition is fully readable. Error / recovery — navigation control remains visible and retryable.

Principles

• Information / state: Slide 6 of 15. The principles or key elements of BAB 2 material, stated concisely and directly.
• Primary action: Advance to Context.
• Supporting actions: Return to Concepts.
• Domain entities: Principle (statement, category dot).
• Component responsibilities: Aligned label/value table with hairline rules and category dots, matching the Concepts slide's system; slide number 06 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — principles render as a readable aligned table. Error / recovery — navigation control remains visible and retryable.

Context

• Information / state: Slide 7 of 15. The context in which BAB 2 material applies in national and civic life.
• Primary action: Advance to Examples.
• Supporting actions: Return to Principles.
• Domain entities: Context (setting, application).
• Component responsibilities: Contextual text and, where the direction calls for it, a schematic map of Indonesia or a pictogram row drawn as 2px-stroke black line icons on the off-white ground; slide number 07 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — the context is readable and any diagram is fully visible. Error / recovery — if a diagram fails to render, the text remains complete and readable; navigation control remains retryable.

Examples

• Information / state: Slide 8 of 15. Examples that connect BAB 2 concepts to real situations.
• Primary action: Advance to Analysis.
• Supporting actions: Return to Context; read each example.
• Domain entities: Example (description, linked concept).
• Component responsibilities: Example entries in aligned label/value form with hairline rules; slide number 08 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — each example is fully readable and clearly tied to its concept. Error / recovery — navigation control remains visible and retryable.

Analysis

• Information / state: Slide 9 of 15. Analysis of the material to deepen student understanding of the BAB 2 subject matter.
• Primary action: Advance to Discussion.
• Supporting actions: Return to Examples.
• Domain entities: Analysis point (claim, reasoning).
• Component responsibilities: Analytical points in the grid, with black labels and hairline separators; slide number 09 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — the analysis reads as a coherent argument. Error / recovery — navigation control remains visible and retryable.

Discussion

• Information / state: Slide 10 of 15. Discussion space supporting the teacher's explanation and shared student understanding.
• Primary action: Advance to Activity.
• Supporting actions: Return to Analysis; read the discussion prompts.
• Domain entities: Discussion prompt (question, focus).
• Component responsibilities: Prompts set as large flush-left Archivo headings with supporting text beneath; slide number 10 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — prompts are legible from the back of a classroom. Error / recovery — navigation control remains visible and retryable.

Activity

• Information / state: Slide 11 of 15. A learning activity directing students to apply or respond to BAB 2 material.
• Primary action: Advance to Summary.
• Supporting actions: Return to Discussion; read the activity instructions.
• Domain entities: Activity (instruction, expected response).
• Component responsibilities: Numbered activity steps in the grid with hairline rules; slide number 11 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — instructions are complete and unambiguous. Error / recovery — navigation control remains visible and retryable.

Summary

• Information / state: Slide 12 of 15. Summary of the main points of BAB 2 to reinforce learning outcomes.
• Primary action: Advance to Reflection.
• Supporting actions: Return to Activity.
• Domain entities: Summary point (statement).
• Component responsibilities: Condensed summary points as an aligned list with category dots; slide number 12 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — the summary covers the chapter's main points concisely. Error / recovery — navigation control remains visible and retryable.

Reflection

• Information / state: Slide 13 of 15. Reflection prompts helping students assess their understanding and the relevance of the material.
• Primary action: Advance to Quiz.
• Supporting actions: Return to Summary; read the reflection prompts.
• Domain entities: Reflection prompt (question).
• Component responsibilities: Prompts set as large flush-left headings with supporting text; slide number 13 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — prompts are readable and answerable in class. Error / recovery — navigation control remains visible and retryable.

Quiz

• Information / state: Slide 14 of 15. A short evaluation to check student understanding of BAB 2 content, presented as questions with answer options. Nothing is recorded, scored, or transmitted.
• Primary action: Complete the deck (the final slide; the advance control ends the presentation).
• Supporting actions: Return to Reflection; read each question and its options.
• Domain entities: Quiz question (prompt, options, correct option as presented material).
• Component responsibilities: Questions with options coded in the secondary blue (#1B4FA0) as the direction specifies for quiz options; hairline rules between questions; slide number 14 / 15; footer rule.
• States: Loading — none. Empty — not applicable. Success — all questions and options are fully readable. Error / recovery — navigation control remains visible and retryable; no answer state is stored, so there is no lost-progress condition.

3. Functional Requirements

FR-1 — Deliver the BAB 2 PKN Kelas 11 SMK presentation (explicit) As a Guru PKN SMK Kelas 11, I should have a complete presentation for BAB 2 of PKN for Kelas 11 SMK, so that I can prepare and deliver the chapter's material in class.

• Trigger / input: The teacher opens the presentation.
• Observable result: A complete BAB 2 PKN Kelas 11 SMK deck is available and readable from beginning to end.
• Access state: Anonymous; no account required.
• Failure / recovery: If a slide fails to render, the remaining slides stay reachable and the failed slide can be revisited.
• Continuation: The teacher proceeds through the deck in order.

FR-2 — Present exactly 15 slides (explicit) As a Guru PKN SMK Kelas 11, I should receive a presentation of exactly 15 slides, so that the deck matches the required slide count for the lesson.

• Trigger / input: The deck is opened.
• Observable result: The deck contains exactly 15 slides, numbered 01 / 15 through 15 / 15.
• Access state: Anonymous.
• Failure / recovery: If the count is wrong, the deck does not satisfy the requirement; the numbering anchors make any discrepancy visible.
• Continuation: The teacher presents the 15 slides in order.

FR-3 — Enter the deck from the public entry (required_inference) As a Guru PKN SMK Kelas 11 or a Siswa Kelas 11 SMK, I should arrive at an anonymous entry page that introduces the BAB 2 PKN Kelas 11 SMK presentation and lets me enter it, so that I know what the deck is and can begin.

• Trigger / input: The visitor opens the product.
• Observable result: The Landing page shows the deck's identity, subject, level, and 15-slide count, with a control that enters the deck at Cover.
• Access state: Anonymous; no identity established.
• Failure / recovery: If entry fails, the control remains visible and retryable and the framing text stays readable.
• Continuation: The visitor enters the deck at Cover.

FR-4 — Identify the deck on the cover (required_inference) As a Guru PKN SMK Kelas 11, I should see a cover slide that identifies the deck as BAB 2 PKN Kelas 11 SMK, so that the presentation opens with clear institutional identity.

• Trigger / input: The visitor enters the deck.
• Observable result: Slide 01 / 15 shows the deck title, BAB 2 · KELAS 11 SMK, the four-section wayfinding key, and 15 SLIDE.
• Access state: Anonymous.
• Failure / recovery: If the cover fails to render, the entry control remains available to retry.
• Continuation: The teacher advances to Objectives.

FR-5 — State the learning objectives (required_inference) As a Guru PKN SMK Kelas 11, I should see the learning objectives of BAB 2, so that I can orient the lesson and students know what they should achieve.

• Trigger / input: The teacher advances to slide 02 / 15.
• Observable result: The objectives are listed and readable.
• Access state: Anonymous.
• Failure / recovery: If navigation fails, the current slide stays readable and the control remains retryable.
• Continuation: The teacher advances to Structure.

FR-6 — Show the chapter structure (required_inference) As a Guru PKN SMK Kelas 11, I should see the structure and order of BAB 2 content, so that the material is delivered in a coherent sequence.

• Trigger / input: The teacher advances to slide 03 / 15.
• Observable result: The chapter's sections are shown in order with their category codes.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Overview.

FR-7 — Introduce the scope of the chapter (required_inference) As a Siswa Kelas 11 SMK, I should see a general overview of the scope of BAB 2 material, so that I have a frame before the main discussion.

• Trigger / input: The teacher advances to slide 04 / 15.
• Observable result: The overview of the chapter's coverage is readable.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Concepts.

FR-8 — Explain the core concepts (required_inference) As a Siswa Kelas 11 SMK, I should read the core concepts needed to understand BAB 2 PKN, so that I can follow the rest of the material.

• Trigger / input: The teacher advances to slide 05 / 15.
• Observable result: Each concept is presented as a labelled term with its definition, fully readable.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Principles.

FR-9 — Present the key principles (required_inference) As a Siswa Kelas 11 SMK, I should read the principles or key elements of BAB 2 material, so that I grasp what the chapter holds as essential.

• Trigger / input: The teacher advances to slide 06 / 15.
• Observable result: The principles are presented concisely in an aligned, readable form.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Context.

FR-10 — Place the material in civic context (required_inference) As a Siswa Kelas 11 SMK, I should see how BAB 2 material applies in national and civic life, so that the concepts connect to the country I live in.

• Trigger / input: The teacher advances to slide 07 / 15.
• Observable result: The context of application is presented, with any schematic map or pictogram row fully visible.
• Access state: Anonymous.
• Failure / recovery: If a diagram fails to render, the accompanying text remains complete and readable.
• Continuation: The teacher advances to Examples.

FR-11 — Illustrate with examples (required_inference) As a Siswa Kelas 11 SMK, I should see examples that connect BAB 2 concepts to real situations, so that the material becomes concrete.

• Trigger / input: The teacher advances to slide 08 / 15.
• Observable result: Each example is readable and tied to the concept it illustrates.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Analysis.

FR-12 — Deepen understanding through analysis (required_inference) As a Siswa Kelas 11 SMK, I should read an analysis of the BAB 2 subject matter, so that my understanding goes beyond definitions.

• Trigger / input: The teacher advances to slide 09 / 15.
• Observable result: The analysis is presented as readable, reasoned points.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Discussion.

FR-13 — Support classroom discussion (required_inference) As a Guru PKN SMK Kelas 11, I should have discussion prompts on the slide, so that I can lead shared understanding with students.

• Trigger / input: The teacher advances to slide 10 / 15.
• Observable result: Discussion prompts are displayed large enough to read from across the classroom.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Activity.

FR-14 — Direct a learning activity (required_inference) As a Siswa Kelas 11 SMK, I should receive an activity that asks me to apply or respond to BAB 2 material, so that I engage with the chapter rather than only reading it.

• Trigger / input: The teacher advances to slide 11 / 15.
• Observable result: The activity instructions are complete and unambiguous.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Summary.

FR-15 — Reinforce with a summary (required_inference) As a Siswa Kelas 11 SMK, I should read a summary of the main points of BAB 2, so that the lesson's key content is consolidated.

• Trigger / input: The teacher advances to slide 12 / 15.
• Observable result: The chapter's main points are summarised concisely and readably.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Reflection.

FR-16 — Prompt student reflection (required_inference) As a Siswa Kelas 11 SMK, I should see reflection prompts, so that I can assess my own understanding and the relevance of the material.

• Trigger / input: The teacher advances to slide 13 / 15.
• Observable result: Reflection prompts are readable and answerable in class.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable.
• Continuation: The teacher advances to Quiz.

FR-17 — Check understanding with a short quiz (required_inference) As a Siswa Kelas 11 SMK, I should see a short quiz on BAB 2 content, so that my understanding can be checked at the end of the lesson.

• Trigger / input: The teacher advances to slide 14 / 15.
• Observable result: Quiz questions with answer options are fully readable; nothing is recorded, scored, or transmitted.
• Access state: Anonymous.
• Failure / recovery: Navigation control remains visible and retryable; because no answer state is stored, there is no lost-progress condition.
• Continuation: The deck ends; the teacher closes the presentation.

FR-18 — Navigate the deck in presentation order (required_inference) As a Guru PKN SMK Kelas 11, I should move forward and backward through the 15 slides in order, so that I can present at my own pace and revisit a slide when a question comes up.

• Trigger / input: The teacher activates the advance or return control.
• Observable result: The deck moves one slide in the chosen direction, and the slide number updates in sync.
• Access state: Anonymous.
• Failure / recovery: If a transition fails, the current slide stays readable and the control remains retryable.
• Continuation: The teacher continues presenting from the new slide.

FR-19 — Read the deck on any classroom device (required_inference) As a Siswa Kelas 11 SMK, I should read the deck on a phone as well as on a projected screen, so that I can follow the material on my own device.

• Trigger / input: The student opens the deck at a narrow viewport.
• Observable result: At 375px the grid collapses to 4 columns, label/value pairs stack, and all rules, numbers, headlines, and controls stay whole and inside the viewport; at 768px and 1280px the full 12-column layout applies.
• Access state: Anonymous.
• Failure / recovery: If content would overflow, it wraps or scales rather than being cropped; readable text and controls are never covered or cut.
• Continuation: The student continues reading the deck.

4. User Personas

Guru PKN SMK Kelas 11

• Product context: A civic education teacher at an Indonesian vocational secondary school (SMK) who must teach BAB 2 of the Kelas 11 PKN curriculum. The teacher needs a chapter deck that is already structured, correctly scoped, and presentable without further authoring.
• Primary goal: Prepare and present a coherent, correctly sized BAB 2 PKN deck that carries the chapter's objectives, concepts, principles, context, examples, analysis, discussion, activity, summary, reflection, and a closing comprehension check.
• Distinct accepted responsibilities: The teacher is the presenter and the pacing authority. The teacher opens the deck, confirms its identity and slide count, states the objectives, walks the class through structure and scope, explains concepts and principles, grounds them in civic context, works through examples and analysis, leads the discussion prompts, sets the activity, consolidates with the summary, invites reflection, and runs the quiz. The teacher also controls navigation, moving forward and back at the pace the class needs.
• Relevant inputs or decisions: Which slide to show next; when to pause on the discussion and activity slides; when to return to an earlier slide because a student asked a question; when to close the deck.
• Interactions with other accepted participants: The teacher presents to the Siswa Kelas 11 SMK, who read the same slides. The discussion and activity slides are the points where the teacher's delivery and the students' responses meet.
• Observable success: The teacher reaches slide 15 / 15 having covered the chapter in order, with the class able to answer the quiz questions.

Siswa Kelas 11 SMK

• Product context: A Grade 11 vocational student in Indonesia following the PKN BAB 2 lesson. The student may read the deck on a projected screen at the front of the class or on a phone at their own desk.
• Primary goal: Read and understand the BAB 2 PKN material well enough to follow the lesson, take part in the activity, and answer the quiz.
• Distinct accepted responsibilities: The student is the reader and responder. The student reads the objectives to know what is expected, follows the structure and overview, learns the concepts and principles, connects them to civic life through the context and examples, follows the analysis, takes part in the discussion, carries out the activity, uses the summary to consolidate, reflects on their own understanding, and answers the quiz questions.
• Relevant inputs or decisions: Whether a concept is understood or needs the teacher to revisit a slide; how to respond to the activity; how to answer each quiz question.
• Interactions with other accepted participants: The student receives the material from the Guru PKN SMK Kelas 11 and responds during the discussion, activity, reflection, and quiz slides.
• Observable success: The student can explain the chapter's main points and answer the quiz questions correctly.

5. Core User Flows

Flow A — The teacher prepares and presents the BAB 2 PKN deck

1. The teacher opens indigo-ppt and lands on the anonymous Landing page. It states that this is the BAB 2 PKN presentation for Kelas 11 SMK and that it contains 15 slides.
2. The teacher activates the entry control and arrives at Cover (slide 01 / 15). The cover identifies the deck as PENDIDIKAN PANCASILA KEWARGANEGARAAN, BAB 2 · KELAS 11 SMK, and shows the four-section wayfinding key and 15 SLIDE.
3. The teacher advances to Objectives (slide 02 / 15) and reads the learning objectives aloud so the class knows what the lesson should achieve.
4. The teacher advances to Structure (slide 03 / 15) and walks the class through the order of the chapter.
5. The teacher advances to Overview (slide 04 / 15) and frames the scope of BAB 2 before the main discussion.
6. The teacher advances to Concepts (slide 05 / 15) and explains each core concept from its labelled term and definition.
7. The teacher advances to Principles (slide 06 / 15) and states the chapter's key principles.
8. The teacher advances to Context (slide 07 / 15) and places the material in national and civic life, using the schematic map or pictogram row on the slide.
9. The teacher advances to Examples (slide 08 / 15) and works through the examples that tie each concept to a real situation.
10. The teacher advances to Analysis (slide 09 / 15) and deepens the class's understanding with the analysis points.
11. The teacher advances to Discussion (slide 10 / 15) and leads the discussion using the prompts on the slide. Students respond; if a question reaches back to an earlier idea, the teacher returns to that slide and then comes forward again.
12. The teacher advances to Activity (slide 11 / 15) and sets the activity, directing students to apply or respond to the material.
13. The teacher advances to Summary (slide 12 / 15) and consolidates the chapter's main points.
14. The teacher advances to Reflection (slide 13 / 15) and invites students to assess their own understanding and the relevance of the material.
15. The teacher advances to Quiz (slide 14 / 15) and runs the short comprehension check. Nothing is recorded or scored by the product; the teacher reads the questions and options and the class answers.
16. The teacher reaches the end of the deck and closes the presentation.

• Failure / recovery: If a slide fails to render or a transition fails, the current slide stays readable and the navigation control remains visible and retryable; the teacher can retry or continue from the slide already shown.
• Continuation: The teacher can restart from Cover for another class, since the deck is anonymous and stateless.

Flow B — The student reads the deck and takes part in the lesson

1. The student opens indigo-ppt on a phone or reads the projected deck. On the anonymous Landing page they see what the presentation is and that it has 15 slides.
2. The student enters the deck at Cover (slide 01 / 15) and sees the chapter identity and the four-section key.
3. On Objectives (slide 02 / 15) the student learns what the lesson expects them to achieve.
4. On Structure (slide 03 / 15) and Overview (slide 04 / 15) the student sees how the chapter is organised and what it covers.
5. On Concepts (slide 05 / 15) and Principles (slide 06 / 15) the student reads the core terms, their definitions, and the chapter's key principles.
6. On Context (slide 07 / 15) the student connects the material to national and civic life.
7. On Examples (slide 08 / 15) and Analysis (slide 09 / 15) the student works through concrete cases and the deeper reasoning behind them.
8. On Discussion (slide 10 / 15) the student responds to the prompts and hears classmates' answers.
9. On Activity (slide 11 / 15) the student carries out the instructed activity, applying or responding to the material.
10. On Summary (slide 12 / 15) the student consolidates the chapter's main points.
11. On Reflection (slide 13 / 15) the student assesses what they understood and how the material relates to them.
12. On Quiz (slide 14 / 15) the student reads each question and its options and answers. The product records nothing; the check happens in class.

• Failure / recovery: If the student is reading on a narrow screen, the layout collapses to 4 columns and label/value pairs stack, so every headline, number, label, and control stays whole and inside the viewport; nothing readable is cropped or covered.
• Continuation: The student can re-read any slide by asking the teacher to return to it, or by scrolling back through the deck on their own device.

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. The muse is Massimo Vignelli, and the headline idea is "Systematic clarity for the nation's civic curriculum" — civic signage: clear, coded, confident, memorable. The deck must read as official and authoritative without becoming the generic blue-on-white template, which is forbidden for this project.

Colour tokens (light mode)

Proportion: roughly 70% off-white/white, 20% black type and rules, 10% coded colour. No gradients anywhere; colour is flat and coded, never decorative. No more than four coded colours on a single slide, and never colour without a category meaning.

Typography

• Headings: Archivo, weights 700–900, flush-left, ragged-right, tracking -0.01em. Sentence case for slide titles; all-caps for section labels and category tags. Headlines are large and confident but never centred — the left rule of the grid is the spine of every slide.
• Body: Archivo.
• Scale: 1.25 modular — 64 / 48 / 32 / 22 / 17 / 14.
• Slide titles: clamp(32px, 5vw, 64px).
• Section labels: 14px all-caps, letter-spacing 0.14em.
• Body: 17px / 1.55 on desktop, 16px / 1.5 on mobile.
• Slide numbers: 48px mobile to 96px desktop, Archivo 800.
• Numbers (01, 02) set in Archivo 800 at display size as the primary wayfinding device.

Shape language

Hard edges only: no border radius anywhere, no soft shadows, no glass. Geometry is rectangles, horizontal rules (1px and 3px), and circles used exclusively as category dots and as the numeral medallion on section dividers. Colour blocks are flat and full-bleed to the grid edge, never floating. The 12-column grid is visible as thin vertical hairlines on section divider slides, then hidden on content slides to keep them readable.

Layout

A strict 12-column grid with a 24px gutter and a 96px outer margin on desktop, 24px on mobile. Every slide carries the same three anchors: a top-left section label with a coloured category dot, a bottom-left slide number (04 / 15) in Archivo 800, and a 1px full-width rule separating the footer band from the content. Content is arranged in aligned label/value pairs and tabular columns, never in floating cards. Section dividers use a full-bleed colour block with the section number reversed out in white at display size. At 375px the grid collapses to 4 columns, label/value pairs stack, and all rules and numbers stay inside the viewport.

Imagery

Diagrammatic and informational only: schematic maps of Indonesia, pictogram rows (a person, a handshake, a ballot, a gavel) drawn as 2px-stroke black line icons on the off-white ground, and colour-coded category charts. No stock photography of people, no 3D renders, no illustration for its own sake. Where a photograph is unavoidable — for example a slide on national symbols — it is cropped hard to the grid as a full-bleed band in high-contrast monochrome with a single colour rule beneath it.

7. Signature Design Concept

The public entry — the Landing page — is a full-viewport civic poster, not a centred title card. It is the deck's cover logic applied to the entry surface.

A solid red (#D32029) block occupies the left 7 columns from the top to the bottom edge. The right 5 columns are the off-white ground (#F4F1EA). Inside the red block, reversed-out Archivo 800 type stacks flush-left at clamp(48px, 9vw, 120px): PENDIDIKAN / PANCASILA / KEWARGANEGARAAN, with BAB 2 · KELAS 11 SMK set small in white below a 3px white rule. On the off-white side, a vertical column of four colour dots — red, blue, yellow, green — with 14px all-caps labels names the four sections of the deck, functioning as a table of contents and a wayfinding key at once. The bottom band carries 15 SLIDE in Archivo 800 at 96px and the studio footer in muted grey.

The single entry control is grid-aligned and hard-edged, sitting inside the composition rather than floating over it. There is no gradient, no centred subtext, and no decorative imagery: the composition is a subway-map cover, and the grid itself is the decoration.

8. Interaction Model & Motion Direction

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

The direction specifies restrained, functional motion matching Vignelli's "instant state, no decorative animation," with a still tempo and flat hero dimensionality. This section copies that tempo rather than re-deciding it.

Landing Hero Motion Brief

• Focal subject: The two-colour civic poster — the full-bleed red block on the left 7 columns carrying the oversized reversed-out stacked headline, against the off-white right column holding the four-dot colour-coded table of contents.
• Input → transformation → outcome thesis: The visitor arrives at the anonymous entry and reads the deck's identity; the composition presents itself as a single composed frame rather than assembling itself; the visitor activates the entry control and the deck opens at Cover. No accepted behaviour is added — the only transformation is the move from entry to deck.
• Motion vocabulary: A 180ms horizontal push with no easing theatrics for slide transitions; a single 200ms opacity step for content on each slide, never staggered by element; category dots and rules static; the slide-number counter stepping in sync with the transition. Nothing bounces, springs, or scroll-scrubs.
• Composed first frame: The red block and off-white column already in place, the stacked headline fully set, the four colour dots and their labels legible, 15 SLIDE and the footer in the bottom band, and the entry control visible and grid-aligned.
• Reduced-motion state: With prefers-reduced-motion, transitions become instant cuts and all reveals are static. The first frame is unchanged and fully readable; the entry control remains available.

9. Non-Functional Requirements

NFR-1 — Exact slide count (explicit) The presentation must contain exactly 15 slides. This is a hard constraint from the authoritative source (PKN _15 slide). The deck's page inventory is fixed at 15: Landing plus the 14 deck slides Cover, Objectives, Structure, Overview, Concepts, Principles, Context, Examples, Analysis, Discussion, Activity, Summary, Reflection, Quiz. No slide may be added, removed, merged, split, renamed, or reordered.

NFR-2 — Subject, level, and chapter scope (explicit) The content must be PKN, at Kelas 11 SMK level, covering BAB 2. No material outside BAB 2 PKN Kelas 11 SMK may be presented as part of the deck.

NFR-3 — Anonymous access (required_inference) Every page, including the Landing entry and all 14 deck slides, must be reachable without an account, sign-in, or any identity interaction. No page is protected. This follows from the accepted journeys: neither the teacher's nor the student's work requires durable actor-specific state, a commitment, an entitlement, or a value transfer bound to a particular participant.

NFR-4 — No differentiated permissions (required_inference) There is no role-based visibility or permission control. The teacher and the student see the same complete deck. No accepted requirement establishes differentiated control or visibility over shared product state.

NFR-5 — Statelessness (required_inference) The product stores nothing about the visitor. Quiz answers are not recorded, scored, or transmitted; there is no progress persistence, no analytics of learner responses, and no backend data store.

NFR-6 — Legibility when projected (required_inference) Slide titles, section labels, slide numbers, and body text must be legible from across a classroom at projection size, using the type scale in Section 6.

NFR-7 — Readable text and controls stay whole at every viewport (explicit, from the creative direction) Headlines, wordmarks, labels, numbers, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit. No other element may cover any part of them. At 375px the grid collapses to 4 columns, label/value pairs stack, and all rules and numbers stay inside the viewport. Imagery and decoration may be cropped, bled, overlapped, or cut as the direction asks, as long as they cover no readable text or control.

NFR-8 — Reduced motion (explicit, from the creative direction) With prefers-reduced-motion, transitions become instant cuts and all reveals are static, while the deck remains fully usable and readable.

NFR-9 — No gradients, no forbidden template look (explicit, from the creative direction) No gradients anywhere. The generic indigo/blue-on-white SaaS template is forbidden. The deck's blue is #1B4FA0 and functions as a category code, not as the primary colour.

NFR-10 — Presentation-paced, not web-paced (explicit, from the creative direction) Motion is restrained and functional. No bouncy, springy, or scroll-scrubbed animation.

10. Tech Stack

No technology choices were specified by the user. The following are coherent defaults for a static, anonymous, presentation-paced web deck, labelled as defaults.

• Frontend: React with a component-per-slide structure, one component for each of the 15 pages. [Default — not specified by user]
• Styling: CSS with custom properties for the colour tokens in Section 6, a 12-column grid, and clamp() for the type scale. [Default — not specified by user]
• Fonts: Archivo, self-hosted or loaded as a webfont, in the weights the direction requires (700–900 for headings, regular for body). [Default — not specified by user]
• Build and serving: A static build served as static files. [Default — not specified by user]
• Storage: None. The product is stateless and stores nothing. [Default — not specified by user]
• Backend: None required. No API, database, or server-side logic is needed for any accepted requirement. [Default — not specified by user]
• Containerisation: Docker / docker-compose for local development and a reproducible static build. [Default — not specified by user]
• Orchestration: Not required. The delivery shape does not call for Kubernetes. [Default — not specified by user]

11. Assumptions and Constraints

Assumptions

• A-1: The 15-slide count is satisfied by the Landing entry page plus the 14 deck slides Cover through Quiz, giving a total of 15 pages. This reading follows the page contract, which fixes the page count at exactly 15 and lists Landing as the first page. (Assumption — derived from the explicit page-count constraint and the supplied page contract.)
• A-2: The teacher and the student are the only active human participants. Both are inferred roles required to make the accepted journeys executable; no other human actor is justified by the source. (Assumption — from the accepted persona catalog.)
• A-3: The deck's PKN BAB 2 subject matter is presented as curriculum material within the slides themselves. No external content source was declared, so no factual inventory is reproduced and no external content is fetched. (Assumption — from the absence of a content_source directive.)
• A-4: The quiz is an in-class comprehension check presented on a slide. Because no requirement asks the product to record, score, or report answers, the product does not do so. (Assumption — from the accepted requirement scope.)

Constraints

• C-1: Exactly 15 slides. No additions, removals, merges, splits, renames, or reordering. (Explicit.)
• C-2: Subject PKN, level Kelas 11 SMK, chapter BAB 2. (Explicit.)
• C-3: All pages are anonymous and unprotected; no account, sign-in, or identity interaction anywhere. (Required inference from the accepted journeys.)
• C-4: No role-based visibility or permission control. (Required inference.)
• C-5: No storage of visitor data, quiz answers, or progress. (Required inference.)
• C-6: No gradients; the generic indigo/blue-on-white SaaS template is forbidden. (Explicit, from the creative direction.)
• C-7: Hard edges only — no border radius, no soft shadows, no glassmorphism. (Explicit, from the creative direction.)
• C-8: Readable text and controls stay whole and inside the viewport at 375px, 768px, and 1280px. (Explicit, from the creative direction.)
• C-9: With prefers-reduced-motion, transitions become instant cuts and reveals are static. (Explicit, from the creative direction.)
• C-10: No more than four coded colours on a single slide, and never colour without a category meaning. (Explicit, from the creative direction.)

Future Requirements

None. No future-horizon capabilities were accepted in the authoritative requirement thread, and none are described in this document.

12. Glossary

• BAB 2 — Chapter 2 of the PKN curriculum for Kelas 11 SMK; the specific chapter this deck covers.
• PKN (Pendidikan Kewarganegaraan) — Civic Education, the Indonesian school subject this deck teaches.
• SMK (Sekolah Menengah Kejuruan) — Indonesian vocational secondary school; the level for which this deck is made.
• Kelas 11 — Grade 11, the school year this deck targets.
• Slide — One page of the presentation. The deck has exactly 15.
• Section label — The 14px all-caps, letter-spaced label at the top-left of every slide, paired with a coloured category dot.
• Category dot — A small circle in one of the four coded colours (red, blue, yellow, green) marking a slide's category. Circles are used only as category dots and as the numeral medallion on section dividers.
• Slide number — The NN / 15 indicator in Archivo 800 at the bottom-left of every slide; the deck's primary wayfinding device.
• Footer rule — The 1px full-width rule separating the footer band from the content on every slide.
• Wayfinding key — The four-dot colour-coded table of contents on the cover and entry, naming the deck's four sections.
• Landing — The anonymous public entry page that introduces the presentation and lets a visitor enter the deck.
• Deck — The 15-slide presentation as a whole.