Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that allows users to toggle between light and dark modes for an enhanced viewing experience. The application will default to the user's system preference and ensure that text remains easily readable in both modes, adhering to WCAG's contrast rules.

## CORE FEATURES
1. **Dark Mode Toggle**: A toggle switch located in the top left corner of the header, allowing users to switch between light and dark modes seamlessly.
2. **System Preference Detection**: The application will automatically detect and set the default mode based on the user's operating system settings.
3. **Responsive Design**: The application will be optimized for various screen sizes, ensuring usability across devices.
4. **Accessibility Compliance**: All text and interactive elements will follow WCAG guidelines to ensure high contrast and readability in both light and dark modes.
5. **Minimalist UI**: Emphasis on clean layouts and ample white space for improved user focus and navigation.

## 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 feature a top navigation header with the dark mode toggle aligned horizontally with navigation buttons, followed by a content area with sections for features and a footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React Context API or Zustand for managing theme state.

## IMPLEMENTATION STEPS
1. **Set up the React application**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create a Header Component**: Develop a header that includes navigation buttons and the dark mode toggle.
3. **Implement Theme Context**: Create a context to manage the current theme (light or dark) and provide it to the application.
4. **Develop the Dark Mode Toggle**: Implement the toggle functionality that switches the theme and persists the selection using local storage.
5. **Style Components**: Use Tailwind CSS to style the application components according to the specified design specifications.
6. **Test Responsiveness**: Ensure that the application layout is responsive by testing on different screen sizes.
7. **Accessibility Checks**: Use tools to verify that all text and elements meet accessibility standards.

## USER EXPERIENCE
Users will interact with the application by using the dark mode toggle situated in the header. Upon clicking the toggle, the site will smoothly transition to the selected theme, maintaining readability of text and visibility of UI components. The application will remember user preferences, automatically adapting to system settings on subsequent visits. The overall minimalist design will guide users easily through the content without unnecessary distractions.