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

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

.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

.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 or Heroicons

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