System Requirements Document for pancasila-korupsi

1. Introduction

pancasila-korupsi is the production and publication system for Episode 01 of the Integritas Bangsa channel — a civic-education talk program about Pancasila as a system of ethics, specifically in opposing corruption. The current deliverable is Segment 1: "Membuka Realita – Dari Pungli hingga Erosi Moral", spanning 00.00–04.00 of the episode.

The product intent is to present, in a relaxed studio conversation, a host and three panelists who move from lived reality to ethical framing: the host opens the topic, prompts each panelist for what first comes to mind when hearing the word "korupsi," and closes with a synthesis that corruption is not only lost state money but the collapse of ethical norms. The audience is Indonesian citizens — students, civil servants, first-time voters, farmers' families — watching on phones in daylight, who should come away understanding how corruption erodes ethical norms and how Pancasila serves as an ethical system against it.

The system delivers this as a public, no-account web publication: an anonymous entry surface that introduces the channel and points to the episode, and the episode surface itself, which presents the segment as a numbered public document with a colour-coded transcript and a schematic "peta korupsi" diagram.

2. System Overview

The current system is a two-surface public web publication:

• Landing — the anonymous first impression for the Integritas Bangsa channel: it states the channel's purpose and directs viewers to the episode about Pancasila as an ethical system against corruption.
• Episode — presents Segment 1, "Membuka Realita – Dari Pungli hingga Erosi Moral," including the host's opening and synthesis, the three panelist responses, and the specified studio arrangement.

Both surfaces are application-owned custom pages with no access requirement — no sign-in, no account, no identity continuity. There is no durable actor-specific state to own, no commitment, entitlement, or value transfer bound to a participant, and therefore no application identity is established anywhere in the current system.

Actors. The accepted active-human catalog is closed and consists of exactly three personas: Podcast Host (Pak Arya), Panelist / Discussion Participant (Dimas, Siti, Mas Budi), and Audience / Viewer. The host and panelists are the on-camera participants whose words constitute the episode content; the viewer is the recipient who consumes the published segment. No other human actors are in scope.

Accepted behavior. The system presents the host's welcome and framing, his prompt to the panelists, each panelist's distinct response (Dimas's outrage at grand corruption, Siti's village-road testimony, Mas Budi's petty-corruption/pungli account), and the host's synthesis. It presents the studio arrangement as specified: Pak Arya centered, Dimas and Siti on the left, Mas Budi on the right. It presents the segment title and its 00.00–04.00 range.

Ownership. All accepted human-facing behavior is owned by the two first-party pages above. There is no provider-owned surface, no external destination, and no headless delivery in the current scope. Backend execution, if any, supports these pages only and owns no human interaction.

Narrow exclusions. This document covers Segment 1 only. No later segments, no episode series index, no comment system, no user accounts, no upload or authoring tools, no analytics dashboards, and no monetization surfaces are in scope. The system does not adjudicate, report, or process corruption cases; it presents a discussion about corruption as an ethical problem.

2a. Product Interpretation and Delivery Boundary

Delivery ownership. The episode is delivered as a first-party public web publication. Both surfaces are anonymously reachable: a viewer arriving from a shared link, a search result, or a channel reference can read the landing page and open the episode without creating an account or proving identity. This is deliberate and matches the source: the episode is a broadcast addressed to the general public, and nothing in the accepted behavior requires a viewer to be recognized, resumed, or bound to a durable record.

Why no identity is established. Application-owned identity is introduced only when a human must privately own or resume durable actor-specific state, or when a commitment, decision, entitlement, or value transfer must remain bound to the correct participant. Here, the viewer's outcome is understanding gained from a published segment — a read-only, non-durable outcome. The host's and panelists' contributions are authored content, not interactive product state. No accepted journey requires continuity across visits, so no first-use identity establishment, returning verification, invitation, provisioning, or deployment bootstrap is included.

Current vs. future boundary. Current scope is exactly the two surfaces and the Segment 1 content described in this document. Anything beyond Segment 1 — further segments, further episodes, interactive or participatory features — is future work and is not part of current pages or acceptance. The system does not currently include any mechanism for viewers to submit, respond, or contribute.

Access boundary. Because both surfaces are public and no protected destination exists, there is no anonymous-entry-versus-protected-state split to reconcile. The Landing page is the anonymous entry surface; the Episode page is also anonymously reachable. No page owns an access-establishment interaction, because none is required.

2c. Page Content and Component Coverage

Landing

Information and state. The Landing page is the anonymous first impression for the Integritas Bangsa channel. It states the channel's purpose — a civic-education talk channel discussing Pancasila as a system of ethics against corruption — and identifies the current episode as Episode 01, Segment 1, "Membuka Realita – Dari Pungli hingga Erosi Moral," spanning 00.00–04.00. It carries the episode's framing sentence: "Korupsi bukan cuma hilangnya uang negara — runtuhnya norma etika."

Primary action. Open the episode ("TONTON SEGMEN 01"), navigating to the Episode page.

Supporting actions. Read the speaker colour key to know who appears in the segment; read the segment title and time range.

Domain entities. Channel (Integritas Bangsa); Episode (Episode 01); Segment (Segment 1, "Membuka Realita – Dari Pungli hingga Erosi Moral," 00.00–04.00); Speaker (Pak Arya, Dimas, Siti, Mas Budi) with role lines and colour codes.

Component responsibilities.

• Masthead bar — full-width red #D3222A strip, edge to edge, height 56px at 1280 and 44px at 375; carries "INTEGRITAS BANGSA / EPISODE 01" in 13px uppercase Archivo, tracked +0.08em, flush left, and the timestamp "00.00–04.00" flush right in IBM Plex Mono. It doubles as the episode's wayfinding sign.
• Headline block — "MEMBUKA REALITA" in Archivo 800 uppercase, 44px mobile → 112px desktop, flush left, occupying columns 1–9; "DARI PUNGLI HINGGA EROSI MORAL" as a second line at 28px → 64px, flush left directly beneath with no gap, so the two lines read as one stacked block spanning two-thirds of the viewport width.
• Visible grid — the 12-column grid with 24px gutters and 1200px max content width is drawn as faint 1px rules on the hero so the system is exposed.
• Speaker colour key panel — black-ruled data panel in columns 10–12 listing the four speakers with a 4px colour bar and a one-line role each: PAK ARYA (black), DIMAS (red), SITI (yellow), MAS BUDI (green).
• Rule and CTA band — a single 2px black rule runs the full viewport width; pinned immediately beneath it on the left is one rectangular CTA, solid red, 2px black border, labelled "TONTON SEGMEN 01"; on the right sits the framing sentence in 18px Source Sans 3.
• Pungli fact ticker — a slow marquee ticker of pungli facts along one rule; decoration only, carrying no required reading, stopping and wrapping under prefers-reduced-motion.

States.

• Loading: the page is static content; no data fetch is required. If any asset is deferred, the type, rules, and colour blocks render first so the composition is complete before imagery.
• Empty: not applicable — the page has no collection that can be empty.
• Success: the viewer sees the channel identity, the segment title and range, the speaker key, and the CTA, and can open the episode.
• Error: if the episode link cannot be resolved, the CTA remains visible and the page still presents the channel purpose, segment title, range, and speaker key; the viewer is not left with a blank or broken composition.
• Recovery: the viewer can retry the CTA, or navigate directly to the Episode page by its own address.

Episode

Information and state. The Episode page presents Segment 1, "Membuka Realita – Dari Pungli hingga Erosi Moral," 00.00–04.00, as a numbered public document. It carries the full segment content: the host's welcome and framing, his prompt to the panelists, each panelist's response, and the host's synthesis. It presents the studio arrangement as specified — Pak Arya centered, Dimas and Siti on the left, Mas Budi on the right — and the speaker colour coding that lets the four voices be read as four transit lines on one map.

Primary action. Read the segment transcript in order, from the host's opening through the synthesis.

Supporting actions. Use the sticky rail to jump to a timestamp or speaker turn; read the "peta korupsi" schematic of Siti's village road; read the budget-stack diagram; read the "50 RIBU" figure at display size.

Domain entities. Segment (title, 00.00–04.00); Speaker turn (speaker, timestamp, quote, colour code); Studio arrangement (Pak Arya center; Dimas and Siti left; Mas Budi right); Village road (repaired three months ago, now badly potholed); Road budget (skimmed from the top level down to the contractor); Local farmers (difficulty bringing harvests to market); Pungli / petty corruption (uang pelicin of 50 thousand rupiah to speed up a business permit or KTP); "Uang lelah" (the dismissive label many apply to it); Pancasila values (cast aside when uang pelicin is asked for or given).

Component responsibilities.

• Masthead bar — the same full-width red #D3222A strip as on Landing, carrying "INTEGRITAS BANGSA / EPISODE 01" flush left and "00.00–04.00" flush right in mono.
• Sticky left rail — timestamps, the segment spine, and the speaker colour key. On mobile it collapses to a horizontal sticky strip of timestamps.
• Segment spine — the progress spine that advances in discrete steps as the reader moves through the segment; the active segment marker is red #D3222A.
• Numbered section bands — every section opens with a 2px black rule carrying the band number and title set flush left, e.g. "01 / MEMBUKA REALITA," so the page reads as a numbered public document rather than a scrolling feed.
• Transcript column — a single-column transcript at a 66ch measure. Speaker turns are tabular: a colour-coded 4px left bar (black for Pak Arya, red for Dimas, yellow for Siti, green for Mas Budi), the speaker name in 13px uppercase, the timestamp in IBM Plex Mono, then the quote. Quotes appear with a 120ms no-easing fade as they enter.
• Host opening turn — Pak Arya's welcome and framing: the topic is Pancasila as a system of ethics, specifically in opposing corruption, the greatest crime of the nation; before theory, reality.
• Host prompt turn — Pak Arya's question asking Dimas, Siti, and Mas Budi what first comes to mind when hearing the word "korupsi."
• Dimas turn — public money being robbed; neatly suited officials smiling before KPK cameras without a shred of shame; a feeling of disgust.
• Siti turn — corruption as the suffering of ordinary people; a village road near her home repaired three months ago that is now badly potholed; the road budget skimmed from the top level down to the contractor; local farmers struggling to bring harvests to market.
• Mas Budi turn — corruption is not always worth billions of rupiah; as a young bureaucracy practitioner he often sees small-scale corruption — petty corruption or pungli — such as paying a 50 thousand "uang pelicin" to speed up a business permit or KTP; many treat it as mere "uang lelah," but it is the main seed of a broken ethical system.
• Host synthesis turn — the three examples show corruption is not only lost state money but the collapse of ethical norms; when someone asks for or gives uang pelicin, Pancasila values are being cast aside.
• "Peta korupsi" schematic — a wayfinding map of one village road: the budget line from pusat → kabupaten → kontraktor → aspal, drawn as a black line with red and yellow stations, plus a pothole count as a bar chart on the same baseline. A diagram, not an illustration.
• Budget-stack diagram — the road budget shown as a stack of rupiah blocks with the skimmed portion cut away in red.
• "50 RIBU" display figure — the figure set at display size in Archivo 800 with a yellow #F2B705 highlight block behind it, sitting flush against a black rule, giving petty corruption the same typographic weight as the billions.
• Speaker portraits — high-contrast black-and-white cutouts, cropped square and hard-edged, treated as pictograms rather than photos.
• Pungli fact ticker — the same slow marquee along one rule; decoration only, stopping and wrapping under prefers-reduced-motion.

States.

• Loading: the transcript renders as a document; if any diagram or portrait asset is deferred, the type, rules, colour bars, and timestamps render first so the reading order is complete.
• Empty: not applicable — the segment content is fixed and always present.
• Success: the viewer reads the full segment in order, sees the studio arrangement and speaker coding, and reaches the host's synthesis.
• Error: if a diagram or portrait fails to load, the transcript text, speaker names, timestamps, and colour bars remain intact and readable; the segment's argument is not lost.
• Recovery: the viewer can continue reading the transcript without the failed asset, or reload the page; the sticky rail continues to provide navigation.

3. Functional Requirements

FR-1 — Channel and episode introduction. As an Audience / Viewer, I should see the Integritas Bangsa channel identified as a civic-education talk channel discussing Pancasila as a system of ethics against corruption, and see the current episode identified as Episode 01, Segment 1, "Membuka Realita – Dari Pungli hingga Erosi Moral," spanning 00.00–04.00, so that I know what I am about to watch and where it sits in the episode. Provenance: explicit (channel and segment identity), required_inference (the Landing surface that carries it). Lifecycle: Trigger — the viewer opens the Landing page. Input — none. Observable result — the channel purpose, episode number, segment title, and time range are visible. Access state — anonymous, no account. Failure/recovery — if the episode link cannot be resolved, the identity content still renders and the viewer can navigate to the Episode page directly. Continuation — the viewer opens the episode. Acceptance: the Landing page shows the channel name, the episode number, the exact segment title "Membuka Realita – Dari Pungli hingga Erosi Moral," and the range 00.00–04.00.

FR-2 — Open the episode. As an Audience / Viewer, I should be able to open Segment 1 from the Landing page with a single rectangular call to action, so that I reach the episode content without an intervening step. Provenance: required_inference. Lifecycle: Trigger — the viewer activates "TONTON SEGMEN 01." Input — the activation. Observable result — the Episode page for Segment 1 is presented. Access state — anonymous, no account. Failure/recovery — if the destination cannot be resolved, the CTA remains visible and the viewer can retry or navigate by the Episode page's own address. Continuation — the viewer reads the segment. Acceptance: activating the CTA presents the Episode page for Segment 1.

FR-3 — Speaker colour key. As an Audience / Viewer, I should see the four speakers listed as a colour key — PAK ARYA (black), DIMAS (red), SITI (yellow), MAS BUDI (green) — each with a 4px colour bar and a one-line role, so that I can navigate the segment like a map. Provenance: required_inference. Lifecycle: Trigger — the viewer views the Landing page or the Episode rail. Input — none. Observable result — four speakers, each with its colour bar and role line, are visible. Access state — anonymous. Failure/recovery — the key is type and colour blocks and renders without imagery. Continuation — the viewer uses the coding to follow the transcript. Acceptance: all four speakers appear with the specified colour bars and role lines.

FR-4 — Studio arrangement. As an Audience / Viewer, I should see the segment's studio arrangement presented as specified — a relaxed studio atmosphere with Pak Arya centered, Dimas and Siti on the left, and Mas Budi on the right — so that the setting of the conversation is clear. Provenance: explicit (constraint), required_inference (its presentation on the Episode page). Lifecycle: Trigger — the viewer opens the Episode page. Input — none. Observable result — the arrangement is presented. Access state — anonymous. Failure/recovery — the arrangement is presented in type and diagram, not dependent on photography. Continuation — the viewer reads the segment. Acceptance: the Episode page presents Pak Arya centered, Dimas and Siti on the left, and Mas Budi on the right.

FR-5 — Host's welcome and framing. As a Podcast Host, I should have my welcome and framing presented: the topic is Pancasila as a system of ethics, specifically in opposing corruption, the greatest crime of the nation, and before theory we speak of reality. Provenance: explicit. Lifecycle: Trigger — the viewer reaches the opening turn. Input — the host's authored words. Observable result — the welcome and framing are readable as the segment's opening. Access state — anonymous. Failure/recovery — the text renders independently of any asset. Continuation — the host's prompt follows. Acceptance: the opening turn contains the welcome, the topic framing, and the move from reality before theory.

FR-6 — Host's prompt to the panelists. As a Podcast Host, I should have my prompt presented, asking Dimas, Siti, and Mas Budi what first comes to mind when hearing the word "korupsi," so that the panelists' responses are visibly solicited. Provenance: explicit. Lifecycle: Trigger — the viewer reaches the prompt turn. Input — the host's authored words. Observable result — the prompt is readable and names all three panelists. Access state — anonymous. Failure/recovery — the text renders independently of any asset. Continuation — the panelist responses follow. Acceptance: the prompt names Dimas, Siti, and Mas Budi and asks what first comes to mind on hearing "korupsi."

FR-7 — Dimas's response. As a Panelist / Discussion Participant, I should have Dimas's response presented: public money being robbed; neatly suited officials smiling before KPK cameras without a shred of shame; a feeling of disgust. Provenance: explicit. Lifecycle: Trigger — the viewer reaches Dimas's turn. Input — Dimas's authored words. Observable result — the response is readable under Dimas's name, timestamp, and red colour bar. Access state — anonymous. Failure/recovery — the text renders independently of any asset. Continuation — Siti's response follows. Acceptance: Dimas's turn contains the robbed public money, the officials smiling before KPK cameras without shame, and the disgust.

FR-8 — Siti's response. As a Panelist / Discussion Participant, I should have Siti's response presented: corruption as the suffering of ordinary people, illustrated by a village road near her home repaired three months ago that is now badly potholed because the road budget was skimmed from the top level down to the contractor, making it hard for local farmers to bring harvests to market. Provenance: explicit. Lifecycle: Trigger — the viewer reaches Siti's turn. Input — Siti's authored words. Observable result — the response is readable under Siti's name, timestamp, and yellow colour bar. Access state — anonymous. Failure/recovery — the text renders independently of any asset. Continuation — Mas Budi's response follows. Acceptance: Siti's turn contains the suffering of ordinary people, the three-month-old village road now badly potholed, the budget skimmed from the top level to the contractor, and the farmers' difficulty reaching market.

FR-9 — Mas Budi's response. As a Panelist / Discussion Participant, I should have Mas Budi's response presented: corruption is not always worth billions of rupiah; as a young bureaucracy practitioner he often sees small-scale corruption — petty corruption or pungli — such as paying a 50 thousand "uang pelicin" to speed up a business permit or KTP, which many treat as mere "uang lelah" but which is the main seed of a broken ethical system. Provenance: explicit. Lifecycle: Trigger — the viewer reaches Mas Budi's turn. Input — Mas Budi's authored words. Observable result — the response is readable under Mas Budi's name, timestamp, and green colour bar. Access state — anonymous. Failure/recovery — the text renders independently of any asset. Continuation — the host's synthesis follows. Acceptance: Mas Budi's turn contains the not-always-billions point, petty corruption/pungli, the 50 thousand uang pelicin for a business permit or KTP, the "uang lelah" label, and the broken-ethical-system claim.

FR-10 — Host's synthesis. As a Podcast Host, I should have my synthesis presented: the three examples show corruption is not only lost state money but the collapse of ethical norms, and when someone asks for or gives uang pelicin, Pancasila values are being cast aside. Provenance: explicit. Lifecycle: Trigger — the viewer reaches the closing turn. Input — the host's authored words. Observable result — the synthesis is readable as the segment's conclusion. Access state — anonymous. Failure/recovery — the text renders independently of any asset. Continuation — the segment ends at 04.00. Acceptance: the synthesis contains the not-only-lost-state-money claim, the collapse of ethical norms, and the casting aside of Pancasila values when uang pelicin is asked for or given.

FR-11 — Colour-coded tabular transcript. As an Audience / Viewer, I should read the segment as a colour-coded tabular transcript — a 4px left bar, the speaker name in 13px uppercase, the timestamp in mono, then the quote — so that the four voices read as four transit lines on one map. Provenance: required_inference. Lifecycle: Trigger — the viewer reads the Episode page. Input — scrolling or rail navigation. Observable result — each turn is rendered with its colour bar, name, timestamp, and quote. Access state — anonymous. Failure/recovery — if a diagram or portrait fails, the transcript remains intact. Continuation — the viewer reads to the synthesis. Acceptance: every speaker turn renders with the specified colour bar, uppercase name, mono timestamp, and quote.

FR-12 — Sticky rail and segment spine. As an Audience / Viewer, I should have a sticky left rail carrying timestamps, the segment spine, and the speaker colour key, with the progress spine advancing in discrete steps and the active segment marker in red, so that I can navigate the segment and see where I am. Provenance: required_inference. Lifecycle: Trigger — the viewer scrolls the Episode page. Input — scroll position or rail selection. Observable result — the spine advances in discrete steps and the active marker is red. Access state — anonymous. Failure/recovery — on mobile the rail collapses to a horizontal sticky strip of timestamps and the transcript keeps its colour bars. Continuation — the viewer continues reading. Acceptance: the rail is present on desktop, collapses to a horizontal sticky strip on mobile, and the active marker is red.

FR-13 — "Peta korupsi" schematic. As an Audience / Viewer, I should see a schematic wayfinding map of Siti's village road — the budget line from pusat → kabupaten → kontraktor → aspal drawn as a black line with red and yellow stations, plus a pothole count as a bar chart on the same baseline — so that the budget skim is legible as a diagram rather than an illustration. Provenance: required_inference. Lifecycle: Trigger — the viewer reaches Siti's turn or the diagram band. Input — none. Observable result — the budget line, its stations, and the pothole bar chart are visible. Access state — anonymous. Failure/recovery — if the diagram fails to load, Siti's transcript text still carries the account. Continuation — the viewer continues reading. Acceptance: the diagram shows the pusat → kabupaten → kontraktor → aspal line with red and yellow stations and a pothole bar chart on the same baseline.

FR-14 — Budget-stack diagram. As an Audience / Viewer, I should see the road budget as a stack of rupiah blocks with the skimmed portion cut away in red, so that the amount removed is visible at a glance. Provenance: required_inference. Lifecycle: Trigger — the viewer reaches the diagram band. Input — none. Observable result — the stack and the red cut-away portion are visible. Access state — anonymous. Failure/recovery — if the diagram fails to load, the transcript still carries the account. Continuation — the viewer continues reading. Acceptance: the diagram shows the budget as a stack with the skimmed portion cut away in red.

FR-15 — "50 RIBU" display figure. As an Audience / Viewer, I should see the "50 RIBU" figure set at display size in Archivo 800 with a yellow highlight block behind it, sitting flush against a black rule, so that petty corruption is given the same typographic weight as the billions. Provenance: required_inference. Lifecycle: Trigger — the viewer reaches Mas Budi's turn or the figure band. Input — none. Observable result — the figure is set at display size with the yellow highlight against a black rule. Access state — anonymous. Failure/recovery — the figure is type and colour and renders without imagery. Continuation — the viewer continues reading. Acceptance: the "50 RIBU" figure renders at display size in Archivo 800 with a yellow highlight block flush against a black rule.

FR-16 — Numbered section bands. As an Audience / Viewer, I should see every section band opened by a 2px black rule carrying the band number and title set flush left, e.g. "01 / MEMBUKA REALITA," so that the page reads as a numbered public document rather than a scrolling feed. Provenance: required_inference. Lifecycle: Trigger — the viewer scrolls the Episode page. Input — scroll position. Observable result — each band opens with its numbered rule. Access state — anonymous. Failure/recovery — the rules are type and colour and render without imagery. Continuation — the viewer continues reading. Acceptance: each section band opens with a 2px black rule and a flush-left number and title.

FR-17 — Pungli fact ticker. As an Audience / Viewer, I should see a slow marquee ticker of pungli facts along one rule, which is decoration only and carries no required reading, and which stops and wraps under prefers-reduced-motion. Provenance: required_inference. Lifecycle: Trigger — the page renders. Input — none. Observable result — the ticker moves slowly along one rule; under reduced motion it stops and wraps. Access state — anonymous. Failure/recovery — if the ticker does not render, no required reading is lost. Continuation — the viewer continues reading. Acceptance: the ticker moves along one rule, carries no required reading, and stops and wraps under prefers-reduced-motion.

FR-18 — Speaker portraits as pictograms. As an Audience / Viewer, I should see the speakers as high-contrast black-and-white cutouts, cropped square and hard-edged, treated as pictograms rather than photos, so that the page stays diagrammatic and free of stock photography. Provenance: required_inference. Lifecycle: Trigger — the viewer views the speaker key or turns. Input — none. Observable result — square, hard-edged, high-contrast cutouts are shown. Access state — anonymous. Failure/recovery — if a portrait fails to load, the name, colour bar, and role line remain. Continuation — the viewer continues reading. Acceptance: portraits are square, hard-edged, high-contrast black-and-white cutouts, with no stock photography used.

FR-19 — Readable text and controls stay whole. As an Audience / Viewer, I should have headlines, wordmarks, labels, numbers, card text, and controls 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, so that I can read and operate the page on a phone in daylight. Provenance: explicit (creative direction). Lifecycle: Trigger — the viewer opens either page at any supported viewport. Input — viewport size. Observable result — all readable text and controls are whole and uncovered. Access state — anonymous. Failure/recovery — text wraps or scales rather than clipping. Continuation — the viewer reads and operates the page. Acceptance: at 375px, 768px, and 1280px, no readable text or control is clipped, cropped, or covered.

4. User Personas

Podcast Host

Product context. Pak Arya hosts the Integritas Bangsa channel discussion. He sits at the center of the studio, with Dimas and Siti on his left and Mas Budi on his right, in a relaxed studio atmosphere. He is the segment's framing voice: he opens the episode, sets the topic, and closes the argument.

Primary goal. Guide the conversation from lived reality toward the ethical framing, producing a coherent, on-topic episode segment.

Distinct accepted responsibilities. He welcomes viewers back to the channel and names the topic: Pancasila as a system of ethics, specifically in opposing corruption, the greatest crime of the nation. He establishes the segment's method — before theory, reality. He prompts each panelist with the question of what first comes to mind when hearing the word "korupsi." He closes with a synthesis that draws the three examples together.

Relevant inputs or decisions. His own framing of the topic; the panelists' responses as they arrive; the decision to move from reality to theory; the decision to close on the ethical-norms claim rather than on the money lost.

Interactions with other accepted participants. He addresses the camera and the viewer directly in his welcome; he addresses Dimas, Siti, and Mas Budi by name in his prompt; he responds to all three in his synthesis. His words are the frame within which the panelists' contributions are read.

Observable success. The segment opens with his welcome and framing, contains his prompt naming all three panelists, and closes with his synthesis that corruption is not only lost state money but the collapse of ethical norms, and that when someone asks for or gives uang pelicin, Pancasila values are being cast aside.

What makes this role different. The host owns the segment's structure and its argumentative arc. He is the only participant who speaks both before and after the panelists, and the only one whose words are addressed to the viewer as well as to the room.

Panelist / Discussion Participant

Product context. Dimas, Siti, and Mas Budi each sit in the studio — Dimas and Siti on the host's left, Mas Budi on his right — and each contributes a distinct perspective on corruption. They are not interchangeable: each speaks from a different vantage point, and the segment's argument depends on the contrast between them.

Primary goal. Respond to the host's prompt with a concrete example or observation that builds the episode's argument.

Distinct accepted responsibilities.

• Dimas speaks from outrage: public money being robbed; neatly suited officials smiling before KPK cameras without a shred of shame; a feeling of disgust. His register is heated and forward-leaning.
• Siti speaks from the everyday suffering of ordinary people: a village road near her home repaired three months ago that is now badly potholed; the road budget skimmed from the top level down to the contractor; local farmers struggling to bring harvests to market. Her contribution is the segment's concrete case.
• Mas Budi speaks as a young bureaucracy practitioner: corruption is not always worth billions of rupiah; he often sees small-scale corruption — petty corruption or pungli — such as paying a 50 thousand "uang pelicin" to speed up a business permit or KTP; many treat it as mere "uang lelah," but it is the main seed of a broken ethical system. His contribution reframes the scale of the problem.

Relevant inputs or decisions. The host's prompt; each panelist's own experience and observation; the decision of which example to offer and how to frame it.

Interactions with other accepted participants. Each responds to the host's prompt in turn. Mas Budi addresses Siti directly by name when he extends her point about scale. Their contributions are read together as the three examples the host synthesizes.

Observable success. Each panelist's turn appears under their name, timestamp, and colour bar, and each contains the specific content described above.

What makes this role different. The panelists own the segment's evidence. They supply the lived reality the host frames, and each supplies a different kind of reality — outrage, everyday infrastructure, and bureaucratic routine — which is why the segment needs all three rather than one generic voice.

Audience / Viewer

Product context. Viewers of the Integritas Bangsa channel are the intended recipients of the episode. They are Indonesian citizens — students, civil servants, first-time voters, farmers' families — watching on phones in daylight. They arrive anonymously, often from a shared link or a channel reference.

Primary goal. Understand how corruption erodes ethical norms and how Pancasila serves as an ethical system against it.

Distinct accepted responsibilities. Follow the discussion from the host's opening through the panelists' responses to the synthesis; use the speaker colour key and rail to navigate the segment; read the diagrams that make the budget skim and the 50-ribu figure legible.

Relevant inputs or decisions. The decision to open the episode; the decision of where to read or jump within it; the decision to continue to the synthesis.

Interactions with other accepted participants. The viewer is addressed directly by the host's welcome and is the recipient of the whole segment. The viewer does not speak in the segment; their side of the lifecycle is reading and understanding.

Observable success. The viewer reaches the host's synthesis and can state that corruption is not only lost state money but the collapse of ethical norms, and that asking for or giving uang pelicin casts aside Pancasila values.

What makes this role different. The viewer is the only participant who does not author content. Their success is comprehension, and the page's navigation, colour coding, and diagrams exist to serve it.

5. Core User Flows

Flow 1 — Viewer arrives and opens Segment 1

1. Starting context. The viewer is on a phone at 375px, in daylight, arriving at the Landing page anonymously from a shared link or channel reference. No account exists and none is required.
2. Viewer action. The viewer reads the masthead: "INTEGRITAS BANGSA / EPISODE 01" flush left, "00.00–04.00" flush right in mono.
3. Observable result. The viewer sees the headline block "MEMBUKA REALITA" with "DARI PUNGLI HINGGA EROSI MORAL" directly beneath it, and the speaker colour key listing PAK ARYA (black), DIMAS (red), SITI (yellow), MAS BUDI (green).
4. Viewer action. The viewer reads the framing sentence: "Korupsi bukan cuma hilangnya uang negara — runtuhnya norma etika."
5. Viewer decision. The viewer activates the rectangular red CTA "TONTON SEGMEN 01."
6. Observable result. The Episode page for Segment 1 is presented.
7. Failure/recovery. If the CTA cannot resolve, the CTA remains visible and the viewer can retry or navigate to the Episode page by its own address; the Landing page still presents the channel purpose, segment title, range, and speaker key.
8. Next step. The viewer reads the segment (Flow 2).

Flow 2 — Viewer reads the segment

1. Starting context. The viewer is on the Episode page for Segment 1, anonymously, at 375px or 1280px.
2. Observable result. The masthead bar runs edge to edge in red #D3222A. On desktop, the sticky left rail shows timestamps, the segment spine, and the speaker colour key; on mobile, the rail is a horizontal sticky strip of timestamps.
3. Viewer action. The viewer reads the first numbered band, "01 / MEMBUKA REALITA," opened by a 2px black rule.
4. Observable result. The host's opening turn appears with a black 4px left bar, "PAK ARYA" in 13px uppercase, a mono timestamp, and the welcome and framing: the topic is Pancasila as a system of ethics, specifically in opposing corruption, the greatest crime of the nation; before theory, reality.
5. Viewer action. The viewer continues to the host's prompt.
6. Observable result. The prompt asks Dimas, Siti, and Mas Budi what first comes to mind when hearing the word "korupsi."
7. Viewer action. The viewer reads Dimas's turn.
8. Observable result. Dimas's turn appears with a red 4px left bar: public money being robbed; neatly suited officials smiling before KPK cameras without a shred of shame; a feeling of disgust.
9. Viewer action. The viewer reads Siti's turn.
10. Observable result. Siti's turn appears with a yellow 4px left bar: corruption as the suffering of ordinary people; a village road near her home repaired three months ago that is now badly potholed; the road budget skimmed from the top level down to the contractor; local farmers struggling to bring harvests to market.
11. Viewer action. The viewer reads the "peta korupsi" schematic — the budget line from pusat → kabupaten → kontraktor → aspal as a black line with red and yellow stations, and the pothole count as a bar chart on the same baseline — and the budget-stack diagram with the skimmed portion cut away in red.
12. Observable result. The budget skim is legible as a diagram rather than an illustration.
13. Viewer action. The viewer reads Mas Budi's turn.
14. Observable result. Mas Budi's turn appears with a green 4px left bar: corruption is not always worth billions of rupiah; as a young bureaucracy practitioner he often sees small-scale corruption — petty corruption or pungli — such as paying a 50 thousand "uang pelicin" to speed up a business permit or KTP; many treat it as mere "uang lelah," but it is the main seed of a broken ethical system. The "50 RIBU" figure is set at display size in Archivo 800 with a yellow highlight block behind it, flush against a black rule.
15. Viewer action. The viewer reads the host's synthesis.
16. Observable result. The synthesis states that the three examples show corruption is not only lost state money but the collapse of ethical norms, and that when someone asks for or gives uang pelicin, Pancasila values are being cast aside.
17. Failure/recovery. If a diagram or portrait fails to load, the transcript text, speaker names, timestamps, and colour bars remain intact and the argument is not lost; the viewer can continue reading or reload.
18. Next step. The viewer has reached the end of Segment 1 at 04.00.

Flow 3 — Viewer navigates by rail and colour key

1. Starting context. The viewer is partway through the Episode page and wants to jump to a specific speaker or timestamp.
2. Viewer action. On desktop, the viewer uses the sticky left rail; on mobile, the viewer uses the horizontal sticky strip of timestamps.
3. Observable result. The progress spine advances in discrete steps and the active segment marker is red #D3222A.
4. Viewer action. The viewer selects a timestamp or speaker turn.
5. Observable result. The transcript moves to that turn, which retains its colour bar, uppercase name, mono timestamp, and quote.
6. Failure/recovery. If the rail is unavailable, the viewer scrolls the transcript directly; the colour bars keep the turns distinguishable.
7. Next step. The viewer continues reading from the selected point.

Flow 4 — Host's segment arc (as presented)

1. Starting context. The host is centered in the relaxed studio, with Dimas and Siti on his left and Mas Budi on his right.
2. Host action. He welcomes viewers back to the Integritas Bangsa channel and names the topic: Pancasila as a system of ethics, specifically in opposing corruption, the greatest crime of the nation.
3. Observable result. The welcome and framing appear as the segment's opening turn.
4. Host action. He states that before theory, we speak of reality, and prompts Dimas, Siti, and Mas Budi: what first comes to mind when hearing the word "korupsi"?
5. Observable result. The prompt appears, naming all three panelists.
6. Participant handoff. Dimas, Siti, and Mas Budi each respond in turn (Flows 5–7).
7. Host action. He synthesizes: the three examples show corruption is not only lost state money but the collapse of ethical norms; when someone asks for or gives uang pelicin, Pancasila values are being cast aside.
8. Observable result. The synthesis appears as the segment's closing turn.
9. Next step. The segment ends at 04.00.

Flow 5 — Dimas's contribution

1. Starting context. The host has just asked what first comes to mind on hearing "korupsi."
2. Panelist action. Dimas leans forward and answers in a heated register.
3. Observable result. His turn appears with a red 4px left bar: public money being robbed; neatly suited officials smiling before KPK cameras without a shred of shame; a feeling of disgust.
4. Next step. Siti's turn follows.

Flow 6 — Siti's contribution

1. Starting context. Dimas has just finished.
2. Panelist action. Siti answers from the everyday experience of ordinary people.
3. Observable result. Her turn appears with a yellow 4px left bar: corruption as the suffering of ordinary people; a village road near her home repaired three months ago that is now badly potholed; the road budget skimmed from the top level down to the contractor; local farmers struggling to bring harvests to market.
4. Supporting result. The "peta korupsi" schematic and the budget-stack diagram make the skim legible.
5. Next step. Mas Budi's turn follows.

Flow 7 — Mas Budi's contribution

1. Starting context. Siti has just finished.
2. Panelist action. Mas Budi answers as a young bureaucracy practitioner, addressing Siti by name to extend her point about scale.
3. Observable result. His turn appears with a green 4px left bar: corruption is not always worth billions of rupiah; petty corruption or pungli; paying a 50 thousand "uang pelicin" to speed up a business permit or KTP; the "uang lelah" label; the claim that this is the main seed of a broken ethical system.
4. Supporting result. The "50 RIBU" figure appears at display size with a yellow highlight block, flush against a black rule.
5. Next step. The host's synthesis follows.

6. Visuals Colors and Theme

Muse and headline. Massimo Vignelli — Systematic clarity for a national ethics broadcast: one red rule, one black grid, no decoration. The register is a public institution speaking plainly, like a subway map or a court notice: trustworthy, legible, unafraid of hard facts. This is information design about a national ethical code, and Vignelli's language is the language of public signage and wayfinding — a visible grid, Helvetica-grade type, primary colours used as codes. It gives the channel institutional authority instead of podcast-casual warmth, and it lets the four speakers become a colour-coded system so the viewer can navigate the segment like a map.

Colour tokens (light mode).

Ratio target. 70% paper, 20% black rules and type, 8% red, 2% yellow + green.

Typography.

• Headings: Archivo, 700–800, uppercase, tracking −0.01em on big statements and +0.08em on micro-labels; flush-left ragged-right, never centred, never justified. Headline scale is deliberately disproportionate to body: display 44px mobile → 112px desktop; section heads 24/34; labels 12px uppercase. Weight and horizontal rules do the hierarchy work, not size alone.
• Body: Source Sans 3; scale 1.25 modular with a poster jump: 112/72/44/34/24/18/16/13. Body 17px/1.6 at desktop, 16px/1.65 mobile; captions 13px uppercase tracked +0.08em.
• Mono: IBM Plex Mono 14px tabular for timestamps and rupiah figures.

Shape language. Hard edges only. Zero border-radius on cards, buttons, inputs, and images. Structure comes from 2px black rules, 1px hairline dividers, and full-bleed colour blocks that butt directly against each other. Buttons are rectangles with a 2px black border and a solid red or black fill. Nothing soft is permitted.

Layout. A 12-column visible grid with 24px gutters, max content width 1200px, and the grid lines themselves drawn as faint 1px rules on the hero so the system is exposed. Every section is a horizontal band separated by a 2px black rule with the band number and title set flush left ("01 / MEMBUKA REALITA"). The Episode page is a two-track document: a sticky left rail (timestamps, segment spine, speaker colour key) and a single-column transcript at a 66ch measure on the right. Speaker turns are tabular: a colour-coded 4px left bar, the speaker name in 13px uppercase, the timestamp in mono, then the quote. On mobile the rail collapses to a horizontal sticky strip of timestamps; the transcript keeps its colour bars.

Imagery style. Diagrammatic, not photographic. The core visual asset is a custom "peta korupsi" — a schematic wayfinding map of one village road: budget line from pusat → kabupaten → kontraktor → aspal, drawn as a black line with red and yellow stations, plus a pothole count as a bar chart. Secondary: a budget-stack diagram where the road budget is shown as a stack of rupiah blocks with the skimmed portion cut away in red. Speaker portraits are high-contrast black-and-white cutouts, cropped square and hard-edged, treated as pictograms rather than photos. No stock photography, no illustration for decoration.

Avoid. Any blue or indigo in the palette — primary and accent stay red and yellow on warm paper. Rounded corners, soft shadows, glassmorphism, or gradient blobs anywhere in the UI. Centred hero text or centred section headings; everything is flush left against the grid. Photographic hero imagery, stock people, or illustration used as decoration rather than as diagram. Hover-lift card grids and identical tile layouts; the transcript is a document, not a card wall. Inter, Roboto, Poppins, or system-ui as heading or body faces. Marquee or ticker text that carries required reading — it is decoration only and must stop and wrap under prefers-reduced-motion. Playful bounce, springy easing, or parallax effects that delay the viewer from reaching the transcript. The generic indigo/blue-on-white SaaS template is forbidden for this project.

7. Signature Design Concept

The civic noticeboard. The first screen is a civic noticeboard, not a podcast banner. A full-width red #D3222A masthead bar — 56px at 1280, 44px at 375 — runs edge to edge with "INTEGRITAS BANGSA / EPISODE 01" set in 13px uppercase Archivo, tracked +0.08em, flush left, and the timestamp "00.00–04.00" flush right in IBM Plex Mono. The bar is the page's identity: one strip of signal colour across the top that doubles as the episode's wayfinding sign.

Beneath it, on the warm paper ground #F4F1EA with the visible 12-column grid lines drawn as faint 1px rules, the headline "MEMBUKA REALITA" is set in Archivo 800 uppercase at 44px mobile → 112px desktop, flush left, occupying columns 1–9. "DARI PUNGLI HINGGA EROSI MORAL" sits as a second line at 28px → 64px, flush left directly beneath with no gap, so the two lines read as one stacked block spanning two-thirds of the viewport width.

To the right, columns 10–12, a black-ruled data panel lists the four speakers as a colour key — PAK ARYA (black), DIMAS (red), SITI (yellow), MAS BUDI (green) — each with a 4px colour bar and a one-line role. The four voices are legible as a system before a single word of the transcript is read.

Below the headline block, a single 2px black rule runs the full viewport width. Pinned immediately beneath it on the left is one rectangular CTA, solid red, 2px black border, "TONTON SEGMEN 01." On the right sits the sentence "Korupsi bukan cuma hilangnya uang negara — runtuhnya norma etika." in 18px Source Sans 3.

No image appears in the hero. The composition is type, rules, and colour blocks only, and the grid lines are visible. The concept recomposes accepted content — the channel name, episode number, segment title, time range, speaker key, CTA, and framing sentence — and introduces no new behavior, page, or destination.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief.

• Focal subject. The stacked headline block "MEMBUKA REALITA / DARI PUNGLI HINGGA EROSI MORAL" against the visible 12-column grid, with the red masthead bar above it and the black-ruled speaker colour key to its right.
• Input → transformation → outcome thesis. The viewer's arrival is the only input; the composition is already complete. Nothing transforms on entry — the noticeboard is simply there, fully legible, and the viewer's next act is to read the speaker key and activate "TONTON SEGMEN 01." The outcome is comprehension of what the segment is and who speaks in it, reached without waiting for motion.
• Motion vocabulary. Minimal and instant — state changes, not animation. The masthead bar, headline block, grid lines, colour key, rule, CTA, and framing sentence render as a composed first frame. The only continuous movement on the page is the slow marquee ticker of pungli facts along one rule, which is decoration only and carries no required reading.
• Composed first frame. Red masthead bar edge to edge; warm paper ground with faint grid rules; "MEMBUKA REALITA" flush left in Archivo 800 at 44px mobile → 112px desktop occupying columns 1–9; "DARI PUNGLI HINGGA EROSI MORAL" directly beneath at 28px → 64px with no gap; the black-ruled speaker colour key in columns 10–12 with four 4px colour bars; a full-width 2px black rule; the solid red CTA "TONTON SEGMEN 01" flush left beneath it; the framing sentence in 18px Source Sans 3 flush right.
• Reduced-motion state. Under prefers-reduced-motion, the pungli fact ticker stops and wraps into rows so every item is whole and readable; the transcript quotes appear without the 120ms fade; the progress spine still advances in discrete steps but without any transitional animation. No parallax, no hover-lift, no reveals that delay reading.

9. Non-Functional Requirements

NFR-1 — Mobile-first legibility in daylight. The audience watches on phones at 375px in daylight. Body text is 16px/1.65 at mobile and 17px/1.6 at desktop; captions are 13px uppercase tracked +0.08em; timestamps and rupiah figures are IBM Plex Mono 14px tabular. Provenance: explicit (creative direction). Rationale: the segment must be readable on a phone outdoors.

NFR-2 — Readable text and controls stay whole. At 375px, 768px, and 1280px, headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container, wrapping or scaling to fit (for example font-size: clamp(...) with its mobile size), and no other element covers any part of them. Where the direction asks for a cropped or bled gesture, it is carried by imagery or decoration instead. Provenance: explicit (creative direction). Rationale: legibility and operability are non-negotiable for a public-information page.

NFR-3 — Reduced-motion compliance. Under prefers-reduced-motion, the pungli fact ticker stops and wraps into rows or sits in a horizontally scrollable row (overflow-x: auto) whose further items are reached by scrolling; the transcript quotes appear without the 120ms fade. Provenance: explicit (creative direction). Rationale: motion must never delay or obstruct reading.

NFR-4 — No required reading in motion. The marquee ticker carries decoration only; no required reading is placed in moving text. Provenance: explicit (creative direction). Rationale: required content must be readable in a still frame.

NFR-5 — Anonymous public access. Both surfaces are reachable without an account, sign-in, or identity verification. No cookies or storage are required for the accepted behavior. Provenance: required_inference from the accepted access contract (access_requirement: none on both surfaces). Rationale: the episode is a public broadcast and no accepted journey requires continuity.

NFR-6 — Diagrammatic asset discipline. No stock photography and no decorative illustration are used. Portraits are high-contrast black-and-white cutouts, cropped square and hard-edged, treated as pictograms. Diagrams are schematic, drawn from the accepted content. Provenance: explicit (creative direction). Rationale: the page must read as a public document, not a promotional feed.

NFR-7 — Palette discipline. No blue or indigo appears in the palette. Primary and accent remain red #D3222A and yellow #F2B705 on warm paper #F4F1EA. Green #1E7A4B appears only as Mas Budi's code and never as a UI button colour. Provenance: explicit (creative direction). Rationale: the colour system is the segment's wayfinding code.

NFR-8 — Shape discipline. Zero border-radius on cards, buttons, inputs, and images; no soft shadows, glassmorphism, or gradient blobs. Provenance: explicit (creative direction). Rationale: structure comes from rules and colour blocks, not from softness.

NFR-9 — Transcript measure. The transcript is a single column at a 66ch measure, with speaker turns rendered tabularly. Provenance: explicit (creative direction). Rationale: a document measure supports sustained reading.

10. Tech Stack

• Frontend: React, rendering the two custom pages (Landing, Episode) as a static, anonymously reachable publication. Provenance: required_inference from delivery_shape.custom_ui: true and the two custom pages.
• Styling: Plain CSS or CSS modules implementing the Vignelli-derived tokens — Archivo, Source Sans 3, and IBM Plex Mono; hard edges; 2px black rules; the 12-column visible grid; clamp() type scaling. Provenance: explicit (creative direction).
• Content: The Segment 1 transcript, speaker metadata (name, colour code, role line, timestamp), and the diagram data (budget line stations, pothole counts, budget-stack portions) are authored content held with the application and rendered by the pages. Provenance: explicit (the segment content is fixed and specified).
• Backend: Not required for the accepted behavior. Both surfaces are read-only and anonymous; no durable actor-specific state, commitment, or value transfer exists. If a build or serving layer is used, it owns no human interaction. Provenance: required_inference from the accepted access and lifecycle facts.
• Storage: Not required for the accepted behavior. Provenance: required_inference.
• Deployment: Static hosting sufficient for two anonymously reachable pages. Docker/docker-compose or Kubernetes are not required by any accepted constraint and are therefore not included. Provenance: required_inference.

11. Assumptions and Constraints

Constraints (explicit, binding).

• Segment 1 is titled "Membuka Realita – Dari Pungli hingga Erosi Moral" and spans 00.00–04.00.
• The setting is a relaxed studio atmosphere with Pak Arya in the center, Dimas and Siti on the left, and Mas Budi on the right.
• The palette, typography, shape language, layout, motion, and imagery follow the supplied creative direction; no blue or indigo appears; the generic indigo/blue-on-white SaaS template is forbidden.
• Readable text and controls stay whole at 375px, 768px, and 1280px.

Assumptions (narrow, labeled).

• Assumption — content is fixed. The Segment 1 transcript is authored content, not user-generated; the pages present it and do not accept viewer submissions. This follows from the accepted behavior, which contains no contribution mechanism.
• Assumption — no identity. No application-owned identity is established, because no accepted journey requires durable actor-specific state, continuity, or a bound commitment. Both surfaces are anonymously reachable per the accepted access contract.
• Assumption — no backend. No backend service is required, because both surfaces are read-only and anonymous. If a serving layer exists, it owns no human interaction.
• Assumption — single segment. Only Segment 1 is in current scope; no episode index, later segments, or series navigation is included.
• Assumption — diagram data. The "peta korupsi" stations (pusat → kabupaten → kontraktor → aspal), the pothole bar chart, and the budget-stack portions are rendered from the accepted content of Siti's testimony; no external data source is required.

Future (not current scope, not in current pages or acceptance).

• Further segments of Episode 01 and further episodes of the Integritas Bangsa channel.
• Any viewer participation, response, or contribution mechanism.
• Any account, sign-in, or identity feature.

12. Glossary

• Integritas Bangsa — the civic-education talk channel that produces the episode.
• Segment 1 / "Membuka Realita – Dari Pungli hingga Erosi Moral" — the current deliverable, spanning 00.00–04.00 of Episode 01.
• Pancasila — the Indonesian national ethical code, discussed in the episode as a system of ethics against corruption.
• Korupsi — corruption; the episode's subject.
• Pungli — illegal levies; small-scale extortion in bureaucratic services.
• Petty corruption — small-scale corruption, as distinct from grand corruption worth billions of rupiah.
• Uang pelicin — "grease money"; a payment such as 50 thousand rupiah to speed up a business permit or KTP.
• Uang lelah — "tiredness money"; the dismissive label many apply to uang pelicin, which Mas Budi identifies as the main seed of a broken ethical system.
• KTP — the Indonesian identity card; one of the services cited in Mas Budi's example.
• KPK — the Indonesian Corruption Eradication Commission; referenced in Dimas's response.
• Peta korupsi — the schematic wayfinding map of Siti's village road, showing the budget line from pusat → kabupaten → kontraktor → aspal with red and yellow stations and a pothole bar chart.
• Speaker colour key — the coding that assigns black to Pak Arya, red to Dimas, yellow to Siti, and green to Mas Budi.
• Segment spine — the progress indicator on the Episode page that advances in discrete steps as the reader moves through the segment.