@nebulaai/lumina-ui/design_guidelines.md

Enterprise-grade glass morphism UI components with neural-inspired design system

# Premium Dark Glass Notepad Design Guidelines

## Design Approach
**Reference-Based Approach**: Inspired by Apple's iOS/macOS translucent design language, specifically the glass morphism aesthetic found in macOS Big Sur and iOS control panels. This premium utility-focused application emphasizes sophisticated materials, depth, and elegant typography for an immersive writing experience.

## Core Design Elements

### A. Color Palette
**Dark Glass Mode Only:**
- Primary Text: 240 6% 95% - high contrast white for main content
- Secondary Text: 240 5% 70% - muted text for metadata and labels
- Tertiary Text: 240 4% 50% - subtle text for timestamps and hints
- Glass Background: 240 8% 8% with 40% opacity - main translucent surfaces
- Deep Background: 240 12% 4% - solid backdrop behind glass elements
- Surface Glass: 240 10% 12% with 60% opacity - elevated glass panels
- Accent Glow: 212 100% 65% - electric blue for interactive highlights
- Success Glow: 142 80% 55% - emerald green for confirmations
- Border Shimmer: 240 6% 20% with 30% opacity - subtle glass borders

### B. Typography
- **Primary Font**: SF Pro Display (fallback: -apple-system, Inter)
- **Body Font**: SF Pro Text for optimal readability
- **Code**: SF Mono for monospace content
- **Weight Hierarchy**: 300 (light), 400 (regular), 500 (medium), 600 (semibold)
- **Sizes**: 28px (large), 20px (heading), 16px (body), 14px (caption), 12px (micro)
- **Line Height**: 1.5 for body text, 1.3 for headings

### C. Layout System
**Spacing Primitives**: Tailwind units of 3, 4, 6, and 8
- Fine spacing: p-3, m-3 (12px) - tight component spacing
- Standard spacing: p-4, m-4 (16px) - default element spacing  
- Section spacing: p-6, m-6 (24px) - between major sections
- Large spacing: p-8, m-8 (32px) - generous padding for focus areas

**Glass Panel Structure**:
- Sidebar: 320px width with backdrop-blur and rounded corners
- Editor: Centered glass panel with max-width 900px
- Border radius: 16px for major panels, 12px for components
- Glass thickness: 2px subtle borders with inner glow

### D. Component Library

**Glass Navigation**:
- Translucent sidebar with frosted background blur
- Floating search bar with inner glow focus state
- Note list with glass card hover effects
- Active states with accent glow and subtle scale transform

**Premium Editor**:
- Full-height glass writing surface with backdrop blur
- Floating glass toolbar with morphing rounded corners
- Auto-save indicator with pulsing success glow
- Word count in glass bubble with subtle shadow

**Glass Buttons**:
- Primary: Glass surface with accent glow border and inner light
- Secondary: Outline glass with shimmering border
- Ghost: Transparent with hover glass effect
- All buttons feature smooth scale and glow transitions

**Translucent Forms**:
- Input fields with glass backgrounds and glowing focus rings
- Placeholder text with gentle fade-in animation
- Search with animated magnifying glass and glow trail
- Consistent 12px border radius with inner highlights

**Elevated Displays**:
- Note cards with layered glass depth and subtle float
- Metadata in glass badges with soft shadows
- Preview text with elegant fade masks
- Drag handles with tactile glass texture

**Glass Overlays**:
- Modal dialogs with heavy backdrop blur and glass panels
- Toast notifications with sliding glass animation
- Context menus with frosted glass and soft shadows
- Tooltips in glass bubbles with arrow highlights

### E. Visual Treatments & Materials

**Glass Morphism Effects**:
- Backdrop filter blur: 20px for main surfaces, 40px for overlays
- Box shadows: Multi-layered with colored glows and depth
- Inner shadows for pressed/inset glass feeling
- Gradient borders with shimmer effects on interactive elements

**Lighting & Depth**:
- Subtle inner glow on focus states using accent color
- Ambient lighting gradients from top-left corner
- Reflection highlights on glass surfaces
- Soft drop shadows with colored tints

**Interaction Refinements**:
- Smooth spring animations (0.3s cubic-bezier ease)
- Gentle scale transforms on press (0.98)
- Glow pulse animations for notifications
- Morphing glass shapes during state transitions
- Haptic-style feedback with subtle glow bursts

### Key Design Principles
1. **Premium Materials**: Every surface feels like refined glass with depth
2. **Sophisticated Lighting**: Ambient glows and realistic light behavior  
3. **Fluid Motion**: Smooth, organic transitions that feel natural
4. **Depth Hierarchy**: Clear visual layers through glass opacity and blur
5. **Focused Elegance**: Minimal distraction with maximum visual refinement

This design creates a luxurious, immersive writing environment that leverages advanced CSS techniques to achieve true glass morphism aesthetics while maintaining exceptional usability and performance.