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): 
 
 Login 
 Onboarding 
 Dashboard 
 SendMoney 
 BankAccounts 
 TransactionHistory 
 ScanQR 
 Profile 
 Notifications 
 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