SignalFlow

The signature OCSS diagram: a vertical cascade of stages — Rule payload → signed Envelope → Trust List verify → Enforce at surface — rendered on the dark var(--surface-term) terminal surface with the OCSS signal accent (var(--accent), the spec-green flux). When the diagram scrolls into view an IntersectionObserver flips a data-litflag, firing a staggered “signal cascade” — a bright conductor travels the spine while each node illuminates in sequence on the owned --ease-signal curve. The animation is purely decorative: the markup is an ordered list with a descriptive label, and under prefers-reduced-motion: reduce every node renders fully lit immediately, with no motion. Forwards a ref to the host <section>.

The canonical signal-to-surface flow

  1. OCSS Rule payloade.g. ai_chatbot_tier_gate
  2. Two-layer signed envelopeouter signature asserts who is speaking
  3. Verified against the Trust ListeIDAS-style accreditation tiers
  4. Enforced at the surfaceDNS · MDM · router · app control

Minimal — steps only, default per-index icons

  1. Rule104-category vocabulary
  2. Envelopesigned, two-layer
  3. Trust Listaccreditation check

Horizontal orientation (collapses to a stack under 640px)

  1. OCSS Rule payloade.g. ai_chatbot_tier_gate
  2. Two-layer signed envelopeouter signature asserts who is speaking
  3. Verified against the Trust ListeIDAS-style accreditation tiers
  4. Enforced at the surfaceDNS · MDM · router · app control

Accessibility

  • The stages are an <ol> with an aria-label (the label prop), so assistive tech announces an ordered list and its purpose.
  • The cascade spine, connectors, terminal chrome, icons and footnotes are all aria-hidden — they carry no information not already in the step text.
  • Respects prefers-reduced-motion two ways: the JS short-circuits to the lit state (skipping the observer entirely) and the CSS removes all transitions/animations.