System Requirements Document for ft-cs

1. Introduction

FT CS is an Indonesian technical/field-service company that needs a public marketing website. The product intent is a modern, professional, mobile-first brochure site that presents FT CS to prospective clients, communicates competence and credibility, and makes it trivially easy for a visitor on a phone to start a conversation with the company through WhatsApp.

The audience is twofold:

• Prospective clients who arrive on a mobile phone, want to judge whether FT CS is professional and capable, and want to reach a human in one tap.
• The FT CS site owner / administrator, who is responsible for presenting FT CS professionally online and keeping the site's content current.

The site is a public, anonymous, read-and-reach-out experience. There is no account system, no login, and no private state. The only conversion action is contacting FT CS — via the WhatsApp button or via the contact information on the Contact page.

The visual identity is fixed by the user: black and green, modern, and good on mobile. The creative direction (Virgil Abloh industrial label/tag language) governs how that black-and-green is expressed.

2. System Overview

FT CS is delivered as a first-party, publicly reachable marketing website with four pages and one persistent contact action:

A WhatsApp button is a persistent, site-wide contact entry point that opens a WhatsApp conversation with FT CS. It is not a separate page; it is a control available from every page, and on mobile it is fixed to the bottom of the viewport as a full-width bar.

Actors:

• Prospective Client (active human persona) — anonymous visitor evaluating FT CS.
• FT CS Site Owner / Administrator (active human persona) — the party responsible for the site's content and professional presentation.
• WhatsApp (external provider) — owns the messaging conversation once the visitor leaves the site through the WhatsApp button.

Access: All four pages are public and anonymous (access_requirement: none). No identity, account, or session is required or created anywhere in the product.

Narrow exclusions: No user accounts, no login, no dashboard, no e-commerce/checkout, no booking engine, no CMS admin UI, no blog, no analytics dashboard, no live chat widget other than the WhatsApp handoff. Contact happens through WhatsApp or through the contact details published on the Contact page.

2a. Product Interpretation and Delivery Boundary

FT CS is a public, anonymous, first-party marketing site. Every page is reachable without any identity, and the product never establishes, stores, or verifies a visitor identity. This is a deliberate boundary: the accepted journeys are "arrive, understand, reach out," and none of them requires durable visitor-specific state.

The WhatsApp button is a handoff, not a first-party messaging feature. FT CS does not build or own a chat system; the button composes a WhatsApp deep link that opens the WhatsApp application or web client, where WhatsApp owns the conversation, the message history, and the delivery. FT CS's responsibility ends at the handoff and resumes when the visitor's message arrives in FT CS's WhatsApp inbox.

The FT CS Site Owner / Administrator is an accepted persona whose responsibility is the site's content and professional presentation. In the current delivery horizon this responsibility is exercised by editing the site's content directly; no in-product content-management surface is accepted or required, and none is specified here.

Current vs. future: Everything in this document is current. No future-horizon features were accepted by the user.

2b. Source Content Inventory

Not applicable. No reference directive in this request declares content_source authority, so no source content inventory is produced. All content on the site is authored for FT CS under the Site Owner's responsibility.

2c. Page Content and Component Coverage

halaman utama

• Information / state: The FT CS wordmark; a mono status line (e.g. JAKARTA / SIAP 24 JAM); an oversized stacked uppercase headline spanning the viewport width, with the final word enclosed in acid-green quotation marks set 1.4× larger; a solid green primary CTA bar (KONSULTASI GRATIS) with the WhatsApp button pinned to its right end on desktop and stacked full-width beneath it on mobile; a hazard-striped marquee ticker of service names scrolling right-to-left beneath the hero; a stacked sequence of taped-down panels introducing FT CS, its services in brief, and its credibility, each opened by a mono crate-tag (01 / …, 02 / …) above a 6px black rule.
• Primary actions: Tap the primary CTA / WhatsApp button to start a WhatsApp conversation; navigate to tentang kami, layanan, or kontak.
• Supporting actions: Open the mobile nav drawer; follow in-page anchors to the stacked panels.
• Domain entities: FT CS company identity; service names (as ticker items and panel summaries); contact entry point.
• Component responsibilities: Fixed top nav bar (desktop) / full-height black drawer with oversized numbered uppercase links (mobile); hero block (wordmark, status line, headline, CTA bar, WhatsApp button); hazard-stripe marquee ticker; crate-tag section headers; stacked content panels; site-wide WhatsApp button.
• States:
  • Loading: Static content; no data fetch. Fonts load with a system fallback stack so the headline never reflows into an unreadable state.
  • Empty: Not applicable — all content is authored and present.
  • Success: Visitor reads the hero, scrolls the panels, and either taps the WhatsApp button or navigates onward.
  • Error / recovery: If the WhatsApp deep link cannot be opened (no WhatsApp client available), the button falls back to navigating to the kontak page so the visitor still has a path to reach FT CS.
  • Reduced motion: The marquee becomes a static wrapped row of the same service names; hovers become simple colour swaps; nothing translates.

tentang kami

• Information / state: A two-column dossier layout with a stamp motif. Left column: the FT CS story, what the company does, and what makes it credible. Right column: supporting macro imagery of real work and materials (cables, tools, machinery, connectors, gloved hands), cropped hard to rectangles, bled off one edge, overlaid with acid 1px grid lines and mono annotation strings, each labelled with a mono caption in the corner. Section opened by a mono crate-tag (02 / TENTANG) above a 6px black rule.
• Primary actions: Read the dossier; tap the WhatsApp button to start a conversation.
• Supporting actions: Navigate to layanan, kontak, or halaman utama.
• Domain entities: FT CS company profile; credibility claims; annotated work imagery.
• Component responsibilities: Crate-tag section header; two-column dossier grid (collapsing to a single 20px-gutter column on mobile); stamped credibility block; annotated image panels with mono captions; site-wide WhatsApp button.
• States:
  • Loading: Static content; images load with a black placeholder rectangle of the correct aspect ratio so the layout does not shift.
  • Empty: Not applicable.
  • Success: Visitor finishes the dossier with a clear understanding of who FT CS is and taps the WhatsApp button or moves to layanan.
  • Error / recovery: If an image fails to load, its black placeholder rectangle and mono caption remain, so the dossier still reads correctly.
  • Reduced motion: No scroll-triggered counting of the section index; the tag renders its number statically.

layanan

• Information / state: A numbered manifest list (01–06) with tabular alignment, each row carrying a service name and a thick-line vector pictogram drawn as an industrial symbol with a 3px stroke. Each row expands on tap to reveal a mono spec block describing that service. Section opened by a mono crate-tag (01 / LAYANAN) above a 6px black rule.
• Primary actions: Tap a manifest row to expand its mono spec block; tap the WhatsApp button to enquire about a service.
• Supporting actions: Collapse an expanded row; navigate to tentang kami, kontak, or halaman utama.
• Domain entities: Service entries (index number, name, pictogram, spec block).
• Component responsibilities: Crate-tag section header; numbered manifest list with tabular alignment; expandable rows; 3px-stroke vector pictograms; mono spec blocks; site-wide WhatsApp button.
• States:
  • Loading: Static content; no data fetch.
  • Empty: Not applicable — the manifest is authored with its service entries.
  • Success: Visitor expands one or more rows, understands the offering, and taps the WhatsApp button.
  • Error / recovery: If a pictogram fails to load, the row's index number, name, and spec block remain fully readable and the row still expands.
  • Reduced motion: Row expansion is instant rather than animated; the section index does not count up.

kontak

• Information / state: A form framed as a shipping label, with the WhatsApp button presented as the "seal" of that label. The page publishes FT CS's contact information (phone/WhatsApp number, and any other published contact details) as mono metadata. Section opened by a mono crate-tag (03 / KONTAK) above a 6px black rule.
• Primary actions: Tap the WhatsApp button to start a WhatsApp conversation with FT CS; read and use the published contact details.
• Supporting actions: Navigate to halaman utama, tentang kami, or layanan.
• Domain entities: FT CS contact details; the WhatsApp contact entry point.
• Component responsibilities: Crate-tag section header; shipping-label form frame; mono contact metadata block; WhatsApp button as the label's seal; site-wide WhatsApp button.
• States:
  • Loading: Static content; no data fetch.
  • Empty: Not applicable.
  • Success: Visitor taps the WhatsApp button and a WhatsApp conversation with FT CS opens, or the visitor copies/uses a published contact detail.
  • Error / recovery: If the WhatsApp deep link cannot be opened, the published contact details remain visible on the page so the visitor can still reach FT CS by another route.
  • Reduced motion: The WhatsApp button's hazard stripe does not scroll on hover; hover becomes a simple colour swap.

3. Functional Requirements

FR-1 — Public entry to the FT CS website (explicit) As a Prospective Client, I should land on the FT CS main page and immediately see who FT CS is and what it does, so that I can decide whether to keep reading.

• Trigger / input: The visitor opens the FT CS site URL on any device.
• Observable result: The halaman utama renders the FT CS wordmark, a mono status line, an oversized stacked uppercase headline, a green primary CTA bar, and a hazard-striped service ticker.
• Access state: Public, anonymous.
• Failure / recovery: If the site cannot be reached, the browser's own error state applies; no first-party recovery is specified.
• Continuation: The visitor scrolls the stacked panels or navigates to another page.

FR-2 — Navigate between the four pages (explicit) As a Prospective Client, I should be able to move between halaman utama, tentang kami, layanan, and kontak from anywhere on the site, so that I can find the information I need without backtracking.

• Trigger / input: The visitor opens the nav (fixed top bar on desktop; full-height black drawer with oversized numbered uppercase links on mobile) and selects a page.
• Observable result: The selected page renders; the active nav item is marked in primary green.
• Access state: Public, anonymous.
• Failure / recovery: If a page fails to load, the nav remains available so the visitor can retry or choose another page.
• Continuation: The visitor reads the selected page.

FR-3 — Learn about FT CS on the About Us page (explicit) As a Prospective Client, I should read the tentang kami dossier to learn who FT CS is and judge its credibility, so that I can decide whether to trust the company with my work.

• Trigger / input: The visitor navigates to tentang kami.
• Observable result: The two-column dossier renders with the FT CS story, a stamped credibility block, and annotated macro imagery of real work and materials, each with a mono caption.
• Access state: Public, anonymous.
• Failure / recovery: If an image fails to load, its black placeholder rectangle and mono caption remain so the dossier still reads correctly.
• Continuation: The visitor navigates to layanan or taps the WhatsApp button.

FR-4 — Review FT CS services on the Services page (explicit) As a Prospective Client, I should review the numbered manifest of FT CS services and expand any row to read its spec block, so that I can determine whether FT CS offers what I need.

• Trigger / input: The visitor navigates to layanan and taps a manifest row.
• Observable result: The tapped row expands to reveal its mono spec block; the row's index number, name, and 3px-stroke pictogram remain visible.
• Access state: Public, anonymous.
• Failure / recovery: If a pictogram fails to load, the row's index number, name, and spec block remain fully readable and the row still expands.
• Continuation: The visitor collapses the row, expands another, or taps the WhatsApp button to enquire about the service.

FR-5 — Find FT CS contact information on the Contact page (explicit) As a Prospective Client, I should find FT CS's contact information on the kontak page, so that I can reach the company through the channel I prefer.

• Trigger / input: The visitor navigates to kontak.
• Observable result: The shipping-label form frame renders with FT CS's published contact details as mono metadata and the WhatsApp button as the label's seal.
• Access state: Public, anonymous.
• Failure / recovery: If the WhatsApp deep link cannot be opened, the published contact details remain visible so the visitor can still reach FT CS by another route.
• Continuation: The visitor taps the WhatsApp button or uses a published contact detail.

FR-6 — Start a WhatsApp conversation from any page (explicit) As a Prospective Client, I should tap the WhatsApp button from any page and have a WhatsApp conversation with FT CS open, so that I can reach a human in one tap.

• Trigger / input: The visitor taps the WhatsApp button (in the hero CTA bar, in the site-wide control, or as the seal on the kontak page).
• Observable result: A WhatsApp deep link opens the WhatsApp application or web client with a conversation addressed to FT CS's WhatsApp number.
• Access state: Public, anonymous. WhatsApp owns the resulting conversation; FT CS owns the number and the inbox.
• Failure / recovery: If no WhatsApp client is available, the button falls back to navigating to the kontak page so the visitor still has a path to reach FT CS.
• Continuation: The visitor sends a message in WhatsApp; FT CS receives it in its WhatsApp inbox.

FR-7 — Reach FT CS on a mobile phone (explicit) As a Prospective Client on a mobile phone, I should be able to read every page and reach the WhatsApp button comfortably with one hand, so that the site is usable on the device I actually have.

• Trigger / input: The visitor opens the site on a mobile viewport.
• Observable result: The layout collapses to a single 20px-gutter column; the nav becomes a full-height black drawer; the WhatsApp button is fixed to the bottom of the viewport as a full-width bar; headlines, labels, numbers, and controls stay entirely inside the viewport and their containers at 375px, 768px, and 1280px.
• Access state: Public, anonymous.
• Failure / recovery: Not applicable — this is a layout guarantee, not a stateful operation.
• Continuation: The visitor reads and taps as on any other viewport.

FR-8 — Present FT CS professionally and keep content current (required_inference) As the FT CS Site Owner / Administrator, I should be able to present FT CS professionally online and keep the site's content current, so that prospective clients see an accurate, credible picture of the company.

• Trigger / input: The Site Owner updates the site's content (company story, service manifest entries and spec blocks, contact details, WhatsApp number).
• Observable result: The updated content renders on the corresponding page for all visitors.
• Access state: The Site Owner's responsibility is exercised outside the visitor-facing product; no in-product content-management surface is accepted or specified.
• Failure / recovery: If content is incorrect or stale, the Site Owner corrects it at the source and the pages re-render.
• Continuation: Prospective clients see the corrected content on their next visit.

4. User Personas

Prospective Client

Product context. A prospective client arrives on the FT CS website, most often on a mobile phone, usually after hearing about FT CS or searching for a technical/field-service provider. They do not know FT CS yet and have no account, no history, and no commitment to the company. They are evaluating, not transacting.

Primary goal. Decide quickly whether FT CS is professional and capable enough to be worth a conversation, and then start that conversation with as little friction as possible.

Distinct accepted responsibilities. The Prospective Client is the only persona who reads the site as a stranger. Their work is judgment: they read the hero to form a first impression, read the tentang kami dossier to assess credibility, review the layanan manifest to check whether FT CS offers what they need, and then choose a contact channel. They are the persona who decides whether the WhatsApp button gets tapped at all.

Relevant inputs or decisions. They decide (a) whether the site looks professional enough to continue, (b) whether FT CS's services match their need, and (c) whether to reach out via WhatsApp or via the published contact details. Their inputs are the site's content and the WhatsApp number.

Interactions with other accepted participants. The Prospective Client's only interaction with another participant is the handoff to FT CS through WhatsApp: they tap the button, WhatsApp opens, and their message lands in FT CS's inbox. They never interact with the Site Owner directly.

Observable success. They understand what FT CS does, believe FT CS is credible, and a WhatsApp conversation with FT CS opens from their tap.

FT CS Site Owner / Administrator

Product context. The Site Owner is the party responsible for FT CS's public presence. They are not a visitor and not a customer; they are the author and maintainer of the site's content. They judge the site by whether it makes FT CS look modern, professional, and credible to visitors on mobile.

Primary goal. Present FT CS professionally online and keep the site's content accurate and current.

Distinct accepted responsibilities. The Site Owner owns the content of all four pages — the hero headline and status line, the tentang kami dossier and its imagery, the layanan manifest entries and their spec blocks, and the kontak contact details — as well as the WhatsApp number that the WhatsApp button targets. Their work is authoring and correction, not browsing.

Relevant inputs or decisions. They decide what FT CS's story is, which services appear in the manifest and in what order, what each spec block says, which contact details are published, and which WhatsApp number receives enquiries.

Interactions with other accepted participants. The Site Owner receives the Prospective Client's WhatsApp message in FT CS's WhatsApp inbox. That inbox is owned by WhatsApp, not by this website; the website's responsibility ends at the handoff.

Observable success. Visitors see a modern, professional, credible FT CS site on mobile, and enquiries arrive at the correct WhatsApp number.

5. Core User Flows

Flow A — Prospective Client evaluates FT CS and reaches out (mobile)

1. The Prospective Client opens the FT CS site URL on their phone and lands on halaman utama.
2. The hero renders: the FT CS wordmark, the mono status line, the oversized stacked uppercase headline with its final word in acid-green quotation marks, the green CTA bar, and the hazard-striped service ticker scrolling beneath it.
3. The Prospective Client scrolls the stacked panels, each opened by a mono crate-tag, to get a first read on FT CS.
4. They open the mobile nav drawer (full-height black, oversized numbered uppercase links) and select tentang kami.
5. The two-column dossier renders with the FT CS story, the stamped credibility block, and annotated macro imagery of real work and materials. The Prospective Client reads it and forms a credibility judgment.
6. They navigate to layanan and review the numbered manifest (01–06).
7. They tap a manifest row; it expands to reveal its mono spec block. They read the spec and either collapse it or expand another row.
8. Satisfied that FT CS offers what they need, they tap the WhatsApp button — either the site-wide control fixed to the bottom of the viewport, or the button in the hero CTA bar.
9. Observable result: A WhatsApp deep link opens the WhatsApp application with a conversation addressed to FT CS's WhatsApp number.
10. Continuation: The Prospective Client sends their message. FT CS receives it in its WhatsApp inbox.
11. Failure / recovery: If no WhatsApp client is available on the device, the button falls back to navigating to kontak, where the published contact details are visible and the visitor can still reach FT CS by another route.

Flow B — Prospective Client checks contact details before reaching out

1. The Prospective Client is on any page of the site and wants to see FT CS's contact information before committing to a message.
2. They navigate to kontak.
3. The shipping-label form frame renders with FT CS's published contact details as mono metadata and the WhatsApp button as the label's seal.
4. The Prospective Client reads the contact details.
5. Observable result: They either tap the WhatsApp button (Flow A, step 9) or use a published contact detail directly.
6. Continuation: Their enquiry reaches FT CS through the chosen channel.
7. Failure / recovery: If the WhatsApp deep link cannot be opened, the published contact details remain visible on the page, so the visitor is never left without a route to FT CS.

Flow C — Prospective Client on desktop

1. The Prospective Client opens the site on a desktop viewport and lands on halaman utama.
2. The hero renders with the fixed top nav bar, the 12-column industrial grid with visible column rules, and the WhatsApp button pinned to the right end of the green CTA bar.
3. The Prospective Client navigates between tentang kami, layanan, and kontak using the fixed top nav; the active nav item is marked in primary green.
4. On layanan, they tap manifest rows to expand spec blocks.
5. Observable result: They tap the WhatsApp button and a WhatsApp conversation with FT CS opens.
6. Continuation: They send their message; FT CS receives it in its WhatsApp inbox.

Flow D — FT CS Site Owner keeps the site current

1. The FT CS Site Owner decides that a piece of site content needs to change — the company story, a service entry or its spec block, a published contact detail, or the WhatsApp number.
2. They update that content at its source.
3. Observable result: The updated content renders on the corresponding page (halaman utama, tentang kami, layanan, or kontak) for all visitors.
4. Continuation: Prospective clients see the corrected content on their next visit, and the WhatsApp button targets the correct number.
5. Failure / recovery: If content is incorrect or stale, the Site Owner corrects it at the source and the pages re-render.

6. Visuals Colors and Theme

Muse and headline: Virgil Abloh — Industrial quote marks on black: FT CS as a tagged, remixed service machine.

The user's instruction fixes black and green. The direction turns that into a deliberate industrial identity — label and tag motifs, quoted text, hazard stripes, exposed grid lines, industrial framing, Helvetica-class caps in quotation marks — rather than a generic dark-tech theme. Black ground carries the screen; green is the signal; acid is the tape.

Colour tokens (dark mode)

Ratio target: 70% black, 18% surface, 8% off-white type, 4% green + acid combined.

Typography

• Headings: Archivo, 800–900 weight, uppercase. Tracking -0.02em on display sizes, +0.16em on label sizes. Headlines are set as tight stacked lines that fill the column edge to edge; micro-labels sit small, uppercase, and wide-tracked like garment tags. Quotation marks are set as real characters at 1.4× the headline size in accent acid.
• Body: Archivo.
• Mono voice: Space Mono, used only for the tag/label layer — SKU-like strings, service codes, contact metadata.
• Scale (1.333 modular): 40/30/22/17/15 mobile → 128/64/40/24/17 desktop.
• Display clamp: clamp(40px, 11vw, 128px).
• Section heads: clamp(30px, 6vw, 64px).
• Body: 17px with 1.6 line-height.
• Labels: 12px uppercase, +0.16em tracking.
• Mono tag strings: 11px uppercase, +0.2em tracking.

Shape language

Hard edges only — 0px radius on panels, cards, images, and the WhatsApp button. The vocabulary is industrial: rectangle panels with 1px #2A2A2A borders, thick 6px black rules, hazard-stripe bars (45° acid/black repeating linear-gradient), tag shapes with a punched hole and a zip-tie line, and "exposed" grid lines drawn as 1px acid hairlines that run past the content edge. Nothing is soft, nothing floats, nothing blurs.

Layout

A 12-column industrial grid with visible column rules on desktop, collapsing to a single 20px-gutter column on mobile. Every section is framed as a labelled crate: a small mono tag in the top-left (01 / LAYANAN, 02 / TENTANG), a thick black rule, then content. Nav is a fixed top bar on desktop; on mobile it is a full-height black drawer with oversized stacked uppercase links numbered like a manifest. The home page reads as a stacked sequence of taped-down panels, each offset a few pixels from the last so the page feels assembled rather than templated. Services are a numbered manifest list, not a card grid; About is a two-column dossier with a stamp; Contact is a form framed as a shipping label with the WhatsApp button as the "seal".

Imagery

No stock people, no gradients, no blobs. Imagery is macro photographs of real work and materials — cables, tools, machinery, connectors, hands in gloves — high contrast, desaturated to near-monochrome with the green channel pushed, overlaid with acid 1px grid lines and mono annotation strings so each photo reads like a tagged specimen. Plus thick-line vector pictograms for each service, drawn as industrial symbols with a 3px stroke. Every image is cropped hard to a rectangle, bled off one edge, and labelled with a mono caption in the corner.

Avoid

Any blue, indigo, or violet in the palette — the only chromatic colours are #00E05A green and #D6FF3F acid. Rounded corners, soft shadows, glass/blur panels, or floating card stacks. Inter, Roboto, Poppins, Montserrat, or system-ui for headings or body — Archivo and Space Mono only. Gradient-blob heroes, mesh gradients, or any glow behind the headline. A grid of identical service cards with hover-lift; services are a numbered manifest. Centred hero copy with a subheadline paragraph under it. Photographs of smiling stock people in offices or call centres. Decorative motion longer than ~220ms, bounce easing, or parallax that moves readable text.

7. Signature Design Concept

The tagged crate. The public entry — halaman utama — is composed as a full-bleed black viewport that reads like a labelled shipping crate opened on a workshop floor.

• Top-left: the FT CS wordmark in Archivo 900 uppercase with a small acid "®"-style tag beside it.
• Top-right: a mono status line (JAKARTA / SIAP 24 JAM).
• Dominant element: a single oversized headline in Archivo 900 uppercase at clamp(40px, 11vw, 128px), spanning the full viewport width as three stacked lines, left-aligned, with the final word wrapped in literal quotation marks rendered in acid #D6FF3F at 1.4× the headline size. The words fill the frame and are cut by the right edge only as decorative type, never as readable text.
• Beneath the headline: a solid green #00E05A bar the width of the viewport holding the primary CTA (KONSULTASI GRATIS) in black uppercase, flush left, with the WhatsApp button pinned to the bar's right end on desktop and stacked full-width beneath it on mobile.
• Bottom third: a hazard-striped marquee ticker of service names scrolling right-to-left.

No centred text, no subheading paragraph, no gradient. The quotation mark is the brand's punctuation; the hazard stripe is its tape; the green bar is its seal.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: The oversized stacked uppercase headline on the black viewport, with its final word enclosed in acid-green quotation marks set 1.4× larger than the rest of the line.
• Input → transformation → outcome thesis: As the visitor arrives, the headline's stacked lines settle into place and the acid quotation marks land last, as if the word has just been tagged; the hazard-striped marquee ticker beneath the hero then begins its continuous right-to-left scroll, carrying the service names past the viewport edge. The outcome is a first frame that reads as a labelled, moving crate — the visitor immediately sees FT CS's name, its status, and its services in motion.
• Motion vocabulary: Snappy and mechanical — 120–220ms, cubic-bezier(0.2, 0, 0, 1), no bounce, no fade-in-from-nothing. A single horizontal marquee ticker (uppercase, acid on black, hazard-striped edges) runs under the hero at all times. Nav links get an acid underline that wipes in from the left. The WhatsApp button's hazard stripe scrolls one stripe-width on hover. Section tags count up their index number when scrolled into view.
• Composed first frame: Full-bleed #0A0A0A. Wordmark top-left with its acid tag; mono status line top-right. Three stacked headline lines filling the viewport width, left-aligned, the last word in acid quotation marks. The green CTA bar beneath, with the WhatsApp button at its right end on desktop. The hazard-striped ticker already scrolling in the bottom third.
• Reduced-motion state: The marquee becomes a static wrapped row of the same service names; hovers become simple colour swaps; section tags render their index numbers statically; nothing translates.

9. Non-Functional Requirements

NFR-1 — Mobile responsiveness (explicit) The display must look good on mobile phones. The layout must be verified at 375px, 768px, and 1280px. Readable text and controls — headlines, wordmarks, labels, numbers, card text, and controls — must stay entirely inside the viewport and their containers at every one of those widths, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element may cover any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut as the creative direction asks, as long as they cover no readable text or control.

NFR-2 — Black and green colour scheme (explicit) The palette is black and green. The only chromatic colours are #00E05A green and #D6FF3F acid. No blue, indigo, or violet appears anywhere in the product.

NFR-3 — Modern design (explicit) The design must read as modern and professional. The creative direction's industrial label/tag language, hard edges, exposed grid, and mono tag layer are the concrete expression of that requirement.

NFR-4 — Moving and scrollable content (required_inference) Marquees, tickers, and horizontally scrollable rows may cross the viewport or container edge by design. Every item must become fully readable as it passes. Under prefers-reduced-motion, a usable static arrangement must be provided: items wrap into rows or the row becomes horizontally scrollable so each item can be brought fully into view.

NFR-5 — WhatsApp handoff reliability (required_inference) The WhatsApp button must always leave the visitor with a route to FT CS. If the WhatsApp deep link cannot be opened, the button falls back to the kontak page, where the published contact details remain visible.

NFR-6 — Public anonymous access (explicit) All four pages are publicly reachable with no identity, account, or session. No page requires or creates a visitor identity.

10. Tech Stack

• Frontend: React (single-page application with client-side routing across the four pages).
• Styling: CSS with the token set defined in Section 6 — Archivo and Space Mono as the only font families, 0px radius, hard-edged panels, hazard-stripe gradients, and the 12-column industrial grid.
• Content: Static authored content for all four pages, maintained by the FT CS Site Owner at the source.
• Contact handoff: WhatsApp deep link (https://wa.me/<number>) opened from the WhatsApp button, with a fallback navigation to the kontak page.
• Hosting / delivery: Static site delivery; no server-side application logic is required by any accepted requirement.

No database, authentication service, or container orchestration is required by the accepted scope.

11. Assumptions and Constraints

Assumptions

• A-1 (required_inference) — FT CS has a WhatsApp number that the WhatsApp button targets, and that number is owned and monitored by the FT CS Site Owner / Administrator.
• A-2 (required_inference) — FT CS's contact details published on the kontak page are supplied by the Site Owner and are accurate at the time of publication.
• A-3 (required_inference) — The FT CS Site Owner / Administrator maintains site content outside the visitor-facing product; no in-product content-management surface is accepted or specified.
• A-4 (required_inference) — The service manifest on layanan is authored with FT CS's actual service entries; the direction's illustrative range (01–06) is a layout pattern, not a fixed count of services.

Constraints

• C-1 (explicit) — The colour scheme must be black and green.
• C-2 (explicit) — The design must be modern.
• C-3 (explicit) — The display must look good on mobile phones (responsive mobile layout).
• C-4 (explicit) — The site must include a main/home page, an About Us page, a Services page, a Contact page, and a WhatsApp button.
• C-5 (explicit) — The generic indigo/blue-on-white SaaS template is forbidden for this project.
• C-6 (explicit) — Headings and body use Archivo; the tag/label layer uses Space Mono. Inter, Roboto, Poppins, Montserrat, and system-ui are not used for headings or body.
• C-7 (explicit) — Shape language is hard-edged: 0px radius on panels, cards, images, and the WhatsApp button.

Exclusions

• No user accounts, login, or authentication.
• No dashboard or admin UI.
• No e-commerce, checkout, or payment.
• No booking engine.
• No blog.
• No analytics dashboard.
• No first-party chat or messaging system; messaging is handed off to WhatsApp, which owns the conversation.

12. Glossary

• FT CS — The Indonesian technical/field-service company this website presents.
• halaman utama — The public entry page of the FT CS website; the first page a visitor sees.
• tentang kami — The About Us page; the two-column dossier presenting FT CS's story and credibility.
• layanan — The Services page; the numbered manifest of FT CS's services with expandable spec blocks.
• kontak — The Contact page; the shipping-label-framed page publishing FT CS's contact details.
• WhatsApp button — The persistent, site-wide contact control that opens a WhatsApp conversation with FT CS; on mobile it is fixed to the bottom of the viewport as a full-width bar.
• Crate-tag — The mono section header motif: a small black rectangle with a 1px border, a punched hole, an index number, a slash, and an uppercase section name, sitting above a 6px black rule.
• Hazard stripe — A 45° repeating linear-gradient bar in acid #D6FF3F on black, used for ticker edges and the WhatsApp button's hover state.
• Manifest list — The numbered (01–06) tabular service list on layanan, where each row expands to reveal a mono spec block.
• Spec block — The mono-typed description revealed when a manifest row is expanded.
• Prospective Client — The anonymous visitor evaluating FT CS and deciding whether to reach out.
• FT CS Site Owner / Administrator — The party responsible for FT CS's public presence and the accuracy of the site's content.
• WhatsApp — The external provider that owns the messaging conversation once a visitor leaves the site through the WhatsApp button.