# Task&Coffee Frontend

> Modern task management app with Material Design 3 + Neon aesthetic

## 🚀 Quick Start

```bash
npm install
npm run dev
```

---

## 🎨 Styling System

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

### 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 ✨**