LifeSync Design System

Ashborn Edition v2.0

Comprehensive design system for LifeSync AI multi-module productivity platform. Features foundations, iconography, component library, mobile/web templates, and exportable design tokens.

🎨 Features

• Foundations: Color palettes, typography, spacing, and theme system
• Iconography: 100+ Lucide React icons organized by category
• Component Library: 48+ production-ready React components built with Radix UI
• Templates: Mobile and web application templates
• Export Assets: Download design tokens as .toon files, CSS variables, and component code
• Documentation: Complete usage guidelines and code examples

🚀 Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• Radix UI - Accessible component primitives
• Framer Motion - Animations
• Lucide React - Icon system

📦 Installation

# Clone the repository
git clone https://github.com/Ashborn-047/LifeSync-Design-System.git

# Navigate to the project
cd LifeSync-Design-System

# Install dependencies
npm install

# Start development server
npm run dev

🌐 Live Demo

Visit the live design system: https://ashborn-047.github.io/LifeSync-Design-System/

📝 Usage

The design system includes:

• Dark/Light Mode: Toggle between themes
• Responsive Design: Mobile-first approach
• Collapsible Sidebar: Click the LifeSync logo to toggle navigation
• Export Functionality: Download tokens, CSS, and components

🎯 Design Tokens

Export design tokens in multiple formats:

• tokens.toon - Complete design system in JSON
• globals.css - CSS variables for light/dark modes
• Component examples in React/TypeScript

👨‍💻 Developer

Ashborn - UI/UX Designer

📄 License

This project is part of the LifeSync AI ecosystem.

---

Built with ❤️ using modern web technologies