# Admin Panel Design Principles - Bikash Barta

The Bikash Barta Admin Panel is designed to be a high-efficiency, minimal-friction workspace for content managers and administrators. It prioritizes clarity, consistency, and ease of use.

## 1. Core Visual Identity
- **Minimalist Aesthetic:** Uses a "Clean Slate" approach with plenty of white space to reduce cognitive load.
- **Color Palette:**
    - **Primary (Sage Green):** `#99BC85` - Represents growth and stability (Foundation's roots).
    - **Background:** `#F9FAFB` - Soft gray to distinguish from content cards.
    - **Text:** High contrast `#111827` for headings, `#6B7280` for secondary info.
- **Typography:** Uses **Inter**, a typeface designed for user interfaces, ensuring high legibility at small sizes.

## 2. Layout & Navigation
- **Fixed Sidebar:** A 248px wide permanent sidebar for instant access to all modules.
- **Consistent Headers:** Every page starts with a clear `h1` and a short description of the page's purpose.
- **Focused Content Width:** Main content is capped at `1100px` to maintain comfortable reading lines and focus.

## 3. UI Components (Design Tokens)
- **Cards:** White surfaces with a subtle `1px` border (`#E5E7EB`) and `8px` rounded corners. No heavy shadows.
- **Inputs:** Large, clear input fields with `6px` radius and a sage-green focus ring for accessibility.
- **Buttons:**
    - **Primary:** Sage Green background, white text. Used for main actions (Save, Create).
    - **Secondary:** White background, gray border. Used for cancellations or auxiliary actions.
- **Status Badges:** Color-coded labels for immediate status recognition (e.g., Green for Success, Gray for Pending).

## 4. Interaction Patterns
- **Standardized Tables:** All data lists use a consistent layout with uppercase headers and hover states.
- **Form Groups:** Related fields are grouped into logical sections within cards (e.g., "Personal Info" vs "Contact Info").
- **Livewire Integration:** Real-time feedback for form validations and actions without full page reloads.
- **Consistent Icons:** Uses FontAwesome 6 for intuitive visual cues next to labels and navigation links.

## 5. Accessibility
- **Semantic HTML:** Proper use of `<header>`, `<main>`, `<aside>`, and `<form>`.
- **Keyboard Navigation:** High-visibility focus states on all interactive elements.
- **Clear Feedback:** Flash messages and validation errors are placed prominently to guide the user.