--- name: Premium Enterprise — SR System HQ Helpdesk version: 2.0.0 merged_from: - Stitch/Premium Enterprise (v1) - project_m_dashboard_shell_1 - project_m_dashboard_shell_2 colors: # === Canvas & Surface === surface: '#f8f9ff' surface-dim: '#cbdbf5' surface-bright: '#f8f9ff' surface-container-lowest: '#ffffff' surface-container-low: '#eff4ff' surface-container: '#e5eeff' surface-container-high: '#dce9ff' surface-container-highest: '#d3e4fe' on-surface: '#0b1c30' on-surface-variant: '#464555' inverse-surface: '#213145' inverse-on-surface: '#eaf1ff' outline: '#777587' outline-variant: '#c7c4d8' surface-tint: '#4d44e3' # === Brand Indigo === primary: '#3525cd' on-primary: '#ffffff' primary-container: '#4f46e5' on-primary-container: '#dad7ff' inverse-primary: '#c3c0ff' # === Accent Purple === secondary: '#712ae2' on-secondary: '#ffffff' secondary-container: '#8a4cfc' on-secondary-container: '#fffbff' # === Semantic Amber (tertiary, for ITAM warnings) === tertiary: '#7e3000' on-tertiary: '#ffffff' tertiary-container: '#a44100' on-tertiary-container: '#ffd2be' # === Semantic Error === error: '#ba1a1a' on-error: '#ffffff' error-container: '#ffdad6' on-error-container: '#93000a' # === Fixed Tints === primary-fixed: '#e2dfff' primary-fixed-dim: '#c3c0ff' on-primary-fixed: '#0f0069' on-primary-fixed-variant: '#3323cc' secondary-fixed: '#eaddff' secondary-fixed-dim: '#d2bbff' on-secondary-fixed: '#25005a' on-secondary-fixed-variant: '#5a00c6' tertiary-fixed: '#ffdbcc' tertiary-fixed-dim: '#ffb695' on-tertiary-fixed: '#351000' on-tertiary-fixed-variant: '#7b2f00' background: '#f2f3f8' on-background: '#0b1c30' surface-variant: '#d3e4fe' # === NEW: Status / Semantic Colors (from reference) === status-open: '#3b82f6' # Blue — SR Open status-open-bg: '#eff6ff' status-resolved: '#10b981' # Emerald — Resolved status-resolved-bg: '#ecfdf5' status-critical: '#ef4444' # Red — Critical Priority status-critical-bg: '#fef2f2' status-pending: '#f59e0b' # Amber — Pending / In-progress status-pending-bg: '#fffbeb' status-closed: '#6b7280' # Gray — Closed / Archived status-closed-bg: '#f9fafb' # === NEW: Project Dot Colors (from shell reference) === project-dot-green: '#22c55e' project-dot-orange: '#f97316' project-dot-blue: '#3b82f6' project-dot-pink: '#ec4899' project-dot-purple: '#a855f7' project-dot-gray: '#d1d5db' typography: h1: fontFamily: Outfit fontSize: 32px fontWeight: '600' lineHeight: '1.2' h2: fontFamily: Outfit fontSize: 24px fontWeight: '600' lineHeight: '1.3' h3: fontFamily: Outfit fontSize: 20px fontWeight: '500' lineHeight: '1.4' h4: fontFamily: Outfit fontSize: 16px fontWeight: '600' lineHeight: '1.4' body-lg: fontFamily: Inter fontSize: 16px fontWeight: '400' lineHeight: '1.6' body-md: fontFamily: Inter fontSize: 14px fontWeight: '400' lineHeight: '1.5' body-sm: fontFamily: Inter fontSize: 12px fontWeight: '400' lineHeight: '1.5' data-label: fontFamily: Inter fontSize: 12px fontWeight: '500' lineHeight: '1.2' letterSpacing: 0.02em button: fontFamily: Inter fontSize: 14px fontWeight: '600' lineHeight: '1' nav-item: fontFamily: Inter fontSize: 14px fontWeight: '500' lineHeight: '1' nav-group-label: fontFamily: Inter fontSize: 11px fontWeight: '600' lineHeight: '1' letterSpacing: 0.08em textTransform: uppercase rounded: sm: 0.25rem DEFAULT: 0.5rem md: 0.75rem lg: 1rem xl: 1.5rem full: 9999px spacing: base: 4px xs: 4px sm: 8px md: 16px lg: 24px xl: 32px gutter: 24px margin-page: 32px --- ## Brand & Style This design system establishes an **"Approachable Enterprise"** aesthetic for the SR System — a HQ Helpdesk and IT Asset Management Portal for dispatched SI/SM engineers. It balances the rigor of data-dense corporate tools with a modern, human-centric softness. The visual style is **Corporate Modern with Tactile Influences**. It utilizes generous whitespace, a high-quality Off-white canvas (`#F2F3F8`), and soft ambient shadows to create clear spatial hierarchy. The intent is to lower cognitive load for power users while maintaining a premium feel through refined typography and intentional roundness. **Merged from:** Stitch Premium Enterprise v1 + Project M. Dashboard Shell (expanded & icon-collapsed variants). --- ## Colors The palette is anchored by **Deep Indigo** for primary actions and brand presence. The canvas follows a "Softer Background" philosophy: - **Canvas:** `#F2F3F8` Off-white, slightly cooler than the v1 value, to contrast white cards more clearly. - **Surfaces:** Pure White `#FFFFFF` for cards and main content containers. - **Brand Indigo:** `#4F46E5` for primary buttons, active nav states, and key CTAs. - **Accents:** Soft purples (`#712AE2`) for secondary actions; muted semantic colors for SR status badges. - **Status Colors (NEW):** A distinct set of semantic tokens for SR ticket states (Open, In-Progress, Resolved, Closed, Critical) and ITAM asset states. These must remain consistent across all badge, chip, and table row usages. - **Project Dot Colors (NEW):** 5 distinct hues (green, orange, blue, pink, purple) used as visual identifiers for active dispatch projects in the sidebar project list. --- ## Typography Dual-font strategy: - **Outfit** — Headlines, section titles, sidebar brand name. - **Inter** — All data labels, body text, nav items, badges. Hierarchy is achieved through weight and tonal contrast. Data labels use `letter-spacing: 0.02em` and `font-weight: 500`. Nav group labels (e.g., "MY PROJECTS", "MAIN MENU") use `font-size: 11px`, `font-weight: 600`, `letter-spacing: 0.08em`, uppercase. --- ## Layout & Spacing ### Sidebar Behavior (UPDATED from reference) The sidebar has **two responsive states**: | State | Width | Content | |---|---|---| | **Expanded** (default, ≥1280px) | 250px | Logo + label + full nav text + project list + CTA card | | **Collapsed** (manual toggle or ≤1024px) | 64px | Icon-only nav + project color dots + icon CTA | A `>>` / `<<` toggle chevron is placed in the top bar to switch states. Active state = pill-shaped highlight (`8px–12px` rounded rect) in `primary-fixed` tint. ### Top Navigation Bar - Height: 64px, white background, `1px solid outline-variant` bottom border. - **Left zone:** Sidebar toggle chevron + Search bar (centered, `#F3F4F6` bg, 12px radius). - **Right zone:** Calendar icon → Chat icon → Bell icon (with unread badge) → `[Avatar] Name / Location ▾`. ### Main Content Grid - 12-column fluid grid with 24px gutters, 32px page margins. - Summary card row at top: 4 equal columns (SR counts, active dispatches, equipment status, pending reports). - Below: mix of 8+4 or 6+6 column splits for tables + detail panels. ### Page Container All pages follow a standardized container pattern for layout consistency: ```tsx className="p-4 sm:p-6 lg:p-8" // Responsive padding max-w-7xl mx-auto // Content max-width (or max-w-5xl for profile) ``` **Padding:** - Mobile (< 640px): `p-4` (16px) - Tablet (640–1024px): `p-6` (24px) - Desktop (≥ 1024px): `p-8` (32px) **Max-width:** - Standard pages: `max-w-7xl` (1280px) - Profile page: `max-w-5xl` (1024px) — lighter content density **Components that must use this pattern:** - All `src/app/(main)/*/page.tsx` files - All sub-page files in route groups - The root div of each page should directly use `p-4 sm:p-6 lg:p-8` **Exceptions:** - Modals and overlays (use their own sizing) - The sidebar and header (managed by MainShell) --- ## Elevation & Depth | Level | Surface | Treatment | |---|---|---| | **0 — Canvas** | `#F2F3F8` | Background only | | **1 — Cards / Sidebar** | White | `1px border (#E5E7EB)` + `box-shadow: 0 1px 3px rgba(0,0,0,0.06)` | | **2 — Floating / Active** | White | `box-shadow: 0 4px 16px rgba(0,0,0,0.08)` | | **3 — Modal / Overlay** | White | `box-shadow: 0 20px 48px rgba(0,0,0,0.14)` + backdrop blur | Hover states increase shadow spread; border color stays constant. --- ## Shapes - **Content Cards:** `border-radius: 16px` (lg) - **Buttons / Inputs:** `12px–16px` - **Sidebar Nav Active State:** Pill-shape or `8px–12px` rounded rect background - **Status Badges / Chips:** Pill (`border-radius: 9999px`), low-opacity bg tint + high-contrast text - **Avatars:** `border-radius: 9999px` (circular) - **Project Dots:** `border-radius: 9999px`, `width: 8px`, `height: 8px` --- ## Components ### Sidebar (UPDATED) **Expanded State (250px)** ``` ┌─────────────────────────┐ │ 🟣 SR System │ ← Logo dot (gradient circle) + Outfit h4 ├─────────────────────────┤ │ MAIN MENU │ ← nav-group-label style │ ⊞ Dashboard │ ← Active: pill bg (#EEF2FF), text (#4F46E5) │ 📋 SR Issues │ │ 🚀 Dispatch │ │ 💻 ITAM │ │ 📊 Work Reports │ │ 🎓 Training │ │ ⚙️ Settings │ ├─────────────────────────┤ │ MY PROJECTS [+] │ ← nav-group-label + icon button │ 🟢 Samsung Pay SI │ │ 🟠 LG CNS SM │ │ 🔵 Kakao Maintenance │ │ 🔴 SK Hynix Dev │ ├─────────────────────────┤ │ ╭───────────────────╮ │ │ │ 💡 Quick Note │ │ ← CTA Card: #FFF9EC bg, amber accent │ │ Share updates │ │ │ │ [Write a message] │ │ │ ╰───────────────────╯ │ └─────────────────────────┘ ``` **Collapsed State (64px)** Icons only; project list shows 8px color dots; CTA card reduces to single 💡 icon button. --- ### Top Navigation Bar - **Search:** `placeholder="Search issues, assets, employees..."` — 400px wide at center. - **Icons (right):** Calendar (`📅`), Chat/Message (`💬`), Bell (`🔔` with red dot if unread). - **Profile:** Circular avatar (32px) + `Inter Medium` name + subtitle (department/location) + dropdown `▾`. --- ### Summary Cards (Dashboard Header Row) 4 cards with colored left-border accent and inline sparkline or icon: 1. **Open SR Tickets** — Blue left-border, count + delta vs last week. 2. **Active Dispatches** — Indigo left-border, headcount + project list mini chips. 3. **Equipment In-Use** — Amber left-border, asset count + status bar. 4. **Pending Reports** — Purple left-border, overdue count highlighted in red. --- ### Buttons & Controls - **Primary:** `bg: #4F46E5`, white text, `12px` radius, `px-16 py-8`, Inter SemiBold 14px. - **Secondary Outlined:** transparent bg, `1px solid #4F46E5`, indigo text. - **Ghost:** No border, gray text, hover bg `#F3F4F6`. - **Danger:** `bg: #EF4444` for destructive actions. - **'New SR' (Primary CTA):** In Top Nav right area — Primary style with `+` icon prefix. --- ### Status Badges / Chips (SR Tickets) ``` OPEN → bg: #EFF6FF, text: #3B82F6, border: none IN-PROGRESS→ bg: #FFFBEB, text: #F59E0B RESOLVED → bg: #ECFDF5, text: #10B981 CLOSED → bg: #F9FAFB, text: #6B7280 CRITICAL → bg: #FEF2F2, text: #EF4444, font-weight: 600 ``` All pill-shaped (`border-radius: 9999px`), `px-8 py-2`, `font-size: 12px`. --- ### Data Tables - Header: `font-size: 12px`, Inter SemiBold, `letter-spacing: 0.04em`, uppercase, `color: #6B7280`. - Row hover: `bg: #F8F9FF`. - Selected row: `bg: #EEF2FF`. - Pagination: Simple `< 1 2 3 ... 12 >` strip, `border-top: 1px solid #E5E7EB`. - Column widths: flexible, min-width per type (`ID: 60px, Date: 100px, Status: 120px, Text: auto`). --- ### SR Issue Detail Panel A right-side slide-over panel (480px) or full-page route: - **Header:** Title, SR ID badge, Status badge, Priority chip, Assignee avatar. - **Thread / Comments:** Chat-bubble layout, alternating left (requester) / right (HQ support). - **Code Block:** Dark bg (`#1E1E2E`), monospace font (JetBrains Mono 13px), copy button. - **Attachment Area:** File chip list with extension icon + filename + size. --- ### Dispatch Timeline Vertical timeline component for employee career: - Left rail: `2px solid #E5E7EB` with colored dot per project. - Each entry: Project name (Outfit SemiBold), period badge, role chip, tech stack pill list. --- ### ITAM Asset Viewer - Expandable JSON spec panel using styled key-value grid. - Asset status pill in header. - Maintenance history as compact table below specs. --- ## Responsive Breakpoints | Breakpoint | Sidebar | Layout | |---|---|---| | `≥ 1280px` | 250px expanded | Full dashboard | | `1024px–1279px` | 64px collapsed (auto) | Icon sidebar | | `< 1024px` | Hidden (drawer overlay) | Mobile nav bar at bottom |