admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c9894c5e9daeaa107e337a03e7a51e0973e81532
pos-system/apps/web-client/src/docs/ui/MOODBOARD.md

16 KiB
Raw Blame History

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

/* 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

/* 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

/* 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

Inspiration Sources

Guidelines

Learning

📝 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

Created by: Design Team Last Updated: 2026-01-04 Version: 2.0 (X.ai Minimal) Status: ✅ Approved & Active

Reference in New Issue View Git Blame Copy Permalink