Initial release v1.0.0

docs/frontend/DESIGN.md

@@ -0,0 +1,64 @@
+# Lidify Design System
+
+## Brand Colors
+- **Primary**: #fca200 (logo gold)
+- **Hover**: #e69200 (darker gold for hover states)
+- **Light**: #fcb84d (lighter gold for accents)
+- **Dark**: #d48c00 (darker gold for emphasis)
+
+## Design Principles
+- **Glassmorphism**: Use `backdrop-blur-sm` with semi-transparent cards for premium feel
+- **Border Radius**: `rounded-lg` (8px) for modern, edgy feel - avoid overly rounded elements
+- **Shadows**: Prefer `shadow-lg`/`shadow-xl` over `shadow-2xl` for subtlety
+- **Spacing**: 20-25% tighter than current values for refined look
+- **Typography**: Smaller, tighter proportions for elegance
+
+## Component Guidelines
+
+### Buttons
+- **Primary CTA**: `bg-brand hover:bg-brand-hover text-black font-bold rounded-lg py-3`
+- **Secondary**: `bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg py-2.5`
+- **Avoid**: `rounded-full` (too soft), `rounded-2xl` (too rounded)
+
+### Cards
+- **Style**: `rounded-lg backdrop-blur-sm bg-[#111]/90 border border-white/10`
+- **Shadow**: `shadow-xl` (subtle, premium)
+- **Padding**: `p-6 md:p-8` (tighter than current)
+
+### Form Elements
+- **Inputs**: `rounded-lg py-2.5 px-4 bg-white/5 border border-white/10`
+- **Focus**: `focus:ring-2 focus:ring-brand/30 focus:border-transparent`
+- **Labels**: `text-sm font-medium text-white/90 mb-1.5`
+
+### Typography
+- **Page Headings**: `text-2xl` (reduced from `text-3xl`)
+- **Section Headings**: `text-xl` (reduced from `text-2xl`)
+- **Card Titles**: `text-sm font-semibold`
+- **Spacing**: Tighter margins (`mb-1` vs `mb-2`)
+
+## Layout Guidelines
+
+### Login Page
+- Logo: `mb-8`, `width={40}`
+- Card: `rounded-lg p-6 md:p-8`
+- Form: `space-y-4`
+- Button: `py-3 rounded-lg`
+
+### Onboarding Page
+- Logo: `width={48}`
+- Title: `text-4xl`
+- Progress: `w-9 h-9` step circles
+- Card: `rounded-lg p-6 md:p-8`
+- Buttons: `py-3.5 rounded-lg`
+
+## Color Usage
+- Replace all `#ecb200` with `#fca200`
+- Replace all `#ffc933` with `#e69200`
+- Use Tailwind `text-brand`, `bg-brand`, `border-brand` classes
+- Update gradient overlays to use new brand color
+
+## Implementation Notes
+- Glassmorphism effect: `backdrop-blur-sm` (subtle)
+- Card opacity: `bg-[#111]/90` (90% opacity)
+- Border consistency: `border-white/10` throughout
+- Shadow consistency: `shadow-xl` for cards