Skip to main content

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

  • 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

Main Design File

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

No comments to display

Back to top