# Design System Reference

# Drop Design System Reference

Source of truth for all builders. Based on Alem's approved Stitch design.

## Colors

| Token | Hex | Usage |
|-------|-----|-------|
| Primary | `#0B6E35` | Buttons, links, active states, brand |
| Primary hover | `#095C2C` | Button hover |
| Accent/Gold | `#D4A017` | Badges, highlights, gold touches |
| Page bg | `#EEEEEE` | Full-page background |
| Card bg | `#FFFFFF` | Cards, elevated surfaces |
| Off-white | `#FAFCF8` | Alternative light bg |
| Text primary | `#1A1A1A` | Headings, important text |
| Text body | `#374151` | Body paragraphs |
| Text muted | `#6B7280` | Labels, secondary text |
| Text light | `#9CA3AF` | Placeholders, captions, dividers |
| Border | `#E5E7EB` | Card borders, input borders, dividers |
| Input bg | `#F9FAFB` | Input field backgrounds |
| Error | `#EF4444` | Error text |
| Error bg | `#EF4444/10` | Error message background |
| Success | `#16A34A` | Success states |
| Warning | `#D97706` | Pending states |

## Typography

- **Brand/Display:** `font-[family-name:var(--font-fraunces)]` — serif, for "drop" wordmark and hero text
- **Body/UI:** Default (DM Sans loaded in layout.tsx) — all UI text
- **Sizes:** text-3xl (brand), text-xl (page title), text-base (body), text-sm (form labels, body small), text-xs (captions, links)

## Component Patterns (Tailwind classes)

### Page Layout
```
<div className="flex min-h-screen flex-col items-center justify-center bg-[#EEEEEE] px-6">
  <div className="w-full max-w-sm space-y-6">
    {/* content */}
  </div>
</div>
```

For app pages WITH bottom nav:
```
<div className="flex min-h-screen flex-col bg-[#EEEEEE]">
  <div className="flex-1 px-6 pt-6 pb-24">
    <div className="mx-auto w-full max-w-sm space-y-6">
      {/* content */}
    </div>
  </div>
  <BottomNav />
</div>
```

### Card
```
<div className="rounded-2xl bg-white p-6 shadow-sm">
```

### Buttons
```
// Primary
<Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors">

// Secondary
<button className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]">
```

### Inputs
```
<div className="relative">
  <Icon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
  <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" />
</div>
```

### Labels
```
<label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">
```

### Error Message
```
<p className="text-sm text-[#EF4444] bg-[#EF4444]/10 rounded-md p-2">{error}</p>
```

### Links
```
<Link className="font-semibold text-[#0B6E35] hover:underline">
// or for small links:
<Link className="text-xs font-medium text-[#0B6E35] hover:underline">
```

### Section Divider
```
<div className="flex items-center gap-3">
  <div className="h-px flex-1 bg-[#D1D5DB]" />
  <span className="text-xs font-medium tracking-wide text-[#9CA3AF]">OR</span>
  <div className="h-px flex-1 bg-[#D1D5DB]" />
</div>
```

### Page Header (for app pages)
```
<div className="flex items-center justify-between">
  <h1 className="text-xl font-bold text-[#1A1A1A]">Page Title</h1>
  <button className="rounded-lg p-2 hover:bg-white/80">
    <Settings className="h-5 w-5 text-[#6B7280]" />
  </button>
</div>
```

### Badge
```
<span className="rounded-full bg-[#0B6E35]/10 px-3 py-1 text-xs font-medium text-[#0B6E35]">
```

### Amount Display
```
<span className="text-2xl font-bold text-[#1A1A1A]">kr 12 500,00</span>
```

## Logo
```tsx
<Image src="/drop-icon.png" alt="Drop" width={64} height={64} />
<h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
<p className="text-sm italic text-[#0B6E35]">Send money. Simply.</p>
```

## Icons
- Library: `lucide-react`
- Default size: `h-5 w-5` (nav, headers) or `h-4 w-4` (inline, inputs)
- Default color: `text-[#6B7280]` muted, `text-[#1A1A1A]` primary

## Bottom Navigation
5 tabs: Home, Send, Scan (center), Cards, Profile
- Active: `text-[#0B6E35]` with filled icon
- Inactive: `text-[#9CA3AF]` with outline icon
- Component: `@/components/bottom-nav`

## Landing Page (HTML/CSS)
Same visual language but plain HTML:
- Font: Inter or DM Sans via Google Fonts CDN
- Same color palette as CSS variables
- Cards: `border-radius: 16px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.06); padding: 24px;`
- Buttons: `border-radius: 12px; height: 48px; background: #0B6E35; color: white;`
- Max-width: 1200px for desktop, responsive down to 375px