System Requirements Document for couverture-3d

1. Introduction

couverture-3d is a public web section dedicated to a 3D roofing cover that presents a professional journey (parcours) and a professional diagnostic for the French roofing trade. The product intent, taken directly from the authoritative requirement — « Créé un section couverture 3D sur parcours et diagnostic professionnel » — is to give roofing professionals a place to present their parcours and their diagnostic, and to let prospective clients (homeowners, project managers) discover that parcours and diagnostic through a 3D cover of the roofing work.

The audience is twofold and explicitly named by the accepted persona catalog:

• Visiteur / prospect — a person discovering the 3D cover section who wants to understand the parcours and the professional diagnostic before engaging, and who can initiate a contact or a diagnostic request.
• Professionnel de la couverture — a roofing trade professional who uses the section to present their parcours and their professional diagnostic, to showcase their experience, and to be identified by potential clients, with the goal of obtaining qualified requests through the section.

The register is expert and trustworthy but warm and artisanal — craft, material, built work — not corporate SaaS.

2. System Overview

couverture-3d is delivered as a single public custom page, Landing, owned by the application, reachable with no access requirement (access_requirement: none). It is the public entry surface that presents the 3D cover section, the parcours, and the professional diagnostic to visitors, and it is the surface on which the roofing professional's parcours and diagnostic are presented.

Current accepted behavior:

• A 3D cover section presenting the roofing subject as a material, matte architectural maquette.
• A parcours — a numbered professional journey rail.
• A professional diagnostic — a diagnostic panel with label/value pairs and a circular score dial.

Actors:

• Visiteur / prospect (human, accepted persona) — discovers, reads, and can initiate contact or a diagnostic request.
• Professionnel de la couverture (human, accepted persona) — presents parcours and diagnostic, and is identified by prospective clients.
• Application — owns the Landing page and renders the 3D cover, parcours, and diagnostic content.

Narrow exclusions: no account creation, no authentication, no dashboard, no admin console, no booking engine, no payment, no messaging inbox, and no additional pages beyond Landing are part of the current scope. The generic indigo/blue-on-white SaaS template is forbidden for this project.

2a. Product Interpretation and Delivery Boundary

The product is a public, first-party landing surface. Access is anonymous by contract: the Landing page carries access_requirement: none, so no identity establishment, no login, and no session continuity are required or introduced. Nothing in the accepted requirement thread asks for private, resumable, or participant-bound state; consequently no application-owned identity is inferred, and no protected destination exists.

Delivery is first-party custom UI rendered by the application. There is no provider-owned surface, no external destination, and no headless delivery in the accepted scope. The 3D cover, the parcours rail, and the diagnostic dial are all rendered inside Landing.

Current horizon: the 3D cover section, the parcours, and the professional diagnostic, all on Landing. Future horizon: nothing in the authoritative thread commits to a future capability; any extension (for example a richer diagnostic intake) remains an unaccepted idea and is out of current scope.

2c. Page Content and Component Coverage

Landing

Information and state

• Product identity: the section name and the framing label PARCOURS & DIAGNOSTIC · 2025.
• The 3D cover: a matte, low-poly roof/house form in the exact palette (terracotta plane, cream walls, walnut base) on a flat cream plane with a soft contact shadow.
• The parcours: a numbered sequence of professional journey steps, each with a step number, a title, and a short description.
• The professional diagnostic: label/value rows describing the diagnostic, paired with a circular score dial.
• Contact/engagement affordance for the visitor to initiate a contact or a diagnostic request.

Primary actions

• Read the 3D cover section.
• Move through the parcours rail step by step.
• Read the diagnostic label/value rows and the score dial.
• Initiate a contact or a diagnostic request.

Supporting actions

• Scroll the page through the exhibition-room section sequence.
• Re-read a parcours step after moving past it.

Domain entities

• Cover model (the 3D roof/house form and its material palette).
• Parcours step (number, title, description, progress position).
• Diagnostic entry (label, value).
• Diagnostic score (numeric value rendered on the dial).
• Contact/diagnostic request (the visitor's initiation).

Component responsibilities

• Hero — split two-panel composition. Left 5 columns: oversized stacked Jost headline in 4 flush-left lines over cream, a 1px ink rule above it, and a terracotta capsule CTA cut into the type block. Right 7 columns: full-height terracotta #B8432B panel with a thin mustard top edge, holding the 3D roof model on a cream contact-shadow plane, with the mustard-stamped label PARCOURS & DIAGNOSTIC · 2025 at its top-left.
• 3D cover viewer. Renders the matte low-poly roof/house form and runs the slow 20s turntable rotation. No glow, no particles, no glass.
• Parcours rail. Numbered horizontal rail of cream step modules, each with a mustard progress bar and a small line-drawn roof pictogram instead of an icon; scroll-linked horizontal pan.
• Diagnostic panel. 3-column panel grid of label/value rows in walnut-muted small caps, paired with the circular diagnostic dial.
• Diagnostic dial. Thin ink ring with a mustard needle that sweeps once on entry to the score.
• Section rules. Single 1px full-width rules introducing each section, with the step number set in Jost 600 uppercase.
• Footer index. Dense ruled index, like a catalogue colophon.

States

• Loading: the 3D cover viewer shows the cream contact-shadow plane and the terracotta panel before the model is ready; the diagnostic dial rests at zero with the needle at its start position.
• Empty: if no parcours steps are available, the rail renders its numbered rule and step-number labels with an explicit "parcours à venir" line rather than collapsing the section; if no diagnostic entries are available, the label/value grid renders its rules with an explicit "diagnostic à venir" line and the dial stays at rest.
• Success: the 3D model rotates on its turntable; the parcours rail pans horizontally with mustard progress; the diagnostic dial needle sweeps once to the score and the confirmed state is signalled in teal #2F6E6A.
• Error: if the 3D model fails to load, the terracotta panel remains with the mustard top edge and the label, and a thin-line ink roof cross-section diagram is shown in place of the model; the parcours and diagnostic sections remain fully readable.
• Recovery: the visitor can continue scrolling and reading the parcours and diagnostic regardless of the 3D model state; the contact/diagnostic request affordance remains available in every state.

3. Functional Requirements

FR-1 — 3D cover section As a Visiteur / prospect, I should see a dedicated 3D cover section on the Landing page so that I can understand the roofing subject as a material, built object.

• Provenance: explicit (authoritative requirement: « Créé un section couverture 3D »).
• Trigger/input: the visitor opens Landing.
• Observable result: a matte, low-poly roof/house form in the exact palette (terracotta plane, cream walls, walnut base) is rendered on a flat cream plane with a soft contact shadow inside the full-height terracotta panel.
• Access state: anonymous; access_requirement: none.
• Failure/recovery: if the model cannot be rendered, the terracotta panel and its mustard top edge remain, and a thin-line ink roof cross-section diagram is displayed in place of the model.
• Continuation: the visitor scrolls on to the parcours section.

FR-2 — Professional parcours As a Visiteur / prospect, I should read a numbered professional parcours so that I can understand the roofing professional's journey.

• Provenance: explicit (authoritative requirement: « sur parcours … professionnel »).
• Trigger/input: the visitor reaches the parcours section on Landing.
• Observable result: a numbered horizontal rail of cream step modules, each with a step number, a title, a short description, a mustard progress bar, and a small line-drawn roof pictogram; the rail pans horizontally in a scroll-linked way.
• Access state: anonymous; access_requirement: none.
• Failure/recovery: if no steps are available, the rail renders its numbered rule and step-number labels with an explicit "parcours à venir" line instead of collapsing.
• Continuation: the visitor continues to the diagnostic section.

FR-3 — Professional diagnostic As a Visiteur / prospect, I should read the professional diagnostic so that I can understand the diagnostic result and its meaning.

• Provenance: explicit (authoritative requirement: « … et diagnostic professionnel »).
• Trigger/input: the visitor reaches the diagnostic section on Landing.
• Observable result: a 3-column panel grid of label/value rows in walnut-muted small caps, paired with a circular diagnostic dial drawn as a thin ink ring whose mustard needle sweeps once on entry to the score; the confirmed state is signalled in teal #2F6E6A.
• Access state: anonymous; access_requirement: none.
• Failure/recovery: if no diagnostic entries are available, the label/value grid renders its rules with an explicit "diagnostic à venir" line and the dial stays at rest.
• Continuation: the visitor reaches the contact/diagnostic request affordance.

FR-4 — Present parcours and diagnostic as a roofing professional As a Professionnel de la couverture, I should have my parcours and my professional diagnostic presented on the Landing page so that potential clients identify me and my experience.

• Provenance: required_inference (accepted persona catalog: the professional's stated goal is to present parcours and diagnostic and to be identified by potential clients).
• Trigger/input: the professional's parcours steps and diagnostic entries are the content rendered in FR-2 and FR-3.
• Observable result: the professional's parcours steps and diagnostic label/value rows and score are visible to visitors on Landing.
• Access state: anonymous; access_requirement: none — the professional's presentation is public content on the same page, not a protected surface.
• Failure/recovery: if a parcours step or diagnostic entry is unavailable, the corresponding section renders its explicit "à venir" state rather than showing a broken or empty module.
• Continuation: the visitor can act on the presentation by initiating a contact or a diagnostic request (FR-5).

FR-5 — Initiate a contact or diagnostic request As a Visiteur / prospect, I should be able to initiate a contact or a diagnostic request from the Landing page so that I can engage the roofing professional.

• Provenance: required_inference (accepted persona rationale: the visitor "peut initier une prise de contact ou une demande de diagnostic"; the professional's goal is "obtenir des demandes qualifiées via la section").
• Trigger/input: the visitor activates the terracotta capsule CTA cut into the hero type block, or the equivalent affordance at the end of the diagnostic section.
• Observable result: the visitor's contact/diagnostic request is initiated from Landing.
• Access state: anonymous; access_requirement: none — no account, no login, no session continuity is required to initiate.
• Failure/recovery: if the initiation cannot complete, the affordance remains available and the visitor can retry; the parcours and diagnostic content stay readable.
• Continuation: the visitor's request is the terminal step of the visitor journey.

FR-6 — Section sequence and exhibition-room transitions As a Visiteur / prospect, I should move through the page as a sequence of distinct sections so that I can follow the 3D cover, the parcours, and the diagnostic in order.

• Provenance: required_inference (the accepted content is organized as a hero, a parcours rail, and a diagnostic panel; the creative direction defines the section sequence as exhibition-room colour flips).
• Trigger/input: the visitor scrolls Landing.
• Observable result: sections alternate ground colours (cream → walnut-tinted → ink), each introduced by a single 1px full-width rule with the step number set in Jost 600 uppercase.
• Access state: anonymous; access_requirement: none.
• Failure/recovery: if a section's content is unavailable, its rule and step number still render so the sequence remains legible.
• Continuation: the visitor reaches the footer index.

4. User Personas

Visiteur / prospect

Product context. A homeowner or project manager discovering the couverture-3d section. They arrive on the public Landing page with no account and no prior relationship to the product, and they evaluate whether the roofing professional's parcours and diagnostic are credible and relevant to their project.

Primary goal. Understand the 3D cover section, the professional parcours, and the professional diagnostic well enough to decide whether to engage.

Distinct accepted responsibilities.

• Reading the 3D cover section and interpreting the roofing subject as a material, built object.
• Moving through the numbered parcours rail step by step and understanding the professional's journey.
• Reading the diagnostic label/value rows and the score dial, and understanding what the diagnostic result means.
• Initiating a contact or a diagnostic request.

Relevant inputs or decisions. The visitor decides whether the parcours and diagnostic are credible, and whether to initiate a contact or a diagnostic request. Their input is their attention and, at the end, their request.

Interactions with other accepted participants. The visitor is the recipient of the Professionnel de la couverture's presented parcours and diagnostic. The visitor's request is the outcome the professional seeks.

Observable success. The visitor has read the 3D cover, moved through the parcours rail, read the diagnostic and its score, and initiated a contact or diagnostic request.

What makes this role different. The visitor is a reader and evaluator, not a presenter. They consume the parcours and diagnostic rather than supplying them, and their only produced artifact is an engagement request.

Professionnel de la couverture

Product context. A roofing trade professional whose parcours and professional diagnostic are presented on the public Landing page. Their craft context is the French roofing trade — terracotta tiles, slate, timber battens, zinc sheets — and the register of the page is expert and artisanal rather than corporate.

Primary goal. Have their parcours and professional diagnostic presented so that potential clients identify them and their experience, and obtain qualified requests through the section.

Distinct accepted responsibilities.

• Supplying the parcours content that the numbered rail presents.
• Supplying the diagnostic content — the label/value entries and the score — that the diagnostic panel and dial present.
• Being identified by potential clients through the section.

Relevant inputs or decisions. The professional's parcours steps and diagnostic entries are the inputs to the presented content. The professional's decision is what their parcours and diagnostic present.

Interactions with other accepted participants. The professional is the source of the content the Visiteur / prospect reads; the visitor's initiated request is the professional's observable outcome.

Observable success. The professional's parcours and diagnostic are visible on Landing, and visitors initiate contact or diagnostic requests through the section.

What makes this role different. The professional is the presenter and the subject of the content, not its reader. Their success is measured by qualified requests arriving from visitors, not by their own reading of the page.

5. Core User Flows

Flow A — Visiteur / prospect discovers the 3D cover, parcours, and diagnostic

1. Starting context. The visitor arrives on the public Landing page with no account and no prior session. Access is anonymous (access_requirement: none).
2. The visitor sees the split hero: on the left, the oversized stacked Jost headline in 4 flush-left lines over cream with a 1px ink rule above it; on the right, the full-height terracotta #B8432B panel with its thin mustard top edge and the mustard-stamped label PARCOURS & DIAGNOSTIC · 2025.
3. Action. The visitor reads the 3D cover section. Inside the terracotta panel, the matte low-poly roof/house form — terracotta plane, cream walls, walnut base — rotates slowly on its cream contact-shadow plane.
4. Observable result. The visitor has seen the 3D cover as a material architectural maquette, not a hologram.
5. Continuation. The visitor scrolls; a single 1px full-width rule with a step number in Jost 600 uppercase introduces the parcours section.
6. Action. The visitor moves through the numbered parcours rail. Each step is a cream module with a mustard progress bar and a small line-drawn roof pictogram; the rail pans horizontally in a scroll-linked way.
7. Observable result. The visitor has read the professional's parcours step by step, with mustard progress marking their position.
8. Continuation. The visitor scrolls to the diagnostic section, introduced by its own 1px rule and step number.
9. Action. The visitor reads the diagnostic: a 3-column panel grid of label/value rows in walnut-muted small caps, paired with the circular dial.
10. Observable result. The dial's mustard needle sweeps once on entry to the score, and the confirmed state is signalled in teal #2F6E6A.
11. Action. The visitor activates the terracotta capsule CTA cut into the hero type block, or the equivalent affordance at the end of the diagnostic section, to initiate a contact or a diagnostic request.
12. Observable result. The visitor's contact/diagnostic request is initiated from Landing.
13. Failure/recovery. If the 3D model fails to load, the terracotta panel and its mustard top edge remain, and a thin-line ink roof cross-section diagram is shown in place of the model; the parcours and diagnostic remain fully readable and the CTA remains available. If the request initiation cannot complete, the affordance remains available and the visitor can retry.
14. Next step. The visitor's request is the terminal step of this journey.

Flow B — Professionnel de la couverture presents parcours and diagnostic

1. Starting context. The professional's parcours steps and diagnostic entries are the content presented on the public Landing page. Access is anonymous (access_requirement: none); the professional's presentation is public content, not a protected surface.
2. Action. The professional's parcours content is rendered in the numbered rail: each step a cream module with a step number, a title, a short description, a mustard progress bar, and a small line-drawn roof pictogram.
3. Observable result. Visitors can read the professional's parcours step by step on Landing.
4. Action. The professional's diagnostic content is rendered in the diagnostic panel: label/value rows in walnut-muted small caps, with the score shown on the circular dial.
5. Observable result. Visitors can read the professional's diagnostic and its score, with the confirmed state signalled in teal #2F6E6A.
6. Participant handoff. The Visiteur / prospect reads the presented parcours and diagnostic and decides whether to engage.
7. Observable result. The visitor initiates a contact or a diagnostic request through the section.
8. Failure/recovery. If a parcours step or diagnostic entry is unavailable, the corresponding section renders its explicit "à venir" state rather than a broken or empty module, so the professional's presentation remains legible.
9. Next step. The professional's observable success is the arrival of qualified requests from visitors through the section.

6. Visuals Colors and Theme

Muse and headline. Charles & Ray Eames — Warm structural modernism for a 3D roofing journey: honest materials, mid-century order, human scale. The register is expert and trustworthy but warm and artisanal — craft, material, built work — not corporate SaaS.

Colour tokens (light mode)

Proportion. 70% cream/oat, 18% ink, 8% terracotta, 4% mustard/teal combined.

Typography

• Headings: Jost, 700–800, tight tracking (-0.02em), sentence case for warmth, oversized display sizes (clamp 44–104px) used as structure — headlines span columns like exhibition wall text.
• Labels and step numbers: Jost 600 uppercase with +0.14em tracking.
• Body: Fraunces, 400, 18/1.7, optical size for warmth; captions 14 Fraunces 500.
• Scale: 1.333 modular — 104 / 78 / 58 / 44 / 33 / 24 / 18 / 16.

Shape language. Mid-century modular geometry: soft-cornered rectangles (10–14px), capsule pills for CTAs and step chips, thin 1px ink rules as structure, a circular gauge/dial for the diagnostic score, and one flowing curved roof silhouette that cuts across the grid diagonally. No blob shapes, no glossy 3D candy, no floating glass.

Layout. Gallery-like modular sequence on a visible 12-column grid with generous 8vw margins. The hero is a two-panel composition: left 5 columns of oversized stacked type on cream, right 7 columns a full-height terracotta roof-plane block holding the 3D object. Sections alternate ground colours (cream / walnut-tinted / ink) as exhibition rooms. Journey steps are a numbered horizontal rail with mustard progress; the diagnostic is a 3-column panel grid with label/value pairs and a circular score dial. The footer is a dense ruled index, like a catalogue colophon.

Imagery style. Warm material photography: terracotta tiles, slate, timber battens, zinc sheets in natural daylight, macro of tile overlap. The 3D hero is a low-poly, matte-shaded roof/house form in the exact palette (terracotta plane, cream walls, walnut base) sitting on a flat cream plane with a soft contact shadow — it reads as an architectural model, not a hologram. Diagrams are thin-line roof cross-sections and pitch angles drawn in ink on cream. No stock people, no generic abstract 3D blobs.

Forbidden. Blue/indigo primary on white — no #2563EB, #4F46E5 or any SaaS blue anywhere. No Inter, Roboto, Poppins, Montserrat, or system-ui for headings or body. No gradient-blob hero or glowing holographic 3D object. No grid of identical hover-lift cards with soft shadows. No glassmorphism, frosted panels, neon glows, or particle fields. No centred headline + subtext + pill button hero template. No stock photos of smiling office people or generic "team" imagery. No rounded-blob shapes or candy-gloss surfaces; all corners stay modest (10–14px) and matte.

7. Signature Design Concept

The terracotta roof-plane panel. The public entry is a split hero, not centred. The left 5 columns hold a 4-line Jost headline at 88–104px — « Votre parcours / couverture / en 3D / diagnostic compris » — stacked flush-left over cream, with a 1px ink rule above it and a terracotta capsule CTA physically cut into the type block. The right 7 columns are a full-bleed terracotta #B8432B panel with a thin mustard top edge, inside which the matte low-poly roof model slowly rotates on a cream contact-shadow plane. A small mustard-stamped label PARCOURS & DIAGNOSTIC · 2025 sits at the top-left of the terracotta panel.

The concept recomposes only accepted content and controls: the 3D cover (FR-1), the parcours rail (FR-2), the diagnostic panel and dial (FR-3), and the contact/diagnostic request affordance (FR-5). No gradient, no blue, no centred subtext-button stack.

Signature moves carried through the page

• A full-height terracotta panel occupying 7 of 12 columns, with the 3D roof model rotating slowly inside it and a mustard hairline running along its top edge.
• Oversized Jost headline stacked in 4 flush-left lines that break across the grid, with the primary CTA physically cut into the type block as a terracotta capsule.
• A numbered journey rail that scroll-pans horizontally, each step a cream module with a mustard progress bar and a small line-drawn roof pictogram instead of an icon.
• A circular diagnostic dial drawn as a thin ink ring with a mustard needle that sweeps once to the score, paired with label/value rows in walnut-muted small caps.
• Section transitions as exhibition-room colour flips: cream → walnut-tinted → ink, each introduced by a single 1px full-width rule with a step number set in Jost 600 uppercase.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: restrained Hero Dimensionality: layered_2d

Landing Hero Motion Brief

• Focal subject. The matte low-poly roof/house form — terracotta plane, cream walls, walnut base — sitting on a flat cream plane with a soft contact shadow, inside the full-height terracotta panel.
• Input → transformation → outcome thesis. As the visitor arrives on Landing, the roof form begins a slow 20s turntable rotation on its cream contact-shadow plane; the rotation reveals the roof plane, the walls, and the base as a material architectural maquette, so the visitor reads the