# DESIGN.md - Eigen HRIS Visual Design System & UI Blueprint

## 1. Design Philosophy: "Anti-AI-Slop & Human-Centric"
Eigen HRIS avoids repetitive, low-effort template aesthetics ("AI Slop"—such as generic gray rounded cards, centered meaningless gradients, and bland stock dashboards). Instead, Eigen HRIS is engineered with:
- **High Intentionality & Structure:** Sharp borders, subtle shadows, deliberate typographic scale, and purposeful asymmetric layouts.
- **Personality-Driven Gamification:** Playful, human-centric recognition widgets for employees ("Si Paling Pagi", "Si Paling Rajin", "Si Paling Telat", "Si Paling Pulang Malam").
- **Dynamic & Tactile Feedback:** Crisp micro-interactions, responsive hover states, smooth transitions, and distinct status indicators.

---

## 2. Color Palette & Token Architecture

The color system is derived from the approved brand palette ([Color Hunt #1b4ef53874ff5996fff4ceff](https://colorhunt.co/palette/1b4ef53874ff5996fff4ceff)):

### Primary Brand Colors
| Token Name | Hex Code | Purpose & Application |
|---|---|---|
| `--color-brand-primary` | `#1b4ef5` | **Cobalt Electric**: Primary action buttons, active navigation markers, key metric callouts, high-emphasis icons. |
| `--color-brand-secondary` | `#3874ff` | **Royal Azure**: Secondary buttons, active interactive elements, gradient fills, table header highlights. |
| `--color-brand-tertiary` | `#5996ff` | **Sky Periwinkle**: Subtle borders, active tab underlines, hover glow, secondary badges. |
| `--color-brand-pastel` | `#f4ceff` | **Lilac Cloud / Lavender Mist**: Soft background tints for top highlight cards ("Si Paling Pagi", streak champion badges), subtle notification accents. |

### Neutral & Semantic Colors
| Token Name | Hex Code | Purpose |
|---|---|---|
| `--color-bg-app` | `#F8FAFC` | Main application background (Clean slate-50). |
| `--color-bg-card` | `#FFFFFF` | Card surface with crisp `border border-slate-200/80`. |
| `--color-text-primary` | `#0F172A` | Primary text (Slate 900) for sharp readability. |
| `--color-text-secondary` | `#475569` | Secondary text (Slate 600) for subtitles and table contents. |
| `--color-text-muted` | `#94A3B8` | Muted labels, timestamps, and placeholder text (Slate 400). |
| `--color-status-present` | `#10B981` | Emerald Green: Present (WFO / WFH), Approved requests. |
| `--color-status-late` | `#F59E0B` | Amber: Late clock-ins, Late permits. |
| `--color-status-leave` | `#8B5CF6` | Purple: Annual leave (Cuti). |
| `--color-status-sick` | `#EC4899` | Rose / Pink: Sick leave with doctor note. |
| `--color-status-danger` | `#EF4444` | Red: Rejected requests, Contract termination. |

---

## 3. Typography: Plus Jakarta Sans

The entire interface uses **Plus Jakarta Sans** for modern geometric clarity and high legibility.

### Hierarchy Scale
- **Display / Hero Title:** `32px` (`text-3xl`), `font-extrabold` (800), tracking `-0.03em`.
- **Page Headings:** `24px` (`text-2xl`), `font-bold` (700), tracking `-0.02em`.
- **Card / Widget Headings:** `16px` (`text-base`), `font-semibold` (600), tracking `-0.01em`.
- **Section Eyebrow / Category Label:** `12px` (`text-xs`), `font-bold` (700), `uppercase`, tracking `0.06em`, color `text-brand-primary` or `text-slate-500`.
- **Body Regular:** `14px` (`text-sm`), `font-normal` (400) / `font-medium` (500), `leading-relaxed`.
- **Tabular Data & Timestamps:** `13px` - `14px`, `font-mono` or `font-feature-settings: 'tnum'` for aligned clock times and numbers.

---

## 4. UI Components & Visual Patterns

### 4.1 Gamified Analytics Widget System
- **"Si Paling Rajin" (Streak Champion):**
  - Card with electric cobalt `#1b4ef5` gradient border, flame streak badge (`🔥`), and total active days counter.
- **"Si Paling Pagi" (The Early Bird):**
  - Card with soft lilac `#f4ceff` luminous background accent, golden sunburst badge (`☀️`), and average clock-in stamp (e.g., `07:42 AM`).
- **"Si Paling Telat" (The Snooze King):**
  - Card with amber/warning border tint, alarm clock badge (`⏰`), and total accumulated late minutes breakdown.
- **"Si Paling Pulang Malam" (The Night Owl):**
  - Card with deep blue/indigo background accent, crescent moon badge (`🌙`), and average late clock-out stamp (e.g., `20:15 PM`).

### 4.2 Online Avatar & Photo Picker Component
- **Avatar Display:**
  - Crisp rounded avatar (`rounded-2xl` or circular) with dynamic online photo URLs.
  - Border indicator corresponding to employment status (Green = Active, Orange = Probation, Gray = Inactive).
- **Online Avatar Generator Modal / Picker:**
  - Interactive "Generate New Avatar" button fetching dynamic SVG/PNG portraits from online services (DiceBear, Pravatar, Unsplash).
  - Seed customization input allowing instant avatar regeneration based on employee name or unique strings.

### 4.3 Navigation & Layout Shell
- **Sidebar:**
  - Sleek vertical sidebar with deep cobalt active link indicators, subtle badges, and company branding (Eigen HRIS).
- **Top Header:**
  - Global search bar, quick role badge (`SUPERADMIN` / `STAFF`), and user profile dropdown with quick status switch.
- **Interactive Filter Bar:**
  - Segmented control pills for date ranges (*This Month*, *Last Month*, *Custom Range*).
  - Day toggle buttons (*Yesterday*, *Today*, *Tomorrow*) with badge counts.

### 4.4 Data Tables & Status Badges
- **Unified Table:**
  - Clean table headers (`bg-slate-50`, sticky positioning, crisp divider).
  - Row hover transition with `hover:bg-slate-50/80`.
  - Action buttons with icon tooltips (Edit, View Contract, Approve/Reject).
- **Status Badges:**
  - Pill design (`rounded-full px-2.5 py-1 text-xs font-semibold`) with high-contrast text and soft pastel background tints.

---

## 5. Micro-Interactions & Transitions
- **Button Hover / Active:** Subtle scale transition (`active:scale-[0.98] transition-transform duration-150`).
- **Modal Dialogs:** Smooth backdrop blur (`backdrop-blur-sm bg-slate-900/40`) with fade-and-scale entrance.
- **Card Hover:** Subtle border illumination using `--color-brand-tertiary` (`#5996ff`).

---

## 6. Design System Maintenance & Changelog
> [!IMPORTANT]
> **Mandatory Documentation Sync:** Any modification to design tokens, typography, component behaviors, layouts, or visual aesthetics MUST be immediately documented in this file (`DESIGN.md`) alongside implementation updates.

### Changelog
| Date | Author / Agent | Changes & Notes |
|---|---|---|
| 2026-08-27 | System / Antigravity | Initial creation of the Eigen HRIS Design System: Color Hunt `#1b4ef53874ff5996fff4ceff` palette, Plus Jakarta Sans typography, gamified widgets, online photo picker components, and synchronization policy. |
| 2026-08-27 | User / Antigravity | Configured design system pipeline dependencies to be installed and managed via **Yarn**. |
| 2026-08-27 | System / Antigravity | Implemented complete anti-AI-slop UI components: custom tactile cards, avatar picker with live preview & style presets, status badges, celebratory confetti micro-interactions, responsive sidebars, and real-time WIB clock header. |
| 2026-08-27 | User / Antigravity | Added tactile file upload dropzone for permits/contracts, live upload preview badges, and one-click 'Lihat' (view) & 'Unduh' (download) action buttons for server-stored attachments. |