Design System Page (/design-system) (Frontend Standard)

This document defines the required dev-only design system page that showcases the project’s UI system.

Requirement

Every frontend must include a /design-system page that documents:

1. Tokens
   • fonts and typography
   • containers and layout primitives
   • borders, radii/rounding
   • spacing scale
2. Components, grouped in this order:
   • Atoms
   • Molecules
   • Organisms

Access policy (required)

/design-system is dev-only:

• It must not be deployed publicly in production.
• It must be gated behind an environment flag (project-defined).

Example gating approaches (project chooses and documents):

• build-time flag to omit the route in production builds
• runtime flag to return 404 unless enabled

Source of truth

• Tokens should map directly to Tailwind theme values.
• Components should be the actual src/components/* components used by product features.

Why this exists

• Forces UI consistency and reuse.
• Makes it easy to review component behavior and accessibility in one place.
• Helps onboarding (new devs can scan the UI system quickly).