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

<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