System Requirements Document for safety-presentation

1. Introduction

This document specifies safety-presentation, a first-party web presentation built for a welding class. The product is a live, instructor-delivered slide deck that teaches welding shop safety to students in a classroom setting. The presenter (Tommy, acting as the Welding Instructor) advances through a fixed sequence of safety slides while speaking aloud; the students watch the same projected sequence and absorb the rules.

The product intent is narrow and explicit: produce a welding-class safety presentation that is delivered live in class and that fits a 3–5 minute spoken runtime. The audience is the welding class itself — an instructor presenting and students watching — in a trade-school shop context where the material must be legible from the back of a half-lit room and must land the hard safety rules in a few minutes.

2. System Overview

safety-presentation is a two-page, first-party web experience:

• Landing — an anonymous entry surface that states what the presentation is and its classroom purpose before the deck begins.
• Safety Presentation — the live slide sequence the instructor delivers in class, covering welding hazards and required safety practices within the 3–5 minute runtime.

Both surfaces are application-owned and require no sign-in (access_requirement: none). The instructor drives the deck; students observe the same projected sequence. There is no self-paced student mode, no quiz, no grading, and no account system — the presentation is delivered live in class, not consumed individually.

2a. Product Interpretation and Delivery Boundary

The accepted delivery is a live, in-class presentation. The instructor opens the deck and advances slides while speaking; the runtime target is 3–5 minutes. The deck is the presentation artifact itself — it is not a course platform, a learning-management integration, or a student progress tracker.

Access is anonymous on both pages: the presentation is shown in a classroom, and no participant needs to establish an account to view or deliver it. Nothing in the accepted requirements calls for private, resumable, or per-user state, so no identity or session continuity is introduced.

Current scope: the Landing entry surface and the Safety Presentation slide sequence, with welding safety content delivered live in 3–5 minutes.

Out of scope / future: anything beyond delivering the safety talk — student accounts, quizzes, certificates, progress tracking, or self-paced viewing — is not part of the current product.

2b. Source Content Inventory

No content_source reference directive was supplied, so no source content inventory is included. Welding safety subject matter is presented as the deck's own authored content within the accepted scope.

2c. Page Content and Component Coverage

Landing

• Information / state: the presentation's identity and purpose — that this is a welding shop safety presentation for a class, delivered live, and that it runs 3–5 minutes.
• Primary action: begin the presentation (enter the Safety Presentation sequence).
• Supporting actions: none required beyond entry; no account, no configuration.
• Domain entities: the presentation (title, purpose, runtime target).
• Component responsibilities:
  • Hero statement — the deck's headline, treated as a painted shop sign, dominant on the page.
  • Deck title panel — names the presentation and its runtime.
  • Badge-stamp — a single accent stamp marking the shop-rules framing.
  • Hazard-stripe band — the deck's spine motif, carrying the runtime label.
  • Entry control — the single control that starts the deck.
• States:
  • Loading: static content; no data fetch required.
  • Empty: not applicable — the page always carries its fixed content.
  • Success: the entry control opens the Safety Presentation.
  • Error / recovery: if the deck fails to open, the entry control remains available to retry.

Safety Presentation

• Information / state: the ordered slide sequence of welding safety content — hazards, required gear, and hard "never" rules — with the current slide position and runtime progress visible to the presenter.
• Primary action: advance to the next slide (and step back), by keyboard or click.
• Supporting actions: move backward one slide; observe runtime progress against the 3–5 minute budget.
• Domain entities: slide (number, section, content), hazard, safety rule, gear item, runtime budget.
• Component responsibilities:
  • Numbered stencil — the oversized slide number that the presenter says aloud, giving the deck its spoken rhythm.
  • Headline — one big statement per slide.
  • Ruled content panel — the reading text for the slide.
  • Hazard callout — the single accent element marking a hazard or a "never" rule.
  • Gear-check panel — label/value rows for required equipment.
  • Footer strip — slide number, section name, and hazard-stripe band.
  • Runtime progress rule — a thin rule that fills across the deck so the presenter can see the 3–5 minute budget.
• States:
  • Loading: the deck initializes to its first slide.
  • Empty: not applicable — the sequence is fixed and authored.
  • Success: each advance shows the next slide and moves the progress rule; the final slide closes the deck.
  • Error / recovery: if an advance does not register, the presenter can re-trigger it by keyboard or click; the current slide remains readable throughout.

3. Functional Requirements

Each requirement is a distinct story point with provenance and observable acceptance.

1. Create a safety presentation for a welding class. — explicit As a Welding Instructor, I should have a safety presentation built for a welding class, so that I can teach shop safety to my students. Acceptance: a complete welding safety presentation exists and is usable in a welding class setting.

2. Deliver the presentation live in class. — explicit As a Welding Instructor, I should deliver the presentation live in class, so that students receive the safety talk in person. Acceptance: the presentation is presented live by the instructor in the classroom, not consumed self-paced by students.

3. Keep the presentation within 3–5 minutes. — explicit As a Welding Instructor, I should be able to deliver the presentation within 3–5 minutes, so that it fits the class period. Acceptance: the deck's content and pacing fit a spoken runtime of 3–5 minutes, and the presenter can see runtime progress against that budget.

4. Deliver the slide sequence live in class. — required_inference As a Welding Instructor, I should be able to advance the slide sequence live in class, so that I can present each safety point in order while speaking. Acceptance: the instructor can move forward (and back) through the slides by keyboard or click, and each advance shows the next slide with its number, headline, and content.

5. Remain within a 3–5 minute spoken runtime. — required_inference As a Welding Instructor, I should be able to see my progress through the deck against the 3–5 minute budget, so that I finish on time. Acceptance: a runtime progress indicator advances across the deck as slides advance, giving the presenter a visible sense of the 3–5 minute budget.

6. Understand the safety guidance as a student. — required_inference As a Welding Student, I should be able to see and follow the safety slides as they are presented, so that I understand the hazards and required practices before working in the shop. Acceptance: each slide is legible from the back of the room, with one big statement per slide, and the required gear and "never" rules are clearly shown.

4. User Personas

Welding Instructor

• Product context: The instructor (Tommy) presents the safety talk live in a welding classroom, standing in front of students in a shop with sparks, gloves, helmets, and hard rules. The room is half-lit and the deck is projected.
• Primary goal: Cover welding hazards and safety practices clearly within the 3–5 minute time limit.
• Distinct responsibilities: Drives the deck — opens it, advances slides while speaking, and paces the talk to finish inside 3–5 minutes. The instructor is the only participant who controls the sequence.
• Inputs / decisions: Decides when to advance each slide; watches the runtime progress rule to stay inside the budget; says each slide's number aloud as the deck's spoken rhythm.
• Interactions with other participants: Presents to the Welding Students, who watch the same projected sequence.
• Observable success: The talk finishes within 3–5 minutes and the students leave understanding the key safety rules.

Welding Student

• Product context: A student in the welding class, watching the live presentation before working in the shop.
• Primary goal: Understand the hazards and required safety practices before working in the shop.
• Distinct responsibilities: Watches and absorbs the safety guidance as it is presented; does not control the deck.
• Inputs / decisions: Reads each slide's headline, content panel, gear-check rows, and "never" rules as they appear.
• Interactions with other participants: Follows the Welding Instructor's live delivery.
• Observable success: Leaves the presentation understanding the key safety rules and required gear.

5. Core User Flows

Flow 1 — Instructor delivers the safety presentation live in class

1. Starting context: The instructor is in the welding classroom with the class seated and the deck ready to present.
2. On the Landing page, the instructor sees the presentation's identity and purpose and the 3–5 minute runtime framing.
3. The instructor activates the entry control to open the Safety Presentation.
4. The deck initializes to its first slide, showing the numbered stencil, headline, ruled content panel, and footer strip.
5. The instructor speaks to the slide, then advances by keyboard or click; the next slide snaps in and the runtime progress rule moves forward.
6. The instructor continues advancing through the safety content — hazards, required gear, and "never" rules — pacing the talk against the visible runtime progress toward the 3–5 minute budget.
7. Observable result: The deck reaches its closing slide within the 3–5 minute target, and the instructor has delivered the full safety talk.
8. Failure / recovery: If an advance does not register, the instructor re-triggers it by keyboard or click; the current slide stays readable, so the talk is never interrupted by a blank frame.
9. Continuation: The instructor closes the deck and returns to class.

Flow 2 — Student follows the live safety presentation

1. Starting context: A student is seated in the welding class as the instructor begins the presentation.
2. The student watches the projected Safety Presentation as the instructor advances each slide.
3. For each slide, the student reads the headline, the ruled content panel, the gear-check rows, and any hazard callout or "never" rule.
4. Observable result: By the closing slide, the student has seen the hazards, the required gear, and the hard "never" rules within the 3–5 minute talk.
5. Continuation: The student carries the safety rules into shop work.

6. Visuals, Colors, and Theme

The creative direction is authoritative for this section. The muse is Aaron Draplin, and the headline concept is shop-floor safety, stamped in thick ink — a trade-school welding classroom register: honest, physical, blue-collar, and legible from the back of a half-lit room.

Palette (light mode):

Never more than one orange element per slide, so the alarm colour keeps its meaning.

Typography:

• Headings: Alfa Slab One, all-caps, tight leading (0.92), heavy slab weight reading as stamped metal.
• Subheads: Barlow Condensed uppercase with 0.14em tracking for the stencil-label voice.
• Body: Barlow.
• Scale: 1.5 modular — display 44px mobile / 96px desktop (clamp(44px, 9vw, 96px)); section head 32/56; subhead 20/28 condensed uppercase; body 17/19; label 13/13 uppercase tracked; caption 12/12. Line-height 1.45 for body, 0.92 for display.

Shape language: chunky 4px ink borders on panels, hard 0–6px corners (never pill, never glassy), badge circles with a double ring, stamp-like rotated blocks at ±2°, ruled horizontal dividers at 3px, and a repeating 8px hazard-stripe band as the only decoration. Everything looks printed or painted onto the surface, not floating above it.

Layout: a 12-column poster grid with a hard left margin at 6% of viewport. Every slide is one composition: a big numbered stencil top-left, the headline spanning 9 of 12 columns, one ruled content panel, and a footer strip carrying slide number, section name, and a hazard-stripe band. Slide transitions are full-frame swaps, not scrolls. At 375px the grid collapses to a single column but keeps the numbered stencil, the ruled panel, and the footer strip; the headline wraps to 3–4 lines and never shrinks below 44px.

Imagery: thick-line vector iconography drawn as if with a 3px marker — helmet, gloves, respirator, fire extinguisher, fume hood, grinder with guard, welding curtain, eye-wash station. Halftone-dot photo crops of shop gear and sparks at 2-colour duotone (ink + orange) as section openers. No stock smiling people, no 3D renders, no gradient blobs. Diagrams are drawn to be legible from the back row: big shapes, few labels, all-caps.

7. Signature Design Concept

The public entry (Landing) is a full-bleed kraft-paper field carrying one enormous Alfa Slab One headline — "WELD SAFE. GO HOME WITH ALL TEN FINGERS." — set at clamp(48px, 11vw, 140px), stacked across three lines, left-flush, spanning the full viewport width and bleeding slightly past the right edge as a deliberate crop of the display type only (never of readable body text).

Beneath it, a denim-blue ruled panel holds the deck title "Welding Shop Safety — 4 minutes" and a single orange badge-stamp reading "SHOP RULES". A hazard-stripe band runs the full width at the very bottom edge with the runtime "3–5 MIN" stencilled over it.

No centred headline, no subtext-plus-blue-button, no gradient. The dominant element is the type itself, treated as a painted shop sign. The single entry control that opens the deck sits within this composition and stays whole at every viewport.

8. Interaction Model & Motion Direction

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

Landing Hero Motion Brief

• Focal subject: the oversized Alfa Slab One headline, treated as a painted shop sign on a kraft-paper field.
• Input → transformation → outcome thesis: as the presenter arrives on the Landing page, the headline and its denim-blue ruled panel settle into place with a 220ms snap (translateY 12px + opacity, ease-out cubic-bezier(0.2, 0.9, 0.3, 1)); the hazard-stripe band slides one notch and the runtime label reads "3–5 MIN". The outcome is a composed first frame that reads as a shop sign and offers the single entry control.
• Motion vocabulary: expressive but mechanical — 220ms snap, hazard stripes slide one notch on each advance, the step number stamps in with a 1.06 scale settle. No bounce, no float, no gradient drift.
• Composed first frame: kraft-paper ground, three-line headline left-flush and bleeding past the right edge (display type only), denim-blue ruled panel with the deck title and orange "SHOP RULES" badge-stamp, hazard-stripe band across the bottom edge with "3–5 MIN" stencilled over it.
• Reduced-motion state: with prefers-reduced-motion, all entrance and stripe motion stops; the composed first frame is shown whole, with the headline, panel, badge-stamp, runtime label, and entry control fully readable and in place.

Deck motion (Safety Presentation): slide content enters with the same 220ms snap; the hazard stripes slide one notch on each advance; the step number stamps in with a 1.06 scale settle; a thin progress rule at the bottom fills across the deck so the presenter can see the 3–5 minute budget. Keyboard arrows and click both advance. No decorative motion competes with the presenter's voice.

9. Non-Functional Requirements

1. Runtime fit (explicit): The deck's content and pacing must fit a spoken runtime of 3–5 minutes. Rationale: the presentation is delivered live in class and must fit the class period.
2. Live delivery (explicit): The presentation is delivered live in class rather than self-paced by students. Rationale: explicit hard constraint in the authoritative user evidence.
3. Back-of-room legibility (direction-derived): Headlines and key statements must read from the back of a half-lit room — one big statement per slide, large display type, high contrast between ink and kraft ground. Rationale: the creative direction requires the deck to read from the back row.
4. Readable text and controls stay whole (direction-derived): Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit; no other element covers any part of them. Display type may bleed; body text and controls must stay whole. Rationale: the creative direction's readability rule.
5. Reduced motion (direction-derived): With prefers-reduced-motion, motion stops and content is shown whole. Rationale: the creative direction's motion rule.
6. No account required (access contract): Both surfaces are anonymously reachable; no sign-in is required to view or deliver the presentation. Rationale: the accepted access contract sets access_requirement: none for both pages.

10. Tech Stack

• Frontend: React (single-page web app) — the deck is a first-party web presentation with two pages and slide-state transitions.
• Styling: CSS with the specified palette, fonts (Alfa Slab One, Barlow Condensed, Barlow), and the 12-column poster grid.
• Storage: none required — the deck content is authored and fixed; no user data is persisted.
• Backend: none required for the accepted scope.
• Deployment: static hosting is sufficient for the accepted scope.

[Default — not specified by user] The stack above fills unspecified implementation details; the user specified no technology choices.

11. Assumptions and Constraints

• Assumption: The presentation content covers welding hazards and required safety practices (gear, "never" rules) as the subject matter of a welding-class safety talk. [Default — not specified by user]
• Assumption: The deck is projected or displayed on a screen the class can see. [Default — not specified by user]
• Constraint (explicit): The presentation must be 3–5 minutes long.
• Constraint (explicit): The presentation is delivered live in class rather than self-paced by students.
• Constraint (access contract): Both pages are anonymously reachable; no account system is introduced.
• Boundary: No student accounts, quizzes, certificates, progress tracking, or self-paced viewing are part of the current product.

12. Glossary

• Deck: The Safety Presentation slide sequence delivered live in class.
• Slide: One full-frame composition in the deck — numbered stencil, headline, ruled content panel, footer strip.
• Numbered stencil: The oversized Alfa Slab One slide number inside a denim-blue square, said aloud by the presenter.
• Hazard-stripe band: The repeating 8px stripe band running along the bottom of every slide; its stripes shift one notch on each advance.
• Runtime progress rule: The thin rule that fills across the deck so the presenter can see the 3–5 minute budget.
• "Never" slide: A full-frame orange slide presenting a forbidden act with a thick-line icon crossed with a hand-painted X.
• Gear-check panel: A ruled label/value panel listing required equipment (e.g., HELMET — shade 10+; GLOVES — leather, gauntlet; JACKET — flame-resistant).
• Badge-stamp: A circular double-ring stamp with rotated rim text, used on the closing slide.