# 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
![Default State](../../../public/design/mockups/login-default.png)
*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
![Hover States](../../../public/design/mockups/login-hover.png)
*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
![Focus States](../../../public/design/mockups/login-focus.png)
*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
![Typing State](../../../public/design/mockups/login-typing.png)
*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
![Error States](../../../public/design/mockups/login-error.png)
*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
![Loading State](../../../public/design/mockups/login-loading.png)
*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
![Success State](../../../public/design/mockups/login-success.png)
*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
![Disabled State](../../../public/design/mockups/login-disabled.png)
*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**:
![Mobile View](../../../public/design/mockups/login-mobile.png)
*TODO: Add screenshot*

---

### Tablet (640px - 1024px)

**Changes**:
- Container: Centered, same max-width (448px)
- Similar to desktop

**Screenshot**:
![Tablet View](../../../public/design/mockups/login-tablet.png)
*TODO: Add screenshot*

---

### Desktop (> 1024px)

**Changes**: Default state as described above

**Screenshot**:
![Desktop View](../../../public/design/mockups/login-desktop.png)
*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**:
![Light Theme](../../../public/design/mockups/login-light.png)
*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)
