System Requirements Document for pembelajaran-elektro-dan-kelistrikan-kapal-untuk-persi

1. Introduction

This document specifies the system requirements for pembelajaran-elektro-dan-kelistrikan-kapal-untuk-persi, a web-based learning academy for maritime cadets preparing for the ETO (Electro-Technical Officer) role. The product is derived from the authoritative source eto_cadet_academy.html and the accepted requirement thread, which define the following current product scope:

• A Dashboard as the entry surface of the ETO Cadet Academy.
• Learning content sections: Materi Elektro, Kelistrikan Kapal, and Safety.
• An Interview ETO section.
• Automatically generated quizzes (Quiz otomatis).
• Learning progress tracking (Progress belajar).

The intended audience is Indonesian maritime cadets studying electrical engineering and ship electrical systems toward the ETO qualification. The product is a serious, instrument-grade study tool: the cadet trains to read instruments under pressure — switchboards, insulation resistance, shore-power changeover, emergency generator start, high-voltage safety — and the academy's visual and interaction language reflects that operational reality.

The system is delivered as a custom web application with application-owned identity. Self-service enrollment and returning verification are required so that a cadet's quiz results and learning progress persist across sessions and remain bound to the correct learner.

2. System Overview

The ETO Cadet Academy is a single first-party web application. A cadet enters through the Dashboard, navigates the learning sections (Materi Elektro, Kelistrikan Kapal, Interview ETO, Safety), takes automatically generated quizzes (Quiz otomatis), and reviews study progress (Progress belajar).

Actors. The only accepted active human persona is the Cadet / ETO Learner. No other human roles are in scope. All other participants are system processes internal to the application.

Accepted behavior. The application presents learning material across three content sections, presents ETO interview content, generates quizzes automatically, evaluates quiz attempts, and tracks and displays the cadet's learning progress. Quiz results and progress are durable, learner-specific state.

Ownership. All accepted human-facing behavior is owned by first-party custom pages of this application. There is no provider-owned or external-destination surface in the current scope.

Identity. The application owns identity. A cadet self-enrolls on first use (Sign Up) and verifies on return (Login). Quiz results and Progress belajar are protected destinations that require an established identity; the learning content sections and the Dashboard entry surface are reachable without an established identity, and the identity-access surfaces themselves are anonymous entry points.

Narrow exclusions. No instructor, administrator, or assessor role is in scope. No certification issuance, no examination proctoring, no payment, and no social or messaging capability is in scope. No provider-owned identity or external learning platform is in scope.

2a. Product Interpretation and Delivery Boundary

The product is a self-contained, first-party web academy. Everything a cadet does — reading material, viewing interview content, taking quizzes, and reviewing progress — happens inside this application's own pages. There is no external learning platform, no third-party course provider, and no provider-owned sign-in in the current scope.

Delivery. The application is delivered as a custom web UI backed by an application server. Learning content, quiz generation, quiz evaluation, and progress state are owned and served by the application.

Access ownership. The application owns cadet identity. Because quiz results and learning progress are durable, learner-specific state, the cadet must establish an identity before that state can be retained and resumed. First use is self-service enrollment; return visits are verified. The identity-access surfaces are anonymous entry points — a cadet reaches them without already being signed in. The learning content sections and the Dashboard are reachable without an established identity; the protected destinations (Quiz otomatis, Progress belajar) require an established identity, and the application routes an unauthenticated cadet to the identity-access surfaces rather than exposing protected state.

Current vs. future. Everything described in this document is current scope. No future-horizon capability is accepted at this time; the future section records only what was explicitly deferred or left open.

2b. Source Content Inventory

The reference directive for eto_cadet_academy.html declares uses: ["content_source", "structure_reference"] with authority: authoritative. The verified factual content requested by that directive is the product scope itself, which is fully enumerated in the accepted requirement thread and reproduced in this document:

• Dashboard — the entry surface of the ETO Cadet Academy.
• Materi Elektro — electrical learning material section.
• Kelistrikan Kapal — ship electrical systems section.
• Interview ETO — ETO interview content section.
• Quiz otomatis — automatically generated quizzes.
• Safety — safety learning material section.
• Progress belajar — learning progress tracking.

No additional verified factual entities, collection items, field values, dates, contacts, links, or media references beyond these named sections were supplied by the source directive. No dummy data is substituted for authoritative facts, and no facts are invented.

2c. Page Content and Component Coverage

The page inventory is the closed, ordered page contract supplied by Planning Scope (page_contract_version=1). It is reproduced exactly, with no additions, removals, merges, splits, renames, or reordering.

Dashboard

• Information / state. The Dashboard is the entry surface of the academy. It presents the cadet's mission-status view: a large circular Progress belajar gauge showing the cadet's current overall progress percentage, and a right column of ruled module rows listing the learning sections with completion ticks. It also surfaces the active module, the number of available quizzes, and study hours as ruled micro-rows with tabular numerals.
• Primary actions. Navigate to any learning section (Materi Elektro, Kelistrikan Kapal, Interview ETO, Safety), navigate to Quiz otomatis, navigate to Progress belajar, and — for a cadet without an established identity — navigate to Sign Up or Login.
• Supporting actions. Resume the active module; open the section indicated by the progress gauge.
• Domain entities. Cadet, learning module, module completion state, progress value, quiz availability count, study hours.
• Component responsibilities. Progress gauge (circular bezel ring with amber needle, the only progress component in the product); module rows (ruled label/value rows with amber completion ticks); mission-status row; left instrument rail / bottom tab bar navigation; hero headline and CTA key.
• States.
  • Loading: gauge and module rows render in a loading state while progress is fetched.
  • Empty: a cadet with no recorded activity sees the gauge at zero and module rows with no completion ticks, with a clear prompt to begin the first module.
  • Success: gauge needle animates from 0 to the cadet's current progress value; module rows show completion ticks.
  • Error: if progress cannot be loaded, the Dashboard shows an error state on the gauge and module rows with a retry action; navigation to sections remains available.
  • Recovery: retry reloads progress; if the cadet is not signed in, the Dashboard routes to Login or Sign Up rather than showing protected progress.

Sign Up

• Information / state. First-use enrollment surface for a cadet who has no identity yet. Collects the minimum information needed to establish an application-owned identity.
• Primary actions. Submit enrollment to create the cadet's identity; proceed to Login if already enrolled.
• Supporting actions. Navigate back to the Dashboard.
• Domain entities. Cadet identity, enrollment credentials.
• Component responsibilities. Enrollment form; validation feedback; submit key; link to Login.
• States.
  • Loading: submit key shows an in-progress state while enrollment is processed.
  • Empty: the form is presented empty on first arrival.
  • Success: identity is established and the cadet is taken into the academy with access to protected destinations.
  • Error: invalid or incomplete input is reported inline; an already-enrolled identity is reported with a route to Login.
  • Recovery: the cadet corrects the input and resubmits, or switches to Login.

Login

• Information / state. Returning verification surface for a cadet who already has an identity and needs to resume access to personal quiz results and Progress belajar.
• Primary actions. Submit credentials to verify identity; proceed to Sign Up if not yet enrolled.
• Supporting actions. Navigate back to the Dashboard.
• Domain entities. Cadet identity, credentials.
• Component responsibilities. Verification form; validation feedback; submit key; link to Sign Up.
• States.
  • Loading: submit key shows an in-progress state while verification is processed.
  • Empty: the form is presented empty on first arrival.
  • Success: identity is verified and the cadet is returned to the destination they were seeking, with protected state available.
  • Error: incorrect credentials are reported without revealing which field failed; the cadet may retry.
  • Recovery: retry verification, or switch to Sign Up.

Materi Elektro

• Information / state. Electrical learning material section. Presents the module's sub-topics as numbered rows in a sticky spec sidebar and the reading content in a single reading measure.
• Primary actions. Read the material; move between sub-topics; mark a sub-topic or the module as studied.
• Supporting actions. Navigate to the next or previous module; navigate to Quiz otomatis for the module.
• Domain entities. Learning module, sub-topic, reading content, completion state.
• Component responsibilities. Sticky spec sidebar with numbered sub-topic rows; reading column; module completion control; navigation rail.
• States.
  • Loading: sidebar and reading column render in a loading state while content is fetched.
  • Empty: if a module has no published sub-topics, the section states that content is not yet available and offers navigation to other sections.
  • Success: content is displayed and completion state is recorded.
  • Error: if content cannot be loaded, the section shows an error state with a retry action.
  • Recovery: retry reloads the module; navigation to other sections remains available.

Kelistrikan Kapal

• Information / state. Ship electrical systems section. Presents the module's sub-topics as numbered rows in a sticky spec sidebar and the reading content in a single reading measure.
• Primary actions. Read the material; move between sub-topics; mark a sub-topic or the module as studied.
• Supporting actions. Navigate to the next or previous module; navigate to Quiz otomatis for the module.
• Domain entities. Learning module, sub-topic, reading content, completion state.
• Component responsibilities. Sticky spec sidebar with numbered sub-topic rows; reading column; module completion control; navigation rail.
• States.
  • Loading: sidebar and reading column render in a loading state while content is fetched.
  • Empty: if a module has no published sub-topics, the section states that content is not yet available and offers navigation to other sections.
  • Success: content is displayed and completion state is recorded.
  • Error: if content cannot be loaded, the section shows an error state with a retry action.
  • Recovery: retry reloads the module; navigation to other sections remains available.

Interview ETO

• Information / state. ETO interview content section. Presents interview question sets as ruled data rows with aligned label/value pairs.
• Primary actions. Browse interview question sets; open a question set to read its content.
• Supporting actions. Navigate to related learning sections; navigate to Quiz otomatis.
• Domain entities. Interview question set, question, answer or guidance content.
• Component responsibilities. Ruled question-set list; question-set detail view; navigation rail.
• States.
  • Loading: question-set list renders in a loading state while content is fetched.
  • Empty: if no question sets are published, the section states that content is not yet available and offers navigation to other sections.
  • Success: question sets are listed and readable.
  • Error: if content cannot be loaded, the section shows an error state with a retry action.
  • Recovery: retry reloads the section; navigation to other sections remains available.

Quiz otomatis

• Information / state. Automatically generated quiz destination. Presents one question at a time in a bordered plate, a needle-sweep timer ring, and answer options rendered as machined toggle keys. After submission, presents the result. This destination requires an established identity.
• Primary actions. Start a quiz; select an answer; submit an answer or the quiz; view the result.
• Supporting actions. Navigate to the related learning module; navigate to Progress belajar.
• Domain entities. Quiz, question, answer option, timer, attempt, result.
• Component responsibilities. Question plate; timer ring; answer toggle keys; submit key; result panel; navigation rail.
• States.
  • Loading: quiz generation and question loading render in a loading state.
  • Empty: if no quiz is available for the selected module, the destination states that no quiz is available and offers navigation to the learning sections.
  • Success: the quiz is completed and the result is presented and recorded.
  • Error: if quiz generation or submission fails, the destination shows an error state with a retry action; a timer expiry is handled as a completed attempt with the answers given.
  • Recovery: retry generation or submission; an unauthenticated cadet is routed to Login or Sign Up before any protected quiz state is shown.

Safety

• Information / state. Safety learning material section. Presents the module's sub-topics as numbered rows in a sticky spec sidebar and the reading content in a single reading measure.
• Primary actions. Read the material; move between sub-topics; mark a sub-topic or the module as studied.
• Supporting actions. Navigate to the next or previous module; navigate to Quiz otomatis for the module.
• Domain entities. Learning module, sub-topic, reading content, completion state.
• Component responsibilities. Sticky spec sidebar with numbered sub-topic rows; reading column; module completion control; navigation rail.
• States.
  • Loading: sidebar and reading column render in a loading state while content is fetched.
  • Empty: if a module has no published sub-topics, the section states that content is not yet available and offers navigation to other sections.
  • Success: content is displayed and completion state is recorded.
  • Error: if content cannot be loaded, the section shows an error state with a retry action.
  • Recovery: retry reloads the module; navigation to other sections remains available.

Progress belajar

• Information / state. Learning progress destination. Presents the cadet's study progress as circular needle gauges and ruled data rows with tabular numerals, covering module completion and quiz results. This destination requires an established identity.
• Primary actions. Review overall progress; review per-module completion; review quiz results.
• Supporting actions. Navigate to a module to continue studying; navigate to Quiz otomatis.
• Domain entities. Progress value, module completion state, quiz attempt, quiz result, study hours.
• Component responsibilities. Progress gauges; ruled result rows; navigation rail.
• States.
  • Loading: gauges and result rows render in a loading state while progress is fetched.
  • Empty: a cadet with no recorded activity sees gauges at zero and an empty result list with a prompt to begin the first module.
  • Success: gauges animate to the cadet's current values and result rows are listed.
  • Error: if progress cannot be loaded, the destination shows an error state with a retry action.
  • Recovery: retry reloads progress; an unauthenticated cadet is routed to Login or Sign Up before any protected progress is shown.

3. Functional Requirements

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

FR-01 — Dashboard entry surface (explicit) As a Cadet / ETO Learner, I should land on the Dashboard as the entry surface of the ETO Cadet Academy so that I can see my mission status and navigate to every learning area.

• Trigger: the cadet opens the academy.
• Observable result: the Dashboard renders with the Progress belajar gauge, ruled module rows, and navigation to all sections.
• Access state: reachable without an established identity.
• Failure / recovery: if progress cannot be loaded, the Dashboard shows an error state with retry; navigation remains available.
• Continuation: the cadet selects a section, Quiz otomatis, or Progress belajar.

FR-02 — Materi Elektro learning content (explicit) As a Cadet / ETO Learner, I should read the Materi Elektro learning material so that I can study electrical theory and practice.

• Trigger: the cadet opens Materi Elektro.
• Observable result: the module's sub-topics are listed as numbered rows and the reading content is displayed.
• Access state: reachable without an established identity.
• Failure / recovery: if content cannot be loaded, an error state with retry is shown.
• Continuation: the cadet moves between sub-topics, marks the module studied, or proceeds to Quiz otomatis.

FR-03 — Kelistrikan Kapal learning content (explicit) As a Cadet / ETO Learner, I should read the Kelistrikan Kapal learning material so that I can study ship electrical systems.

• Trigger: the cadet opens Kelistrikan Kapal.
• Observable result: the module's sub-topics are listed as numbered rows and the reading content is displayed.
• Access state: reachable without an established identity.
• Failure / recovery: if content cannot be loaded, an error state with retry is shown.
• Continuation: the cadet moves between sub-topics, marks the module studied, or proceeds to Quiz otomatis.

FR-04 — Safety learning content (explicit) As a Cadet / ETO Learner, I should read the Safety learning material so that I can study the safety practices required in electro-technical work aboard ship.

• Trigger: the cadet opens Safety.
• Observable result: the module's sub-topics are listed as numbered rows and the reading content is displayed.
• Access state: reachable without an established identity.
• Failure / recovery: if content cannot be loaded, an error state with retry is shown.
• Continuation: the cadet moves between sub-topics, marks the module studied, or proceeds to Quiz otomatis.

FR-05 — Interview ETO content (explicit) As a Cadet / ETO Learner, I should view the Interview ETO content so that I can prepare for the ETO interview.

• Trigger: the cadet opens Interview ETO.
• Observable result: interview question sets are listed as ruled data rows and can be opened to read their content.
• Access state: reachable without an established identity.
• Failure / recovery: if content cannot be loaded, an error state with retry is shown.
• Continuation: the cadet opens another question set or navigates to a learning section or Quiz otomatis.

FR-06 — Automatically generated quizzes (explicit) As a Cadet / ETO Learner, I should take automatically generated quizzes so that I can check my understanding of the material.

• Trigger: the cadet starts a quiz from Quiz otomatis.
• Observable result: the application generates a quiz, presents one question at a time in a bordered plate with a needle-sweep timer ring and answer toggle keys, and evaluates the submitted answers.
• Access state: requires an established identity.
• Failure / recovery: if generation or submission fails, an error state with retry is shown; timer expiry completes the attempt with the answers given.
• Continuation: the cadet views the result and proceeds to Progress belajar or back to the related module.

FR-07 — Quiz result presentation (explicit) As a Cadet / ETO Learner, I should receive the result of a quiz attempt so that I know how I performed.

• Trigger: the cadet submits the quiz or the timer expires.
• Observable result: the result is presented and recorded against the cadet's identity.
• Access state: requires an established identity.
• Failure / recovery: if the result cannot be recorded, the result is still presented and the cadet is offered a retry to save it.
• Continuation: the cadet reviews Progress belajar or retakes the quiz.

FR-08 — Progress belajar tracking (explicit) As a Cadet / ETO Learner, I should have my learning progress tracked so that the academy reflects what I have studied and how I have performed.

• Trigger: the cadet marks a module studied or completes a quiz.
• Observable result: the cadet's progress state is updated and reflected in the Dashboard gauge and Progress belajar.
• Access state: requires an established identity for durable progress.
• Failure / recovery: if progress cannot be saved, the cadet is informed and offered a retry.
• Continuation: the cadet continues studying or reviews Progress belajar.

FR-09 — Progress belajar review (explicit) As a Cadet / ETO Learner, I should view my Progress belajar so that I know what to review next.

• Trigger: the cadet opens Progress belajar.
• Observable result: overall progress, per-module completion, and quiz results are presented as circular needle gauges and ruled data rows.
• Access state: requires an established identity.
• Failure / recovery: if progress cannot be loaded, an error state with retry is shown.
• Continuation: the cadet navigates to a module to continue studying or to Quiz otomatis.

FR-10 — Self-service enrollment (required_inference) As a Cadet / ETO Learner, I should be able to enroll myself on first use so that my quiz results and learning progress can be retained and bound to me.

• Trigger: a cadet without an identity chooses to enroll.
• Observable result: an application-owned identity is established and the cadet gains access to protected destinations.
• Access state: the Sign Up surface is an anonymous entry point.
• Failure / recovery: invalid or incomplete input is reported inline; an already-enrolled identity is routed to Login.
• Continuation: the cadet enters the academy with protected state available.

FR-11 — Returning verification (required_inference) As a Cadet / ETO Learner, I should verify my identity on return so that I can resume access to my personal quiz results and Progress belajar.

• Trigger: a returning cadet chooses to sign in.
• Observable result: the cadet's identity is verified and protected state becomes available.
• Access state: the Login surface is an anonymous entry point; protected destinations remain unavailable until verification succeeds.
• Failure / recovery: incorrect credentials are reported without revealing which field failed; the cadet may retry or switch to Sign Up.
• Continuation: the cadet is returned to the destination they were seeking.

FR-12 — Protected destination routing (required_inference) As a Cadet / ETO Learner, I should be routed to verification when I reach a protected destination without an established identity so that no protected state is exposed and I can still reach my work.

• Trigger: an unauthenticated cadet navigates to Quiz otomatis or Progress belajar.
• Observable result: the cadet is routed to Login or Sign Up; protected state is not shown.
• Access state: applies to protected destinations only.
• Failure / recovery: if verification fails, the cadet remains on the identity-access surface with an error.
• Continuation: after successful verification, the cadet reaches the destination they were seeking.

4. User Personas

Cadet / ETO Learner

Product context. A maritime cadet preparing for the ETO (Electro-Technical Officer) role. They are young, serious, and hands-on, studying toward a job where a wrong reading or a skipped safety step has physical consequences. They study in long sessions, often at night, and they need a tool that feels like the panel they will one day stand in front of — instrument-grade, calm, and precise — rather than a playful e-learning site or a neutral admin dashboard.

Primary goal. Work through the learning material and quizzes and track their own study progress so they know what to review next.

Distinct accepted responsibilities.

• Read electrical learning material in Materi Elektro.
• Study ship electrical systems in Kelistrikan Kapal.
• Study safety practices in Safety.
• View ETO interview content in Interview ETO.
• Take automatically generated quizzes in Quiz otomatis and receive results.
• Track and review their own study progress in Progress belajar and from the Dashboard.
• Enroll themselves on first use and verify on return so their results and progress persist.

Relevant inputs or decisions. Which module to study next; when to move between sub-topics; when to mark a module studied; when to start a quiz; which answer to select under the quiz timer; when to review progress.

Interactions with other accepted participants. The cadet is the only accepted human participant. All other participants are system processes of the application: quiz generation, quiz evaluation, and progress recording. The cadet's interaction with these processes is through the application's own pages.

Observable success. The cadet can read every learning section, complete quizzes, and see their progress reflected accurately in the Dashboard gauge and Progress belajar, with results and progress retained across sessions under their own identity.

Constraints. The cadet's identity is application-owned; quiz results and Progress belajar are durable, learner-specific state and require an established identity. The learning content sections and the Dashboard are reachable without an established identity.

5. Core User Flows

Flow 1 — First visit and enrollment

1. The cadet opens the academy and lands on the Dashboard (FR-01). The Dashboard renders the Progress belajar gauge at zero and ruled module rows with no completion ticks, with a prompt to begin the first module.
2. The cadet selects a learning section — Materi Elektro, Kelistrikan Kapal, Safety, or Interview ETO — and reads the material (FR-02, FR-03, FR-04, FR-05). These sections are reachable without an established identity.
3. The cadet navigates to Quiz otomatis or Progress belajar and is routed to the identity-access surfaces because no identity is established (FR-12).
4. The cadet chooses Sign Up and submits the enrollment form (FR-10).
5. Success: the cadet's application-owned identity is established and protected destinations become available.
6. Failure: invalid or incomplete input is reported inline; the cadet corrects it and resubmits. If the identity is already enrolled, the cadet is routed to Login.
7. Continuation: the cadet proceeds to the destination they were seeking.

Flow 2 — Returning cadet resumes study

1. The cadet opens the academy and lands on the Dashboard (FR-01).
2. The cadet chooses Login and submits their credentials (FR-11).
3. Success: the cadet's identity is verified and protected state becomes available; the cadet is returned to the destination they were seeking.
4. Failure: incorrect credentials are reported without revealing which field failed; the cadet retries or switches to Sign Up.
5. Continuation: the cadet resumes studying or reviews progress.

Flow 3 — Studying a learning module

1. From the Dashboard, the cadet selects a learning section — Materi Elektro, Kelistrikan Kapal, or Safety (FR-02, FR-03, FR-04).
2. The section renders the module's sub-topics as numbered rows in the sticky spec sidebar and the reading content in a single reading measure.
3. The cadet reads the material and moves between sub-topics.
4. The cadet marks a sub-topic or the module as studied (FR-08).
5. Success: the module's completion state is recorded and reflected in the Dashboard gauge and Progress belajar.
6. Failure: if content cannot be loaded, an error state with retry is shown; if progress cannot be saved, the cadet is informed and offered a retry.
7. Continuation: the cadet proceeds to Quiz otomatis for the module or selects another section.

Flow 4 — Preparing with Interview ETO content

1. From the Dashboard, the cadet selects Interview ETO (FR-05).
2. The section lists interview question sets as ruled data rows with aligned label/value pairs.
3. The cadet opens a question set and reads its content.
4. Success: the question set content is displayed.
5. Failure: if content cannot be loaded, an error state with retry is shown.
6. Continuation: the cadet opens another question set or navigates to a learning section or Quiz otomatis.

Flow 5 — Taking an automatically generated quiz

1. The cadet opens Quiz otomatis (FR-06). If no identity is established, the cadet is routed to Login or Sign Up first (FR-12).
2. The cadet starts a quiz. The application generates the quiz and presents one question at a time in a bordered plate with a needle-sweep timer ring and answer toggle keys.
3. The cadet selects an answer and submits it; the timer sweeps continuously and ticks down in whole seconds.
4. Success: the application evaluates the submitted answers and presents the result (FR-07).
5. Failure: if generation or submission fails, an error state with retry is shown. If the timer expires, the attempt completes with the answers given.
6. Continuation: the cadet reviews Progress belajar or returns to the related module.

Flow 6 — Reviewing progress

1. The cadet opens Progress belajar (FR-09). If no identity is established, the cadet is routed to Login or Sign Up first (FR-12).
2. The destination renders overall progress, per-module completion, and quiz results as circular needle gauges and ruled data rows with tabular numerals.
3. Success: the gauges animate to the cadet's current values and result rows are listed.
4. Failure: if progress cannot be loaded, an error state with retry is shown.
5. Continuation: the cadet navigates to a module to continue studying or to Quiz otomatis.

6. Visuals Colors and Theme

The CREATIVE DIRECTION is authoritative for this section. The muse is MARQ by Garmin — luxury instrument aesthetic — and the headline direction is Precision instrument engineering for cadets who will run a ship's electrical heart. The palette is graphite, champagne, and amber only; no blue or indigo appears anywhere in the system, including links, focus rings, and chart strokes.

Colour tokens (dark mode).

Typography. Headings: Saira Condensed in 600–700 weight, uppercase, tight tracking (-0.01em), tabular numerals on by default so every figure sits in a column. Body: Archivo at 400/500 with 1.65 line-height for long study sessions. Micro-labels (page numbers, module codes, e.g. 'MODUL 03 / KELISTRIKAN KAPAL'): Saira Condensed 500 uppercase at 11px with 0.14em letterspacing. Reading text never goes below 16px.

Type scale (1.333 modular). Display clamp(40px, 7vw, 96px); h1 clamp(32px, 4.4vw, 56px); h2 clamp(24px, 2.6vw, 34px); h3 22px; body 17px; label 11px. Mobile display floor is 40px so the headline still reads as an instrument legend, not a paragraph.

Shape language. Circular gauges and bezel rings are the primary data shape — progress is a needle sweep inside a ring, never a flat bar. Panels are squared-off titanium plates with 2px clipped corners (a 45° chamfer, not a soft radius), separated by 1px #2A3035 rules. Buttons are capsule-ended instrument keys with a 1px champagne edge and a subtle inner top highlight, like a machined button on a watch crown. Ruled data rows with aligned label/value pairs, exactly like a spec sheet. Nothing bubbly, nothing fully rounded, no drop-shadow blur.

Layout. A fixed left instrument rail (72px on desktop, collapsing to a bottom tab bar at 375px) carries the section marks — Dashboard, Materi Elektro, Kelistrikan Kapal, Interview ETO, Quiz otomatis, Safety, Progress belajar — each with a tiny engraved glyph and a champagne active indicator. Content sits on a 12-column ruled grid with visible hairlines at column boundaries. The Dashboard opens with a mission-status row: a large circular Progress belajar gauge on the left (240px desktop / 140px mobile) against a right column of ruled module rows with amber completion ticks. Lesson pages are two-column: a sticky spec sidebar listing sub-topics as numbered rows, and a single reading measure of ~68 characters. Quiz otomatis is a full instrument panel: one question in a bordered plate, a needle-sweep timer ring, and answer keys that read as toggle switches.

Imagery. Macro material photography and engineered texture only: brushed titanium, knurled dial edges, the amber glow of a backlit panel, rope and salt-crusted steel, topographic contour lines used as faint background texture at 6% opacity. Where a real subject is needed, one dark, tightly cropped photograph of a ship switchboard or a multimeter probe on a terminal, treated in graphite and amber. Diagrams are drawn as instrument schematics — thin champagne strokes on graphite with numbered callouts — not friendly illustrations. No stock photos of smiling people, no 3D blobs, no gradient meshes.

Avoid. Any blue or indigo in the palette, including link colours, focus rings, and chart strokes. Soft rounded cards with hover-lift shadows and a grid of identical tiles. Gradient-blob heroes, mesh gradients, or glassmorphism panels. Friendly rounded display faces, illustration-led empty states, or mascot characters. Inter, Roboto, Poppins, or any neutral UI sans as the heading voice. Progress shown as a flat horizontal bar or a bare percentage without a gauge. Bright white full-page backgrounds or pure #FFFFFF text on dark. Bouncy, springy, or playful motion on any data element.

Readable text and controls. Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled off an edge, rotated, overlapped or cut exactly as the direction asks, as long as it covers no readable text or control. Moving and scrollable content may cross the viewport or container edge by design; with prefers-reduced-motion it stops and shows whole items. Where a direction asks readable text or a control to be cropped, clipped, covered or run off an edge, keep it whole and carry the gesture with imagery or decoration instead.

7. Signature Design Concept

The public entry is the Dashboard, and its signature concept is a full-bleed graphite instrument hero — not a centred SaaS block.

The left 7 columns are dominated by an oversized Saira Condensed uppercase headline — 'BELAJAR ELEKTRO. JAGA KAPAL TETAP HIDUP.' — set at clamp(40px, 7vw, 96px), stacked in three tight lines that span the column edge to edge. A single amber CTA key ('Mulai Modul 01') is pinned directly beneath the last line with no subtext between them. The right 5 columns hold a dimensional CSS instrument cluster: a 320px circular bezel ring in champagne with an amber needle resting at the cadet's live Progress belajar percentage, and beneath it three ruled micro-rows (MODUL AKTIF / QUIZ TERSEDIA / JAM BELAJAR) with tabular numerals. A 1px champagne rule runs the full viewport width under the whole hero, and a faint topographic contour texture sits at 6% opacity behind the type only. On mobile the cluster drops below the headline as a 140px ring, and the headline still spans the full width at 40px.

The concept recomposes only accepted content, states, and controls: the headline names the academy's subject, the CTA key begins the first module, the gauge shows the cadet's live Progress belajar, and the micro-rows surface the active module, available quizzes, and study hours. It introduces no new behaviour, page, or destination.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: dimensional_css

Landing Hero Motion Brief.

• Focal subject: the dimensional CSS instrument cluster — a 320px champagne bezel ring with an amber needle resting at the cadet's live Progress belajar percentage, above three ruled micro-rows with tabular numerals.
• Input → transformation → outcome thesis: on reveal, the needle sweeps from 0 to the cadet's current Progress belajar value over 900ms with a physical ease-out, and the micro-row numerals count up to their values; the outcome is a first frame that reads as a live instrument panel rather than a static hero.
• Motion vocabulary: needle sweeps and counting numbers, never bounce. Module rows stamp in with a 120ms hard cut (no fade-in-and-rise). Page transitions are a 200ms horizontal wipe of the champagne rule that runs under the top bar. Hover on a module row pulls its left rule from champagne to amber and slides the row 4px — nothing lifts, nothing scales.
• Composed first frame: the oversized condensed uppercase headline spans the left 7 columns in three tight lines, the amber CTA key sits pinned beneath the last line, the instrument cluster occupies the right 5 columns with the needle at rest, and the 1px champagne rule runs the full viewport width under the hero.
• Reduced-motion state: under prefers-reduced-motion all needles snap to their final value, counting numbers appear at their final value, and the wipe becomes an instant cut.

9. Non-Functional Requirements

NFR-01 — Visual system integrity (explicit, from CREATIVE DIRECTION) The interface uses only the graphite, champagne, and amber palette. No blue or indigo appears anywhere, including link colours, focus rings, and chart strokes. Focus is amber; visited is champagne. Rationale: the palette carries meaning — amber-on-graphite is the honest colour of marine instrumentation.

NFR-02 — Reading legibility (explicit, from CREATIVE DIRECTION) Body copy is Archivo at 400/500 with 1.65 line-height; reading text never goes below 16px; reading measure is ~68 characters. Rationale: long study sessions require calm, legible reading.

NFR-03 — Responsive integrity (explicit, from CREATIVE DIRECTION) Headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px and 1280px, wrapping or scaling to fit, and no other element covers any part of them. The left instrument rail collapses to a bottom tab bar at 375px. Rationale: the app must remain usable on the devices cadets actually study on.

NFR-04 — Reduced motion (explicit, from CREATIVE DIRECTION) Under prefers-reduced-motion, all needles snap to final value, counting numbers appear at final value, and the page-transition wipe becomes an instant cut. Rationale: accessibility for users who cannot tolerate motion.

NFR-05 — Progress gauge consistency (explicit, from CREATIVE DIRECTION) Circular needle gauges are the only progress component in the entire product — Progress belajar, quiz timer, and module completion all render as champagne bezel rings with an amber needle, never as bars or percentages alone. Rationale: a single, consistent instrument language.

NFR-06 — Durable learner state (required_inference) Quiz results and Progress belajar are durable, learner-specific state bound to the cadet's identity and retained across sessions. Rationale: the accepted journey requires the cadet to resume their own results and progress.

NFR-07 — Protected state isolation (required_inference) Protected state (quiz results, Progress belajar) is not exposed to an unauthenticated visitor; an unauthenticated cadet is routed to the identity-access surfaces. Rationale: durable learner state must remain bound to the correct participant.

NFR-08 — Content availability (required_inference) Every content section and destination defines a loading, empty, success, error, and recovery state so that a cadet is never left without a next step. Rationale: the accepted journeys require a usable continuation at every point.

10. Tech Stack

The authoritative source does not specify a technology stack. The following are coherent defaults for a custom web application with application-owned identity, a custom UI, and backend integration, labeled as defaults.

• Frontend: React (web) — [Default — not specified by user]
• Backend: Python / FastAPI — [Default — not specified by user]
• Storage: a relational database appropriate to durable learner state (identity, quiz results, progress) — [Default — not specified by user]
• Containerization: Docker / docker-compose — [Default — not specified by user]
• Orchestration: Kubernetes only if deployment requires it — [Default — not specified by user]

No source-specified technology choice is overridden or substituted.

11. Assumptions and Constraints

Assumptions.

• A1. The cadet is the only active human persona; no instructor, administrator, or assessor role exists in the current scope. (from Planning Scope persona contract)
• A2. The application owns cadet identity; self-service enrollment and returning verification are the accepted identity mechanics. (required_inference)
• A3. Learning content, interview content, and quiz generation are owned and served by the application; no external content provider is in scope. (from source scope)
• A4. The page inventory is the closed, ordered page contract supplied by Planning Scope and is reproduced exactly. (from page_contract_version=1)

Constraints.

• C1. The palette is graphite, champagne, and amber only; no blue or indigo anywhere. (explicit, CREATIVE DIRECTION)
• C2. Headings use Saira Condensed; body uses Archivo; reading text never goes below 16px. (explicit, CREATIVE DIRECTION)
• C3. Circular needle gauges are the only progress component. (explicit, CREATIVE DIRECTION)
• C4. Readable text and controls stay whole at 375px, 768px, and 1280px. (explicit, CREATIVE DIRECTION)
• C5. Quiz otomatis and Progress belajar require an established identity; the Dashboard and the learning content sections do not. (from page contract access)
• C6. The generic indigo/blue-on-white SaaS template is forbidden for this project. (explicit, CREATIVE DIRECTION)

Future requirements. None accepted at this time. No future-horizon capability was explicitly deferred or left open by the authoritative source.

12. Glossary

• ETO (Electro-Technical Officer): the maritime officer role responsible for a ship's electrical and electronic systems; the qualification this academy prepares cadets for.
• Cadet / ETO Learner: the accepted active human persona of this product — a maritime cadet preparing for the ETO role.
• Dashboard: the entry surface of the ETO Cadet Academy, presenting mission status and navigation to all sections.
• Materi Elektro: the electrical learning material section.
• Kelistrikan Kapal: the ship electrical systems learning section.
• Interview ETO: the section presenting ETO interview content.
• Quiz otomatis: the automatically generated quiz destination.
• Safety: the safety learning material section.
• Progress belajar: the learning progress destination and the cadet's tracked study progress.
• Bezel ring: the champagne circular ring that frames a needle gauge; the product's primary data shape.
• Needle sweep: the animated movement of a gauge needle from 0 to its value on reveal.
• Instrument rail: the fixed left navigation rail (72px desktop) that collapses to a bottom tab bar at 375px.
• Ruled data row: a list row with aligned label/value pairs separated by 1px #2A3035 hairlines, like a spec sheet.
• Toggle key: a quiz answer option rendered as a machined toggle switch with a 1px champagne edge that flips to amber on selection.