UI Design System

Last updated Sep 2026 23 components · 7 branch themes

Color Palette

Primary

Primary #0052cc

Primary Light #3385ff

Primary Dark #003380

Accent

Accent #ea8e1b

Accent Light #f6b14f

Semantic

Success #1fa971

Danger #d64545

Warning #d97706

Surfaces

Surface #e7f5ff

Surface Muted #d8eefc

Card #ffffff

Background #f7f9fc

Text

Primary #173042

Secondary #5d7486

Muted #8ba0af

Border

Border #d9e5ee

Branch Theming

Each branch gets a color_theme value stored in the branches table. The theme color is applied to the sidebar accent, active/selected states, and branch indicator badges throughout the UI.

Theme	Primary Color	Use
Blue	`#0052cc`	Default theme
Green	`#16a34a`	Agriculture/organic focus
Orange	`#ea580c`	Warm/energetic branding
Teal	`#0d9488`	Calm/professional tone
Purple	`#7c3aed`	Premium/distinct branches
Rose	`#e11d48`	Bold/attention-grabbing
Slate	`#475569`	Neutral/understated

Typography

Primary: Plus Jakarta Sans (weights: 400, 500, 600, 700, 800)
Fallback: Noto Sans for regional scripts
System stack fallback: system-ui, sans-serif
Monospace: JetBrains Mono (code blocks, technical displays only — not used in app UI)
Base size: 15px
Line height: 1.65

Design Tokens

Token	Value	Usage
`--card-radius`	1.25rem (20px)	Card border radius
`--card-radius-lg`	1.5rem (24px)	Large card/modal radius
`--page-gutter`	clamp(1rem, 3vw, 1.5rem)	Page horizontal padding
`--shadow-soft`	0 1px 3px rgba(0,0,0,.06)	Subtle elevation
`--shadow-card`	0 2px 8px rgba(0,0,0,.08)	Card default shadow
`--shadow-card-hover`	0 4px 16px rgba(0,0,0,.12)	Card hover state
`--safe-bottom`	env(safe-area-inset-bottom)	iOS home indicator

Core Components

Component	Variants / Props	Notes
Button	9 variants (primary, secondary, accent, danger, ghost, outline, success, dark, darkOutline), 3 sizes (sm, md, lg), loading state, 400ms debounce	Most used component
Input	3 sizes, label, error message, helper text, left/right icons, password toggle	Controlled components only
Card	Default with shadow, hover variant, clickable variant	1.25rem border-radius
Select	Native select wrapper, label, error state	No custom dropdown
Badge	6 color variants (success, danger, warning, info, neutral, accent)	Uppercase, 11px
Skeleton	4 types (line, circle, card, table row)	Pulse animation
Textarea	Auto-resize, character count, max length	Same styling as Input
SearchableSelect	Dropdown with search filter, async loading	Used for farmer/product selection
ConfirmModal	Destructive action confirmation, customizable message	Red confirm button for danger actions
SearchBar	250ms debounce, clear button, search icon	Used in all list views
FarmerAvatar	Initials-based avatar, color derived from name hash	2 sizes
Calendar	Month view, date selection, event indicators	Custom built (no library)
AquaLoader	Full-screen and inline variants, water drop animation	Brand-themed loading
BranchColorPicker	7 theme color selection, visual preview	Used in branch settings
EmptyState	Illustration + message + action button	Consistent empty states
DatePicker	Single date selection, min/max constraints	Native input[type=date] on mobile
DateRangeFilter	Preset ranges (Today, 7d, 30d, Custom)	Used in reports/lists
SyncStatusIndicator	Online/offline/syncing states	Shows in header area
UniversalSearchModal	Ctrl+K triggered, searches farmers/products/bills	Keyboard navigable
NotificationsDropdown	Bell icon, unread count badge	Stock alerts, system notices
ListLoadMore	"Load more" button with loading state	Replaces infinite scroll
ReloadPrompt	PWA update available notification	"New version available" toast
Modal	Portal-based, focus trap, escape close, slide-up on mobile / scale-in on desktop	Uses Radix Dialog primitives

Notifications

Library: sonner
Position: top-center
richColors enabled, closeButton enabled
Used across 60 files for success/error/info feedback
Pattern: toast.success("Bill created"), toast.error("Failed to save")

Icons

Library: lucide-react
Standard sizes: 20px (default), 16px (inline/small)
Stroke width: 2 (consistent across all icons)
Color inherits from parent text color

Dark Mode

Not supported. Dark mode is not supported. The app uses color-scheme: light hardcoded in the HTML root. All color tokens assume a light background.