Function DesignSystemPage

app/design-system/page.tsx:42–406

()

} from "@/components/ui/select"

export default function DesignSystemPage() {
  const [dialogOpen, setDialogOpen] = useState(false)

  return (
    <div className="min-h-screen bg-[var(--color-bg)]">
      <Header />

      {/* Hero */}
      <section className="border-b border-[var(--color-border-weak)]">
        <div className="mx-auto max-w-[67.5rem] px-[var(--padding)] py-[var(--vertical-padding)]">
          <h1 className="mb-4 text-3xl font-semibold text-[var(--color-text-strong)]">
            OpenCode Design System
          </h1>
          <p className="max-w-2xl text-[var(--color-text)]">
            A monospace-first, minimal design system inspired by terminal aesthetics. 
            Features warm neutral grays with a yellow-green accent for interactive elements.
          </p>
        </div>
      </section>

      {/* Content */}
      <div className="mx-auto max-w-[67.5rem] px-[var(--padding)] py-[var(--vertical-padding)]">
        <div className="flex flex-col gap-16">

          {/* Colors */}
          <section>
            <h2 className="mb-6 text-xl font-semibold text-[var(--color-text-strong)]">Colors</h2>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <div className="flex flex-col gap-2">
                <div className="h-16 rounded-md bg-[var(--color-bg-strong)]"></div>
                <span className="text-xs text-[var(--color-text-weak)]">bg-strong</span>
              </div>
              <div className="flex flex-col gap-2">
                <div className="h-16 rounded-md bg-[var(--color-bg-weak)] border border-[var(--color-border)]"></div>
                <span className="text-xs text-[var(--color-text-weak)]">bg-weak</span>
              </div>
              <div className="flex flex-col gap-2">
                <div className="h-16 rounded-md bg-[var(--color-bg-interactive)]"></div>
                <span className="text-xs text-[var(--color-text-weak)]">bg-interactive (accent)</span>
              </div>
              <div className="flex flex-col gap-2">
                <div className="h-16 rounded-md bg-[var(--color-danger)]"></div>
                <span className="text-xs text-[var(--color-text-weak)]">danger</span>
              </div>
            </div>
          </section>

          <Separator />

          {/* Buttons */}
          <section>
            <h2 className="mb-6 text-xl font-semibold text-[var(--color-text-strong)]">Buttons</h2>
            <div className="flex flex-wrap gap-4">
              <Button>Default</Button>
              <Button variant="secondary">Secondary</Button>
              <Button variant="outline">Outline</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="destructive">Destructive</Button>