Design System

BilkoDrop Frontend — Design System

Source: Extracted from actual source code: apps/web/tailwind.config.tsglobals.css, +layout.tsx, brandbrand-guide.md, identitycolors.css, specdesign-system-reference.md.

Design Language: Modern Balkan accounting SaaS — clean, professional, accessible

---

Color PaletteColors

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

#00E5A0(VibrantDark:#00B380(Darkervariantforvariantforbackgrounds)
Status Colors

Success:        #22C55E  (Green
Warning:#F59E0B(Amber

aginginvoices)Error:




(Info:#3B82F6
Token
Hex
Usage
Primary:--color-drop-primary
#0B6E35
Forest teal-greenGreen — primary CTA,buttons, links, active states)states, Primarylogo


--color-drop-secondary
#D4A017
Gold hover— states)logo Primaryarrow Light:accent, #33EBB3premium (Lighterelements


--color-drop-accent
#10B981
Emerald — success states, paid invoices, positive metrics)amounts


--color-drop-dark
#1A1A1A
Near-black — warnings,headings, pendingprimary items,text


--color-drop-light
#FAFCF8
Off-white — page backgrounds
--color-drop-error
#EF4444
Red — errors,error overdue invoices,states, negative actions)amounts


Neutral Palette (Blueused —directly informationalin messages,Tailwind neutralclasses)
data)




































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;

TextCustom ColorsUtility Classes
Text.bg-gradient-brand Primary:{
  #111113background: (Near-blacklinear-gradient(135deg, —#0B6E35 body0%, text,#D4A017 headings)100%);
Text Secondary: #6B7280  (Gray-600 — secondary text, labels)
Text Muted:     #888888  (Gray-500 — muted text, placeholders)}

Background Colors

Background Light:   #FAFAFA  (Off-white — main content area background)
Background Surface: #FFFFFF  (White — card backgrounds, modals)

Border Color

Border:         #E5E7EB  (Gray-200 — borders, dividers)

Chart Colors

Chart Revenue:  #22C55E  (Green — revenue bars/lines)
Chart Expense:  #EF4444  (Red — expense bars/lines)
Chart Profit:   #3B82F6  (Blue — profit bars/lines)
Chart Neutral:  #6B7280  (Gray — neutral data points)

Sidebar Colors (Dark Theme)

Sidebar BG:         #111113  (Near-black — sidebar background)
Sidebar Text:       #FAFAFA  (Off-white — sidebar text)
Sidebar Text Muted: #888888  (Gray — inactive menu items)
Sidebar Active:     #00E5A0  (Primary green — active menu item)
Sidebar Hover:      #1F1F23  (Slightly lighter black — hover state)

Usage:


Sidebar = dark (#111113) with light text

Content area = light (#FAFAFA) with dark text

Cards = white (#FFFFFF) surface on light background



Typography
FontFonts Family(from layout.tsx:7-18)












Serif: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

Source: Google Fonts Inter
font)














Font
Variable
Weight
Usage
Fraunces
Sans--font-fraunces
400-900 (variablevariable)
Display/headings, Fallback:logo Systemwordmark, brand text
DM Sans
--font-dm-sans
400-700 (variable)
Body text, UI fontslabels, forinputs performance
(default body font)
Geist Mono
--font-geist-mono
400-700 (variable)
Code, monospace elements
Font SizesUsage Patterns


















































700)
Card title: 




Context
Tailwind Class
Example
Logo wordmark
xs:font-[family-name:var(--font-fraunces)] 12px  (Small badges, captions)
sm:   14px  (Table cells, secondary text, form labels)
base: 16px  (Body text, default)
lg:   18px  (Subheadings, emphasized text)
xl:   20px  (Section titles)
2xl:  24px  (Card titles, small headings)
3xl:  32px  (Page headings)
4xl:  40px  (Hero text, large numbers)

Font Weights

normal:    400  (Body text)
medium:    500  (Emphasis, table headers)
semibold:  600  (Subheadings, button text)
bold:      700  (Headings, metric numbers)

Type Scale Usage


Headings:

Page title: 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 (32px,DM 700)Sans 
Sectioninherited title: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 (24px,list)
text-basesm font-semibold + color
Transaction amounts


Spacing & Layout

Page Structure

min-h-screen bg-[#FAFCF8]    — Standard page background
px-6 pb-24                    — Page padding (16px,bottom 600)for BottomNav clearance)
Body:pt-6                          
— 
Default: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-basesm font-normalsemibold text-white shadow-sm hover:bg-[#095C2C]">

(16px,
Secondary 400)/ 
TableOutline cells: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]">

(14px,
Text 500)Input
Muted
<input text: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>

Link

<Link className="text-mutedxs font-medium text-[#0B6E35] hover:underline">

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 (14px,inline), #888888)h-5 w-5 (nav/buttons), h-6 w-6 (feature icons)

Color: currentColor (inherits from parent text color)

Custom: 
Numbers:Drop Icons (drop-icons.tsx)

Metrics:Size: 24px default, configurable via text-3xl font-boldsize (32px, 700)prop
Totals:Style: Outlined, 2px stroke, round caps, text-2xl font-boldcurrentColor (24px, 700)
Amounts:9 text-basedomain-specific font-mediumicons (16px,for 500)financial features

Social Login Icons


BankID: Inline SVG, green rounded rect with "ID" text

Vipps: Inline SVG, orange circle with "V" text


SpacingResponsive System (8px Grid)Design

xs:  4px   (Tight spacing, icon gaps)
sm:  8px   (Input padding, small gaps)
md:  16px  (Default spacing, card padding)
lg:  24px  (Section spacing)
xl:  32px  (Large section spacing)
2xl: 48px  (Major section breaks)
3xl: 64px  (Hero spacing)

Usage:

CardMobile-first: padding:The p-6app (24px)is designed as a mobile PWA. Max-width containers used on wider screens.
Form field gap:Login/Onboarding: space-y-4 (16px)

Section spacing: space-y-6 (24px)

Grid gap: gap-6 (24px)


Consistency: All spacing uses 8px increments (4px, 8px, 16px, 24px, 32px, 48px, 64px)


Border Radius

sm:   6px   (Small elements, badges)
md:   8px   (Buttons, inputs, cards)
lg:   12px  (Modals, large cards)
full: 9999px (Circular elements, pills)

Usage:


Cards: rounded-md (8px)

Buttons: rounded-md (8px)

Inputs: rounded-md (8px)

Badges: rounded-max-w-sm (6px)384px) centered
UserDashboard/Pages: avatar:Full width with rounded-fullpx-6 (circular)



Shadows

Card Shadow:     0 2px 8px rgba(0, 0, 0, 0.08)   (Subtle card elevation)
Modal Shadow:    0 8px 24px rgba(0, 0, 0, 0.12)  (Dialog/modal elevation)
Dropdown Shadow: 0 4px 16px rgba(0, 0, 0, 0.10)  (Dropdown menu elevation)

Usage:


Cards: shadow-cardpadding
Modals/dialogs:Landing page (shadow-modalpage.tsx

Dropdown menus: shadow-dropdown


Philosophy:): SubtleUses shadowsresponsive for depth, avoid heavy shadows (material design style)


Breakpoints

sm:  640px   (Small tablets, large phones)
md:  768px   (Tablets)
lg:  1024px  (Small desktops, large tablets)
xl:  1280px  (Desktops)

Mobile-First Strategy:


Base styles = mobile (< 640px)

sm: = small tablet (640px+)

md: = tablet/desktop toggle (768px+)

lg: = desktop layout (1024px+)

xl: = wide desktop (1280px+)


Responsive Patterns:


Grid:grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3
 
Sidebar:for hidden md:block (hide on mobile)

Filters: flex-col sm:flex-row (stack on mobile, row on tablet+)features


Component TokensAnimation

Button

Height:Button hover: 40pxtransition-colors (default),color 32pxchange (sm), 48px (lg), 40px (icon)only)
Padding:Focus states: 16px horizontal (default), 12px (sm), 20px (lg)

Border Radius: 8px (md)

Font: 14px medium (default), 12px (sm), 16px (lg)

Variants:

Default: Primary green background, white text

Outline: Border only, transparent background

Ghost: No border, no background, hover shows background

Destructive: Error red background, white text




Input


Height: 40px

Padding: 12px horizontal

Border: 1px solid #E5E7EB (border color)

Border Radius: 8px (md)

Font: 14px normal

Focus: Primary color ring (2px)


Card


Background: #FFFFFF (surface)

Border: 1px solid #E5E7EB

Border Radius: 8px (md)

Shadow: 0 2px 8px rgba(0, 0, 0, 0.08)

Padding: 24px (default content padding)


Badge


Padding: 4px 8px

Border Radius: 6px (sm)

Font: 12px medium

Variants:

Default: Gray background

Success: Green background

Warning: Amber background

Destructive: Red background

Secondary: Light gray




Table


Row Height: 48px (default)

Cell Padding: 12px horizontal, 16px vertical

Border: 1px solid #E5E7EB (between rows)

Hover: Light gray background (#FAFAFA)

Header: Medium font weight, secondary text color



Icon System

Library: Lucide React (v0.469.0)
Size: Consistent 16px (w-4 h-4transition-colors) or 20px (w-5 h-5)
Usage:


Buttons: 16px icon + 8px gap from text

Menu items: 20px icon + 12px gap from text

Standalone: 24px or larger


Common Icons:


Plus (add actions)

Search (search inputs)

Menu (mobile sidebar toggle)

User (user menu)

Bell (notifications)

ChevronDown/Right (expandable sections)

Check (success, reconciliation)

X (close, delete)

Download (export actions)

Send (send email)



Chart Design Tokens

Chart Colors (Recharts)

Revenue:  #22C55E  (Green bars)
Expense:  #EF4444  (Red bars)
Profit:   #3B82F6  (Blue bars)
Neutral:  #6B7280  (Gray — when no semantic meaning)

Chart Typography


Axis Labels: 12px normal

Tooltip: 14px medium

Legend: 12px normal


Chart Layout


Responsive Container: 100% width, fixed height (250px default)

Cartesian Grid: Dashed, #E5E7EB stroke

Tooltip Background: White with border

Border Radius: 8px (md)



Accessibility

Color Contrast


All text colors meet WCAG AA standards

Primary text (#111113) on white = 16.17:1 (AAA)

Secondary text (#6B7280) on white = 4.69:1 (AA)

Primary green (#00E5A0) on white = 2.92:1 (fails — used for accents only, not body text)


Focus Indicators


All interactive elements have visible focus border/ring

Focus ring color: Primary green (#00E5A0)

Focus ring width: 2px


Semantic HTML


Proper heading hierarchy (h1 → h2 → h3)

Form labels properly associated with inputs

ARIA labels on icon-only buttons

Table headers properly scoped



Design Principles


Clarity over Decoration — Data-first, minimal ornamentation

Consistent Spacing — 8px grid, predictable rhythm

Accessible by Default — WCAG AA minimum, Radix UI primitives

Mobile-First — Responsive from 375px+ (iPhone SE)

Dark Sidebar + Light Content — Clear visual separation

Primary Color as Accent — Green (#00E5A0) for actions, not backgrounds

Subtle Shadows — Elevation without heaviness

Data-Dense UI — Tables, charts, metrics — optimized for information density



Brand Identity Alignment

From ~/system/specs/bilko-brand-identity.md:


Primary Color: #00E5A0 (implemented)

Typography: Inter (implemented)

Tone: Modern, professional, Balkan-focused (implemented)

Dark Sidebar: #111113 (implemented)

Logo Placement: Top left sidebar (implemented)



Future Tokens (Phase 2)

When implementing API integration:


Loading States:states: "Logger inn..." / "Sender..." text replacement, or Skeleton component colorscomponents
ErrorScan States:page: Erroranimate-pulse messageon backgroundsscanner (#FEF2F2,frame light red)corners
SuccessNo States:complex animations Successin messagethe backgroundsapp pages (#F0FDF4,simplicity-first light green)

Toast Notifications: Background, text, border colors

Dark Mode: Full dark theme variant (optional)approach)