A production-ready monorepo template with a minimal design system, built with pnpm, Turborepo, React, and Tailwind CSS.

• pnpm Workspaces - Efficient dependency management
• Turborepo - Fast, smart build system
• TypeScript - Type safety across packages

• Design Tokens - Colors, typography, spacing, shadows, radius
• React Components - 15+ reusable UI components
• Tailwind Theme - Shared configuration

• ESLint & Prettier - Code quality and formatting
• Storybook - Component documentation and development
• Hot Module Replacement - Fast development feedback
• Pre-commit Hooks - Automatic linting and type checking before commit

• Node.js >= 18.0.0
• pnpm >= 8.0.0

# Install pnpm globally
npm install -g pnpm

# Install dependencies
pnpm install

# Setup git hooks (husky)
pnpm prepare

# Run Storybook (component development)
pnpm storybook

# Format code
pnpm format

# Lint code
pnpm lint

# Type check
pnpm type-check

# Run all checks (type-check + lint + format)
pnpm check

# Auto-fix issues
pnpm check:fix

# Build all packages
pnpm build

monorepo-design-system-template/
├── apps/
│   └── storybook/              # Component documentation
├── packages/
│   ├── tokens/                 # Design tokens (colors, spacing, etc.)
│   ├── components/             # React UI components
│   └── theme/                  # Tailwind CSS preset
├── docs/                       # Documentation
├── package.json                # Root workspace config
├── pnpm-workspace.yaml         # pnpm workspace config
└── turbo.json                  # Turborepo config

Design tokens for consistent styling across applications.

import {
  colors,
  typography,
  spacing,
  shadows,
  radius,
} from '@design-system/tokens';

Features:

• Colors (Minimal black & white with functional accents)
• Typography (font family, size, weight, line height)
• Spacing (consistent spacing scale)
• Shadows (elevation system)
• Border Radius (rounded corners)

React UI component library with minimal design.

import { Button, Input, Card, Badge, Alert } from '@design-system/components';

Components:

• Button, Input, TextArea, Select
• Card, Badge, Alert
• Modal, Toast
• Checkbox, Radio
• Typography, Divider, Stack
• Spinner

Tailwind CSS preset with design tokens.

// tailwind.config.js
module.exports = {
  presets: [require('@design-system/theme')],
  content: ['./src/**/*.{ts,tsx}'],
};

Based on shadcn/ui and Tailwind CSS color palette.

import { colors } from '@design-system/tokens';

// Pure colors
colors.white; // '#FFFFFF'
colors.black; // '#000000'

// Neutral colors (Slate - primary)
colors.slate[50]; // '#F8FAFC' - Lightest
colors.slate[500]; // '#64748B' - Medium
colors.slate[900]; // '#0F172A' - Darkest

// Alternative neutrals
colors.gray[500]; // '#6B7280'
colors.zinc[500]; // '#71717A'

// Semantic colors
colors.success.DEFAULT; // '#10B981' - Emerald-500
colors.error.DEFAULT; // '#EF4444' - Red-500
colors.warning.DEFAULT; // '#F59E0B' - Amber-500
colors.info.DEFAULT; // '#3B82F6' - Blue-500

// Chart colors (data visualization)
colors.chart[1]; // Slate-900
colors.chart[2]; // Blue-500
colors.chart[3]; // Emerald-500
// ... up to colors.chart[10]

1. Create component in packages/components/src/YourComponent/
2. Export from packages/components/src/index.ts
3. Build the package: cd packages/components && pnpm build
4. Add Storybook story in apps/storybook/stories/

1. Create app folder: apps/your-app/
2. Add to pnpm-workspace.yaml
3. Install dependencies: pnpm install
4. Use design system packages:

{
  "dependencies": {
    "@design-system/components": "workspace:*",
    "@design-system/tokens": "workspace:*",
    "@design-system/theme": "workspace:*"
  }
}

# 배포
docker-compose up -d

# 확인
curl http://localhost/health

접속: http://localhost

./deploy/scripts/deploy.sh

백업/복구:

./deploy/scripts/backup.sh
./deploy/scripts/restore.sh [backup_file]

모니터링:

./deploy/scripts/monitoring-setup.sh
docker-compose -f docker-compose.monitoring.yml up -d

• Grafana: http://localhost:3001
• Prometheus: http://localhost:9090

더 자세한 내용은 아키텍처 가이드 참고

이 프로젝트는 Husky와 lint-staged를 사용하여 커밋 전 자동으로 코드 품질을 검사합니다:

• ESLint: 코드 린팅
• Prettier: 코드 포맷팅
• TypeScript: 타입 체크

커밋 시 자동으로 실행되며, 오류가 있으면 커밋이 차단됩니다.

# 모든 체크 실행
pnpm check

# 자동 수정
pnpm check:fix

# 개별 실행
pnpm type-check  # TypeScript 타입 체크
pnpm lint        # ESLint 린팅
pnpm format      # Prettier 포맷팅

• 아키텍처 & 배포 가이드
• Linting and Formatting
• Design System Overview

이 템플릿은 프로젝트에 맞게 커스터마이징하도록 설계되었습니다.

• 브랜드 색상으로 디자인 토큰 변경 (packages/tokens)
• 커스텀 컴포넌트 추가 (packages/components)
• 새 앱 추가 (apps/ - 가이드 참고)
• 상태 관리 라이브러리 통합
• 테스트 프레임워크 추가

MIT License - feel free to use this template for your projects!

• Built with pnpm and Turborepo
• UI components powered by Tailwind CSS

이 디자인 시스템의 모든 토큰을 Figma로 내보낼 수 있습니다.

# Figma Tokens Studio 형식으로 export
pnpm export:figma

생성된 figma-tokens.json 파일을 Figma에서 사용할 수 있습니다.

1. Figma Tokens Studio 플러그인 설치

   • Figma → Plugins → Browse plugins
   • "Tokens Studio for Figma" 검색 및 설치

2. 토큰 Import

   • 플러그인 열기
   • Settings → Load from JSON/File
   • figma-tokens.json 파일 선택
   • "Apply to document" 클릭

3. 결과

   • ✅ 모든 색상이 Figma Color Styles로 생성됨
   • ✅ Typography가 Text Styles로 생성됨
   • ✅ Spacing, Shadows, Radius가 토큰으로 적용됨

Figma에서 토큰을 수정한 후, JSON을 다시 export하여 코드에 반영할 수 있습니다.

워크플로우:

코드 → figma-tokens.json → Figma
Figma → figma-tokens.json → 코드

• pnpm Workspaces
• Turborepo Handbook
• Design Tokens
• Tokens Studio for Figma
• Radix UI

Happy coding!