Skip to main content

Per-Product SDS Page

Module: ChemIQ For: Customers, employees, contractors (the visitor); Admin, Manager (you, configuring it)

When someone clicks a product in your catalog, scans a QR code on a drum, or follows a link from your company website, they land on the per-product SDS page at sds.tellusehs.com/{your-slug}/{product-slug}. This is the single most-important page in the Public SDS Portal — it's what loads on a phone during a spill, and it's what an OSHA inspector sees when they verify your SDS access.

This page documents everything a visitor sees, in the order they see it, so you know exactly what your customers and employees are looking at when they open the URL.

At the Top of the Page​

The page header — what loads first and what a phone shows above the fold — packs three pieces of high-stakes information into one tight block.

Company Branding Strip​

Your logo on the left, your company name as the page title, and the words "Safety Data Sheet" beneath it. The strip is colored with your portal's primary color (see Branding Your Portal for how that color gets validated against WCAG contrast).

Product Identification Block​

Right under the branding strip:

ElementWhat it shows
Product nameThe exact name from your catalog
CAS numberMonospace, prefixed CAS — or omitted if the product has no CAS on file
ManufacturerIf recorded
Latest SDS revision dateE.g., SDS revision: March 12, 2025

Open Full SDS (PDF) Button​

A prominent button — usually right under the product name — that opens the full SDS PDF in a new tab. The PDF is streamed from secure storage via a time-limited signed URL.

This button is intentionally always above the fold. Workers under acute exposure don't scroll. The auto-generated Safety Summary below it is a useful 30-second briefing, but the actual SDS is the legally authoritative document — Tellus puts the escape hatch to that document at the top, every time, on every screen size.

Hazard Snapshot​

The Hazard Snapshot is a single visual unit that brings together three pieces of information that always travel together. You'll never see the H/S/E ratings without the pictograms and signal word next to them — that's an explicit design rule from Tellus's EHS-expert review.

H/S/E Severity Tiles​

Three small color-coded tiles, sized large enough to read across a room:

TileWhat it summarizesScale
H — HealthDerived from the SDS's H3xx codes (acute toxicity, skin/eye/respiratory effects, carcinogenicity, etc.)1 to 5 (5 = highest severity)
S — SafetyDerived from H2xx codes (flammability, reactivity, explosivity, oxidation)1 to 5
E — EnvironmentDerived from H4xx codes (aquatic toxicity, ozone, bioaccumulation)1 to 5

Each tile shows both a number (H4, S2, E1) and a text label (High, Moderate, Low, None). The text label is what satisfies the WCAG rule that hazard information must not be color-only — a colorblind visitor or someone reading the page in direct sunlight on a phone can still read the severity.

A small ? next to each tile expands into a tooltip explaining which H-codes contributed to that axis rating, so EHS Managers can audit and trust the auto-derived numbers.

GHS Pictogram Strip​

The standard 9 GHS hazard pictograms — flame, skull, corrosion, exclamation mark, health hazard, environment, explosive, oxidizer, gas cylinder — rendered as a horizontal strip. Only the pictograms that apply to this product show. Each pictogram has WCAG-compliant alt text spelled out per the ISO/UN GHS hazard class names (e.g., GHS02 Flame: flammable).

Signal Word​

The GHS signal word, large and high-contrast:

  • Danger — rendered in red on a high-contrast background
  • Warning — rendered in amber on a high-contrast background
  • No signal word — rendered as text when the product has neither

The signal word is one of the three elements of the Hazard Snapshot that always travel together. Pictograms summarize the hazard classes; the signal word ranks the highest severity; the H/S/E tiles aggregate the underlying H-codes. Workers learn to scan these three together as a unit.

Compliance Affordances​

Two banner-style affordances sit below the Hazard Snapshot when they apply. They're how Tellus surfaces SDS-quality issues without burying them in fine print.

Stale-Revision Banner​

When the SDS revision date is older than 5 years, a yellow banner appears:

"This SDS revision date is older than 5 years. Verify with the manufacturer that it remains current."

Five years is Tellus's threshold based on industry practice (most manufacturers re-issue their SDSs on a 3-to-5-year cadence). The banner doesn't block access — workers still need the SDS — but it tells visitors and EHS Managers that the document deserves a refresh.

HCS-2012 vs HCS-2024 Classification Badge​

OSHA updated the Hazard Communication Standard in 2024 (the "HCS 2024" revision). The compliance dates phase in:

  • January 19, 2026 — manufacturers must reclassify
  • July 2026 — distributors
  • January 2027 — employers

SDSs that haven't yet been reclassified to HCS 2024 still display under the older HCS 2012 framing. Tellus renders a small badge near the revision date so visitors know which framework they're looking at:

BadgeMeaning
HCS 2024 (green)SDS has been reclassified under the 2024 update
Classified under HCS 2012 — verify if HCS 2024 update is available (amber)SDS predates the 2024 reclassification — check with the manufacturer

The Auto-Generated Safety Summary​

Below the Hazard Snapshot, the Safety Information Summary card appears — a mobile-optimized "what an employee needs to know right now" view. This is the part of the page with the subtle gradient highlight (the "AI-glow card") that makes it visually distinct from the raw SDS content.

The summary is derived from the parsed SDS, not the SDS itself. It's there to load fast on a phone during a real emergency. Tellus surfaces it in five blocks:

BlockSourceWhat it shows
Top 3 HazardsH-codes ranked by severityThree short statements: e.g., "Highly flammable; Causes skin irritation; Toxic if swallowed"
Required PPESDS Section 8 + GHS pictogramsPPE icons (gloves, goggles, respirator) with text labels
First Aid Quick ReferenceSDS Section 4One short line per exposure route — eyes, skin, inhalation, ingestion
Storage Do / Don'tSDS Section 7Two columns: what to do, what to avoid
Spill ResponseSDS Section 6One-liner: e.g., "Absorb with inert material. Do not flush to drain."

The Disclaimer​

Inside the same visual block as the summary content — not at the bottom of the page, not collapsed, not behind a tooltip — sits the disclaimer:

"Auto-generated from this SDS — verify with the full SDS before acting in an emergency."

You can override the disclaimer text from the Branding Your Portal panel if your legal team requires different wording. Most customers leave it as the default — it's the safe, well-tested choice.

The Safety Summary card includes its own Open Full SDS link, inside the card body. Even though there's already a download button at the top of the page, the in-card link ensures a visitor under stress doesn't have to scroll past the summary to reach the underlying document. Two links to the same PDF is intentional redundancy — a worker on a phone shouldn't have to remember where the link was.

Tiered Suppression for Low-Confidence Sections​

Sometimes the parser can't extract a section confidently. When that happens, the page behaves differently depending on how critical the section is:

SectionBehavior when parser confidence is low
Section 4 — First AidNever silent-suppressed. Renders an explicit placeholder: "First aid info not summarized for this product — open full SDS, Section 4." Tap-target opens the SDS PDF anchored to Section 4.
Section 6 — Accidental Release / SpillSame as Section 4 — placeholder is mandatory.
Section 8 — PPE / Exposure ControlsSame as Section 4 — placeholder is mandatory.
Section 2 — Hazards IdentificationPlaceholder with section number and a tap-target to the PDF.
Section 5 — FirefightingSame as Section 2.
Section 7 — Storage / HandlingSilently omitted from the summary. The full SDS still has it.
Sections 9, 10, 12–15Silently omitted.

The reason for the difference: under acute stress, attention narrows to the most prominent elements. A worker who sees a Hazard Snapshot, three PPE icons, and the Top 3 Hazards but no first-aid block functionally concludes "the app told me everything that mattered." That conclusion is wrong, and the disclaimer is invisible to them in that moment. The placeholder forces the eye to land where the missing content should be — the only design that survives a real incident.

Emergency Contact​

Below the Safety Summary, a clearly delineated three-line block shows the emergency contact resolved from your portal configuration:

Shift Supervisor on Duty Site EHS Manager +1 (555) 123-4567

On a phone, the phone number is tap-callable. The block uses the company-level emergency contact for the per-product page (site-level contacts are scoped to the site binder, not to per-product URLs).

If the company-level contact is missing or invalid, the per-product page won't render — the portal blocks publishing until the contact is set. See Setting Up Your Emergency Contact.

Full Hazard Detail (Below the Fold)​

Below the Safety Summary and emergency contact, the page renders the full parsed hazard data — every H-code, every P-code, the precautionary statements, the first-aid measures in full, the storage and handling instructions, the physical and chemical properties. This is the page section that handles the EHS Manager use case ("show me everything Tellus knows about this product") as opposed to the worker-in-an-emergency use case (which is served by the summary above).

This section also includes the Powered by Tellus EHS small-print link at the very bottom.

What's NEVER Shown​

Per the same opt-in-only rule that applies across the portal, this page never shows:

  • Inventory quantities or stock levels
  • Storage locations within your sites
  • Site names
  • User accounts, internal notes, or audit history
  • Products you haven't toggled to Public
  • Pricing, suppliers, or purchase data

The per-product page is scoped at the company level — it's tied to your product catalog, not to any individual site or stock level. Site-specific data lives on site binders, not on the public product page (see Site Binder Page).

URL Patterns​

Three variants of the same URL exist:

URL formUsed forLogged in audit trail?
sds.tellusehs.com/{slug}/{product-slug}Direct visits, search engines, manually shared linksNo — high-volume, low-fidelity traffic
sds.tellusehs.com/{slug}/{product-slug}?source=label-qrQR codes printed on chemical labels (Phase 3 feature)Yes — intentional channel
sds.tellusehs.com/{slug}/{product-slug}?source=service-card-qrQR codes on pest-control service leave-behinds (Phase 3 feature)Yes — intentional channel

The canonical URL (no source parameter) is what shows up in your catalog, what search engines index, and what visitors share by copy-paste. The ?source= variants exist so Tellus's compliance audit log captures only intentional scans, keeping the log OSHA-grade rather than full of bot traffic.

Mobile, Accessibility, and Load Time​

The per-product page is mobile-first. On a phone:

  • Single-column layout
  • The Hazard Snapshot stays above the fold on a 5.5-inch screen
  • Tap targets are at least 44 pixels
  • The emergency contact's phone is tap-callable

The page meets WCAG 2.2 AA conformance — alt text on every pictogram, no color-only hazard encoding, full keyboard navigation, screen-reader-friendly heading structure.

Performance target: under 2 seconds on a 3G mobile connection. That's not aspirational — that's the "scan a QR code during a spill" use case. Anything slower fails the operational definition of "readily accessible" under OSHA 1910.1200(g)(8).