uzdb/doc/design-system.md

# uzdb Design System

## Overview
uzdb is a lightweight database management tool inspired by DBeaver and Navicat, built with Wails (Go + React). This document defines the visual design language and component system.

---

## Color Palette

### Primary Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--primary` | `#3b82f6` | Main actions, active states, links |
| `--primary-hover` | `#2563eb` | Hover states |
| `--primary-active` | `#1d4ed8` | Active/pressed states |

### Semantic Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--success` | `#10b981` | Successful operations, connected status |
| `--warning` | `#f59e0b` | Warnings, pending states |
| `--error` | `#ef4444` | Errors, disconnected status, destructive actions |
| `--info` | `#06b6d4` | Informational messages |

### Neutral Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--bg-primary` | `#ffffff` | Main background |
| `--bg-secondary` | `#f8fafc` | Secondary backgrounds, sidebars |
| `--bg-tertiary` | `#f1f5f9` | Cards, panels |
| `--border` | `#e2e8f0` | Borders, dividers |
| `--text-primary` | `#0f172a` | Primary text |
| `--text-secondary` | `#64748b` | Secondary text, labels |
| `--text-muted` | `#94a3b8` | Placeholder text, hints |

### Database Type Colors
| Token | Value | Usage |
|-------|-------|-------|
| `--db-mysql` | `#00758f` | MySQL connections |
| `--db-postgresql` | `#336791` | PostgreSQL connections |
| `--db-sqlite` |#003b57` | SQLite connections |
| `--db-mariadb` | `#003541` | MariaDB connections |

---

## Typography

### Font Family
```css
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
```

### Font Sizes
| Token | Size | Line Height | Usage |
|-------|------|-------------|-------|
| `--text-xs` | 12px | 16px | Captions, hints |
| `--text-sm` | 14px | 20px | Body text, labels |
| `--text-base` | 16px | 24px | Default text |
| `--text-lg` | 18px | 28px | Section titles |
| `--text-xl` | 20px | 28px | Panel titles |
| `--text-2xl` | 24px | 32px | Modal titles |

---

## Spacing

### Base Scale (4px grid)
| Token | Value |
|-------|-------|
| `--space-1` | 4px |
| `--space-2` | 8px |
| `--space-3` | 12px |
| `--space-4` | 16px |
| `--space-5` | 20px |
| `--space-6` | 24px |
| `--space-8` | 32px |
| `--space-10` | 40px |
| `--space-12` | 48px |

---

## Layout

### Application Shell
```
┌─────────────────────────────────────────────────────────────┐
│  Menu Bar (File, Edit, View, Tools, Help)                   │
├─────────────────────────────────────────────────────────────┤
│  Toolbar (Quick actions, search)                            │
├──────────┬──────────────────────────────────────────────────┤
│          │                                                  │
│  Sidebar │              Main Content Area                   │
│  (200px) │              (Query editor,                      │
│          │               data grid,                         │
│  - Conn  │               schema viewer)                     │
│  - DBs   │                                                  │
│  - Tables│                                                  │
│          │                                                  │
├──────────┴──────────────────────────────────────────────────┤
│  Status Bar (Connection info, query time, row count)        │
└─────────────────────────────────────────────────────────────┘
```

### Breakpoints
- **Sidebar collapsible**: < 768px width
- **Responsive panels**: Stack vertically on small screens

---

## Components

### Button Styles
```css
.btn-primary {
  background: var(--primary);
  color: white;
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
  font-size: var(--text-sm);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: 6px;
}
```

### Input Fields
```css
.input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.input:focus {
  outline: 2px solid var(--primary);
  border-color: transparent;
}
```

### Data Grid
- Row height: 36px
- Header height: 40px
- Cell padding: 8px 12px
- Border: 1px solid var(--border)
- Alternating row colors for readability

### Tabs
- Active tab: Primary color underline (2px)
- Inactive tab: Transparent background
- Tab height: 36px

---

## Icons

Use [Lucide Icons](https://lucide.dev/) or [Heroicons](https://heroicons.com/)

Common icons:
- `database` - Connection/database
- `table` - Table view
- `search` - Search/query
- `play` - Execute query
- `download` - Export data
- `upload` - Import data
- `settings` - Settings/preferences
- `plus` - Add new
- `trash-2` - Delete

---

## Interactions

### Hover States
- Buttons: Darken background by 10%
- Links: Underline + primary color
- Table rows: Background `--bg-tertiary`

### Focus States
- All interactive elements: 2px primary outline
- Visible focus ring for keyboard navigation

### Loading States
- Spinner for async operations
- Skeleton screens for data loading
- Disabled state during execution

### Transitions
- Duration: 150ms
- Easing: `ease-in-out`
- Properties: color, background-color, transform

---

## Accessibility

### Requirements
- Minimum contrast ratio: 4.5:1 (AA standard)
- Focus indicators on all interactive elements
- Keyboard navigation support
- Screen reader friendly labels
- Resizable text up to 200%

### Keyboard Shortcuts
| Action | Shortcut |
|--------|----------|
| Execute query | Ctrl/Cmd + Enter |
| New connection | Ctrl/Cmd + N |
| Save | Ctrl/Cmd + S |
| Find | Ctrl/Cmd + F |
| Close tab | Ctrl/Cmd + W |