Skip to content

🎨 ITDO Design System - Enterprise-grade UI component library and design guidelines for consistent, accessible, and efficient user interfaces across ITDO products. Built with React and modern CSS, featuring comprehensive documentation, live demos, and design tokens.

Notifications You must be signed in to change notification settings

itdojp/itdo-design-system

Repository files navigation

ITDO Design System

Enterprise-Grade Design System for ITDO applications.

Features

  • 🎨 Design Tokens: Consistent colors, typography, spacing, and shadows
  • 🧩 Component Library: Pre-built React components (Button, Card, Input, etc.)
  • πŸ“š Storybook: Interactive component documentation
  • 🎯 TypeScript: Full type safety and IntelliSense support
  • πŸ“± Responsive: Mobile-first design approach
  • β™Ώ Accessible: WCAG 2.1 AA compliant components

Quick Start

Installation

npm install

Development

# Run demo application
npm run dev

# Run Storybook
npm run storybook

Build

# Build library
npm run build:lib

# Build Storybook
npm run build-storybook

Project Structure

itdo-design-system/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/     # React components
β”‚   β”œβ”€β”€ tokens/         # Design tokens
β”‚   β”œβ”€β”€ styles/         # Global styles
β”‚   β”œβ”€β”€ types/          # TypeScript types
β”‚   β”œβ”€β”€ utils/          # Utility functions
β”‚   └── hooks/          # Custom React hooks
β”œβ”€β”€ demo/               # Demo application
β”œβ”€β”€ .storybook/         # Storybook configuration
└── docs/               # Documentation

Design Principles

  1. Consistency: Unified experience across all products
  2. Accessibility: WCAG 2.1 AA compliant
  3. Efficiency: Optimized workflows for business users
  4. Scalability: Modular and extensible architecture
  5. Beauty: Modern and visually appealing

Primary Color

The primary brand color is Orange (#f97316), representing energy, creativity, and innovation.

License

MIT

About

🎨 ITDO Design System - Enterprise-grade UI component library and design guidelines for consistent, accessible, and efficient user interfaces across ITDO products. Built with React and modern CSS, featuring comprehensive documentation, live demos, and design tokens.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published