generic-react-design-system

React Design System

Design system patterns for React/TypeScript applications.

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

Tailwind Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "var(--primary)",
        secondary: "var(--secondary)",
        accent: "var(--accent)",
      },
      spacing: {
        18: "72px",
      },
      borderRadius: {
        xl: "16px",
      },
    },
  },
};

CSS Variables Setup

:root {
  /* Brand - customize per project */
  --primary: #3b82f6;
  --primary-rgb: 59, 130, 246;
  --secondary: #10b981;
  --accent: #8b5cf6;

  /* Surfaces */
  --background: #ffffff;
  --foreground: #000000;
  --muted: #64748b;
}

[data-theme="dark"] {
  --background: #121212;
  --foreground: #ffffff;
}

React Component Patterns

Button Variants

// Primary
<button className="px-6 py-3 bg-primary text-white rounded-lg shadow
  hover:shadow-lg hover:-translate-y-0.5 transition-all">
  Primary
</button>

// Secondary
<button className="px-6 py-3 border border-primary text-primary rounded-lg
  hover:bg-primary/10 transition-all">
  Secondary
</button>

// Ghost
<button className="px-4 py-2 text-muted hover:bg-slate-100 rounded-lg transition-all">
  Ghost
</button>

Input Fields

<input
  className="w-full px-4 py-3 bg-white border border-slate-300 rounded-md
    focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
  placeholder="Enter text..."
/>

Cards

<div className="p-6 bg-white dark:bg-slate-800 rounded-xl shadow-soft">
  {/* Card content */}
</div>

Modals with Framer Motion

<motion.div
  initial={{ opacity: 0, scale: 0.95 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.95 }}
  className="glass p-8 rounded-2xl max-w-md"
  role="dialog"
  aria-modal="true"
>
  {/* Modal content */}
</motion.div>