admin/SR-SYSTEM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
af4aeb8ae933b7eb9347ad271aa9c4773b7ce672
SR-SYSTEM/docs/07-design-system.md
T
pray4skylark 832c9f096f init: SR System — Helpdesk & ITAM Portal
2026-06-02 13:50:39 +09:00

13 KiB
Raw Blame History

name, version, merged_from, colors, typography, rounded, spacing
name version merged_from colors typography rounded spacing
Premium Enterprise — SR System HQ Helpdesk 2.0.0
Stitch/Premium Enterprise (v1)
project_m_dashboard_shell_1
project_m_dashboard_shell_2
surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant status-open status-open-bg status-resolved status-resolved-bg status-critical status-critical-bg status-pending status-pending-bg status-closed status-closed-bg project-dot-green project-dot-orange project-dot-blue project-dot-pink project-dot-purple project-dot-gray
#f8f9ff #cbdbf5 #f8f9ff #ffffff #eff4ff #e5eeff #dce9ff #d3e4fe #0b1c30 #464555 #213145 #eaf1ff #777587 #c7c4d8 #4d44e3 #3525cd #ffffff #4f46e5 #dad7ff #c3c0ff #712ae2 #ffffff #8a4cfc #fffbff #7e3000 #ffffff #a44100 #ffd2be #ba1a1a #ffffff #ffdad6 #93000a #e2dfff #c3c0ff #0f0069 #3323cc #eaddff #d2bbff #25005a #5a00c6 #ffdbcc #ffb695 #351000 #7b2f00 #f2f3f8 #0b1c30 #d3e4fe #3b82f6 #eff6ff #10b981 #ecfdf5 #ef4444 #fef2f2 #f59e0b #fffbeb #6b7280 #f9fafb #22c55e #f97316 #3b82f6 #ec4899 #a855f7 #d1d5db
h1 h2 h3 h4 body-lg body-md body-sm data-label button nav-item nav-group-label
fontFamily fontSize fontWeight lineHeight
Outfit 32px 600 1.2
fontFamily fontSize fontWeight lineHeight
Outfit 24px 600 1.3
fontFamily fontSize fontWeight lineHeight
Outfit 20px 500 1.4
fontFamily fontSize fontWeight lineHeight
Outfit 16px 600 1.4
fontFamily fontSize fontWeight lineHeight
Inter 16px 400 1.6
fontFamily fontSize fontWeight lineHeight
Inter 14px 400 1.5
fontFamily fontSize fontWeight lineHeight
Inter 12px 400 1.5
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter 12px 500 1.2 0.02em
fontFamily fontSize fontWeight lineHeight
Inter 14px 600 1
fontFamily fontSize fontWeight lineHeight
Inter 14px 500 1
fontFamily fontSize fontWeight lineHeight letterSpacing textTransform
Inter 11px 600 1 0.08em uppercase
sm DEFAULT md lg xl full
0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px
base xs sm md lg xl gutter margin-page
4px 4px 8px 16px 24px 32px 24px 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:

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
Reference in New Issue View Git Blame Copy Permalink