Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a comprehensive design system. It will showcase all UI components, including tables, forms, headers, typography, color palettes, light and dark themes, cards, date pickers, icons, and more. The main purpose is to provide developers and designers with a centralized resource to reference and implement consistent design elements across their projects.

## CORE FEATURES
1. **Component Gallery**: A visually organized collection of all UI components, including buttons, forms, inputs, and cards, each with usage examples and code snippets.
2. **Color Palette**: Display of the primary and secondary color palettes used in the design system, including light and dark themes.
3. **Typography Reference**: An overview of the typography styles used in the application, showcasing different font sizes, weights, and line heights.
4. **Responsive Design Examples**: Demonstrations of how components adapt to various screen sizes and orientations.
5. **Interactive Elements**: Live examples of interactive components like buttons, toggles, and date pickers, allowing users to test functionality on the spot.
6. **Documentation and Guidelines**: Clear instructions on how to implement each component, including design principles and best practices for usage.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The main layout will be structured in a grid format, with a sidebar navigation for easy access to different components, and a main content area displaying selected components and their documentation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for this application, but context API can be used if needed for component state management.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Develop the Layout**: Create the main layout structure using a grid system, including a sidebar and a main content area.
3. **Create Component Pages**: Develop individual component pages for buttons, forms, and other UI elements, ensuring they follow the design specifications.
4. **Integrate Color and Typography**: Implement the specified color palette and typography styles throughout the application using Tailwind CSS classes.
5. **Build Interactive Examples**: Use React state and props to create interactive examples of components like buttons and date pickers.
6. **Add Documentation**: Write clear documentation for each component, detailing usage guidelines and code examples.
7. **Test Responsiveness**: Ensure all components are responsive and work seamlessly across different devices and screen sizes.
8. **Deploy the Application**: Prepare the application for deployment on a suitable hosting platform.

## USER EXPERIENCE
Users will interact with the design system by navigating through the sidebar to select different UI components. Each component page will provide visual examples, code snippets, and interactive functionality for users to test. The application will prioritize clarity and ease of navigation, allowing developers to quickly find the information they need to implement consistent design elements in their projects. The minimalist design will enhance focus on the content, ensuring a seamless user experience.