Enterprise-Grade Design System for ITDO applications.
- π¨ 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
npm install
# Run demo application
npm run dev
# Run Storybook
npm run storybook
# Build library
npm run build:lib
# Build Storybook
npm run build-storybook
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
- Consistency: Unified experience across all products
- Accessibility: WCAG 2.1 AA compliant
- Efficiency: Optimized workflows for business users
- Scalability: Modular and extensible architecture
- Beauty: Modern and visually appealing
The primary brand color is Orange (#f97316), representing energy, creativity, and innovation.
MIT