Skip to main content

Design System

Drop Frontend — Design System

Extracted from actual source code: globals.css, layout.tsx, brand-guide.md, colors.css, design-system-reference.md.

Colors

Brand Colors (from globals.css and brand/colors.css)

Token Hex Usage
--color-drop-primary #0B6E35 Forest Green — buttons, links, active states, logo
--color-drop-secondary #D4A017 Gold — logo arrow accent, premium elements
--color-drop-accent #10B981 Emerald — success states, positive amounts
--color-drop-dark #1A1A1A Near-black — headings, primary text
--color-drop-light #FAFCF8 Off-white — page backgrounds
--color-drop-error #EF4444 Red — error states, negative amounts

Neutral Palette (used directly in Tailwind classes)

Hex Usage
#EEEEEE Login page background
#F9FAFB Input field backgrounds
#E5E7EB Input borders, dividers
#D1D5DB Horizontal rule dividers
#9CA3AF Muted text, inactive nav
#6B7280 Secondary text, placeholders
#374151 Dark text on light backgrounds

shadcn/ui Theme Tokens (from globals.css :root)

--background: #FAFCF8;
--foreground: #1A1A1A;
--primary: #0B6E35;
--primary-foreground: #FFFFFF;
--secondary: #F3F4F6;
--secondary-foreground: #1A1A1A;
--accent: #F3F4F6;
--accent-foreground: #1A1A1A;
--muted: #F3F4F6;
--muted-foreground: #6B7280;
--destructive: #EF4444;
--border: #E5E7EB;
--ring: #0B6E35;
--radius: 0.75rem;

Custom Utility Classes

.bg-gradient-brand {
  background: linear-gradient(135deg, #0B6E35 0%, #D4A017 100%);
}

Typography

Fonts (from layout.tsx:7-18)

Font Variable Weight Usage
Fraunces --font-fraunces 400-900 (variable) Display/headings, logo wordmark, brand text
DM Sans --font-dm-sans 400-700 (variable) Body text, UI labels, inputs (default body font)
Geist Mono --font-geist-mono 400-700 (variable) Code, monospace elements

Font Usage Patterns

Context Tailwind Class Example
Logo wordmark font-[family-name:var(--font-fraunces)] text-3xl font-bold "drop" on login
Page heading text-xl font-semibold text-[#1A1A1A] Dashboard greeting
Section heading text-lg font-semibold text-[#1A1A1A] "Siste transaksjoner"
Body text Default (DM Sans inherited from body) General content
Label text-sm font-medium text-[#1A1A1A] Form labels
Muted text text-sm text-[#6B7280] Descriptions, timestamps
Small text text-xs text-[#9CA3AF] Footers, hints
Amount (large) text-2xl font-bold text-[#1A1A1A] Balance display
Amount (list) text-sm font-semibold + color Transaction amounts

Spacing & Layout

Page Structure

min-h-screen bg-[#FAFCF8]    — Standard page background
px-6 pb-24                    — Page padding (bottom for BottomNav clearance)
pt-6                          — Top padding (below safe area)
max-w-sm mx-auto              — Content max width on login/onboarding

Card Pattern

rounded-2xl bg-white p-6 shadow-sm    — Standard card
rounded-xl bg-white p-4 shadow-sm     — Compact card

Bottom Nav Clearance

pb-24    — All pages with BottomNav add bottom padding

The BottomNav itself is fixed bottom-0 left-0 right-0 with h-16 border-t bg-white.

Component Patterns

Primary Button

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

Secondary / Outline Button

<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] hover:bg-[#F9FAFB]">

Text Input

<input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" />

Input with Left Icon

<div className="relative">
  <Icon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
  <input className="... pl-10" />
</div>

Error Message

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

Badge (Primary)

<span className="rounded-full bg-[#0B6E35]/10 px-2 py-0.5 text-xs font-medium text-[#0B6E35]">

Avatar (Initials)

<div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#0B6E35] text-sm font-bold text-white">
  {initials}
</div>

Transaction Amount

// Positive (received)
<span className="text-sm font-semibold text-[#10B981]">+{amount}</span>
// Negative (sent)
<span className="text-sm font-semibold text-[#EF4444]">-{amount}</span>

Tab Filter (using shadcn Tabs)

<Tabs defaultValue="all">
  <TabsList className="...">
    <TabsTrigger value="all">Alle</TabsTrigger>
    <TabsTrigger value="remittance">Overforinger</TabsTrigger>
  </TabsList>
</Tabs>

Iconography

System: Lucide React

  • Size: h-4 w-4 (inline), h-5 w-5 (nav/buttons), h-6 w-6 (feature icons)
  • Color: currentColor (inherits from parent text color)

Custom: Drop Icons (drop-icons.tsx)

  • Size: 24px default, configurable via size prop
  • Style: Outlined, 2px stroke, round caps, currentColor
  • 9 domain-specific icons for financial features

Social Login Icons

  • BankID: Inline SVG, green rounded rect with "ID" text
  • Vipps: Inline SVG, orange circle with "V" text

Responsive Design

  • Mobile-first: The app is designed as a mobile PWA. Max-width containers used on wider screens.
  • Login/Onboarding: max-w-sm (384px) centered
  • Dashboard/Pages: Full width with px-6 padding
  • Landing page (page.tsx): Uses responsive grid grid-cols-1 md:grid-cols-3 for features

Animation

  • Button hover: transition-colors (color change only)
  • Focus states: transition-colors on border/ring
  • Loading states: "Logger inn..." / "Sender..." text replacement, or Skeleton components
  • Scan page: animate-pulse on scanner frame corners
  • No complex animations in the app pages (simplicity-first approach)
Back to top