Enhance documentation and styling system with Mirage Palette, Material Design 3, and Neon accents. Add comprehensive style guide, color palette, and cheatsheet for improved developer experience.

taskncoffee-app/README.md

@@ -1,16 +1,76 @@
-# React + Vite
+# Task&Coffee Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+> Modern task management app with Material Design 3 + Neon aesthetic
 
-Currently, two official plugins are available:
+## 🚀 Quick Start
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install
+npm run dev
+```
 
-## React Compiler
+---
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## 🎨 Styling System
 
-## Expanding the ESLint configuration
+We use a custom design system combining:
+- **Mirage Color Palette** - Professional dark blue theme
+- **Material Design 3** - Modern UI patterns  
+- **Neon Cyberpunk** - Unique glowing accents
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+### Usage
+
+```jsx
+import styles from '@/lib/styles';
+
+<div className={styles.card.filled}>
+  <h2 className={styles.text.h2}>Hello</h2>
+  <button className={styles.button.primaryNeon}>Click</button>
+</div>
+```
+
+### 📖 Documentation
+
+| Document | Purpose |
+|----------|---------|
+| **[Cheatsheet](./docs/STYLES_CHEATSHEET.md)** | 📋 Quick reference - copy/paste examples |
+| **[Style Guide](./docs/STYLE_GUIDE.md)** | 📚 Complete guide with examples |
+| **[Color Palette](./docs/COLOR_PALETTE.md)** | 🎨 Color meanings & usage |
+
+**👉 Start with [Cheatsheet](./docs/STYLES_CHEATSHEET.md)** for quick examples!
+
+---
+
+## 🛠️ Tech Stack
+
+- React 18 + Vite
+- Tailwind CSS + Custom Design System
+- Radix UI (accessibility)
+- Lucide React (icons)
+
+---
+
+## 📁 Project Structure
+
+```
+src/
+├── api/              API services
+├── components/       Reusable components
+├── lib/
+│   ├── styles.js    ⭐ Style presets (60+ ready-to-use)
+│   └── utils.js     Helper functions
+├── pages/            Page components
+├── index.css        ⭐ Color variables (Mirage palette)
+└── neon.css         ⭐ Neon glow effects
+```
+
+---
+
+## 📚 Learn More
+
+- [Design System Overview](../DESIGN_SYSTEM_SUMMARY.md)
+- [Vite](https://vitejs.dev/) | [React](https://react.dev/) | [Tailwind](https://tailwindcss.com/)
+
+---
+
+**Made with 💙 and neon ✨**