Page 1 of 18
System Requirements Document for surat-keterangan-sakit
1. Introduction
surat-keterangan-sakit is a first-party web tool for producing a formal Indonesian Surat Keterangan Sakit (medical certificate / sick leave letter) that matches the layout of the paper reference image supplied by the user. The product's intent is narrow and document-centric: the user opens the tool, sees the letter as it will be printed, confirms the three fixed data points that define this certificate — Tanggal pemeriksaan: Kamis, 8 Oktober 2026, Lama istirahat: 1 hari, and Tanggal pada bagian tanda tangan: 9 Oktober 2026 — and generates a letter whose format follows the reference image.
The audience is the single accepted active human role, Pembuat Surat Keterangan Sakit: a person (clinic staff, HR/administrative staff, or an employee acting on their own behalf) who must produce one official-looking, correctly dated, printable sick leave letter. The register is bureaucratic and trustworthy rather than playful; the letter itself is the hero of the interface, and the tool exists to make the generated document complete, correctly dated, and ready to sign.
Page 2 of 18
2. System Overview
The system is a small, self-contained document generator with two first-party pages and no account requirement.
- Delivery shape: custom UI plus generated documents. The application renders a live, A4-proportioned preview of the letter and produces the finished letter as a generated document that can be printed or shared.
- Actors: one accepted active human persona, Pembuat Surat Keterangan Sakit. There are no other human personas, no administrators, no reviewers, and no external recipients who act inside the product. The generated letter is an outbound artifact; any person who later reads the printed letter is outside the product boundary and is not a persona.
- Accepted behavior: present the letter format from the reference image; carry the three fixed data points (examination date, rest duration, signature date); let the user prepare the letter in a workspace with a live preview; generate the letter as a document.
- Ownership: both pages are application-owned custom pages with no access requirement. There is no provider-owned surface, no external destination, and no headless-only delivery.
- Exclusions: no patient-record management, no appointment scheduling, no clinic directory, no multi-letter archive, no e-signature service, no billing, and no account or login system. These are not part of the accepted scope and must not be added.
Page 3 of 18
2a. Product Interpretation and Delivery Boundary
The product is a single-purpose certificate generator, not a clinic management system. Everything the user needs is reachable without creating an account: the entry page is anonymous and public, and the letter workspace is likewise reachable without identity, because the accepted work produces a one-off document rather than durable, privately owned, resumable state. No commitment, entitlement, or value transfer is bound to a returning participant, so no application-owned identity is introduced.
The current delivery boundary covers: the public entry page that explains the tool and shows the letter format, the letter workspace where the certificate is prepared and previewed, and the generation of the finished letter document. The future boundary is deliberately empty — no future requirements were stated by the user. Anything not listed above (patient databases, scheduling, multi-user review, digital signature providers) is outside the product and is not implied by the presence of a medical-document domain.
The reference image is authoritative for the letter's format: the letterhead area, the ruled header with the title, the label/value field rows, and the signature block must follow that structure. The three data values are fixed by the user's instruction and are not free-form user input in the current scope; they are the certificate's defining content.
Page 4 of 18
2b. Source Content Inventory
The reference directive for the uploaded sick-leave letter image declares content_source authority. The verified factual content carried from that source and from the user's explicit text is:
Letter identity and title
- Document title: SURAT KETERANGAN SAKIT (set in all caps with a hairline rule beneath it).
- Document type: formal medical certificate / sick leave letter, Indonesian language, printable.
Fixed data fields (explicit user instruction)
- Field label Tanggal pemeriksaan → value Kamis, 8 Oktober 2026.
- Field label Lama istirahat → value 1 hari.
- Field label Tanggal pada bagian tanda tangan → value 9 Oktober 2026.
Structural regions of the letter (from the reference image)
- A clinic letterhead area at the top of the sheet.
- A ruled header containing the document title.
- Field rows presented as label/value pairs separated by hairline rules.
- A signature block containing a signature line and the signature date.
Media reference
- One uploaded reference image of a Surat Keterangan Sakit, used as the authoritative format and visual-structure reference for the generated letter.
No other verified entities, collections, contacts, links, or dates were supplied. No dummy or invented letter content (patient names, clinic names, addresses, doctor names, registration numbers) is asserted here, because none was verified in the source.
2c. Page Content and Component Coverage
Page 5 of 18
Landing
The anonymous public entry surface. It explains what the tool produces and shows the letter format before the user begins.
- Information and state: the headline Surat Keterangan Sakit; a short statement that the tool produces a sick leave letter following the reference format; the three fixed data points presented as a numbered ruled list — 01 Tanggal pemeriksaan: Kamis, 8 Oktober 2026, 02 Lama istirahat: 1 hari, 03 Tanggal tanda tangan: 9 Oktober 2026; a live, full-height A4-proportioned preview of the letter sheet.
- Primary action: the Buat Surat call to action, a solid orange bar pinned beneath the numbered list, which opens the letter workspace.
- Supporting actions: none beyond navigation into the workspace; the preview is not editable here.
- Domain entities: the certificate (title, three fixed data fields), the letter sheet preview.
- Component responsibilities:
- Hero rail (4 columns): headline, numbered data-point list with oversized orange numerals and hairline rules, CTA bar.
- Letter sheet preview (8 columns): renders the A4 letter at 1:1 scale, flush to the right edge, top-left corner bleeding off the viewport edge by 24px; read-only.
- Structural line diagram: a diagrammatic line drawing of the letter's structure (ruled lines and numbered callouts) beside the headline, per the imagery direction.
- States:
- Loading: the letter sheet preview fades in and slides up 8px once on load; under reduced motion the slide is removed and only the fade remains.
- Empty: not applicable — the letter always carries its three fixed values.
- Success: the preview renders the complete letter structure and the CTA is available.
- Error / recovery: if the preview fails to render, the headline, the numbered data points, and the Buat Surat action remain fully usable so the user can still reach the workspace; the preview area shows a plain placeholder rather than blocking the page.
Page 6 of 18
Surat Keterangan Sakit
The letter workspace. This is where the certificate is prepared, previewed, and generated.
- Information and state: the current certificate content — title SURAT KETERANGAN SAKIT, Tanggal pemeriksaan: Kamis, 8 Oktober 2026, Lama istirahat: 1 hari, Tanggal pada bagian tanda tangan: 9 Oktober 2026 — plus the live A4-proportioned letter sheet showing the letterhead area, ruled header, field rows, and signature block.
- Primary action: Buat Surat / generate the letter document, producing the finished certificate for printing or sharing.
- Supporting actions: adjust the certificate's date and rest-duration fields within the workspace; review the live preview after each change.
- Domain entities: the certificate (title, examination date, rest duration, signature date), the letter sheet, the generated document.
- Component responsibilities:
- Control panel (left pane): compact field rows for Tanggal pemeriksaan, Lama istirahat, and Tanggal tanda tangan, each rendered as a label/value pair on a ruled row — uppercase 11px muted label on the left, 16px graphite value on the right, separated by a 1px
#D8D4CE rule. No floating labels, no rounded input pills.
- Letter sheet (right pane): the A4-proportioned preview, centred, with a 1px border, 2px corner radius, and a very light shadow; the signature block is anchored by a 1px orange rule above the date and a dashed graphite line for the signature, with the date set in 13px uppercase Archivo.
- Generate action: the solid orange bar with a 1px graphite border, 6px radius, shifting to
#C94A08 on hover with tightened label letter-spacing.
- States:
- Loading: the preview updates with a 180ms opacity fade after a field change.
- Empty: not applicable — the certificate always carries its three values.
- Success: the preview reflects the current field values and the generated letter matches the reference format with all three data points present.
- Error / recovery: if generation fails, the workspace retains the current field values and preview so the user can retry without re-entering anything; the failure is reported plainly next to the generate action.
- Responsive: on mobile (375px) the preview stacks below the controls and the letter sheet scales to 100% width with internal padding preserved; the sheet may scroll vertically but never crops readable content.
Page 7 of 18
3. Functional Requirements
FR-1 — Produce a sick leave letter matching the reference format (explicit)
As a Pembuat Surat Keterangan Sakit, I should generate a Surat Keterangan Sakit whose layout follows the format of the reference image, so that the resulting letter is a formally structured, printable certificate.
- Trigger/input: the user opens the letter workspace and invokes the generate action.
- Observable result: a generated letter document containing the letterhead area, the ruled header with the title SURAT KETERANGAN SAKIT, the label/value field rows, and the signature block, arranged as in the reference image.
- Access state: no access requirement; reachable anonymously.
- Failure/recovery: if generation does not complete, the workspace keeps the current certificate content and preview intact and the user can retry.
- Continuation: the user prints or shares the generated letter.
FR-2 — Carry the examination date (explicit)
As a Pembuat Surat Keterangan Sakit, I should have the letter state Tanggal pemeriksaan: Kamis, 8 Oktober 2026, so that the certificate records the correct examination date.
- Trigger/input: the certificate is prepared in the workspace.
- Observable result: the field Tanggal pemeriksaan shows the value Kamis, 8 Oktober 2026 in both the workspace field row and the letter sheet preview, and in the generated document.
- Access state: no access requirement.
- Failure/recovery: if the value is not present in the preview, the user can correct it in the workspace field before generating.
- Continuation: the corrected value flows into the generated letter.
FR-3 — Carry the rest duration (explicit)
As a Pembuat Surat Keterangan Sakit, I should have the letter state Lama istirahat: 1 hari, so that the certificate specifies the correct rest period.
- Trigger/input: the certificate is prepared in the workspace.
- Observable result: the field Lama istirahat shows the value 1 hari in the workspace field row, the letter sheet preview, and the generated document.
- Access state: no access requirement.
- Failure/recovery: if the value is not present in the preview, the user can correct it in the workspace field before generating.
- Continuation: the corrected value flows into the generated letter.
FR-4 — Carry the signature date (explicit)
As a Pembuat Surat Keterangan Sakit, I should have the letter state Tanggal pada bagian tanda tangan: 9 Oktober 2026, so that the signature block is dated correctly.
- Trigger/input: the certificate is prepared in the workspace.
- Observable result: the signature block of the letter shows the date 9 Oktober 2026, set in 13px uppercase Archivo above the dashed signature line, in both the preview and the generated document.
- Access state: no access requirement.
- Failure/recovery: if the signature date is not present in the preview, the user can correct it in the workspace field before generating.
- Continuation: the corrected value flows into the generated letter.
FR-5 — Review the letter before generating (required_inference)
As a Pembuat Surat Keterangan Sakit, I should see a live, A4-proportioned preview of the letter as I prepare it, so that I can confirm the format and the three data points are correct before producing the final document.
- Trigger/input: the user opens the letter workspace, or changes a field value.
- Observable result: the letter sheet preview reflects the current certificate content, updating with a 180ms opacity fade after a field change.
- Access state: no access requirement.
- Failure/recovery: if the preview cannot render, the field rows remain usable and the generate action remains available.
- Continuation: the user proceeds to generate the letter once the preview is correct.
FR-6 — Adjust the certificate's date and rest fields in the workspace (required_inference)
As a Pembuat Surat Keterangan Sakit, I should be able to set the examination date, rest duration, and signature date in the workspace, so that the certificate carries the intended values.
- Trigger/input: the user edits a field row in the control panel.
- Observable result: the edited value appears in the field row and propagates to the letter sheet preview.
- Access state: no access requirement.
- Failure/recovery: an invalid or incomplete entry leaves the previous value in the preview and is indicated on the field row, so the user can correct it.
- Continuation: the user continues editing or generates the letter.
FR-7 — Reach the tool from a public entry page (required_inference)
As a Pembuat Surat Keterangan Sakit, I should arrive at a public page that explains the tool and shows the letter format, so that I understand what will be produced before I start.
- Trigger/input: the user opens the application.
- Observable result: the entry page shows the headline, the three fixed data points as a numbered ruled list, a preview of the letter sheet, and the Buat Surat action.
- Access state: anonymous, no access requirement.
- Failure/recovery: if the preview fails, the headline, data points, and Buat Surat action remain usable.
- Continuation: the user selects Buat Surat and enters the letter workspace.
FR-8 — Obtain the finished letter as a document (required_inference)
As a Pembuat Surat Keterangan Sakit, I should receive the generated letter as a document I can print or share, so that the certificate can be used outside the tool.
- Trigger/input: the user invokes the generate action in the workspace.
- Observable result: a letter document is produced containing the reference format and all three data points.
- Access state: no access requirement.
- Failure/recovery: if the document cannot be produced, the workspace retains the certificate content and reports the failure so the user can retry.
- Continuation: the user prints or shares the document.
Page 8 of 18
4. User Personas
Page 9 of 18
Pembuat Surat Keterangan Sakit
Product context. This is the only accepted active human role. The person needs to produce a formal Indonesian sick leave letter — a Surat Keterangan Sakit — that looks official, is correctly dated, and is ready to be signed and printed. They may be clinic or administrative staff preparing a certificate on behalf of a patient, or an employee preparing their own leave documentation. The work is bureaucratic and repetitive in nature: the same letter format is produced again and again, with the dates and rest duration being the values that matter.
Primary goal. To obtain a finished Surat Keterangan Sakit that follows the reference letter format and carries the correct examination date, rest duration, and signature date, without having to lay out or format a document by hand.
Distinct accepted responsibilities.
- Confirming the certificate's three defining data points: Tanggal pemeriksaan: Kamis, 8 Oktober 2026, Lama istirahat: 1 hari, and Tanggal pada bagian tanda tangan: 9 Oktober 2026.
- Preparing the certificate in the workspace and reviewing the live letter preview so the format matches the reference image.
- Generating the finished letter document and taking it away for printing or sharing.
Relevant inputs and decisions. The user supplies or confirms the examination date, the rest duration, and the signature date, and decides when the preview is correct enough to generate. The letter's structural format is not a user decision — it follows the reference image.
Interactions with other accepted participants. There are none inside the product. The generated letter is an outbound artifact; any person who later reads or receives the printed letter is outside the product boundary and does not act within it. This is why the product has no handoff, approval, or recipient-response step.
Observable success. The user holds a generated letter that reproduces the reference format, shows Kamis, 8 Oktober 2026 as the examination date, 1 hari as the rest duration, and 9 Oktober 2026 in the signature block, and is legible and printable.
Constraints carried from source. The letter format must follow the reference image; the three data values are fixed as stated; the interface must remain legible and fully inside the viewport at 375px, 768px, and 1280px.
Page 10 of 18
5. Core User Flows
Flow 1 — Produce a sick leave letter from the public entry page
- Starting context: the user needs a Surat Keterangan Sakit and opens the application. They are not signed in and no account exists.
- On the Landing page, the user reads the headline Surat Keterangan Sakit and the numbered ruled list of the three fixed data points: 01 Tanggal pemeriksaan: Kamis, 8 Oktober 2026, 02 Lama istirahat: 1 hari, 03 Tanggal tanda tangan: 9 Oktober 2026.
- Beside the list, the user sees the live A4-proportioned letter sheet preview, which fades in and slides up 8px once on load (fade only under reduced motion), confirming the format that will be produced.
- The user selects the Buat Surat action — the solid orange bar beneath the numbered list — and arrives at the Surat Keterangan Sakit workspace.
- Observable result: the workspace opens with the control panel on the left and the letter sheet centred on the right, showing the certificate with its three data points.
- Next step: the user reviews the preview (Flow 2) or generates the letter directly (Flow 3).
Flow 2 — Review and adjust the certificate in the workspace
- Starting context: the user is in the Surat Keterangan Sakit workspace with the certificate loaded.
- The user reads the field rows in the control panel: Tanggal pemeriksaan with value Kamis, 8 Oktober 2026, Lama istirahat with value 1 hari, and Tanggal tanda tangan with value 9 Oktober 2026, each as an uppercase 11px muted label on the left and a 16px graphite value on the right, separated by a 1px
#D8D4CE rule.
- The user checks the letter sheet preview on the right, confirming the letterhead area, the ruled header with SURAT KETERANGAN SAKIT, the field rows, and the signature block with its 1px orange rule and dashed graphite signature line.
- If a value needs changing, the user edits the corresponding field row; the preview updates with a 180ms opacity fade.
- Observable result: the preview reflects the current certificate content, and the signature block shows the date 9 Oktober 2026 in 13px uppercase Archivo.
- Failure/recovery: if an entry is invalid or incomplete, the previous value stays in the preview and the field row indicates the problem, so the user can correct it without losing other values.
- Next step: the user proceeds to generate the letter (Flow 3).
Page 11 of 18
Flow 3 — Generate the finished letter document
- Starting context: the user is in the Surat Keterangan Sakit workspace and the preview shows the certificate they intend to produce.
- The user selects the generate action — the solid orange bar with a 1px graphite border, which shifts to
#C94A08 on hover.
- The system produces the letter document from the current certificate content.
- Observable result: the user receives a letter document that follows the reference format and contains Tanggal pemeriksaan: Kamis, 8 Oktober 2026, Lama istirahat: 1 hari, and the signature date 9 Oktober 2026.
- Failure/recovery: if generation fails, the workspace retains the certificate content and preview and reports the failure next to the generate action; the user retries without re-entering anything.
- Continuation: the user prints or shares the generated letter. The letter is an outbound artifact; no recipient acts inside the product.
Flow 4 — Produce the letter on a mobile device
- Starting context: the user opens the application on a 375px-wide viewport.
- On the Landing page, the letter sheet preview becomes the first screen, with the headline and numbered data points following; all text and controls stay fully inside the viewport.
- The user selects Buat Surat and enters the Surat Keterangan Sakit workspace.
- In the workspace, the preview stacks below the control panel and the letter sheet scales to 100% width with its internal padding preserved.
- Observable result: the user can read the full letter sheet by scrolling it vertically; no readable content is cropped.
- Next step: the user generates the letter as in Flow 3.
Page 12 of 18
6. Visuals Colors and Theme
The creative direction is authoritative for this section. The muse is Dieter Rams; the headline idea is "Less, but better — a medical certificate as a precision instrument." The letter is the hero; the interface is a strict modular grid of honest controls on warm paper ground, with a single signal colour.
Colour tokens (light mode)
| Role | Hex | Use |
|---|
| Background | #F4F1EC | Warm off-white paper ground behind the letter sheets |
| Surface | #FFFFFF | Pure white letter sheets floating on the ground |
| Text | #1C1B1A | Near-black body and value text, print-like contrast |
| Primary | #2B2B2B | Graphite headings, rules, letterhead |
| Accent | #E8590C | Braun orange: active date field, primary CTA, signature rule |
| Accent hover | #C94A08 | Primary action hover state |
| Muted | #8A8580 | Labels, meta text, disabled states |
| Hairline rule | #D8D4CE | 1px separators between field rows |
No blue or indigo appears anywhere in the UI or the letter. The only saturated colour is the signal orange.
Typography
- Headings and body: Archivo. No Inter, Roboto, Arial, Helvetica, or system-ui.
- Headings: Archivo Medium (500–600), tight tracking
-0.01em; uppercase micro-labels with wide letter-spacing 0.14em for field names and section markers.
- Letter title SURAT KETERANGAN SAKIT: all caps with a hairline rule beneath, sized with
clamp(28px, 6vw, 48px).
- Modular scale 1.25: 48px display (32px mobile), 32px section head (24px mobile), 20px subhead, 16px body, 13px label, 11px micro-label.
- Line height 1.5 for body, 1.15 for display.
Shape language
- Modular rounded rectangles: 6px radius on controls, 2px radius on letter sheet corners.
- Hairline 1px rules in
#D8D4CE separate field rows.
- Letter sheet: subtle 1px border and very light shadow
0 1px 2px rgba(0,0,0,0.04).
- No blobs, no pills, no oversized radii.
Layout
- Strict 12-column grid on a 1280px canvas with 80px outer margins.
- Landing: single asymmetric column — 4-column left rail (headline plus the three fixed data points as a numbered list) and 8-column right area holding the live letter sheet preview.
- Workspace: two-pane split — compact control panel on the left (fields for Tanggal pemeriksaan, Lama istirahat, Tanggal tanda tangan) and the A4-proportioned letter sheet centred on the right.
- Mobile (375px): preview stacks below the controls; the letter sheet scales to 100% width with internal padding preserved. All text and controls stay fully inside the viewport; the sheet may scroll vertically but never crops readable content.
Imagery
- No photography, no illustration, no 3D. The visual content is the letter itself: a clean A4 document with a ruled header, a clinic letterhead area, label/value field rows, and a signature block.
- On the landing page, a diagrammatic line drawing of the letter's structure (ruled lines and numbered callouts) sits beside the headline.
- Icons: 1.5px stroke, geometric, functional only.
Page 13 of 18
7. Signature Design Concept
The letter sheet is the hero. On the public entry page, the A4 letter sheet is rendered at 1:1 scale, flush to the right edge of the viewport, with its top-left corner bleeding off the viewport edge by 24px. It occupies roughly 60% of the viewport width and is the first thing the eye lands on — the product's defining object presented as a physical document on a warm paper ground, not as a screenshot inside a card.
To its left, a 4-column rail carries the headline Surat Keterangan Sakit in 48px Archivo Medium, followed by the three fixed data points as a ruled list with oversized orange numerals — 01, 02, 03 — each numeral set in Archivo with wide tracking, followed by a hairline rule and the field value. This is a wayfinding system borrowed from transit signage: it makes the certificate's three defining facts scannable in one pass. Beneath the list sits the Buat Surat action: a solid orange bar, 48px tall, with a 1px graphite border and no radius beyond 6px.
The composition deliberately avoids a centred headline with subtext and a blue CTA, and avoids a grid of identical hover-lift cards. The gesture of the sheet bleeding off the right edge is carried by the sheet itself — a decorative, non-textual surface — while every readable element (headline, numerals, field values, CTA label) stays whole and inside the viewport at 375px, 768px, and 1280px. On mobile the sheet becomes the first screen and the rail follows beneath it.
The signature detail that makes the generated document feel official is reproduced in the preview: a 1px orange rule above the signature date, a dashed graphite line for the signature, and the date 9 Oktober 2026 set in 13px uppercase Archivo.
Page 14 of 18
8. Interaction Model & Motion Direction
Interaction Model: Static
Motion Tempo: restrained
Hero Dimensionality: flat
Landing Hero Motion Brief
- Focal subject: the A4 letter sheet preview, rendered at 1:1 scale and bleeding off the right viewport edge by 24px, with the structural line diagram and the numbered data-point rail beside it.
- Input → transformation → outcome thesis: on load, the letter sheet fades in and slides up 8px once — a single purposeful reveal that presents the finished certificate as the first thing the user sees, without any looping or decorative motion. The user's only input on this page is selecting Buat Surat, which transitions to the workspace.
- Motion vocabulary: instant, mechanical feedback. 120ms ease-out on button presses; 180ms opacity fade when the letter preview updates after a field change. No bounces, no parallax, no decorative loops.
- Composed first frame: warm off-white ground
#F4F1EC; the white letter sheet flush to the right edge with its top-left corner off-screen; the headline and the three numbered data points with orange numerals on the left rail; the solid orange Buat Surat bar pinned beneath the list.
- Reduced-motion state: the slide-up is removed and only the opacity fade remains; the sheet, the numbered list, and the CTA are all present and fully readable in their final positions.
No 3D or WebGL scene is required or requested for this project.
Page 15 of 18
9. Non-Functional Requirements
NFR-1 — Reference-format fidelity (explicit)
The generated letter must follow the layout of the reference image: letterhead area, ruled header with the title SURAT KETERANGAN SAKIT, label/value field rows separated by hairline rules, and a signature block. Rationale: the user explicitly required the letter to match the supplied image.
NFR-2 — Fixed data integrity (explicit)
The letter must carry Tanggal pemeriksaan: Kamis, 8 Oktober 2026, Lama istirahat: 1 hari, and Tanggal pada bagian tanda tangan: 9 Oktober 2026. Rationale: these three values are explicit hard constraints.
NFR-3 — Print legibility (required_inference)
The letter sheet must be legible and printable at A4 proportions, with near-black #1C1B1A text on white #FFFFFF for print-like contrast. Rationale: the accepted outcome is a document ready to sign and print.
NFR-4 — Viewport containment (explicit, from the creative direction)
Headlines, wordmarks, labels, numbers, and controls must stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...)) to fit, with no other element covering any part of them. The letter sheet may scroll vertically but must never crop readable content. Rationale: stated readable-text-and-controls constraint.
NFR-5 — Reduced-motion support (explicit, from the creative direction)
Under prefers-reduced-motion, the landing reveal keeps only the fade and drops the slide; the interface remains fully usable in a static arrangement. Rationale: stated motion constraint.
NFR-6 — No account requirement (required_inference)
Both pages are reachable without identity, because the accepted work produces a one-off document and no durable, privately owned, resumable state is created. Rationale: no commitment, entitlement, or value transfer is bound to a returning participant.
NFR-7 — No blue or indigo (explicit, from the creative direction)
No blue or indigo accent appears anywhere in the UI or the letter; the only saturated colour is the signal orange #E8590C. Rationale: stated palette constraint and the forbidden generic template look.
Page 16 of 18
10. Tech Stack
No technology choices were specified by the user. The following are coherent defaults for a small, single-purpose document generator with a custom UI and generated documents.
- Frontend: React with a component-based layout implementing the 12-column grid, the two-pane workspace, and the A4 letter sheet preview.
[Default — not specified by user]
- Styling: CSS with custom properties for the colour tokens, the 1.25 modular type scale, and
clamp() sizing for the letter title. [Default — not specified by user]
- Typography: Archivo, loaded as a web font for headings and body.
[Default — not specified by user]
- Backend: Python with FastAPI, serving the letter generation endpoint that renders the certificate document from the current field values.
[Default — not specified by user]
- Storage: none required for current scope — the certificate is generated on demand and no durable letter archive was accepted.
[Default — not specified by user]
- Packaging: Docker with docker-compose for local and single-host deployment.
[Default — not specified by user]
- Orchestration: Kubernetes is not required; the deployment shape is a single small service.
[Default — not specified by user]
Page 17 of 18
11. Assumptions and Constraints
Assumptions
- The reference image is available as the authoritative format source for the letter's structure.
[Assumption — required_inference]
- The three data values are the certificate's defining content for the current scope and are presented as the letter's field values rather than free-form narrative text.
[Assumption — required_inference]
- The generated letter is an outbound artifact; no recipient acts inside the product.
[Assumption — required_inference]
- The letter is produced in Indonesian, matching the reference image and the user's instruction.
[Assumption — explicit]
Constraints
- The letter format must follow the reference image. (explicit)
- Tanggal pemeriksaan is fixed at Kamis, 8 Oktober 2026. (explicit)
- Lama istirahat is fixed at 1 hari. (explicit)
- Tanggal pada bagian tanda tangan is fixed at 9 Oktober 2026. (explicit)
- No blue or indigo accents; the only saturated colour is
#E8590C. (explicit)
- No Inter, Roboto, Arial, Helvetica, or system-ui for headings or body. (explicit)
- No photography, illustration, or 3D imagery; the letter itself is the visual content. (explicit)
- No playful micro-interactions, bounces, or parallax. (explicit)
- Readable text and controls stay whole and inside the viewport at 375px, 768px, and 1280px. (explicit)
Exclusions
- No patient-record management, appointment scheduling, clinic directory, or multi-letter archive. (not accepted in source)
- No account, login, or role-based permission system. (not accepted in source)
- No e-signature provider or external signing service. (not accepted in source)
- No billing or payment capability. (not accepted in source)
Page 18 of 18
12. Glossary
- Surat Keterangan Sakit — Indonesian medical certificate / sick leave letter; the document this product generates.
- Tanggal pemeriksaan — Examination date; the date the medical examination took place. Fixed at Kamis, 8 Oktober 2026.
- Lama istirahat — Rest duration; the length of the prescribed rest period. Fixed at 1 hari (one day).
- Tanggal pada bagian tanda tangan — The date appearing in the signature block of the letter. Fixed at 9 Oktober 2026.
- Letter sheet — The A4-proportioned rendered document surface showing the letterhead area, ruled header, field rows, and signature block.
- Field row — A label/value pair on a ruled line: uppercase 11px muted label on the left, 16px graphite value on the right, separated by a 1px
#D8D4CE rule.
- Signature block — The closing region of the letter containing a 1px orange rule above the signature date, a dashed graphite signature line, and the date set in 13px uppercase Archivo.
- Pembuat Surat Keterangan Sakit — The single accepted active human persona; the person who prepares and generates the certificate.
No comments yet. Be the first!