# LangToLang v1.5.1 - Visual Design Guide

## 📱 Menu Bar Design

```
┌──────────────────────────────────┐
│ ✓ Enabled                        │
├──────────────────────────────────┤
│ Day                              │
│ Week                         ✓   │
│ Month                            │
│ Year                             │
├──────────────────────────────────┤
│   47 conversions                 │
│   1,284 characters               │
│   → Hebrew: 28                   │
│   → English: 19                  │
├──────────────────────────────────┤
│ ⌨️ U.S. ↔ Hebrew                 │
├──────────────────────────────────┤
│ ⚙️ Preferences…              ⌘,  │
├──────────────────────────────────┤
│ ✉️ Feedback…                     │
│ ℹ️ About…                        │
├──────────────────────────────────┤
│ ⏻ Quit                       ⌘Q  │
└──────────────────────────────────┘
```

### Features:
- ✅ Direct clickable period selection
- ✅ Checkmark shows current period
- ✅ Minimal SF Symbol icons
- ✅ Stats display inline
- ✅ Clean, professional look

---

## 🖥️ Preferences Window

### Tab Structure
```
┌─────────────────────────────────────────────────┐
│           ⚙️ Preferences                        │
├─────────────────────────────────────────────────┤
│  [⚙️ General] [⚒️ Advanced]                      │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ ⌨️ Keyboards                            │   │
│  │  Select keyboards to convert between    │   │
│  │  ☑ U.S.                                 │   │
│  │  ☑ Hebrew                               │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ ⌘ Hotkey                                │   │
│  │  Press this combination to convert      │   │
│  │  [ Ctrl + Shift + Space ]               │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ ⌨️🔄 Keyboard Switching                  │   │
│  │  ☑ Auto-switch keyboard after conversion│   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ ⏻ Startup                               │   │
│  │  ☑ Start at login                       │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
└─────────────────────────────────────────────────┘
```

### Advanced Tab
```
┌─────────────────────────────────────────────────┐
│           ⚙️ Preferences                        │
├─────────────────────────────────────────────────┤
│  [⚙️ General] [⚒️ Advanced]                      │
├─────────────────────────────────────────────────┤
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ 📱 App Blacklist                        │   │
│  │  Disable conversion in specific apps    │   │
│  │                                         │   │
│  │  📱 Slack                          ❌   │   │
│  │  📱 1Password                      ❌   │   │
│  │                                         │   │
│  │  ───────────────────────────────────    │   │
│  │  [➕ Blacklist Figma]                  │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ 🐞 Debug                                │   │
│  │  ☐ Show debug alerts                   │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │ 🔒 Privacy                              │   │
│  │  All conversion happens locally...      │   │
│  │  [View Full Privacy Policy]             │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
└─────────────────────────────────────────────────┘
```

**Size:** 600 x 650 px  
**Navigation:** Click tabs to switch  
**Benefits:** 
- No confusing disclosure groups
- All settings properly sized
- Easy to navigate
- Follows Apple design patterns

---

## ✉️ Feedback Form

```
┌──────────────────────────────────────────────┐
│  ✉️ Send Feedback                            │
├──────────────────────────────────────────────┤
│                                              │
│  Name (optional)                             │
│  [                                       ]   │
│                                              │
│  Email (optional, if you want a reply)       │
│  [                                       ]   │
│                                              │
│  Type                                        │
│  [💡Feature] [🐞Bug] [❓Question] [💬Other] │
│         ↑ Selected by default                │
│                                              │
│  Your Message                                │
│  ┌──────────────────────────────────────┐   │
│  │                                      │   │
│  │                                      │   │
│  │                                      │   │
│  │                                      │   │
│  └──────────────────────────────────────┘   │
│                                              │
│  [Cancel]                          [Send]    │
│                                        ↑     │
│                                   Prominent  │
└──────────────────────────────────────────────┘
```

**Features:**
- ✅ Opens with "Feature Request" selected
- ✅ Left-aligned content
- ✅ Minimal SF Symbol icons
- ✅ Segmented picker for type
- ✅ Prominent "Send" button

**Icons:**
- Feature Request: 💡 (lightbulb)
- Bug Report: 🐞 (ladybug)
- Question: ❓ (questionmark.circle)
- Other: 💬 (bubble.left)

---

## ℹ️ About Window

```
┌────────────────────────────────────────────────┐
│                                                │
│               ⌨️                               │
│            LangToLang                          │
│         Version 1.5.1 (1)                      │
│                                                │
│    ⭐ Early Adopter - Free Forever! ⭐         │
│                                                │
│  Convert text between keyboard layouts...      │
│                                                │
├────────────────────────────────────────────────┤
│  [About] [Credits] [Uninstall] [What's New]    │
├────────────────────────────────────────────────┤
│                                                │
│  Tab content appears here                      │
│  (scrollable, 300px height)                    │
│                                                │
│                                                │
│                                                │
│                                                │
├────────────────────────────────────────────────┤
│  [Close]        [Send Feedback] [Check Updates]│
│                                          ↑      │
│                                     All visible │
└────────────────────────────────────────────────┘
```

**Size:** 550 x 650 px (increased from 600)  
**Footer Fix:** Added bottom padding so buttons fully visible  
**Integration:** "Send Feedback" actually opens Feedback window

---

## 🎨 Design System

### Colors
```
Primary:       System Accent Color
Secondary:     System Secondary Label
Warning:       Orange (.orange)
Destructive:   Red (.red)
Success:       Green (.green)
```

### Icons (SF Symbols)
```
Preferences:   gearshape
Feedback:      envelope
About:         info.circle
Quit:          power
Keyboard:      keyboard
Hotkey:        command
Startup:       power
Switching:     arrow.triangle.swap
Blacklist:     app.badge.checkmark
Debug:         ladybug
Privacy:       lock.shield
Advanced:      slider.horizontal.3
```

### Spacing
```
Window Padding:     20px
Section Spacing:    20-24px
GroupBox Padding:   12px
Element Spacing:    8-12px
```

### Typography
```
Title:         .title2.bold()
Section:       .headline
Body:          .body
Help Text:     .caption
Secondary:     .secondary color
```

### Button Styles
```
Primary Action:    .borderedProminent
Secondary Action:  .bordered
Destructive:       .plain with red color
Link:              .link
```

---

## ✅ Consistency Checklist

### Icons
- [ ] All SF Symbols (no emojis, no images)
- [ ] One color (system default)
- [ ] Solid shapes (not filled unless needed)
- [ ] Same family throughout app

### Layout
- [ ] Tabs for multi-section interfaces
- [ ] GroupBox for settings sections
- [ ] Labels for section headers
- [ ] Consistent padding (12px in groups)

### Typography
- [ ] Headlines for sections
- [ ] Captions for help text
- [ ] Body for main content
- [ ] Secondary color for less important info

### Interactions
- [ ] Prominent buttons for primary actions
- [ ] Bordered buttons for secondary actions
- [ ] Disabled states for invalid actions
- [ ] Keyboard shortcuts where appropriate

---

## 🎯 Apple Design Compliance

This design follows:
- ✅ macOS Human Interface Guidelines
- ✅ SF Symbols best practices
- ✅ Native SwiftUI patterns
- ✅ Consistent spacing and sizing
- ✅ Proper button hierarchy
- ✅ Accessibility considerations
- ✅ System color usage
- ✅ Native control styles

---

## 📐 Window Sizes

```
Menu Bar:       Variable (auto-sized by system)
Preferences:    600 x 650
Feedback:       500 x 500
About:          550 x 650
First Launch:   (existing size, unchanged)
```

---

**This is the design standard for all of LangToLang!** 🎨

