Skip to main content

3. Overall Architecture

3.1 Three-Panel Layout​

Desktop (≥1024px):

ASCII Layout:

┌────────────────────────────────────────────────────────────────────────────┐
│  Top Bar (60px height)                                                     │
│  🔍 Search | 🎛️ Filters (3) | Breadcrumbs | 👤 User | ❓ Help             │
├─────────────┬──────────────────────────────────────────────────────────────┤
│             │                                                              │
│  Left       │  Main Content Area (fluid width)                            │
│  Sidebar    │                                                              │
│  (280px)    │  ┌────────────────────────────────────────────────────┐     │
│             │  │                                                    │     │
│  Dashboard  │  │  Active View:                                      │     │
│  ├─ 📊 Port │  │  - Portfolio Overview (default)                    │     │
│  ├─ 📋 Task │  │  - Multi-Project Kanban Board                      │     │
│  ├─ 📈 Anal │  │  - Timeline Chart (Gantt)                          │     │
│  ├─ 🔍 Sear │  │  - Analytics Dashboard                             │     │
│             │  │                                                    │     │
│  Projects   │  │  Content rendered based on view selection          │     │
│  ├─ Core(3) │  │  (see sections 5-8 for detailed specs)             │     │
│  ├─ Cloud(4)│  │                                                    │     │
│  ├─ Dev(10) │  │                                                    │     │
│  ├─ ...     │  │                                                    │     │
│             │  └────────────────────────────────────────────────────┘     │
│  Milestones │                                                              │
│  ├─ Beta    │                                                              │
│  ├─ Pilot   │                                                              │
│  └─ GTM     │                                                              │
│             │                                                              │
└─────────────┴──────────────────────────────────────────────────────────────┘

Dimensions:

  • Top Bar: 100% width × 60px height (fixed)
  • Left Sidebar: 280px width × calc(100vh - 60px) height (fixed)
  • Main Content: calc(100vw - 280px) width × calc(100vh - 60px) height (fluid)

Behavior:

  • Top Bar: Fixed position (always visible on scroll)
  • Left Sidebar: Fixed position (always visible, scrollable internally)
  • Main Content: Scrollable (overflow-y: auto)

3.2 Color System​

Brand Colors:

/* Primary */
--primary-blue: #0066CC;      /* Links, CTAs, focus states */
--primary-blue-dark: #004C99; /* Hover states */
--primary-blue-light: #E6F2FF; /* Backgrounds, highlights */

/* Status Colors */
--status-green: #00A651;   /* >70% complete, success */
--status-yellow: #FFB700;  /* 40-70% complete, warning */
--status-red: #DC3545;     /* <40% complete, error */
--status-blue: #17A2B8;    /* 100% complete, info */

/* Priority Colors */
--priority-p0: #DC3545;    /* P0 - Critical */
--priority-p1: #FF6B00;    /* P1 - High */
--priority-p2: #FFB700;    /* P2 - Medium */
--priority-p3: #6C757D;    /* P3 - Low */

/* Neutrals */
--gray-900: #212529;       /* Primary text */
--gray-700: #495057;       /* Secondary text */
--gray-500: #ADB5BD;       /* Tertiary text, borders */
--gray-300: #DEE2E6;       /* Dividers */
--gray-100: #F8F9FA;       /* Backgrounds */
--white: #FFFFFF;          /* Cards, modals */

Accessibility Notes:

  • All text colors meet WCAG 2.1 AA contrast ratio (≥4.5:1 for normal text, ≥3:1 for large text)
  • Status colors have distinct shapes (●■▲◆) for color-blind users
  • Focus indicators use 2px solid blue outline (#0066CC)

3.3 Typography​

/* Font Stack */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

/* Font Sizes */
--font-size-xs: 0.75rem;    /* 12px - Labels, badges */
--font-size-sm: 0.875rem;   /* 14px - Secondary text */
--font-size-base: 1rem;     /* 16px - Body text */
--font-size-lg: 1.125rem;   /* 18px - Headings H4 */
--font-size-xl: 1.25rem;    /* 20px - Headings H3 */
--font-size-2xl: 1.5rem;    /* 24px - Headings H2 */
--font-size-3xl: 2rem;      /* 32px - Headings H1 */

/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Line Heights */
--line-height-tight: 1.25;
--line-height-base: 1.5;
--line-height-relaxed: 1.75;

3.4 Spacing System (8px Grid)​

--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;      /* 16px */
--spacing-lg: 1.5rem;    /* 24px */
--spacing-xl: 2rem;      /* 32px */
--spacing-2xl: 3rem;     /* 48px */
--spacing-3xl: 4rem;     /* 64px */

Grid Usage:

  • All margins, padding, and gaps use multiples of 8px
  • Exception: Fine-tuning allowed for 4px (half-grid)