+
+// AFTER:
+
+```
+
+**Note**: Remove `animate-float` class for static icon
+
+---
+
+#### Register Page
+**File**: `src/app/(auth)/register/page.tsx`
+
+**Same changes as Login**:
+1. Line 230: `bg-black` → `bg-bg-primary`
+2. Lines 232-240: Delete cosmic background
+3. Lines 247-261: Update icon container
+
+---
+
+#### Forgot Password Page
+**File**: `src/app/(auth)/forgot-password/page.tsx`
+
+**Same changes as Login**:
+1. Line 115: `bg-black` → `bg-bg-primary`
+2. Lines 118-125: Delete cosmic background
+3. Lines 132-146: Update icon container
+
+**Optional** - Line 278, update "Back to login" link:
+```tsx
+// BEFORE:
+className="text-sm font-medium text-text-secondary hover:text-white transition-colors inline-flex items-center gap-2 group"
+
+// AFTER:
+className="text-sm font-medium text-accent-primary hover:text-accent-primary-hover transition-colors inline-flex items-center gap-2 group"
+```
+
+---
+
+### Step 4: Update Input Component
+
+**File**: `src/features/shared/components/ui/input/input.tsx`
+
+**Lines 203-206** - Update focus states:
+```tsx
+// BEFORE:
+'focus:outline-none focus:ring-2 focus:ring-offset-2',
+'focus:ring-glass-focus focus:ring-offset-bg-primary',
+'focus:bg-glass focus:border-glass-hover',
+
+// AFTER:
+'focus:outline-none focus:ring-2 focus:ring-offset-2',
+'focus:ring-accent-primary/30 focus:ring-offset-bg-primary',
+'focus:bg-glass focus:border-accent-primary',
+```
+
+**Visual Result**: X.ai blue focus ring around inputs
+
+---
+
+### Step 5: Update Button Component
+
+**File**: `src/features/shared/components/ui/button/button.tsx`
+
+**Lines 83-88** - Update brand variant:
+```tsx
+// BEFORE:
+brand: [
+ 'bg-brand-gradient text-white',
+ 'shadow-brand hover:shadow-brand-lg',
+ 'hover:scale-[1.02]',
+ 'focus-visible:ring-brand-primary focus-visible:shadow-colored',
+],
+
+// AFTER:
+brand: [
+ 'bg-accent-primary text-white',
+ 'shadow-md hover:shadow-lg',
+ 'hover:bg-accent-primary-hover',
+ 'focus-visible:ring-2 focus-visible:ring-accent-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary',
+],
+```
+
+**Changes**:
+- Gradient → Solid X.ai blue
+- Simplified hover (no scale transform)
+- X.ai blue focus ring
+
+---
+
+## 🧪 Testing Requirements
+
+### Visual Testing
+
+**Dark Theme** (Default):
+```bash
+# Start dev server
+npm run dev
+
+# Navigate to:
+http://localhost:3000/login
+http://localhost:3000/register
+http://localhost:3000/forgot-password
+```
+
+**Checklist**:
+- [ ] Background is #15202b (warm dark gray)
+- [ ] No cosmic blur orbs visible
+- [ ] Icon container has X.ai blue tint
+- [ ] Primary button is X.ai blue
+- [ ] Links are X.ai blue
+- [ ] Input focus ring is X.ai blue
+- [ ] Glass effects subtle but visible
+- [ ] Text readable (high contrast)
+
+---
+
+**Light Theme**:
+```bash
+# Click theme toggle in top-right
+# Or manually:
+localStorage.setItem('theme', 'light')
+```
+
+**Checklist**:
+- [ ] Background is white
+- [ ] X.ai blue still prominent
+- [ ] Text is dark
+- [ ] All interactive elements visible
+
+---
+
+### Accessibility Testing
+
+**Tools**:
+- Chrome DevTools Lighthouse
+- axe DevTools extension
+- WebAIM Contrast Checker
+
+**Requirements**:
+- [ ] Lighthouse Accessibility score ≥ 95
+- [ ] Contrast ratio ≥ 4.5:1 for all text
+- [ ] Focus indicators visible (X.ai blue ring)
+- [ ] Keyboard navigation works (Tab, Shift+Tab, Enter)
+- [ ] Screen reader announces form fields correctly
+- [ ] Error messages have `role="alert"`
+- [ ] Form labels properly associated
+
+**Contrast Check**:
+```
+X.ai blue (#1D9BF0) on dark bg (#15202b):
+✅ Contrast ratio: 5.2:1 (Passes WCAG AA)
+
+White (#FFFFFF) on dark bg (#15202b):
+✅ Contrast ratio: 12.8:1 (Passes WCAG AAA)
+```
+
+---
+
+### Responsive Testing
+
+**Breakpoints**:
+```bash
+# Mobile
+Resize browser to 375px width (iPhone)
+
+# Tablet
+Resize to 768px width (iPad)
+
+# Desktop
+Resize to 1440px width
+```
+
+**Checklist**:
+- [ ] Form centered on all screen sizes
+- [ ] Text readable without zoom on mobile
+- [ ] Buttons touch-friendly (min 44x44px)
+- [ ] No horizontal scroll
+- [ ] AuthControls (theme/lang) accessible on mobile
+- [ ] Virtual keyboard doesn't hide submit button
+
+---
+
+### Functional Testing
+
+**Login Page**:
+- [ ] Can submit with valid email + password
+- [ ] Email validation shows error for invalid format
+- [ ] Password validation shows error if < 8 chars
+- [ ] "Remember me" checkbox works
+- [ ] "Forgot password" link navigates correctly
+- [ ] "Sign up" link navigates correctly
+- [ ] Loading state shows spinner
+- [ ] API error displays message
+
+**Register Page**:
+- [ ] Password strength indicator updates in real-time
+- [ ] Confirm password validates match
+- [ ] Terms checkbox required to submit
+- [ ] All validation messages display correctly
+
+**Forgot Password**:
+- [ ] Email validation works
+- [ ] Success state shows confirmation
+- [ ] "Back to login" link works
+- [ ] "Send to another email" option works
+
+---
+
+### Cross-Browser Testing
+
+**Required Browsers**:
+- [ ] Chrome (latest)
+- [ ] Firefox (latest)
+- [ ] Safari (latest)
+- [ ] Edge (latest)
+
+**Known Issues**:
+- Safari: backdrop-filter may have slight differences
+- Solution: Fallback to solid background if needed
+
+---
+
+## 🎨 Design Specifications
+
+### Layout Measurements
+
+**Form Container**:
+- Max-width: 448px (`max-w-md`)
+- Padding: 32px (`p-8`)
+- Border-radius: 12px (`rounded-xl`)
+
+**Spacing**:
+- Form fields: 16px gap (`space-y-4`)
+- Sections: 24px gap (`space-y-6`)
+- Button to form: 24px (`mt-6`)
+
+**Typography**:
+- Heading: 36px / 2.25rem (`text-4xl`)
+- Body: 16px / 1rem (`text-base`)
+- Small: 14px / 0.875rem (`text-sm`)
+
+---
+
+### Color Specifications
+
+**Backgrounds**:
+```
+Dark Primary: #15202b
+Dark Secondary: #1a2734
+Light Primary: #FFFFFF
+```
+
+**Accent**:
+```
+X.ai Blue: #1D9BF0
+X.ai Blue Hover: #1a8cd8
+X.ai Blue Light: #8ecdf7
+```
+
+**Text**:
+```
+Primary: #FFFFFF (dark theme), #1D1D1F (light theme)
+Secondary: #8899A6
+Tertiary: #657786
+```
+
+**Status**:
+```
+Success: #10B981
+Error: #EF4444
+Warning: #F59E0B
+```
+
+---
+
+### Animation Specifications
+
+**Transitions**:
+```css
+Fast: 150ms cubic-bezier(0.4, 0.0, 0.2, 1)
+Normal: 300ms cubic-bezier(0.4, 0.0, 0.2, 1)
+```
+
+**Hover Effects**:
+- Button: `hover:bg-accent-primary-hover`
+- Link: `hover:text-accent-primary-hover`
+- Card: `hover:border-glass-hover`
+
+**Focus Effects**:
+- Ring: 2px solid, 30% opacity X.ai blue
+- Offset: 2px from element
+
+---
+
+## 🐛 Common Issues & Solutions
+
+### Issue 1: Glass effect not visible
+**Cause**: Backdrop-filter not supported or disabled
+**Solution**:
+```css
+/* Add fallback */
+.glass-card {
+ background: rgba(255, 255, 255, 0.05); /* Fallback */
+ backdrop-filter: blur(8px);
+}
+
+@supports not (backdrop-filter: blur(8px)) {
+ .glass-card {
+ background: rgba(255, 255, 255, 0.1); /* More opaque */
+ }
+}
+```
+
+---
+
+### Issue 2: Focus ring not showing
+**Cause**: Browser default outline removed
+**Solution**: Always replace with custom focus styles:
+```tsx
+className="focus:outline-none focus:ring-2 focus:ring-accent-primary/30"
+```
+
+---
+
+### Issue 3: Color contrast failure
+**Cause**: Insufficient contrast ratio
+**Solution**: Use CSS variables that are pre-validated:
+```tsx
+// ✅ Good
+text-text-primary
+
+// ❌ Bad
+text-gray-400 // May not meet contrast requirements
+```
+
+---
+
+## 📦 Assets Needed
+
+### Icons
+- [ ] Logo/Brand mark (SVG) - Already in codebase
+- [ ] Social login icons (future)
+
+### Images
+- None required for auth pages (minimal design)
+
+### Fonts
+- [x] Inter (already loaded via Tailwind)
+
+---
+
+## 🔄 Migration Checklist
+
+For developers implementing this redesign:
+
+### Phase 1: Preparation
+- [ ] Read this document fully
+- [ ] Review Figma designs (if available)
+- [ ] Backup current code (git branch)
+- [ ] Run existing tests to ensure baseline
+
+### Phase 2: Implementation
+- [ ] Update `src/styles/theme.css`
+- [ ] Update `src/styles/glass.css`
+- [ ] Update `src/features/shared/components/ui/input/input.tsx`
+- [ ] Update `src/features/shared/components/ui/button/button.tsx`
+- [ ] Update `src/app/(auth)/login/page.tsx`
+- [ ] Update `src/app/(auth)/register/page.tsx`
+- [ ] Update `src/app/(auth)/forgot-password/page.tsx`
+
+### Phase 3: Testing
+- [ ] Visual testing (dark + light theme)
+- [ ] Accessibility testing (Lighthouse)
+- [ ] Responsive testing (mobile, tablet, desktop)
+- [ ] Functional testing (all forms)
+- [ ] Cross-browser testing
+
+### Phase 4: Review
+- [ ] Code review with team
+- [ ] Design review with designer
+- [ ] QA testing
+- [ ] Performance benchmarks
+
+### Phase 5: Deployment
+- [ ] Merge to main branch
+- [ ] Deploy to staging
+- [ ] Final QA on staging
+- [ ] Deploy to production
+- [ ] Monitor for issues
+
+---
+
+## 📞 Support
+
+**Questions about design**: Contact Design Team
+**Questions about implementation**: Contact Dev Lead
+**Bug reports**: Create issue in GitHub
+
+---
+
+## 📚 Related Documentation
+
+- [Design System](../DESIGN_SYSTEM.md) - Full design system docs
+- [WCAG Compliance](../WCAG_COMPLIANCE.md) - Accessibility guidelines
+- [Login User Flow](../ux/flows/auth-login.md) - Detailed UX flow
+
+---
+
+**Author**: Design Team + Dev Team
+**Last Updated**: 2026-01-04
+**Version**: 2.0 (X.ai Minimal Redesign)
diff --git a/apps/web-client/src/docs/ui/MOODBOARD.md b/apps/web-client/src/docs/ui/MOODBOARD.md
new file mode 100644
index 00000000..78a3e54e
--- /dev/null
+++ b/apps/web-client/src/docs/ui/MOODBOARD.md
@@ -0,0 +1,597 @@
+# Moodboard - Visual Direction Guide
+
+> **X.ai Minimal Design Philosophy**
+>
+> Hướng dẫn visual direction cho GoodGo Web Client theo phong cách Neo-minimalism 2026
+
+## 📋 Overview
+
+**Design Style**: X.ai Minimal / Neo-minimalism 2026
+**Target Audience**: Tech-savvy professionals
+**Brand Personality**: Sophisticated, Trustworthy, Innovative, Clean
+**Last Updated**: 2026-01-04
+
+---
+
+## 🎯 Design Philosophy
+
+### Core Principle: "Less is Enough"
+
+> **Neo-minimalism** is the evolution of minimalism - moving away from cold, sterile designs toward something warmer, more human, and inviting. It's about removing the unnecessary while retaining warmth and personality.
+
+### Key Characteristics
+
+1. **Intentional Simplicity**
+ - Every element has a purpose
+ - Remove visual clutter
+ - White space is a feature, not empty space
+
+2. **Warm Darkness**
+ - Dark backgrounds that feel inviting, not harsh
+ - `#15202b` instead of pure black `#000000`
+ - Reduces eye strain, feels sophisticated
+
+3. **Vibrant Accents**
+ - Single accent color for focus: X.ai Blue `#1D9BF0`
+ - High contrast for accessibility
+ - Blue = trust, technology, reliability
+
+4. **Subtle Depth**
+ - Minimal shadows, not flat
+ - Glass effects (glassmorphism) but very subtle
+ - Layering through transparency, not heavy shadows
+
+5. **Geometric Typography**
+ - Clean, sans-serif fonts (Inter)
+ - Strong hierarchy
+ - Generous line-height for readability
+
+---
+
+## 🎨 Visual Inspiration
+
+### Primary Inspiration: X.ai / Grok
+
+**Why X.ai?**
+- Leader in AI interface design
+- Perfect balance of minimal + functional
+- Warm dark theme with vibrant blue accent
+- Clean, distraction-free interfaces
+
+**Key Elements from X.ai**:
+- Warm dark gray backgrounds (#15202b family)
+- Signature blue accent (#1D9BF0)
+- Minimal UI chrome
+- Focus on content, not decoration
+- Subtle glassmorphism
+
+---
+
+### Secondary Inspirations
+
+#### 1. Linear.app
+**What to Learn**:
+- Ultra-clean interfaces
+- Smooth micro-interactions
+- Purple/violet accents on dark backgrounds
+- Keyboard-first design
+
+**Visual Elements**:
+- Subtle gradients
+- Crisp typography
+- Minimal shadows
+- Fast, snappy animations
+
+---
+
+#### 2. Vercel Dashboard
+**What to Learn**:
+- Developer-friendly aesthetics
+- High contrast for readability
+- Clean data visualization
+- Monospace typography for code
+
+**Visual Elements**:
+- Pure black backgrounds (but we use warmer)
+- White/gray text hierarchy
+- Accent colors for status
+- Edge-to-edge layouts
+
+---
+
+#### 3. Stripe Dashboard
+**What to Learn**:
+- Trust through design
+- Clear visual hierarchy
+- Excellent form design
+- Error handling patterns
+
+**Visual Elements**:
+- Clean form layouts
+- Clear labels and instructions
+- Inline validation
+- Accessible color choices
+
+---
+
+#### 4. Notion
+**What to Learn**:
+- Content-first approach
+- Flexible layouts
+- Light + dark themes
+- Collaborative feel
+
+**Visual Elements**:
+- Generous whitespace
+- Subtle hover states
+- Friendly, approachable feel
+- Emoji as visual elements (optional)
+
+---
+
+## 🌈 Color Direction
+
+### Primary Palette: X.ai Minimal
+
+```
+┌─────────────────────────────────────────────────────┐
+│ │
+│ BACKGROUNDS │
+│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
+│ │ │ │ │ │ │ │ │ │
+│ │ #15202b │ │ #1a2734 │ │ #1f2f3d │ │ #243442 │ │
+│ │ │ │ │ │ │ │ │ │
+│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
+│ Primary Secondary Tertiary Elevated │
+│ │
+│ ACCENT │
+│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
+│ │ │ │ │ │ │ │
+│ │ #1D9BF0 │ │ #1a8cd8 │ │ #8ecdf7 │ │
+│ │ │ │ │ │ │ │
+│ └─────────┘ └─────────┘ └─────────┘ │
+│ X.ai Blue Hover Light │
+│ │
+│ TEXT │
+│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
+│ │ #FFFFFF │ │ #8899A6 │ │ #657786 │ │
+│ └─────────┘ └─────────┘ └─────────┘ │
+│ Primary Secondary Tertiary │
+│ │
+│ STATUS │
+│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
+│ │ #10B981 │ │ #EF4444 │ │ #F59E0B │ │
+│ └─────────┘ └─────────┘ └─────────┘ │
+│ Success Error Warning │
+│ │
+└─────────────────────────────────────────────────────┘
+```
+
+### Color Psychology
+
+| Color | Hex | Emotion | Usage |
+|-------|-----|---------|-------|
+| **X.ai Blue** | #1D9BF0 | Trust, Technology, Calm | Primary actions, links, focus |
+| **Warm Dark** | #15202b | Sophisticated, Professional | Backgrounds |
+| **White** | #FFFFFF | Clean, Clear | Primary text |
+| **Green** | #10B981 | Success, Positive | Success states |
+| **Red** | #EF4444 | Alert, Important | Errors, destructive |
+| **Amber** | #F59E0B | Caution, Attention | Warnings |
+
+---
+
+## 🔤 Typography Direction
+
+### Font Family: Inter
+
+**Why Inter?**
+- Designed for screens
+- Excellent readability at all sizes
+- Geometric but warm
+- Open-source, widely available
+- Similar to SF Pro (Apple's system font)
+
+### Typography Scale
+
+```
+Heading 1: 36px / 2.25rem / font-extrabold / #FFFFFF
+ "Sign in to your account"
+
+Heading 2: 30px / 1.875rem / font-bold / #FFFFFF
+ "Section Title"
+
+Heading 3: 24px / 1.5rem / font-semibold / #FFFFFF
+ "Subsection"
+
+Body: 16px / 1rem / font-normal / #FFFFFF or #8899A6
+ "Regular paragraph text goes here."
+
+Small: 14px / 0.875rem / font-normal / #8899A6
+ "Secondary information or labels"
+
+Tiny: 12px / 0.75rem / font-normal / #657786
+ "Captions, timestamps, footnotes"
+```
+
+### Typography Principles
+
+1. **Hierarchy is Key**
+ - 3 levels max per screen
+ - Size + Weight + Color = Hierarchy
+ - Don't rely on color alone
+
+2. **Generous Spacing**
+ - Line-height: 1.5 for body
+ - Letter-spacing: -0.02em for headings
+ - Paragraph spacing: 1.5x line-height
+
+3. **Readability First**
+ - Max line length: 65-75 characters
+ - 16px minimum for body (prevents iOS zoom)
+ - High contrast (WCAG AA minimum)
+
+---
+
+## 🎭 UI Patterns & Elements
+
+### Glassmorphism (Subtle)
+
+**Our Approach**: Ultra-subtle glass effects
+
+```css
+/* X.ai Minimal Glass */
+background: rgba(255, 255, 255, 0.04);
+backdrop-filter: blur(8px);
+border: 1px solid rgba(255, 255, 255, 0.08);
+```
+
+**DO**:
+- ✅ Very low opacity (2-5%)
+- ✅ Subtle blur (4-12px)
+- ✅ Thin, barely visible borders
+- ✅ Use sparingly on cards, modals
+
+**DON'T**:
+- ❌ Heavy blur (>20px)
+- ❌ High opacity (>10%)
+- ❌ Thick, obvious borders
+- ❌ Glass on glass (double layer)
+
+---
+
+### Shadows
+
+**Our Approach**: Minimal, subtle shadows
+
+```css
+/* Light shadow */
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+
+/* Medium shadow */
+box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+/* Glow effect (for focus) */
+box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.1);
+```
+
+**DO**:
+- ✅ Soft, diffused shadows
+- ✅ Dark shadows on dark backgrounds
+- ✅ Blue glow for focus states
+- ✅ Minimal elevation differences
+
+**DON'T**:
+- ❌ Sharp, hard shadows
+- ❌ Light shadows on dark backgrounds
+- ❌ Multiple shadow layers
+- ❌ Colored shadows (except focus)
+
+---
+
+### Animations & Transitions
+
+**Our Approach**: Fast, snappy, purposeful
+
+```css
+/* Fast (hover, focus) */
+transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+
+/* Normal (page transitions) */
+transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+
+/* Easing: Material Design "Emphasized" */
+cubic-bezier(0.4, 0.0, 0.2, 1)
+```
+
+**DO**:
+- ✅ Fast transitions (150-300ms)
+- ✅ Subtle hover effects (opacity, color change)
+- ✅ Smooth easing curves
+- ✅ Respect `prefers-reduced-motion`
+
+**DON'T**:
+- ❌ Slow animations (>500ms)
+- ❌ Bouncy/elastic effects
+- ❌ Rotation or complex transforms
+- ❌ Animations that block interaction
+
+---
+
+### Buttons
+
+**Primary (X.ai Blue)**:
+```
+┌─────────────────────────────────────┐
+│ │
+│ Sign in │
+│ │
+└─────────────────────────────────────┘
+Background: #1D9BF0
+Text: #FFFFFF
+Height: 48px
+Border-radius: 8px
+```
+
+**Secondary (Ghost)**:
+```
+┌─────────────────────────────────────┐
+│ │
+│ Cancel │
+│ │
+└─────────────────────────────────────┘
+Background: transparent
+Text: #8899A6
+Border: 1px solid rgba(255,255,255,0.1)
+Height: 48px
+```
+
+---
+
+### Form Inputs
+
+**Default State**:
+```
+Email address
+┌─────────────────────────────────────┐
+│ you@example.com │
+└─────────────────────────────────────┘
+Background: rgba(255,255,255,0.02)
+Border: 1px solid rgba(255,255,255,0.08)
+```
+
+**Focus State**:
+```
+Email address
+┌─────────────────────────────────────┐
+│ you@example.com | │
+└─────────────────────────────────────┘
+Border: 1px solid #1D9BF0
+Glow: 0 0 0 3px rgba(29,155,240,0.1)
+```
+
+---
+
+### Cards
+
+**Glass Card**:
+```
+┌─────────────────────────────────────────┐
+│ │
+│ Card Title │
+│ │
+│ Card content goes here. Keep it │
+│ simple and focused on one thing. │
+│ │
+│ [Action Button] │
+│ │
+└─────────────────────────────────────────┘
+Background: rgba(255,255,255,0.04)
+Border: 1px solid rgba(255,255,255,0.08)
+Padding: 24-32px
+Border-radius: 12px
+```
+
+---
+
+## ✅ Do's and Don'ts
+
+### Colors
+
+| ✅ DO | ❌ DON'T |
+|-------|----------|
+| Use CSS variables (`--accent-primary`) | Hardcode hex values |
+| Warm dark gray (#15202b) | Pure black (#000000) |
+| Single accent color (X.ai blue) | Multiple bright colors |
+| Test contrast ratios (WCAG AA) | Assume colors are accessible |
+| Consistent color meanings | Random color choices |
+
+---
+
+### Typography
+
+| ✅ DO | ❌ DON'T |
+|-------|----------|
+| Use Inter font family | Mix multiple font families |
+| Clear hierarchy (3 levels max) | Too many font sizes |
+| 16px minimum for body | Small text (<14px for body) |
+| High contrast (white on dark) | Low contrast text |
+| Generous line-height (1.5) | Cramped text |
+
+---
+
+### Layout & Spacing
+
+| ✅ DO | ❌ DON'T |
+|-------|----------|
+| 8-point grid system | Random spacing values |
+| Generous whitespace | Cramped layouts |
+| Single-column forms | Multi-column forms (mobile) |
+| Consistent padding | Variable padding |
+| Max-width for content (448px forms) | Full-width everything |
+
+---
+
+### Effects & Decorations
+
+| ✅ DO | ❌ DON'T |
+|-------|----------|
+| Subtle glass effects (2-5% opacity) | Heavy glassmorphism (>10%) |
+| Minimal shadows | Multiple shadow layers |
+| Fast transitions (150-300ms) | Slow animations (>500ms) |
+| Blue glow for focus | Rainbow/gradient glows |
+| ~~Cosmic backgrounds~~ Solid backgrounds | Complex background patterns |
+
+---
+
+### Components
+
+| ✅ DO | ❌ DON'T |
+|-------|----------|
+| Touch-friendly sizes (44px+) | Small touch targets |
+| Clear hover/focus states | Missing interaction states |
+| Loading states | No feedback during actions |
+| Error messages with icons | Error messages with color only |
+| Disabled states clearly visible | Subtle disabled states |
+
+---
+
+## 🖼️ Visual Reference Board
+
+### Approved Styles ✅
+
+**Authentication Pages**:
+- Centered form layout
+- Glass card container
+- X.ai blue primary button
+- Warm dark background (#15202b)
+- Subtle icon container with blue tint
+- No cosmic/floating background effects
+
+**Form Elements**:
+- Top-aligned labels
+- Subtle input backgrounds
+- Blue focus rings
+- Inline validation messages
+- Password visibility toggle
+
+**Buttons**:
+- Solid X.ai blue (not gradient)
+- Subtle hover darkening
+- Loading spinner inline
+- Full-width on mobile
+
+---
+
+### Rejected Styles ❌
+
+**Avoid**:
+- Pure black backgrounds (#000000)
+- White accent colors (low visibility)
+- Floating blur orbs/cosmic effects
+- Gradient buttons
+- Heavy shadows
+- Bouncy animations
+- Decorative illustrations (for auth)
+- Multiple accent colors
+
+---
+
+## 📱 Responsive Considerations
+
+### Mobile-First Approach
+
+1. **Start with mobile** (375px)
+2. **Enhance for tablet** (768px)
+3. **Optimize for desktop** (1280px+)
+
+### Key Mobile Adjustments
+
+- Full-width containers
+- Larger touch targets (48px)
+- Reduced spacing (75% of desktop)
+- Stacked layouts
+- Simplified navigation
+- 16px font for inputs (prevent zoom)
+
+---
+
+## 🧪 Design Validation Checklist
+
+Before finalizing any design:
+
+**Visual**:
+- [ ] Uses approved color palette
+- [ ] Typography follows scale
+- [ ] Spacing follows 8-point grid
+- [ ] Glass effects are subtle
+- [ ] Shadows are minimal
+- [ ] Animations are fast (<300ms)
+
+**Accessibility**:
+- [ ] Contrast ratio ≥ 4.5:1
+- [ ] Focus states visible
+- [ ] Touch targets ≥ 44px
+- [ ] Error messages clear
+- [ ] Color not sole indicator
+
+**Consistency**:
+- [ ] Matches existing components
+- [ ] Uses design tokens (CSS variables)
+- [ ] Follows established patterns
+- [ ] Works in dark + light themes
+
+---
+
+## 🔗 Resources & References
+
+### Design Tools
+- [Figma](https://figma.com) - Primary design tool
+- [Storybook](http://localhost:6006) - Component library
+
+### Inspiration Sources
+- [X.ai](https://x.ai) - Primary inspiration
+- [Linear.app](https://linear.app) - UI patterns
+- [Vercel](https://vercel.com) - Developer aesthetics
+- [Stripe](https://stripe.com) - Form patterns
+
+### Guidelines
+- [X.ai Brand Guidelines](https://x.ai/legal/brand-guidelines)
+- [Material Design 3](https://m3.material.io)
+- [Apple Human Interface Guidelines](https://developer.apple.com/design/)
+
+### Learning
+- [Refactoring UI](https://refactoringui.com)
+- [UI Design Daily](https://uidesigndaily.com)
+- [Mobbin](https://mobbin.com) - UI patterns library
+
+---
+
+## 📝 Version History
+
+### v2.0.0 (2026-01-04) - X.ai Minimal Redesign
+- Adopted X.ai blue accent (#1D9BF0)
+- Changed from pure black to warm dark (#15202b)
+- Removed cosmic background effects
+- Simplified glassmorphism
+- Updated animation guidelines
+
+### v1.0.0 (2025-12-01) - Initial Design
+- White accent on black background
+- Cosmic floating effects
+- Gradient buttons
+
+---
+
+## 📚 Related Documentation
+
+- [Design System](../DESIGN_SYSTEM.md)
+- [Login Mockups](./mockups/auth-login-states.md)
+- [Mobile Specs](./responsive/mobile-specs.md)
+- [Implementation Guide](../implementation/auth-pages-implementation.md)
+
+---
+
+**Created by**: Design Team
+**Last Updated**: 2026-01-04
+**Version**: 2.0 (X.ai Minimal)
+**Status**: ✅ Approved & Active
diff --git a/apps/web-client/src/docs/ui/mockups/auth-login-states.md b/apps/web-client/src/docs/ui/mockups/auth-login-states.md
new file mode 100644
index 00000000..4bb6149e
--- /dev/null
+++ b/apps/web-client/src/docs/ui/mockups/auth-login-states.md
@@ -0,0 +1,447 @@
+# Login Page - UI Mockups & States
+
+> **High-Fidelity Design Specifications**
+>
+> Tất cả states của trang đăng nhập theo X.ai minimal design
+
+## 📋 Overview
+
+**Page**: Login (`/login`)
+**Figma**: [Add Figma link here]
+**Last Updated**: 2026-01-04
+
+---
+
+## 🎨 Design States
+
+### 1. Default State (Initial Load)
+
+**Description**: Trạng thái ban đầu khi user vào trang
+
+#### Visual Specs
+
+**Background**:
+- Color: `#15202b` (warm dark gray)
+- Pattern: Solid, no cosmic effects
+
+**Form Container**:
+- Width: `448px` (max-w-md)
+- Padding: `32px` (p-8)
+- Background: `rgba(255, 255, 255, 0.04)` (glass-card)
+- Border: `1px solid rgba(255, 255, 255, 0.08)`
+- Border-radius: `12px` (rounded-xl)
+- Backdrop-filter: `blur(8px)`
+- Shadow: `0 2px 8px rgba(0, 0, 0, 0.3)`
+
+**Logo/Icon Container**:
+- Size: `56px x 56px`
+- Padding: `12px` (p-3)
+- Background: `rgba(29, 155, 240, 0.05)` (X.ai blue 5%)
+- Border: `1px solid rgba(29, 155, 240, 0.1)`
+- Border-radius: `16px` (rounded-2xl)
+- Icon: Star (white, 40x40px)
+
+**Heading**:
+- Text: "Sign in to your account"
+- Font: Inter, 36px (text-4xl)
+- Weight: 800 (font-extrabold)
+- Color: `#FFFFFF`
+- Line-height: `1.25` (tracking-tight)
+
+**Subheading**:
+- Text: "Enter your credentials to access your account"
+- Font: Inter, 14px (text-sm)
+- Color: `#8899A6` (text-secondary)
+
+**Form Fields**:
+
+**Email Input**:
+- Label: "Email address"
+- Placeholder: "you@example.com"
+- Background: `rgba(255, 255, 255, 0.02)`
+- Border: `1px solid rgba(255, 255, 255, 0.08)`
+- Height: `44px`
+- Border-radius: `8px`
+- Font: 16px
+- Color: `#FFFFFF`
+
+**Password Input**:
+- Label: "Password"
+- Placeholder: "••••••••"
+- Same styling as email
+- Eye icon: `24x24px`, color `#8899A6`
+
+**Remember Me Checkbox**:
+- Size: `20x20px`
+- Border: `1px solid rgba(255, 255, 255, 0.2)`
+- Border-radius: `4px`
+- Label: "Remember me", 14px, `#8899A6`
+
+**Forgot Password Link**:
+- Text: "Forgot password?"
+- Font: 14px (text-sm)
+- Color: `#1D9BF0` (X.ai blue)
+- Hover: `#1a8cd8`
+
+**Sign In Button**:
+- Text: "Sign in"
+- Width: `100%`
+- Height: `48px`
+- Background: `#1D9BF0` (X.ai blue)
+- Color: `#FFFFFF`
+- Border-radius: `8px`
+- Font: 16px, weight 600
+- Shadow: `0 2px 8px rgba(0, 0, 0, 0.1)`
+
+**Sign Up Link**:
+- Text: "Don't have an account? Sign up"
+- Font: 14px
+- "Sign up" part: `#1D9BF0`
+
+**Theme/Language Controls** (top-right):
+- Position: `fixed top-6 right-6`
+- Gap: `12px`
+- Each button: `40x40px`, glass effect
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### 2. Hover States
+
+#### Email Input Hover
+**Changes**:
+- Border: `1px solid rgba(255, 255, 255, 0.12)`
+- Transition: `150ms ease`
+
+#### Password Input Hover
+**Changes**: Same as email
+
+#### Sign In Button Hover
+**Changes**:
+- Background: `#1a8cd8` (darker blue)
+- Shadow: `0 4px 12px rgba(0, 0, 0, 0.15)`
+- Transition: `150ms ease`
+
+#### Link Hover
+**Changes**:
+- Color: `#1a8cd8`
+- Transition: `150ms ease`
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### 3. Focus States
+
+#### Email Input Focus
+**Changes**:
+- Border: `1px solid #1D9BF0` (X.ai blue)
+- Background: `rgba(255, 255, 255, 0.04)`
+- Ring: `2px solid rgba(29, 155, 240, 0.3)`
+- Ring offset: `2px`
+- Outline: `none`
+
+#### Password Input Focus
+**Changes**: Same as email
+
+#### Button Focus
+**Changes**:
+- Ring: `2px solid rgba(29, 155, 240, 0.3)`
+- Ring offset: `2px`
+
+#### Screenshot
+
+*TODO: Add screenshot with focused input*
+
+---
+
+### 4. Active/Typing State
+
+#### Email Input with Text
+**Changes**:
+- Value: "user@example.com"
+- Text color: `#FFFFFF`
+- Cursor: blinking white line
+
+#### Password Input with Text
+**Changes**:
+- Value: "••••••••" (masked)
+- Eye icon clickable
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### 5. Validation Error State
+
+#### Email Error
+**Trigger**: Invalid email format
+
+**Visual Changes**:
+- Border: `1px solid #EF4444` (error red)
+- Background: `rgba(239, 68, 68, 0.1)`
+- Error message below:
+ - Text: "Please enter a valid email address"
+ - Color: `#EF4444`
+ - Icon: Alert circle (16x16px)
+ - Font: 14px (text-sm)
+ - Margin-top: `4px`
+
+#### Password Error
+**Trigger**: Password < 8 characters
+
+**Visual Changes**:
+- Border: `1px solid #EF4444`
+- Background: `rgba(239, 68, 68, 0.1)`
+- Error message: "Password must be at least 8 characters"
+
+#### Form-level Error
+**Trigger**: API returns error (invalid credentials)
+
+**Visual Changes**:
+- Alert box above form:
+ - Background: `rgba(239, 68, 68, 0.1)`
+ - Border: `1px solid rgba(239, 68, 68, 0.2)`
+ - Border-radius: `8px`
+ - Padding: `12px 16px`
+ - Icon: X circle (20x20px, red)
+ - Text: "Invalid email or password. Please try again."
+ - Color: `#EF4444`
+ - Font: 14px
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### 6. Loading State
+
+#### Button Loading
+**Trigger**: Form submitted, waiting for API
+
+**Visual Changes**:
+- Button disabled
+- Text: "Signing in..."
+- Spinner:
+ - Size: `20x20px`
+ - Color: `#FFFFFF`
+ - Position: Left of text
+ - Animation: Spin (1s linear infinite)
+- Opacity: `0.7`
+- Cursor: `not-allowed`
+
+**Form Fields**:
+- All inputs disabled
+- Opacity: `0.5`
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### 7. Success State (Redirect)
+
+**Note**: Very brief state before redirect to dashboard
+
+**Visual Changes**:
+- Success toast (optional):
+ - Background: `rgba(16, 185, 129, 0.1)`
+ - Border: `1px solid rgba(16, 185, 129, 0.2)`
+ - Icon: Checkmark circle (green)
+ - Text: "Login successful! Redirecting..."
+ - Position: Top-center
+ - Duration: 1s before redirect
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### 8. Disabled State
+
+**Trigger**: Network error or maintenance mode
+
+**Visual Changes**:
+- All inputs disabled
+- Button disabled:
+ - Background: `rgba(29, 155, 240, 0.3)`
+ - Cursor: `not-allowed`
+ - Opacity: `0.5`
+- Message: "Login is temporarily unavailable"
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+## 📱 Responsive Variations
+
+### Mobile (< 640px)
+
+**Changes**:
+- Container: Full width with `16px` padding
+- Form: Full width
+- Stack vertically
+- Touch targets: Min `44x44px`
+- Font sizes may adjust slightly
+
+**Screenshot**:
+
+*TODO: Add screenshot*
+
+---
+
+### Tablet (640px - 1024px)
+
+**Changes**:
+- Container: Centered, same max-width (448px)
+- Similar to desktop
+
+**Screenshot**:
+
+*TODO: Add screenshot*
+
+---
+
+### Desktop (> 1024px)
+
+**Changes**: Default state as described above
+
+**Screenshot**:
+
+*TODO: Add screenshot*
+
+---
+
+## 🎨 Dark vs Light Theme
+
+### Dark Theme (Default)
+- Background: `#15202b`
+- Text: `#FFFFFF`
+- As described above
+
+### Light Theme
+**Changes**:
+- Background: `#FFFFFF`
+- Text: `#1D1D1F` (dark)
+- Glass effect: `rgba(0, 0, 0, 0.04)`
+- Borders: `rgba(0, 0, 0, 0.1)`
+- X.ai blue stays: `#1D9BF0`
+
+**Screenshot**:
+
+*TODO: Add screenshot*
+
+---
+
+## 🔤 Typography Specs
+
+| Element | Font | Size | Weight | Color | Line Height |
+|---------|------|------|--------|-------|-------------|
+| H1 Heading | Inter | 36px | 800 | #FFFFFF | 1.25 |
+| Subheading | Inter | 14px | 400 | #8899A6 | 1.5 |
+| Input Label | Inter | 14px | 500 | #8899A6 | 1.5 |
+| Input Text | Inter | 16px | 400 | #FFFFFF | 1.5 |
+| Button Text | Inter | 16px | 600 | #FFFFFF | 1.5 |
+| Link Text | Inter | 14px | 500 | #1D9BF0 | 1.5 |
+| Error Text | Inter | 14px | 400 | #EF4444 | 1.5 |
+
+---
+
+## 🎨 Color Palette
+
+| Purpose | Color | Hex | Usage |
+|---------|-------|-----|-------|
+| Background | Warm Dark Gray | #15202b | Main background |
+| X.ai Blue | Primary Accent | #1D9BF0 | Buttons, links, focus |
+| X.ai Blue Hover | Darker Blue | #1a8cd8 | Hover states |
+| White | Primary Text | #FFFFFF | Headings, input text |
+| Light Gray | Secondary Text | #8899A6 | Labels, descriptions |
+| Red | Error | #EF4444 | Error messages, borders |
+| Green | Success | #10B981 | Success messages |
+
+---
+
+## 📐 Spacing & Layout
+
+**Form Container**:
+- Max-width: `448px`
+- Padding: `32px`
+- Gap between elements: `24px`
+
+**Form Fields**:
+- Label to input: `8px`
+- Input to input: `16px`
+- Input height: `44px`
+
+**Buttons**:
+- Height: `48px`
+- Margin-top: `24px`
+
+**Mobile**:
+- Side padding: `16px`
+- All gaps reduced by 25%
+
+---
+
+## ♿ Accessibility Notes
+
+**Contrast Ratios**:
+- White on #15202b: 12.8:1 (WCAG AAA ✅)
+- X.ai blue on #15202b: 5.2:1 (WCAG AA ✅)
+- Error red on white bg: 4.5:1 (WCAG AA ✅)
+
+**Focus Indicators**:
+- All interactive elements have visible focus ring
+- X.ai blue ring with 30% opacity
+- 2px thick, 2px offset
+
+**Keyboard Navigation**:
+- Tab order: Email → Password → Remember me → Button → Forgot password → Sign up link
+- Enter key submits form
+
+**Screen Reader**:
+- Form has proper labels
+- Error messages announced with `role="alert"`
+- Loading state announced
+
+---
+
+## 🧪 Design Validation Checklist
+
+- [ ] All states designed (8 states)
+- [ ] Responsive variants (mobile, tablet, desktop)
+- [ ] Dark + Light theme variants
+- [ ] Typography specs documented
+- [ ] Color palette defined
+- [ ] Spacing consistent with 8-point grid
+- [ ] Accessibility requirements met
+- [ ] Screenshots added to Figma/public folder
+- [ ] Interactive prototype created
+
+---
+
+## 🔗 Related Documentation
+
+- [Login User Flow](../../ux/flows/auth-login.md)
+- [Implementation Guide](../../implementation/auth-pages-implementation.md)
+- [Design System](../../DESIGN_SYSTEM.md)
+- [Responsive Specs](../responsive/mobile-specs.md)
+
+---
+
+**Designer**: [Name]
+**Reviewer**: [Name]
+**Last Updated**: 2026-01-04
+**Version**: 2.0 (X.ai Minimal Redesign)
diff --git a/apps/web-client/src/docs/ui/responsive/mobile-specs.md b/apps/web-client/src/docs/ui/responsive/mobile-specs.md
new file mode 100644
index 00000000..b2b52016
--- /dev/null
+++ b/apps/web-client/src/docs/ui/responsive/mobile-specs.md
@@ -0,0 +1,554 @@
+# Mobile Responsive Design Specifications
+
+> **Mobile-First Design Guide**
+>
+> Breakpoint: `< 640px` (sm in Tailwind)
+
+## 📱 Overview
+
+**Target Devices**:
+- iPhone 12/13/14: 390px width
+- iPhone SE: 375px width
+- Android phones: 360px - 414px width
+
+**Orientation**: Portrait (primary), Landscape (secondary)
+
+**Last Updated**: 2026-01-04
+
+---
+
+## 🎯 Mobile Design Principles
+
+### 1. Touch-First Interaction
+- Minimum touch target: `44x44px` (Apple HIG)
+- Recommended: `48x48px` (Material Design)
+- Spacing between touchable elements: `8px` minimum
+
+### 2. Thumb Zone Optimization
+- Primary actions: Bottom center (easy reach)
+- Secondary actions: Top corners
+- Avoid: Middle edges (hard to reach)
+
+### 3. Content Priority
+- Show essential content only
+- Progressive disclosure for details
+- Reduce visual clutter
+
+### 4. Performance
+- Optimize images for mobile
+- Minimize animations
+- Fast load times (< 2s)
+
+---
+
+## 📋 Auth Pages - Mobile Specifications
+
+### Login Page (`/login`)
+
+#### Layout
+
+**Container**:
+```css
+width: 100vw;
+min-height: 100vh;
+padding: 16px; /* Reduced from 32px */
+background: #15202b;
+```
+
+**Form Container**:
+```css
+width: 100%;
+max-width: 100%; /* Remove 448px limit */
+padding: 24px; /* Reduced from 32px */
+margin: auto;
+```
+
+**Vertical Spacing**:
+- Logo to heading: `16px` (reduced from 24px)
+- Heading to form: `20px` (reduced from 24px)
+- Between inputs: `12px` (reduced from 16px)
+- Form to button: `20px` (reduced from 24px)
+
+#### Typography
+
+**Heading**:
+```css
+font-size: 28px; /* Reduced from 36px */
+line-height: 1.2;
+margin-bottom: 8px;
+```
+
+**Subheading**:
+```css
+font-size: 14px; /* Same */
+line-height: 1.4;
+```
+
+**Input Labels**:
+```css
+font-size: 14px;
+margin-bottom: 6px;
+```
+
+**Input Text**:
+```css
+font-size: 16px; /* Must be 16px to prevent zoom on iOS */
+```
+
+#### Form Elements
+
+**Input Fields**:
+```css
+height: 48px; /* Increased from 44px for better touch */
+padding: 12px 16px;
+border-radius: 8px;
+font-size: 16px; /* Prevent iOS zoom */
+```
+
+**Submit Button**:
+```css
+height: 52px; /* Increased from 48px */
+width: 100%;
+font-size: 16px;
+border-radius: 8px;
+```
+
+**Links**:
+```css
+min-height: 44px; /* Touch target */
+padding: 8px 0;
+display: inline-block;
+```
+
+**Checkbox**:
+```css
+width: 24px; /* Increased from 20px */
+height: 24px;
+margin-right: 8px;
+```
+
+#### Theme/Language Controls
+
+**Position**:
+```css
+position: fixed;
+top: 16px; /* Reduced from 24px */
+right: 16px;
+z-index: 50;
+```
+
+**Size**:
+```css
+width: 40px;
+height: 40px;
+gap: 8px;
+```
+
+#### Screenshot Layout
+
+*TODO: Add annotated screenshot*
+
+---
+
+### Register Page (`/register`)
+
+**Same as Login with additions**:
+
+#### Password Strength Indicator
+
+**Bars**:
+```css
+height: 4px; /* Reduced from 6px */
+width: 100%;
+gap: 4px;
+border-radius: 2px;
+```
+
+**Text**:
+```css
+font-size: 12px;
+margin-top: 4px;
+```
+
+#### Terms Checkbox
+
+**Hit Area**:
+```css
+min-height: 44px;
+padding: 8px 0;
+```
+
+**Text**:
+```css
+font-size: 13px; /* Slightly smaller */
+line-height: 1.5;
+```
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+### Forgot Password Page (`/forgot-password`)
+
+**Same mobile specs as Login**
+
+#### Success State
+
+**Message Box**:
+```css
+padding: 16px;
+border-radius: 8px;
+margin-bottom: 16px;
+```
+
+#### Screenshot
+
+*TODO: Add screenshot*
+
+---
+
+## 📐 Grid & Spacing
+
+### 8-Point Grid (Mobile Adjusted)
+
+**Base unit**: 4px
+
+**Common spacing**:
+- Extra small: `4px` (spacing-1)
+- Small: `8px` (spacing-2)
+- Medium: `12px` (spacing-3)
+- Default: `16px` (spacing-4)
+- Large: `20px` (spacing-5)
+- Extra large: `24px` (spacing-6)
+
+**Container Padding**:
+- Side padding: `16px` (px-4)
+- Top/bottom: `16px` (py-4)
+
+---
+
+## 🎨 Typography Scale (Mobile)
+
+| Element | Size | Weight | Line Height | Letter Spacing |
+|---------|------|--------|-------------|----------------|
+| H1 | 28px | 800 | 1.2 | -0.02em |
+| H2 | 24px | 700 | 1.25 | -0.01em |
+| H3 | 20px | 600 | 1.3 | 0 |
+| Body | 16px | 400 | 1.5 | 0 |
+| Small | 14px | 400 | 1.5 | 0 |
+| Tiny | 12px | 400 | 1.4 | 0 |
+
+**Important**: All input fields MUST use `font-size: 16px` to prevent iOS auto-zoom.
+
+---
+
+## 🔘 Interactive Elements
+
+### Touch Targets
+
+**Minimum Sizes**:
+- Buttons: `48x48px` or `100% width x 52px`
+- Links: `44px` min-height
+- Checkboxes: `24x24px`
+- Radio buttons: `24x24px`
+- Toggle switches: `52x32px`
+
+**Spacing**:
+- Between buttons: `12px`
+- Button to text: `8px`
+- Icon to text: `8px`
+
+### Button Variations
+
+**Primary Button (Sign In)**:
+```css
+width: 100%;
+height: 52px;
+font-size: 16px;
+font-weight: 600;
+border-radius: 8px;
+```
+
+**Secondary Button** (if needed):
+```css
+width: 100%;
+height: 48px;
+font-size: 15px;
+font-weight: 500;
+```
+
+**Link Button**:
+```css
+min-height: 44px;
+padding: 10px 0;
+display: inline-block;
+```
+
+---
+
+## ⌨️ Virtual Keyboard Handling
+
+### iOS Safari
+
+**Issue**: Keyboard covers bottom of viewport
+
+**Solutions**:
+
+1. **Input Focus**:
+```javascript
+// Scroll input into view
+input.scrollIntoView({ behavior: 'smooth', block: 'center' });
+```
+
+2. **Form Position**:
+```css
+/* Keep submit button visible */
+.form-container {
+ margin-bottom: 300px; /* Space for keyboard */
+}
+```
+
+3. **Viewport Units**:
+```css
+/* Avoid 100vh on mobile */
+min-height: 100dvh; /* Dynamic viewport height */
+```
+
+### Android
+
+**Input Types**:
+```html
+
+
+
+
+```
+
+---
+
+## 🖼️ Images & Assets
+
+### Icon Sizes (Mobile)
+
+| Element | Size | Format |
+|---------|------|--------|
+| Logo | 40x40px | SVG |
+| Form icons | 20x20px | SVG |
+| Success/Error icons | 20x20px | SVG |
+| Menu icons | 24x24px | SVG |
+
+### Image Export
+
+**Density**:
+- Standard: @1x
+- Retina: @2x
+- Super Retina: @3x
+
+**Format**:
+- Icons: SVG (preferred)
+- Photos: WebP or JPEG
+- Transparency: PNG
+
+---
+
+## 🎭 Animations (Mobile)
+
+### Reduced Motion
+
+**Respect User Preference**:
+```css
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.01ms !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+```
+
+### Performance
+
+**Avoid**:
+- Heavy blur effects (< 8px ok)
+- Too many simultaneous animations
+- Animating `width`, `height`, `top`, `left`
+
+**Use**:
+- `transform` (translateY, scale)
+- `opacity`
+- Hardware acceleration: `will-change: transform`
+
+### Transitions
+
+**Fast**:
+```css
+transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
+```
+
+**Normal**:
+```css
+transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
+```
+
+---
+
+## 📊 Performance Targets (Mobile)
+
+### Load Times
+- First Contentful Paint: < 1.5s
+- Time to Interactive: < 2.5s
+- Total page weight: < 500KB
+
+### Lighthouse Scores
+- Performance: ≥ 85
+- Accessibility: ≥ 95
+- Best Practices: ≥ 90
+
+---
+
+## ♿ Mobile Accessibility
+
+### Touch Targets
+- Minimum: `44x44px`
+- Ideal: `48x48px`
+- Spacing: `8px` between targets
+
+### Text Sizing
+- All text scalable (no `font-size: 16px !important`)
+- Test with iOS text size settings
+- Test with Android display size settings
+
+### Screen Readers
+- iOS VoiceOver compatible
+- Android TalkBack compatible
+- Proper heading hierarchy
+- Form labels associated
+
+### Focus Management
+- Visible focus indicators
+- Focus not trapped unintentionally
+- Logical tab order
+
+---
+
+## 🧪 Testing Checklist
+
+### Devices to Test
+
+**iOS**:
+- [ ] iPhone 14 Pro (393x852)
+- [ ] iPhone 14 (390x844)
+- [ ] iPhone SE (375x667)
+
+**Android**:
+- [ ] Samsung Galaxy S21 (360x800)
+- [ ] Google Pixel 7 (412x915)
+
+### Orientations
+- [ ] Portrait (primary)
+- [ ] Landscape (secondary)
+
+### Actions
+- [ ] Form filling with virtual keyboard
+- [ ] Submit form
+- [ ] Navigate between fields (Tab)
+- [ ] Tap all interactive elements
+- [ ] Zoom in/out (pinch)
+- [ ] Scroll form
+- [ ] Theme toggle
+- [ ] Language switcher
+
+### Edge Cases
+- [ ] Long email addresses
+- [ ] Small screen (320px width)
+- [ ] Large text size (iOS settings)
+- [ ] Slow network (3G simulation)
+- [ ] Offline mode
+
+---
+
+## 🐛 Common Mobile Issues & Solutions
+
+### Issue 1: Input Zoom on iOS
+**Problem**: Safari zooms in when focusing input < 16px
+**Solution**: Always use `font-size: 16px` for inputs
+
+### Issue 2: Keyboard Covers Submit Button
+**Problem**: Virtual keyboard hides button
+**Solution**: Add bottom margin or use `scrollIntoView()`
+
+### Issue 3: Touch Targets Too Small
+**Problem**: Users miss buttons
+**Solution**: Minimum `44x44px`, ideally `48x48px`
+
+### Issue 4: Viewport Height Issues
+**Problem**: `100vh` includes browser chrome
+**Solution**: Use `100dvh` (dynamic viewport height)
+
+### Issue 5: Click Delay
+**Problem**: 300ms delay on iOS
+**Solution**: Add ``
+
+---
+
+## 🎨 Mobile-Specific Patterns
+
+### Form Layout
+
+**Stack Vertically**:
+```
+[Logo]
+[Heading]
+[Subheading]
+
+[Email Label]
+[Email Input]
+
+[Password Label]
+[Password Input]
+
+[Remember Me] [Forgot Password]
+
+[Submit Button]
+
+[Sign Up Link]
+```
+
+### Error Messages
+
+**Position**: Below field (not inline)
+**Icon**: Left of text
+**Color**: Red with light background
+**Dismissible**: Tap X to close
+
+### Loading States
+
+**Full Screen Overlay** (for page transitions):
+```css
+position: fixed;
+inset: 0;
+background: rgba(21, 32, 43, 0.8);
+backdrop-filter: blur(4px);
+z-index: 9999;
+```
+
+**Inline** (for button):
+- Show spinner in button
+- Disable form
+- Keep button in place (no layout shift)
+
+---
+
+## 🔗 Related Documentation
+
+- [Tablet Specs](./tablet-specs.md)
+- [Desktop Specs](./desktop-specs.md)
+- [Design System](../../DESIGN_SYSTEM.md)
+- [Auth Mockups](../mockups/auth-login-states.md)
+
+---
+
+**Designer**: [Name]
+**Last Updated**: 2026-01-04
+**Version**: 2.0 (X.ai Minimal Redesign)
diff --git a/apps/web-client/src/docs/ux/flows/auth-login.md b/apps/web-client/src/docs/ux/flows/auth-login.md
new file mode 100644
index 00000000..6061e89a
--- /dev/null
+++ b/apps/web-client/src/docs/ux/flows/auth-login.md
@@ -0,0 +1,393 @@
+# User Flow: Login
+
+> **Goal**: Người dùng đăng nhập thành công vào hệ thống
+
+## 📋 Flow Overview
+
+**Entry Points**:
+- Direct URL: `/login`
+- From landing page
+- After logout
+- After session expiry
+- From protected route redirect
+
+**Exit Points**:
+- Success → Dashboard (`/`)
+- Forgot Password → `/forgot-password`
+- Sign Up → `/register`
+
+---
+
+## 🗺️ Flow Diagram
+
+```
+┌─────────────┐
+│ Entry Point │
+└──────┬──────┘
+ │
+ v
+┌──────────────────────────────┐
+│ Login Page Loads │
+│ - Email input (empty) │
+│ - Password input (empty) │
+│ - Remember me (unchecked) │
+│ - Theme/Language controls │
+└──────┬───────────────────────┘
+ │
+ v
+┌──────────────────────────────┐
+│ User Enters Email │
+│ - Validation on blur │
+│ - Error if invalid format │
+└──────┬───────────────────────┘
+ │
+ v
+┌──────────────────────────────┐
+│ User Enters Password │
+│ - Show/hide toggle │
+│ - Validation on blur │
+└──────┬───────────────────────┘
+ │
+ v
+┌──────────────────────────────┐
+│ User Clicks "Sign In" │
+└──────┬───────────────────────┘
+ │
+ v
+┌──────────────────────────────┐
+│ Client-side Validation │
+│ - Check all fields filled │
+│ - Check valid email format │
+└──────┬───────────────────────┘
+ │
+ ├─ Invalid → Show errors inline
+ │
+ v Valid
+┌──────────────────────────────┐
+│ Show Loading State │
+│ - Disable button │
+│ - Show spinner │
+└──────┬───────────────────────┘
+ │
+ v
+┌──────────────────────────────┐
+│ Send API Request │
+│ POST /api/auth/login │
+└──────┬───────────────────────┘
+ │
+ ├─────────────────┬──────────────────┐
+ │ │ │
+ v Success v Invalid Creds v Server Error
+┌─────────────┐ ┌──────────────────┐ ┌──────────────────┐
+│ Save Token │ │ Show Error: │ │ Show Error: │
+│ Set Cookie │ │ "Invalid email │ │ "Something went │
+│ Update Auth │ │ or password" │ │ wrong" │
+│ State │ │ - Clear password │ │ - Keep form data │
+└──────┬──────┘ │ - Focus email │ │ - Enable retry │
+ │ └──────────────────┘ └──────────────────┘
+ v
+┌─────────────┐
+│ Redirect to │
+│ Dashboard │
+└─────────────┘
+```
+
+---
+
+## 📝 Detailed Steps
+
+### Step 1: Page Load
+**Action**: User lands on `/login`
+
+**UI State**:
+- Clean form with empty fields
+- "Sign In" button enabled
+- Theme toggle (top-right)
+- Language switcher (top-right)
+
+**Technical**:
+- Check if already authenticated → redirect to `/`
+- Load theme preference from localStorage
+- Load language preference from localStorage
+
+---
+
+### Step 2: Email Input
+**Action**: User types email address
+
+**Validation** (on blur):
+- ✅ Required field
+- ✅ Valid email format (`/^[^\s@]+@[^\s@]+\.[^\s@]+$/`)
+
+**Error Messages**:
+- Empty: "Email is required"
+- Invalid: "Please enter a valid email address"
+
+**UI Behavior**:
+- Focus ring: X.ai blue (#1D9BF0)
+- Error: Red border + error text below
+
+---
+
+### Step 3: Password Input
+**Action**: User types password
+
+**Features**:
+- Password visibility toggle (eye icon)
+- Masked by default
+
+**Validation** (on blur):
+- ✅ Required field
+- ✅ Minimum length (8 characters)
+
+**Error Messages**:
+- Empty: "Password is required"
+- Too short: "Password must be at least 8 characters"
+
+---
+
+### Step 4: Remember Me (Optional)
+**Action**: User checks "Remember me"
+
+**Behavior**:
+- If checked: Session persists 30 days
+- If unchecked: Session expires on browser close
+
+---
+
+### Step 5: Form Submission
+**Action**: User clicks "Sign In" button
+
+**Client-side Validation**:
+```typescript
+// Validation rules
+{
+ email: {
+ required: true,
+ pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+ },
+ password: {
+ required: true,
+ minLength: 8
+ }
+}
+```
+
+**If Invalid**:
+- Show all errors
+- Focus first invalid field
+- Don't send API request
+
+**If Valid**:
+- Proceed to API call
+
+---
+
+### Step 6: Loading State
+**UI Changes**:
+- Button shows spinner
+- Button text: "Signing in..."
+- Button disabled
+- Form fields disabled
+
+**Duration**: Until API responds (typically 500ms-2s)
+
+---
+
+### Step 7: API Response Handling
+
+#### ✅ Success (200 OK)
+**API Response**:
+```json
+{
+ "success": true,
+ "data": {
+ "token": "jwt_token_here",
+ "user": {
+ "id": "123",
+ "email": "user@example.com",
+ "name": "John Doe"
+ }
+ }
+}
+```
+
+**Actions**:
+1. Save token to localStorage/cookie
+2. Update auth state (Zustand)
+3. Show success toast (optional)
+4. Redirect to `/` (dashboard)
+
+---
+
+#### ❌ Invalid Credentials (401 Unauthorized)
+**API Response**:
+```json
+{
+ "success": false,
+ "error": {
+ "code": "INVALID_CREDENTIALS",
+ "message": "Invalid email or password"
+ }
+}
+```
+
+**Actions**:
+1. Show error message below form
+2. Clear password field
+3. Focus email field
+4. Keep email value
+5. Enable retry
+
+**Error Display**:
+```
+⚠️ Invalid email or password. Please try again.
+```
+
+---
+
+#### ⚠️ Account Locked (403 Forbidden)
+**API Response**:
+```json
+{
+ "success": false,
+ "error": {
+ "code": "ACCOUNT_LOCKED",
+ "message": "Too many failed attempts. Try again in 15 minutes."
+ }
+}
+```
+
+**Actions**:
+1. Show specific error
+2. Disable form for 15 minutes (optional)
+3. Show countdown timer
+
+---
+
+#### 💥 Server Error (500)
+**API Response**:
+```json
+{
+ "success": false,
+ "error": {
+ "code": "SERVER_ERROR",
+ "message": "Something went wrong. Please try again."
+ }
+}
+```
+
+**Actions**:
+1. Show generic error message
+2. Keep form data
+3. Enable retry button
+
+---
+
+## 🔀 Alternative Paths
+
+### Path A: Forgot Password
+**Trigger**: User clicks "Forgot password?" link
+
+**Action**: Navigate to `/forgot-password`
+
+---
+
+### Path B: Sign Up
+**Trigger**: User clicks "Don't have an account? Sign up" link
+
+**Action**: Navigate to `/register`
+
+---
+
+### Path C: Social Login (Future)
+**Trigger**: User clicks "Continue with Google" button
+
+**Action**:
+1. Open OAuth popup
+2. Handle callback
+3. Same success flow as email/password
+
+---
+
+## ✅ Success Criteria
+
+Flow is successful when:
+- ✅ User is authenticated
+- ✅ Token is stored
+- ✅ User is redirected to dashboard
+- ✅ Dashboard loads with user data
+
+---
+
+## 🧪 Testing Checklist
+
+**Functional Tests**:
+- [ ] Can submit with valid credentials
+- [ ] Cannot submit with empty fields
+- [ ] Cannot submit with invalid email
+- [ ] Error shown for wrong password
+- [ ] Loading state appears during API call
+- [ ] Remember me persists session
+- [ ] Forgot password link works
+- [ ] Sign up link works
+
+**Edge Cases**:
+- [ ] Already authenticated user redirected
+- [ ] Network error handled gracefully
+- [ ] API timeout handled (> 10s)
+- [ ] Special characters in password work
+- [ ] Copy-paste email works
+- [ ] Browser autofill works
+
+**Accessibility**:
+- [ ] Keyboard navigation works (Tab, Enter)
+- [ ] Screen reader announces errors
+- [ ] Focus management correct
+- [ ] Error messages have role="alert"
+
+**Performance**:
+- [ ] Page loads < 1s
+- [ ] API response < 2s
+- [ ] No layout shift during loading
+
+---
+
+## 📱 Responsive Behavior
+
+**Mobile (< 640px)**:
+- Stack form vertically
+- Full-width button
+- Touch-friendly input size (min 44px height)
+- Virtual keyboard doesn't hide submit button
+
+**Tablet (640-1024px)**:
+- Same as mobile, centered
+
+**Desktop (> 1024px)**:
+- Centered form (max-width: 448px)
+- Ample padding around form
+
+---
+
+## 🎨 Figma Prototype
+
+[Add link to Figma prototype here]
+
+---
+
+## 📊 Analytics Events
+
+Track these events:
+- `login_page_viewed`
+- `login_form_submitted`
+- `login_success`
+- `login_failed` (with error code)
+- `forgot_password_clicked`
+- `sign_up_clicked`
+
+---
+
+**Maintained by**: UX Team
+**Last Updated**: 2026-01-04
+**Version**: 2.0 (X.ai Minimal Redesign)
diff --git a/apps/web-client/src/docs/ux/sitemap.md b/apps/web-client/src/docs/ux/sitemap.md
new file mode 100644
index 00000000..e4ab066a
--- /dev/null
+++ b/apps/web-client/src/docs/ux/sitemap.md
@@ -0,0 +1,109 @@
+# GoodGo Web Client - Sitemap
+
+> **Information Architecture** - Cấu trúc tổng quan của ứng dụng
+>
+> Last Updated: 2026-01-04
+
+## 🗺️ Application Structure
+
+```
+GoodGo Web Client
+│
+├── 🔐 Authentication (Unauthenticated)
+│ ├── /login - Login Page
+│ │ ├── Email input
+│ │ ├── Password input
+│ │ ├── Remember me checkbox
+│ │ ├── Forgot password link → /forgot-password
+│ │ └── Sign up link → /register
+│ │
+│ ├── /register - Registration Page
+│ │ ├── Email input
+│ │ ├── Password input (with strength indicator)
+│ │ ├── Confirm password input
+│ │ ├── Terms & conditions checkbox
+│ │ └── Sign in link → /login
+│ │
+│ └── /forgot-password - Password Reset
+│ ├── Email input
+│ ├── Success state (email sent)
+│ └── Back to login link → /login
+│
+├── 🏠 Dashboard (Authenticated) - /
+│ ├── Overview section
+│ ├── Analytics widgets
+│ ├── Quick actions
+│ └── Navigation to other sections
+│
+├── 👤 Profile - /profile
+│ ├── User information
+│ ├── Settings
+│ │ ├── Theme toggle (Light/Dark)
+│ │ ├── Language switcher (EN/VI)
+│ │ └── Other preferences
+│ └── Account security
+│
+└── [Add more sections as they're developed]
+
+```
+
+## 📱 Mobile Navigation
+
+Mobile navigation should include:
+- Hamburger menu icon (top-left or top-right)
+- Collapsible sidebar
+- Bottom navigation bar (optional, for key actions)
+
+## 🎨 Visual Hierarchy
+
+1. **Level 1**: Authentication pages (public)
+2. **Level 2**: Main dashboard (authenticated)
+3. **Level 3**: Feature-specific pages
+4. **Level 4**: Settings & profile
+
+## 🔗 External Links
+
+- Help Center (future)
+- Privacy Policy (future)
+- Terms of Service (future)
+
+## 📝 Navigation Patterns
+
+### Primary Navigation
+- Logo (top-left) → Dashboard
+- Main menu items (horizontal or sidebar)
+- User menu (top-right)
+ - Profile
+ - Settings
+ - Logout
+
+### Secondary Navigation
+- Breadcrumbs (for deep pages)
+- Tabs (for section switching)
+- Back buttons (for flows)
+
+## 🚀 Future Additions
+
+Document new pages/sections here as they're added:
+
+- [ ] [Feature Name] - /route
+- [ ] [Feature Name] - /route
+
+## 🔍 SEO & Meta
+
+Each page should have:
+- Unique title tag
+- Meta description
+- Open Graph tags (for social sharing)
+
+## 📊 Analytics Tracking
+
+Pages to track:
+- All auth pages (login, register, forgot-password)
+- Dashboard landing
+- Conversion funnels (signup → onboarding)
+
+---
+
+**Maintained by**: Design Team
+**Review frequency**: Monthly or when major features added
diff --git a/apps/web-client/src/docs/ux/wireframes/auth-pages-wireframes.md b/apps/web-client/src/docs/ux/wireframes/auth-pages-wireframes.md
new file mode 100644
index 00000000..b81e2342
--- /dev/null
+++ b/apps/web-client/src/docs/ux/wireframes/auth-pages-wireframes.md
@@ -0,0 +1,610 @@
+# Authentication Pages - Wireframes
+
+> **UX Wireframe Documentation**
+>
+> Low và Mid-fidelity wireframes cho 3 trang xác thực
+
+## 📋 Overview
+
+**Pages**: Login, Register, Forgot Password
+**Purpose**: Visual structure trước khi design chi tiết
+**Tools**: Figma, Sketch, or hand-drawn
+**Last Updated**: 2026-01-04
+
+---
+
+## 🎯 Wireframe Levels
+
+### Low-Fidelity (Lo-Fi)
+**Purpose**: Validate layout và information hierarchy
+**Details**: Boxes, lines, placeholder text
+**Colors**: Grayscale only (no brand colors)
+**Time**: Quick sketches (15-30 mins per page)
+
+### Mid-Fidelity (Mid-Fi)
+**Purpose**: Define spacing, sizing, content
+**Details**: Actual text, proper sizing, grid system
+**Colors**: Still grayscale, but more refined
+**Time**: Detailed mockups (1-2 hours per page)
+
+---
+
+## 📄 Page 1: Login
+
+### Low-Fidelity Wireframe
+
+```
+┌─────────────────────────────────────┐
+│ │ Theme/Lang
+│ [App Icon/Logo] │ ◐ EN▼
+│ │
+│ Sign In │
+│ Subtitle text here │
+│ │
+│ Email address │
+│ ┌─────────────────────────────┐ │
+│ │ your@email.com │ │
+│ └─────────────────────────────┘ │
+│ │
+│ Password │
+│ ┌─────────────────────────────┐ │
+│ │ •••••••• 👁 │ │
+│ └─────────────────────────────┘ │
+│ │
+│ ☐ Remember me Forgot password│
+│ │
+│ ┌─────────────────────────────┐ │
+│ │ Sign In │ │
+│ └─────────────────────────────┘ │
+│ │
+│ Don't have an account? Sign up │
+│ │
+└─────────────────────────────────────┘
+
+Annotations:
+- Container: 448px max-width, centered
+- Vertical spacing: 24px between sections
+- Input height: 44px
+- Button height: 48px
+```
+
+**Figma Link**: [Add lo-fi wireframe link]
+
+**Screenshot**:
+
+*TODO: Add wireframe screenshot*
+
+---
+
+### Mid-Fidelity Wireframe
+
+```
+┌────────────────────────────────────────────┐
+│ │ [Theme] [Lang]
+│ ┌────────┐ │
+│ │ [★] │ App Icon │
+│ └────────┘ 56x56px │
+│ │
+│ Sign in to your account │ 36px, Bold
+│ Enter your credentials to access... │ 14px, Gray
+│ │
+│ │
+│ Email address │ 14px label
+│ ┌──────────────────────────────────┐ │
+│ │ you@example.com │ │ 16px text
+│ └──────────────────────────────────┘ │ 44px height
+│ │
+│ │ 16px gap
+│ Password │ 14px label
+│ ┌──────────────────────────────────┐ │
+│ │ •••••••• 👁 │ │ 16px text
+│ └──────────────────────────────────┘ │ 44px height
+│ │
+│ │ 12px gap
+│ ☐ Remember me Forgot password?│ 14px
+│ │
+│ │ 24px gap
+│ ┌──────────────────────────────────┐ │
+│ │ Sign in │ │ 16px, 600 weight
+│ └──────────────────────────────────┘ │ 48px height
+│ │
+│ │ 16px gap
+│ Don't have an account? Sign up │ 14px
+│ ──────────────────── ─────── │ Blue underline
+│ │
+└────────────────────────────────────────────┘
+
+Measurements:
+- Container: max-width 448px, padding 32px
+- Form to edges: 32px padding
+- Label to input: 8px
+- Input to input: 16px
+- Checkbox to link: space-between
+- Button margin-top: 24px
+
+Grid:
+- 8-point grid system
+- Vertical rhythm: 8px base
+
+Typography:
+- H1: 36px, extrabold
+- Subtitle: 14px, regular
+- Labels: 14px, medium
+- Inputs: 16px, regular
+- Button: 16px, semibold
+- Links: 14px, medium
+```
+
+**Figma Link**: [Add mid-fi wireframe link]
+
+**Screenshot**:
+
+*TODO: Add wireframe screenshot*
+
+---
+
+## 📄 Page 2: Register
+
+### Low-Fidelity Wireframe
+
+```
+┌─────────────────────────────────────┐
+│ │ Theme/Lang
+│ [App Icon/Logo] │ ◐ EN▼
+│ │
+│ Create Account │
+│ Subtitle text here │
+│ │
+│ Email address │
+│ ┌─────────────────────────────┐ │
+│ │ your@email.com │ │
+│ └─────────────────────────────┘ │
+│ │
+│ Password │
+│ ┌─────────────────────────────┐ │
+│ │ •••••••• 👁 │ │
+│ └─────────────────────────────┘ │
+│ Strength: [▓▓▓▓░] Strong │
+│ │
+│ Confirm Password │
+│ ┌─────────────────────────────┐ │
+│ │ •••••••• 👁 │ │
+│ └─────────────────────────────┘ │
+│ │
+│ ☐ I agree to Terms & Conditions │
+│ │
+│ ┌─────────────────────────────┐ │
+│ │ Sign Up │ │
+│ └─────────────────────────────┘ │
+│ │
+│ Already have an account? Sign in│
+│ │
+└─────────────────────────────────────┘
+
+Annotations:
+- Password strength: 4-bar indicator
+- Confirm password: validates match
+- Terms checkbox: required
+- Same spacing as login
+```
+
+**Figma Link**: [Add lo-fi wireframe link]
+
+**Screenshot**:
+
+*TODO: Add wireframe screenshot*
+
+---
+
+### Mid-Fidelity Wireframe
+
+```
+┌────────────────────────────────────────────┐
+│ │ [Theme] [Lang]
+│ ┌────────┐ │
+│ │ [★] │ App Icon │
+│ └────────┘ 56x56px │
+│ │
+│ Create your account │ 36px, Bold
+│ Get started with your free account │ 14px, Gray
+│ │
+│ │
+│ Email address │ 14px label
+│ ┌──────────────────────────────────┐ │
+│ │ you@example.com │ │ 16px text
+│ └──────────────────────────────────┘ │ 44px height
+│ │
+│ │ 16px gap
+│ Password │ 14px label
+│ ┌──────────────────────────────────┐ │
+│ │ •••••••• 👁 │ │ 16px text
+│ └──────────────────────────────────┘ │ 44px height
+│ │
+│ Password strength │ 12px gray
+│ ┌──┬──┬──┬──┐ │ 4px height bars
+│ │▓▓│▓▓│▓▓│░░│ Strong │ Green text
+│ └──┴──┴──┴──┘ │
+│ │ 12px gap
+│ Confirm Password │ 14px label
+│ ┌──────────────────────────────────┐ │
+│ │ •••••••• 👁 │ │ 16px text
+│ └──────────────────────────────────┘ │ 44px height
+│ │
+│ │ 16px gap
+│ ☐ I agree to Terms of Service and │ 14px
+│ Privacy Policy │ Blue links
+│ │
+│ │ 24px gap
+│ ┌──────────────────────────────────┐ │
+│ │ Create Account │ │ 16px, 600 weight
+│ └──────────────────────────────────┘ │ 48px height
+│ │
+│ │ 16px gap
+│ Already have an account? Sign in │ 14px
+│ ────────────────────────── ─────── │ Blue underline
+│ │
+└────────────────────────────────────────────┘
+
+Password Strength States:
+- Weak: 1 bar (Red)
+- Fair: 2 bars (Orange)
+- Good: 3 bars (Amber)
+- Strong: 4 bars (Green)
+
+Validation:
+- Email: valid format
+- Password: min 8 chars, 1 uppercase, 1 number
+- Confirm: matches password
+- Terms: must be checked
+```
+
+**Figma Link**: [Add mid-fi wireframe link]
+
+**Screenshot**:
+
+*TODO: Add wireframe screenshot*
+
+---
+
+## 📄 Page 3: Forgot Password
+
+### Low-Fidelity Wireframe
+
+```
+┌─────────────────────────────────────┐
+│ │ Theme/Lang
+│ [App Icon/Logo] │ ◐ EN▼
+│ │
+│ Reset Password │
+│ Subtitle text here │
+│ │
+│ Email address │
+│ ┌─────────────────────────────┐ │
+│ │ your@email.com │ │
+│ └─────────────────────────────┘ │
+│ │
+│ ┌─────────────────────────────┐ │
+│ │ Send Reset Link │ │
+│ └─────────────────────────────┘ │
+│ │
+│ ← Back to Sign in │
+│ │
+└─────────────────────────────────────┘
+
+Success State:
+┌─────────────────────────────────────┐
+│ [✓ Icon] │
+│ │
+│ Check your email │
+│ We sent reset link to... │
+│ │
+│ [Open Email App] │
+│ │
+│ Send to another email │
+│ ← Back to Sign in │
+└─────────────────────────────────────┘
+```
+
+**Figma Link**: [Add lo-fi wireframe link]
+
+**Screenshot**:
+
+*TODO: Add wireframe screenshot*
+
+---
+
+### Mid-Fidelity Wireframe
+
+**Initial State**:
+```
+┌────────────────────────────────────────────┐
+│ │ [Theme] [Lang]
+│ ┌────────┐ │
+│ │ [★] │ App Icon │
+│ └────────┘ 56x56px │
+│ │
+│ Reset your password │ 36px, Bold
+│ Enter your email to receive a... │ 14px, Gray
+│ │
+│ │
+│ Email address │ 14px label
+│ ┌──────────────────────────────────┐ │
+│ │ you@example.com │ │ 16px text
+│ └──────────────────────────────────┘ │ 44px height
+│ │
+│ │ 24px gap
+│ ┌──────────────────────────────────┐ │
+│ │ Send Reset Link │ │ 16px, 600 weight
+│ └──────────────────────────────────┘ │ 48px height
+│ │
+│ │ 16px gap
+│ ← Back to Sign in │ 14px, blue
+│ │
+└────────────────────────────────────────────┘
+```
+
+**Success State**:
+```
+┌────────────────────────────────────────────┐
+│ │ [Theme] [Lang]
+│ │
+│ ┌────────┐ │
+│ │ [✓] │ Success Icon │
+│ └────────┘ 56x56px, Green │
+│ │
+│ Check your email │ 36px, Bold
+│ We've sent a password reset link │ 14px, Gray
+│ to your@example.com │
+│ │
+│ │ 24px gap
+│ ┌──────────────────────────────────┐ │
+│ │ Open Email App │ │ 16px, Blue button
+│ └──────────────────────────────────┘ │ 48px height
+│ │
+│ │ 12px gap
+│ Didn't receive email? Resend │ 14px
+│ │
+│ │ 16px gap
+│ ← Back to Sign in │ 14px, blue
+│ │
+└────────────────────────────────────────────┘
+
+Notes:
+- Success icon: Green checkmark circle
+- Email shown: User's entered email
+- Open Email App: Deep link to mail client
+- Resend link: Available after 60 seconds
+```
+
+**Figma Link**: [Add mid-fi wireframe link]
+
+**Screenshot**:
+
+*TODO: Add wireframe screenshot*
+
+---
+
+## 📐 Design Grid & Spacing
+
+### 8-Point Grid System
+
+**Base Unit**: 8px
+
+**Vertical Rhythm**:
+- Extra small: 4px (0.5 unit)
+- Small: 8px (1 unit)
+- Medium: 16px (2 units)
+- Large: 24px (3 units)
+- Extra large: 32px (4 units)
+- Section: 48px (6 units)
+
+**Horizontal Spacing**:
+- Container padding: 32px (4 units)
+- Mobile padding: 16px (2 units)
+- Element spacing: 8px, 12px, 16px, 24px
+
+### Layout Grid
+
+**Desktop (> 1024px)**:
+- Max-width: 448px
+- Centered in viewport
+- Padding: 32px
+
+**Tablet (640-1024px)**:
+- Max-width: 448px
+- Centered
+- Padding: 24px
+
+**Mobile (< 640px)**:
+- Full width
+- Padding: 16px
+- Adjust spacing (reduce by 25%)
+
+---
+
+## 🎨 Wireframe Conventions
+
+### Visual Elements
+
+**Boxes**:
+- Rectangle: Input field, button, container
+- Rounded rectangle: Button (8px radius)
+- Circle: Icon, avatar
+- Line: Separator
+
+**Text**:
+- UPPERCASE: Labels, headings
+- Mixed case: Body text, placeholder
+- Lorem ipsum: Placeholder content
+- Actual copy: Mid-fi onwards
+
+**Icons**:
+- [X]: Close/remove
+- [?]: Help/info
+- [⚙]: Settings
+- [★]: App icon placeholder
+- [👁]: Show/hide password
+- [✓]: Success, checkmark
+- [⚠]: Warning
+- [ⓘ]: Information
+
+**Interaction States**:
+- Dotted line: Focus state
+- Gray background: Disabled state
+- Bold outline: Active/selected state
+
+---
+
+## 📱 Responsive Wireframe Variants
+
+### Mobile Wireframe (< 640px)
+
+**Changes from Desktop**:
+- Full-width layout
+- Reduced padding (16px)
+- Smaller heading (28px)
+- Adjusted spacing (reduce 25%)
+- Stack all elements vertically
+- Theme/Lang controls: Smaller (36px)
+
+**Screenshot**:
+
+*TODO: Add mobile wireframe*
+
+---
+
+### Tablet Wireframe (640-1024px)
+
+**Changes from Desktop**:
+- Same max-width (448px)
+- Centered layout
+- Slightly adjusted padding (24px)
+
+---
+
+## 🔄 User Flow Integration
+
+### Wireframe Flow Diagram
+
+```
+┌──────────┐
+│ Login │────────────┐
+│ Page │ │
+└────┬─────┘ │
+ │ ▼
+ │ ┌───────────┐
+ │ │ Forgot │
+ │ │ Password │
+ │ └───────────┘
+ │
+ ▼
+┌──────────┐
+│ Register │
+│ Page │
+└──────────┘
+
+Transitions:
+- Login → Forgot: "Forgot password?" link
+- Login → Register: "Sign up" link
+- Forgot → Login: "Back to sign in" link
+- Register → Login: "Sign in" link
+```
+
+### Page States
+
+**Login**:
+1. Default (empty form)
+2. Typing (with values)
+3. Error (validation failed)
+4. Loading (submitting)
+5. Success (redirect)
+
+**Register**:
+1. Default (empty form)
+2. Typing (with password strength)
+3. Error (validation failed)
+4. Loading (submitting)
+5. Success (redirect or confirm email)
+
+**Forgot Password**:
+1. Default (empty form)
+2. Typing (email entered)
+3. Loading (sending)
+4. Success (email sent confirmation)
+5. Error (email not found)
+
+---
+
+## ✅ Wireframe Review Checklist
+
+### Content
+- [ ] All necessary fields included
+- [ ] Labels clear and descriptive
+- [ ] CTAs (Call-to-Actions) obvious
+- [ ] Error states considered
+- [ ] Success states designed
+- [ ] Loading states indicated
+
+### Layout
+- [ ] Visual hierarchy clear
+- [ ] Important elements prominent
+- [ ] Spacing consistent
+- [ ] Alignment proper
+- [ ] Grid system applied
+- [ ] Responsive variants created
+
+### Interaction
+- [ ] Touch targets adequate (44px+)
+- [ ] Links distinguishable
+- [ ] Form flow logical
+- [ ] Error messages positioned well
+- [ ] Focus states indicated
+
+### Accessibility
+- [ ] Heading hierarchy correct (H1, H2, H3)
+- [ ] Form labels associated with inputs
+- [ ] Focus order logical
+- [ ] Color not sole indicator
+- [ ] Alt text for images/icons (noted)
+
+---
+
+## 🔗 Next Steps
+
+After wireframes approved:
+
+1. **Create High-Fidelity Mockups**:
+ - Apply X.ai color palette
+ - Add glassmorphism effects
+ - Finalize typography
+ - Design all states
+ - See: [Auth Mockups](../mockups/auth-login-states.md)
+
+2. **Build Interactive Prototype**:
+ - Link pages in Figma
+ - Add transitions
+ - Test user flow
+ - Get stakeholder feedback
+
+3. **Handoff to Development**:
+ - Export assets
+ - Create specs
+ - Write implementation guide
+ - See: [Implementation Guide](../../implementation/auth-pages-implementation.md)
+
+---
+
+## 📚 Related Documentation
+
+- [Login User Flow](../flows/auth-login.md)
+- [Sitemap](../sitemap.md)
+- [High-Fi Mockups](../../ui/mockups/auth-login-states.md)
+- [Mobile Specs](../../ui/responsive/mobile-specs.md)
+- [Design System](../../DESIGN_SYSTEM.md)
+
+---
+
+**Created by**: UX Team
+**Last Updated**: 2026-01-04
+**Version**: 2.0 (X.ai Minimal Redesign)
+**Status**: Ready for High-Fi Design