# Bermadani Design System v1.0 > **Purpose**: Single source of truth for building all frontend pages in Koperasi Bermadani. > DNA extracted from: FlowOps, Financial SaaS, PaperFlow DESIGN references + existing implementations. > Targets: 21 Admin pages (Phase 1/1*) + future Phase 2-3 pages. --- ## 1. Brand Identity | Token | Value | Notes | |-------|-------|-------| | **App Name** | Bermadani | Koperasi pegawai — professional, warm, trustworthy | | **Logo** | `/logo.png` | Used in sidebar + mobile header | | **Tagline** | Koperasi Digital Modern | | | **Personality** | Professional warmth | Not corporate-cold, not playful — *trustworthy fintech* | --- ## 2. Color System (60-30-10 Rule) ### Core Palette ``` ┌──────────────────────────────────────────────────┐ │ 60% DOMINANT — Backgrounds & Surfaces │ │ ───────────────────────────────────────────── │ │ Background: #FAFAFB (page bg) │ │ Surface: #F4F5F7 (content area, active nav)│ │ Neutral: #FFFFFF (cards, header, sidebar) │ │ Border: #E5E7EB (subtle dividers) │ │ │ │ 30% SECONDARY — Brand Teal │ │ ───────────────────────────────────────────── │ │ Primary: #1F6376 (base brand teal) │ │ Primary-lt: #277A91 (gradient start) │ │ Primary-dk: #154350 (gradient end) │ │ │ │ 10% ACCENT — Highlights & CTAs │ │ ───────────────────────────────────────────── │ │ Accent: #F39E20 (orange/yellow) │ │ Accent-lt: #F5B04A (gradient start) │ │ Accent-dk: #C97F12 (gradient end) │ └──────────────────────────────────────────────────┘ ``` ### Semantic Colors | Role | Light Value | Usage | |------|------------|-------| | **Success** | `emerald-500` (#10B981) | Simpanan naik, payment success | | **Warning** | `amber-500` (#F59E0B) | Pending approval, attention needed | | **Danger** | `rose-500` (#F43F5E) | Overdue, rejected, logout | | **Info** | `sky-500` (#0EA5E9) | Informational badges, tips | | **Text Primary** | `slate-900` (#0F172A) | Headings, important text | | **Text Secondary** | `slate-500` (#64748B) | Descriptions, labels | | **Text Muted** | `slate-400` (#94A3B8) | Placeholders, disabled | ### Gradient Recipes ```css /* Primary gradient (buttons, digital card) */ bg-gradient-to-br from-[#277A91] via-[#1F6376] to-[#154350] /* Accent gradient (accent buttons, highlights) */ bg-gradient-to-br from-[#F5B04A] via-[#F39E20] to-[#C97F12] /* Card inner gradient (emerald — for financial metrics) */ bg-gradient-to-br from-[#f2fdf7] to-[#fbfffb] /* Card inner gradient (indigo — for analytics/charts) */ bg-gradient-to-br from-[#f3f4fd] to-[#fcfcff] /* Card inner gradient (amber — for warnings/pending) */ bg-gradient-to-br from-[#fffbf2] to-[#fffef9] /* Card inner gradient (sky — for info/overview) */ bg-gradient-to-br from-[#f0f9ff] to-[#fbfeff] /* Secondary button gradient */ bg-gradient-to-b from-white to-slate-50 ``` --- ## 3. Typography ### Font Stack ```css --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; ``` ### Type Scale | Tier | Size | Weight | Line-Height | Letter-Spacing | Usage | |------|------|--------|-------------|----------------|-------| | **Display** | `text-2xl` (24px) | `font-bold` (700) | tight | `-0.025em` | Page titles | | **Title** | `text-xl` (20px) | `font-medium` (500) | tight | `-0.015em` | Card titles | | **Subtitle** | `text-[15px]` | `font-medium` (500) | snug | default | Section headers | | **Body** | `text-sm` (14px) | `font-normal` (400) | relaxed | default | General text | | **Body Small** | `text-[13px]` | `font-medium` (500) | snug | default | Descriptions | | **Label** | `text-[11px]` | `font-medium` (500) | tight | `0.35px` | Badges, metadata | | **Mono** | `text-[10px]` font-mono | `font-semibold` (600) | 1.2 | default | Financial data, IDs | ### Text Color Classes ``` Headings: text-slate-900 Descriptions: text-slate-500 Placeholders: text-slate-400 Links: text-primary hover:text-primary/80 Danger text: text-rose-500 Success text: text-emerald-600 ``` --- ## 4. Spacing System ### Base Unit: `4px` | Token | Value | Usage | |-------|-------|-------| | `gap-1.5` | 6px | Nav item gaps, tight spacing | | `gap-2` | 8px | Inline element gaps | | `gap-3` | 12px | Icon-text gaps in nav | | `gap-4` | 16px | Card inner gaps, form field gaps | | `gap-6` | 24px | Section gaps, grid gaps | | `p-3` | 12px | Card outer padding | | `p-4` | 16px | Mobile content padding | | `p-5` | 20px | Card inner content padding | | `p-6` | 24px | Desktop content padding, section padding | | `px-4 sm:px-8` | 16px → 32px | Header horizontal padding | ### Content Width ``` Max content width: max-w-[1400px] mx-auto Sidebar width: lg:w-[260px] Header height: h-[80px] ``` --- ## 5. Border Radius System | Token | Value | Usage | |-------|-------|-------| | **Card** | `rounded-[2rem]` (32px) | Main content cards | | **Card Inner** | `rounded-[1.5rem]` (24px) | Inner gradient panels | | **Button Large** | `rounded-[18px]` | Large CTA buttons | | **Button Medium** | `rounded-[16px]` | Standard buttons | | **Control** | `rounded-xl` (12px) | Inputs, nav items, small buttons | | **Badge/Pill** | `rounded-full` (9999px) | Tags, avatars, status dots | | **Table Row** | `rounded-lg` (8px) | Table rows on hover | > **Rule**: Larger surfaces → larger radius. Controls → `xl`. Pills → `full`. Never use `rounded-md` or `rounded-sm` — they break the DNA. --- ## 6. Elevation & Depth ### Shadow System | Level | Shadow | Usage | |-------|--------|-------| | **Card** | `shadow-[0_10px_30px_-10px_rgba(0,0,0,0.06),inset_0_1px_0_white]` | Standard cards | | **Card Hover** | `shadow-[0_20px_40px_-10px_rgba(0,0,0,0.08),inset_0_1px_0_white]` | Hovered cards | | **Button Primary** | `shadow-[0_18px_38px_rgba(31,99,118,0.28),inset_0_1px_0_rgba(255,255,255,0.32)]` | Primary buttons | | **Control** | `shadow-sm` | Inputs, small buttons, badges | | **Header** | (none, border only) | Top header bar | | **Mobile Nav** | `shadow-[0_-10px_40px_rgba(0,0,0,0.05)]` | Bottom mobile nav | | **Inner Panel** | `shadow-[inset_0_2px_15px_rgba(0,0,0,0.02)]` | Card inner gradient areas | ### Glass / Blur ```css /* Glass card (landing page, overlays) */ .glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); } /* Mobile nav blur */ bg-white/90 backdrop-blur-lg ``` ### Border Language ``` Cards: border border-slate-100 Active surfaces: border border-emerald-100/50 (or relevant semantic color) Header/Sidebar: border-b border-slate-200/50 | border-r border-slate-200/60 Controls: border border-slate-200/60 Dark cards: border border-white/10 ``` --- ## 7. Layout Patterns ### Page Shell (Authenticated) ``` ┌─────────────────────────────────────────────────────┐ │ ┌──────────┐ ┌────────────────────────────────────┐ │ │ │ │ │ HEADER (80px) │ │ │ │ SIDEBAR │ ├────────────────────────────────────┤ │ │ │ (260px) │ │ │ │ │ │ │ │ CONTENT AREA │ │ │ │ Hidden │ │ max-w-[1400px] mx-auto │ │ │ │ on │ │ p-4 sm:p-6 │ │ │ │ mobile │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └────────────────────────────────────┘ │ └─────────────────────────────────────────────────────┘ ``` ### Admin Page Layout Pattern ```jsx
{/* Page Header */}

Page Title

Page description here.

{/* Action buttons */}
{/* Content Grid */}
{/* ... */}
``` ### Grid Patterns | Pattern | Classes | Usage | |---------|---------|-------| | **Dashboard** | `grid grid-cols-1 xl:grid-cols-12 gap-6` | Main with sidebar stats | | **Cards Row** | `grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4` | Stats/KPI cards | | **List + Detail** | `xl:col-span-8` + `xl:col-span-4` | Table + sidebar summary | | **Full Width** | `xl:col-span-12` | Full-width tables, forms | | **Form 2-col** | `grid grid-cols-1 md:grid-cols-2 gap-4` | Form fields layout | | **Mobile Scroll** | `flex overflow-x-auto snap-x snap-mandatory no-scrollbar` | Horizontal card scroll | --- ## 8. Components ### Card (``) **File**: [Card.jsx](file:///home/tanesheva/Documents/project/bermadani/resources/js/Components/UI/Card.jsx) | Prop | Type | Default | Description | |------|------|---------|-------------| | `dark` | boolean | false | Dark variant using primary color | | `hover` | boolean | false | Hover animation (lift + shadow) | | `animate` | boolean | false | Scroll-triggered entrance | | `innerPadding` | string | "p-3" | Outer padding | | `className` | string | "" | Additional classes | **Light card**: White bg, `border-slate-100`, soft shadow, `rounded-[2rem]` **Dark card**: Primary bg, `border-white/10`, teal shadow **Card Inner Panel** (the gradient area inside cards): ```jsx
{/* Chart or metric content */}
``` ### Button (` ``` ### Profile Chip (Header) ```jsx
Name Role
``` --- ## 9. Iconography | Property | Value | |----------|-------| | **Library** | Lucide React | | **Size** | `w-[18px] h-[18px]` (nav), `w-4 h-4` (inline), `w-6 h-6` (mobile nav) | | **Stroke** | `strokeWidth={1.5}` (default), `strokeWidth={2}` (active) | | **Style** | Linear (outline) — never filled | | **Color** | Inherits from parent text color | ### Icon Import Pattern ```jsx import { LayoutDashboard, // Dashboard Users, // Members WalletCards, // Simpanan HandCoins, // Loans FileText, // Laporan BookOpen, // Jurnal Calendar, // Fiscal Period Settings, // Settings UserCog, // User Management TrendingUp, // Stats trending up TrendingDown, // Stats trending down ArrowUpRight, // Outgoing ArrowDownRight, // Incoming Search, // Search Bell, // Notifications Plus, // Add/Create Eye, // View/Show Pencil, // Edit Trash2, // Delete Check, // Approve X, // Reject/Close Download, // Export Filter, // Filter ChevronRight, // Navigation arrow } from 'lucide-react'; ``` --- ## 10. Motion & Animation ### Intensity Level: **Refined** (not expressive, not static) | Pattern | Implementation | Duration | |---------|---------------|----------| | **Card Entrance** | `opacity: 0, y: 20 → opacity: 1, y: 0` | 600ms, ease `[0.22, 1, 0.36, 1]` | | **Card Hover** | `translateY(-4px)` + shadow increase | 500ms | | **Nav Indicator** | `scaleY(0) → scaleY(1)` + `opacity 0→1` | 300ms | | **Button Hover** | `translateY(-2px)` + shadow increase | 300ms | | **Button Active** | `translateY(0) scale(0.99)` | instant | | **Float Soft** | `translateY(0 → -3px → 0)` | 4-6s infinite | | **Shimmer** | `opacity 0.3 → 0.7 → 0.3` | 3s infinite | | **Marquee** | `translateX(0 → -50%)` | 40s linear infinite | ### Easing ``` Default: cubic-bezier(0.22, 1, 0.36, 1) — smooth decelerate Hover: transition-all duration-300 Spring: cubic-bezier(0.34, 1.56, 0.64, 1) — bouncy pop Linear: linear (marquee only) ``` ### Animation Classes (from app.css) ``` .anim-float — 4s gentle float .anim-float-delayed-1 — 5s float (1s delay) .anim-pulse-soft — 3s subtle pulse .anim-bar-{1-5} — chart bar animations .anim-shimmer — 3s opacity shimmer .animate-marquee — 40s linear marquee ``` --- ## 11. Admin Page Templates ### 11a. Index/List Page (Members, Loans, Simpanan) ``` ┌─────────────────────────────────────────────┐ │ Page Header [+ Create] │ │ Description text │ ├─────────────────────────────────────────────┤ │ ┌─── Stats Row ──────────────────────────┐ │ │ │ [KPI 1] [KPI 2] [KPI 3] [KPI 4] │ │ │ └────────────────────────────────────────┘ │ │ │ │ ┌─── Data Table Card ────────────────────┐ │ │ │ Title [Search] [Filter] │ │ │ │ ───────────────────────────────────── │ │ │ │ TH TH TH TH TH TH │ │ │ │ ───────────────────────────────────── │ │ │ │ Row 1 [Actions] │ │ │ │ Row 2 [Actions] │ │ │ │ Row 3 [Actions] │ │ │ │ ───────────────────────────────────── │ │ │ │ Pagination │ │ │ └────────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ ``` ### 11b. Show/Detail Page (Member Detail, Loan Detail) ``` ┌─────────────────────────────────────────────┐ │ ← Back Page Title │ ├──────────────────────┬──────────────────────┤ │ Profile Card (8col) │ Summary (4col) │ │ ┌────────────────┐ │ ┌────────────────┐ │ │ │ Avatar + Info │ │ │ Balance/Status │ │ │ │ Personal Data │ │ │ Quick Stats │ │ │ │ Contact Info │ │ │ Actions │ │ │ └────────────────┘ │ └────────────────┘ │ ├──────────────────────┴──────────────────────┤ │ ┌─── Transaction Table ─────────────────┐ │ │ │ (Full width table below) │ │ │ └───────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ ``` ### 11c. Create/Edit Form Page ``` ┌─────────────────────────────────────────────┐ │ ← Back Page Title │ ├─────────────────────────────────────────────┤ │ ┌─── Form Card ──────────────────────────┐ │ │ │ Section Title │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Field 1 │ │ Field 2 │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ │ │ Field 3 │ │ Field 4 │ │ │ │ │ └──────────┘ └──────────┘ │ │ │ │ │ │ │ │ ──── Divider ──── │ │ │ │ │ │ │ │ Section Title 2 │ │ │ │ ┌──────────────────────┐ │ │ │ │ │ Full-width field │ │ │ │ │ └──────────────────────┘ │ │ │ │ │ │ │ │ [Cancel] [Save/Submit] │ │ │ └────────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ ``` ### 11d. Dashboard Overview (Admin) ``` ┌─────────────────────────────────────────────┐ │ Admin Overview [Date Filter] │ │ Description │ ├─────────────────────────────────────────────┤ │ [Total Anggota] [Total Simpanan] [Pinjaman] [SHU] │ │ │ │ ┌─── Chart Card (8col) ──┐ ┌─ Side (4col)─┐│ │ │ Trend Simpanan │ │ Top Members ││ │ │ ████████████████ │ │ 1. Budi 2.5M ││ │ │ │ │ 2. Siti 1.8M ││ │ └─────────────────────────┘ └──────────────┘│ │ │ │ ┌─── Recent Activity Table ──────────────┐ │ │ │ (Full width) │ │ │ └────────────────────────────────────────┘ │ └─────────────────────────────────────────────┘ ``` --- ## 12. Do's and Don'ts ### ✅ DO - **DO** use the 60-30-10 color ratio consistently - **DO** keep spacing aligned to the 4px base rhythm (4, 8, 12, 16, 20, 24) - **DO** use `rounded-[2rem]` for cards, `rounded-xl` for controls - **DO** use the `inset_0_1px_0_white` shadow highlight on all white cards - **DO** use gradient inner panels inside cards for visual depth - **DO** use `text-[13px]` for descriptions, `text-[11px]` for metadata - **DO** use Lucide React icons at 18px with `strokeWidth={1.5}` - **DO** use `transition-all duration-300` for hover states - **DO** add the primary-colored indicator bar on active nav items - **DO** use `font-sans` (Inter) everywhere, `font-mono` for financial figures - **DO** reuse `` and `