expro987
/
MIF_E31230910_MP-HRIS-WEB
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
MIF_E31230910_MP-HRIS-WEB/DESIGN.md

8.1 KiB
Raw Permalink Blame History

DESIGN.md — HRIS MP (Menjadi Pengaruh Group)

HR Information System — Web Admin Dashboard & Employee Mobile App

⚠️ CRITICAL: This is a LIGHT THEME application. Do NOT use dark mode. All page backgrounds are light gray (#F8FAFC). All cards and content areas are WHITE (#FFFFFF). The sidebar is WHITE with a light gray right border. The dark navy color (#130F26) is ONLY used for: active sidebar menu items, primary action buttons, and the avatar circle. Everything else should be light, clean, and white.

Brand Identity

  • Product Name: HRIS MP
  • Company: Menjadi Pengaruh Group
  • Design Mood: Clean, bright, minimal, professional, corporate. Light and airy with plenty of white space.
  • Overall Feel: Like a premium SaaS admin dashboard. Think Linear, Notion, or Vercel Dashboard — clean white interfaces with subtle shadows.

Typography

  • Font: Inter (Google Fonts), weights 300–700
  • Page Title: 24px, Bold, color #1e293b (dark slate)
  • Section Title: 18px, Bold, color #1e293b
  • Card Label: 14px, Semibold, UPPERCASE, color #64748b (gray)
  • Body Text: 14px, Regular, color #1e293b
  • Secondary Text: 14px, Regular, color #64748b (medium gray)
  • Caption/Small: 12px, color #94a3b8 (light gray)
  • Badge Text: 10px, Bold

Color Palette

IMPORTANT: Light Theme Colors

Page background: #F8FAFC (very light gray, almost white) Card/Content background: #FFFFFF (pure white) Sidebar background: #FFFFFF (pure white) with right border #e2e8f0

Accent Color (used sparingly!)

  • Primary accent: #130F26 (very dark navy) — ONLY for active menu items, primary buttons, and avatar
  • Primary gradient: from #130F26 to #2A244A — ONLY for primary action buttons
  • Primary hover: #1E1B3A

Text Colors

  • Heading text: #1e293b (dark slate) on white background
  • Body text: #334155 (medium dark) on white background
  • Secondary text: #64748b (medium gray) on white background
  • Placeholder text: #94a3b8 (light gray)
  • Disabled text: #94a3b8

Border & Divider Colors

  • Card borders: #f1f5f9 (very subtle, barely visible)
  • Input borders: #e2e8f0 (light gray)
  • Table dividers: #f1f5f9 (very light)
  • Sidebar section dividers: #e2e8f0

Semantic Status Colors (for badges and indicators only)

  • Success/Approved: bg #dcfce7, text #16a34a (green)
  • Pending/Warning: bg #fff7ed, text #f97316 (orange)
  • Rejected/Error: bg #fef2f2, text #dc2626 (red)
  • Info: bg #eff6ff, text #2563eb (blue)

Action Button Colors

  • Edit button: bg #fffbeb (light amber), text #d97706 (amber)
  • Delete button: bg #fef2f2 (light red), text #dc2626 (red)
  • Primary button: bg gradient #130F26→#2A244A, text white

Stat Card Icon Backgrounds (pastel, light colors)

  • Indigo: bg #eef2ff, icon #4f46e5
  • Purple: bg #faf5ff, icon #9333ea
  • Blue: bg #eff6ff, icon #2563eb
  • Emerald: bg #ecfdf5, icon #059669
  • Orange: bg #fff7ed, icon #ea580c
  • Red: bg #fef2f2, icon #dc2626

Shadows (subtle, not heavy)

  • Card default: 0 2px 12px -2px rgba(0,0,0,0.04) — very subtle
  • Card hover: 0 4px 20px -2px rgba(0,0,0,0.05) — slightly more visible
  • Button hover glow: 0 0 15px rgba(19,15,38,0.15) — subtle navy glow

Layout Structure

Overall Page Layout

  • Left: Fixed sidebar (288px wide, WHITE background, light gray right border)
  • Right: Scrollable content area (light gray #F8FAFC background)
  • Top of content: Sticky header bar (white with frosted glass effect)

Sidebar (LEFT SIDE)

  • Background: WHITE (#FFFFFF)
  • Width: 288px
  • Right border: 1px solid #e2e8f0 (light gray line)
  • Top: Company logo centered (height ~112px area)
  • Menu items:
    • Active item: bg #130F26 (dark navy), text white, rounded 12px, subtle shadow
    • Inactive item: text #64748b (gray), hover: bg #f8fafc, text #0f172a
    • Icon size: 20x20px, on the left of text
    • Text: 14px semibold
  • Section labels: 10px, bold, uppercase, gray (#94a3b8), with horizontal lines on both sides
  • Sections: "Manajemen", "Absensi", "Data Master" (collapsible with chevron)
  • Bottom: "Pengaturan Akun" link + red "Logout" button

Top Header Bar

  • Background: white with 70% opacity + backdrop blur (frosted glass)
  • Sticky at top
  • Bottom border: 1px solid rgba(226,232,240,0.6)
  • Very subtle shadow
  • Left: Page title (24px, bold, #1e293b)
  • Right: Notification bell icon → User name + email text → Circular avatar
  • Avatar: 44px circle, gradient #130F26→#2B2545, white letter inside, white ring around it

Components

Cards

  • Background: WHITE
  • Border: 1px solid #f1f5f9 (barely visible)
  • Border radius: 16px to 24px
  • Shadow: very subtle (see shadows section)
  • Padding: 24px inside
  • On hover: slight lift (-1px up) with slightly stronger shadow

Stat Cards (Dashboard)

  • Background: WHITE
  • Large number: 30-36px, extra bold, color #1e293b
  • Label: 14px, semibold, uppercase, color #64748b
  • Icon: in a pastel-colored rounded square (16px radius, 12px padding)
  • Subtle decorative gradient orb in background at very low opacity (3%)

Data Tables

  • Container: WHITE background, 16px border radius, ring-1 #f1f5f9
  • Header row: bg #f8fafc (almost white), text #64748b, 11px, bold, uppercase
  • Body rows: WHITE background, divided by 1px #f1f5f9 lines
  • Row hover: slight lift with shadow
  • Cell padding: 16px vertical

Input Fields

  • Background: #f8fafc (very light gray), turns WHITE on focus
  • Border: 1px solid #e2e8f0
  • Border radius: 12px
  • Height: 44px
  • Focus state: 4px ring in rgba(19,15,38,0.1), border turns #130F26
  • Label above: 14px, semibold, #334155

Buttons

  • Primary: gradient #130F26→#2A244A, text white, 12px radius, hover lifts up
  • Secondary: WHITE bg, border #e2e8f0, text #334155
  • Danger: gradient red-600→red-500, text white
  • All buttons: 12px radius, padding 10px 24px

Modals

  • Overlay: #0f172a at 40% opacity + backdrop blur
  • Modal box: WHITE bg, 16px radius, heavy shadow
  • Header: frosted glass (white 80% + blur), title bold, close X button
  • Content area: white, 24px padding

Badges/Status Pills

  • Small rounded-full pills
  • Approved: light green bg #dcfce7, green text #16a34a
  • Pending: light orange bg #fff7ed, orange text #f97316
  • Rejected: light red bg #fef2f2, red text #dc2626
  • Size: 10px bold text, padding 2px 8px

Search Input

  • Same as input field but with magnifying glass icon on the left

Pagination

  • Active page: bg #130F26, text white, rounded
  • Inactive: WHITE bg, border, text #475569

Notification Dropdown

  • Bell icon (24px), with red count badge
  • Dropdown: WHITE bg, 384px wide, 16px radius, heavy shadow
  • Each item: icon + title + message + time

SweetAlert Dialogs

  • Rounded 20px, WHITE bg, centered
  • Confirm button: #130F26 bg, full width
  • Cancel button: #f1f5f9 bg, gray text

Page Types

1. Login Page

  • Split screen: Left half = full bleed image with primary color overlay, Right half = WHITE form area
  • Form: centered, max 384px wide
  • Title "Sign in": 30px, extra bold, #130F26
  • Inputs with labels
  • Full-width primary button
  • Footer: copyright text

2. Dashboard

  • Stat cards in 4-column grid (responsive)
  • Charts below
  • WHITE cards on light gray page background

3. Data Table Pages

  • Page header: title + subtitle + action buttons
  • Filter bar: dropdowns + search input
  • WHITE table card
  • Pagination

4. Form Pages (Create/Edit)

  • Back button
  • WHITE form cards with sections
  • 2-column grid layout for form fields
  • Save button

5. Modal CRUD Pages (Divisi, Jabatan, Shift, Role, etc.)

  • Table page with "+ Tambah" button
  • Centered modal overlay for create/edit
  • Same table + modal pattern

6. Calendar Page (Jadwal)

  • Month view calendar
  • Color-coded shift events
  • Legend bar

Mobile App (Flutter)

  • Light theme matching web
  • Background: #F8FAFC
  • Cards: WHITE
  • Primary accent: #130F26
  • Bottom navigation bar
  • Card-based layouts

Animations

  • Button hover: lift 0.5px up + glow shadow
  • Card hover: lift 1px up + stronger shadow
  • Sidebar icon hover: scale to 110%
  • Modal: fade + slide up + scale
  • Dropdown: fade + slide down
  • Table row hover: lift with shadow
  • All transitions: 200-300ms ease