# Design System

> Last Verified: 2026-02-17 | Owner: John

# Drop — Design System

## UI Source of Truth

**Location:** `/Users/makinja/ALAI/products/Drop/mockups/figma-make-export/`

**Technology:** Vite + React components exported from Figma Make

**Screens (10 total):**
1. Login
2. Onboarding
3. Dashboard
4. SendMoney
5. BankAccounts
6. TransactionHistory
7. ScanQR
8. Profile
9. Notifications
10. MerchantDashboard

**RULE:** Always read the corresponding Make component BEFORE implementing any UI change.

## Brand Identity

### Logo
- **Shape:** Green rounded square
- **Icon:** White $ symbol (circular arrows indicating money flow)
- **Accent:** Gold/orange dot top-right
- **Component:** `@/components/drop-logo.tsx`

### Colors
- **Primary:** Green (payment apps = trust + money)
- **Accent:** Gold/orange (premium feel)
- **Neutral:** Grays for text, backgrounds
- **Error:** Red for warnings, failures
- **Success:** Green confirmation states

### Typography
- **Font:** Inter (system fallback: -apple-system, SF Pro)
- **Headings:** Semi-bold (600)
- **Body:** Regular (400)
- **Hierarchy:** Clear size scale (H1 32px → Body 16px)

### Spacing
- **Base unit:** 4px
- **Scale:** 4, 8, 12, 16, 24, 32, 48, 64
- **Consistency:** All margins/padding follow scale

## Component Library

### Buttons
- **Primary:** Green background, white text (CTAs)
- **Secondary:** White background, green border (cancel, back)
- **Disabled:** Gray, reduced opacity
- **States:** Hover, active, loading

### Forms
- **Input fields:** Border, label, error state
- **Validation:** Real-time feedback, Norwegian error messages
- **Autocomplete:** Country selection, bank selection

### Cards
- **Transaction card:** Amount, date, status, merchant/recipient
- **Account card:** Bank logo, IBAN (masked), balance
- **Merchant card:** QR code, merchant details

### Navigation
- **Top bar:** Logo, profile icon
- **Bottom nav (mobile):** Home, Send, Scan, History, Profile
- **Breadcrumbs (desktop):** For deep navigation

## Figma Links

### Main Design File
*Note: Figma link should be added here when available*

### Make Export Documentation
See Figma Make export at `/Users/makinja/ALAI/products/Drop/mockups/figma-make-export/README.md`

## Design Tokens

### Future Work
- Export design tokens from Figma using Tokens Studio
- Generate CSS variables, Tailwind config
- Automate token sync pipeline

## Accessibility

- **WCAG 2.1 AA compliance** — See drop-accessibility-spec.md
- **Keyboard navigation** — Full tab support
- **Screen reader** — ARIA labels, semantic HTML
- **Color contrast** — Minimum 4.5:1 for text

## Responsive Design

- **Mobile-first** — Primary target is mobile users
- **Breakpoints:**
  - Mobile: <640px
  - Tablet: 640px-1024px
  - Desktop: >1024px
- **Touch targets:** Minimum 44x44px for mobile

## Animation

- **Micro-interactions** — Button presses, form validation
- **Transitions:** Smooth page navigation (300ms)
- **Loading states:** Skeleton screens, spinners
- **Success feedback:** Checkmarks, confetti on payment success