flowCreate.solutions

Generic Example: Dev-only /design-system Page

This is a conceptual example for gating a design system page behind an environment flag.

// app/design-system/page.tsx
import { notFound } from "next/navigation";

export default function DesignSystemPage() {
  if (process.env.ENABLE_DESIGN_SYSTEM !== "1") notFound();

  return (
    <main>
      <h1>Design System</h1>
      <section>
        <h2>Tokens</h2>
        <h3>Typography</h3>
        <h3>Containers</h3>
        <h3>Borders & Rounding</h3>
      </section>

      <section>
        <h2>Atoms</h2>
      </section>
      <section>
        <h2>Molecules</h2>
      </section>
      <section>
        <h2>Organisms</h2>
      </section>
    </main>
  );
}