generic-fullstack-design-system

Fullstack Design System

Design system patterns for Next.js/NestJS full-stack applications.

Extends: Generic Design System - Read base skill for color theory, typography scale, spacing system, and component states.

Theme Configuration

lib/theme.ts Structure

// lib/theme.ts - Single source of truth
export const theme = {
  colors: {
    primary: "hsl(220, 100%, 55%)",
    secondary: "hsl(180, 100%, 50%)",
    accent: "hsl(270, 70%, 60%)",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
  },
};

CSS Variables (globals.css)

:root {
  --background: #ffffff;
  --foreground: #0a0a0f;
  --primary: hsl(220, 100%, 55%);
  --primary-foreground: #ffffff;
}

.dark {
  --background: #0a0a0f;
  --foreground: #fafafa;
}

Tailwind Integration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: "var(--primary)",
      },
    },
  },
};

shadcn/ui Patterns

Button Variants

import { Button } from '@/components/ui/button';

<Button>Primary</Button>
<Button variant="outline">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ghost">Cancel</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

Form Components

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="[email protected]" />
</div>;

Dialog/Modal

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
    </DialogHeader>
    {/* Content */}
  </DialogContent>
</Dialog>;