Product patterns

Product examples should feel like cockpit fragments inside the documentation: dark panels, visible workflow state, compact rails, and explicit labels. These patterns mirror the product sheet in the mockups rather than the earlier light card examples.

Exosuit style guide v1 — product patterns04 / 12

Interface grammar

Product Patterns

Phase headers, RFC rails, signal events, status bars, and task lists.

State before narrative

Rails before decoration

Attention is explicit

01

Phase header

Current phase, owner, mode, task count, and next action.

02

RFC rail

Lifecycle position remains visible while the user reads detail.

03

Signal event

Perception events include source, confidence, and required action.

04

Task table

Dense rows make work status scannable without hiding blockers.

PhaseSteering

Active

Epoch 07RFC-042Task 03 / 12Owner atlasNext review

RFC-042Add semantic diff for signal graph

Approved

DraftReviewApprovedImplementVerifyClosed

Perception eventSignal drift detected in steering model.

Investigate

Source atlasSignal drift:steeringConfidence 0.78Age 2mAction review

SteeringActive

Inbox3 new

Diagnostics2 issues

Review

Task	Owner	Status
Add semantic diff for signal graph	atlas	Active
Define steering signal schema	rhea	Complete
Investigate perception anomaly	atlas	Blocked

✓

Pattern rules

Prefer lists, rails, and compact product panels. Show empty, loading, blocked, and ready-for-review states calmly and directly.

Do

• ✓Show the active workflow position.
• ✓Pair signal color with labels and next action.
• ✓Keep dense state in compact, readable rows.

Do not

• ×Hide blockers behind decorative severity colors.
• ×Turn workflow rails into vague timelines.
• ×Use chatbot personality where status copy is needed.

Exosuit product patternsPhase · RFC · Signal · Status · Tasks