# 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
