eigen-hris/DESIGN.md

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):

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.