Design System

Step 3 — Page Structure Patterns

1. Define page templates for common deliverable types (assessment, roadmap, report).
2. Establish the information hierarchy pattern: TL;DR > Summary > Detail > Appendix.
3. Set navigation patterns: table of contents, cross-references, ghost menus.
4. Define how Mermaid diagrams, tables, and code blocks integrate into page flow.

Step 4 — Governance and Evolution

1. Document the design system in a canonical reference file.
2. Define the process for proposing and approving token changes.
3. Establish automated validation for token usage in deliverables.
4. Plan for versioning and backward compatibility.

Quality Criteria

• All visual properties use semantic tokens, not hardcoded values.
• Components are documented with usage guidelines and anti-patterns.
• Page templates cover the most common deliverable types.
• The design system is versioned with a changelog.

Anti-Patterns

• Defining tokens without semantic meaning (color-blue-500 instead of color-primary).
• Creating components without documenting when and how to use them.
• Allowing one-off overrides that bypass the token system.
• Treating the design system as frozen instead of evolving with usage patterns.