PRC-07
Under review Four-stage progression
Four tall cards on a dark field with the ordinal at display scale and the fill stepping toward the terminal stage. The intro is two lines so the cards are in the first screen rather than under a manifesto.
Use it when
Four tall cards on a dark field with the ordinal at display scale and the fill stepping toward the terminal stage. The intro is two lines so the cards are in the first screen rather than under a manifesto.
- Category
- Process
- Layout archetype
- Register grid
- Page position
- middle
- Purpose
- explain
- Field
- dark
- Interaction
- static
- Motifs
- Sequence mark, Quiet field
Content it requires
- Exactly four stages
- A one-line state per stage
- A description of 10 to 16 words each
- An intro of one sentence
Do not use it when
- Four stages. Three leaves the tonal ramp nowhere to go, five crushes the columns before 1080px.
- The tonal ramp is decoration unless the last stage is genuinely the ongoing one. Do not reorder stages to suit the tones.
- Dark field. Counts against the two-dark-fields-per-page limit and must not sit next to another.
- Descriptions over about 18 words unbalance the bottom-aligned feet at 1024px.
Variants
None. Colour swaps and mirrored alignment do not count as variants.
Implementation
src/components/patterns/ProcessStageBoard.astro
---
import ProcessStageBoard from '../components/patterns/ProcessStageBoard.astro';
---
<ProcessStageBoard />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.