# Nexus Scholar Design System

Platform jurnal ilmiah modern ini menggunakan pendekatan desain yang bersih (clean), profesional, akademik namun tidak kaku (modern dashboard-oriented).

## 1. Palet Warna (TailwindCSS)
*   **Primary (Indigo)**:
    *   `indigo-50` s/d `indigo-100`: Background soft, active states.
    *   `indigo-600`: Primary buttons, links, active tab border.
    *   `indigo-900`: Header text, strong emphasis, dark mode sidebar.
*   **Neutral (Slate/Gray)**:
    *   `gray-50`: Background halaman utama (app bg).
    *   `gray-200` s/d `gray-300`: Borders, dividers.
    *   `gray-500` s/d `gray-600`: Muted text, secondary labels.
    *   `gray-900`: Main text, headings.
*   **Semantic**:
    *   **Success (Emerald)**: `emerald-100` (bg), `emerald-700` (text) - Published, Accepted.
    *   **Warning (Amber)**: `amber-100` (bg), `amber-700` (text) - Revision Required, Pending.
    *   **Danger (Rose/Red)**: `red-100` (bg), `red-700` (text) - Rejected, Errors.
    *   **Info (Sky/Blue)**: `blue-100` (bg), `blue-700` (text) - Under Review, AI Insights.

## 2. Typography
*   **Sans-serif (UI & Dashboards)**: `Inter` (Atau default Tailwind font-sans). Digunakan untuk sidebar, navbar, tabel, form, dan dashboard cards.
*   **Serif (Reading & Articles)**: `Merriweather` atau `Playfair Display`. Digunakan khusus di halaman Interactive Article Experience untuk judul paper dan body text (agar terasa akademik).

## 3. Layout Utama (Dashboard)
Layout utama menggunakan grid/flex dengan Sidebar di kiri (hidden on mobile, toggleable) dan Header/Navbar di atas. Area konten utama berada di dalam container dengan `max-w-7xl` atau flexible `w-full px-4 sm:px-6 lg:px-8`.
Background: `bg-gray-50`.

## 4. Sidebar & 5. Navbar
*   **Sidebar**: Background putih (`bg-white`) atau gelap (`bg-indigo-900`). Link menggunakan icon set (misal Heroicons), teks tebal (`font-medium`), dengan hover states yang jelas. Aktivitas yang "active" ditandai dengan background `indigo-50` dan strip kiri `border-indigo-600`.
*   **Navbar / Topbar**: Height ~64px (`h-16`). Berisi breadcrumbs/title, Global Search bar, Notifikasi, dan Avatar Profile dropdown. Alpine.js digunakan untuk mengatur toggle mobile menu & dropdown.

## 6 s/d 17. Konvensi Komponen CSS
*   **Card**: `bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden`
*   **Button Primary**: `bg-indigo-600 text-white rounded-md px-4 py-2 text-sm font-bold shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors`
*   **Button Secondary**: `bg-white text-gray-700 border border-gray-300 rounded-md px-4 py-2 text-sm font-bold shadow-sm hover:bg-gray-50 transition-colors`
*   **Form Input**: `block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm text-gray-900 bg-white`
*   **Table**: `min-w-full divide-y divide-gray-200`, `thead bg-gray-50`, `th text-xs font-bold text-gray-500 uppercase tracking-wider`.
*   **Status Badge**: `inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wide`
*   **AI Score Card**: `bg-gradient-to-br from-indigo-900 to-purple-900 text-white rounded-xl shadow-lg border border-indigo-500 relative overflow-hidden`

## 18. Contoh Partial PHP Component Implementation
PHP native tidak memiliki Blade/Twig. Kita menggunakan function helpers atau `require` dengan membatasi scope variabel. Contoh struktur file: `app/views/components/`

```php
// app/views/components/badge.php
<?php
// Exp: render_badge('accepted', 'Accepted');
function render_badge($status, $label) {
    $colors = [
        'accepted' => 'bg-emerald-100 text-emerald-800',
        'published' => 'bg-emerald-100 text-emerald-800',
        'rejected' => 'bg-red-100 text-red-800',
        'revision' => 'bg-amber-100 text-amber-800',
        'under_review' => 'bg-blue-100 text-blue-800',
        'submitted' => 'bg-gray-100 text-gray-800',
    ];
    $colorClass = $colors[$status] ?? 'bg-gray-100 text-gray-800';
    return '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-black uppercase tracking-wider ' . $colorClass . '">' . htmlspecialchars($label) . '</span>';
}
?>
```