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