Skip to content

Perchford design system

Internal, noindex
PRC-01

Operating sequence

The five-step engagement path, driven directly from processSteps in the shared data file so it can never drift from the rest of the site.

Untriaged
Open isolated

Use it when

The five-step engagement path, driven directly from processSteps in the shared data file so it can never drift from the rest of the site.

Category
Process
Layout archetype
Ruled sequence
Page position
middle (derived)
Purpose
explain (derived)
Field
light (derived)
Interaction
static (derived)
Motifs
Sequence mark, Held column, Quiet field

Content it requires

  • processSteps from src/data/homeManagement.ts

Do not use it when

  • Reads from shared data. Editing the steps changes every page using this pattern, which is the point.
  • Descriptions over about 30 words break the two-column step layout.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/ProcessSequence.astro

---
import ProcessSequence from '../components/patterns/ProcessSequence.astro';
---

<ProcessSequence />

Import directly. Do not route production through patternComponents.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

  • Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
  • No interactive controls beyond links and buttons inherited from the design system.
  • Colour never carries meaning alone: every state marker is paired with text.
  • Motion respects prefers-reduced-motion.