monacousa-portal/DESIGN-SYSTEM.md

MonacoUSA Portal Design System - Glass Bolt Theme

Overview

The MonacoUSA Portal uses a sophisticated glassmorphic design system inspired by bolt.ai's subtle and professional aesthetic. This design language emphasizes clarity, hierarchy, and modern visual appeal while maintaining excellent readability and performance.

Core Design Principles

1. Subtle Glassmorphism

• Primary Glass Effect: rgba(255, 255, 255, 0.6) background with 4px blur
• Ultra Glass Variant: rgba(255, 255, 255, 0.8) for higher contrast areas
• Minimal Blur: 2-4px backdrop-filter for performance
• Light Borders: rgba(0, 0, 0, 0.05) for subtle definition
• Soft Shadows: 0 4px 12px rgba(0, 0, 0, 0.08) for depth

2. Color Palette

Monaco Red Spectrum

$monaco-red-50: #fef2f2;
$monaco-red-100: #fee2e2;
$monaco-red-200: #fecaca;
$monaco-red-300: #fca5a5;
$monaco-red-400: #f87171;
$monaco-red-500: #ef4444;
$monaco-red-600: #dc2626; // Primary Brand Color
$monaco-red-700: #b91c1c;
$monaco-red-800: #991b1b;
$monaco-red-900: #7f1d1d;

Neutral Palette

$gray-50: #fafafa;
$gray-100: #f4f4f5;
$gray-200: #e4e4e7;
$gray-300: #d4d4d8;
$gray-400: #a1a1aa;
$gray-500: #71717a;
$gray-600: #52525b;
$gray-700: #3f3f46;
$gray-800: #27272a;
$gray-900: #18181b;

3. Typography

• Font Family: Inter, system-ui, sans-serif
• Headings: Bold weight, slight letter-spacing
• Body Text: Regular weight, optimized line-height
• Text Colors:
  • Primary: rgba(0, 0, 0, 0.87)
  • Secondary: rgba(0, 0, 0, 0.6)
  • Disabled: rgba(0, 0, 0, 0.38)

4. Component Patterns

Glass Cards

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

Stat Cards

.stat-card {
  @extend .glass-card;
  
  .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 12px;
    color: $monaco-red-600;
  }
  
  .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.87);
  }
  
  .stat-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

Navigation Sidebar

.glass-sidebar {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.05);
  
  .nav-item {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    
    &:hover {
      background: rgba(220, 38, 38, 0.05);
    }
    
    &.active {
      background: rgba(220, 38, 38, 0.1);
      color: $monaco-red-600;
      font-weight: 600;
    }
  }
}

Forms & Inputs

.glass-input {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
  
  &:focus {
    outline: none;
    border-color: $monaco-red-600;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
  }
}

Buttons

.btn-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  &.btn-primary {
    background: rgba(220, 38, 38, 0.9);
    color: white;
    border-color: transparent;
    
    &:hover {
      background: rgba(220, 38, 38, 1);
    }
  }
}

5. Layout Patterns

Dashboard Grid

• Desktop: 4 columns for stat cards
• Tablet: 2 columns
• Mobile: Single column
• Gap: 1.5rem between cards

Page Structure

┌─────────────────────────────────────┐
│ Sidebar │      Main Content         │
│  280px  │       Flexible            │
│         │ ┌───────────────────────┐ │
│         │ │    Header Section     │ │
│         │ ├───────────────────────┤ │
│         │ │    Stats Grid         │ │
│         │ ├───────────────────────┤ │
│         │ │    Content Cards      │ │
│         │ └───────────────────────┘ │
└─────────────────────────────────────┘

Enhanced Sidebar Design

.enhanced-glass-sidebar {
  // Subtle glass background with gradient
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.6) 0%, 
    rgba(248, 249, 250, 0.8) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  
  // Decorative floating orbs (non-interactive)
  .floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(30px);
    pointer-events: none;
    animation: float 8s ease-in-out infinite;
    
    &.orb-1 {
      top: 20%;
      right: -50px;
      width: 100px;
      height: 100px;
      background: radial-gradient(circle, 
        rgba(220, 38, 38, 0.05), transparent);
    }
    
    &.orb-2 {
      bottom: 30%;
      left: -30px;
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, 
        rgba(220, 38, 38, 0.03), transparent);
      animation-delay: 3s;
    }
  }
}

// Navigation Items with Premium Feel
.nav-item {
  border-radius: 12px;
  margin: 6px 16px;
  padding: 12px 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  // Shimmer effect on hover
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.1), 
      transparent);
    pointer-events: none;
    transition: left 0.5s ease;
  }
  
  &:hover {
    background: rgba(220, 38, 38, 0.05);
    transform: translateX(2px);
    
    &::after {
      left: 100%;
    }
  }
  
  &.active {
    background: rgba(220, 38, 38, 0.1);
    border-left: 3px solid $monaco-red-600;
    transform: scale(1.02);
    
    .icon {
      animation: subtle-pulse 3s ease-in-out infinite;
    }
  }
}

// System Status Indicator
.system-status {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  
  .status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 8px;
    
    .status-dot {
      width: 8px;
      height: 8px;
      background: #10b981;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
  }
}

6. Animation & Transitions

Hover Effects

• Lift: transform: translateY(-2px)
• Shadow Enhancement: Increase shadow opacity/blur
• Duration: 200-300ms
• Easing: cubic-bezier(0.4, 0, 0.2, 1)

Page Transitions

• Fade In: 300ms ease-out
• Slide Up: 400ms ease-out with 20px offset

7. Responsive Breakpoints

$breakpoint-xs: 320px;   // Small phones
$breakpoint-sm: 640px;   // Phones
$breakpoint-md: 768px;   // Tablets
$breakpoint-lg: 1024px;  // Desktop
$breakpoint-xl: 1280px;  // Large desktop
$breakpoint-2xl: 1536px; // Extra large desktop

8. Accessibility

Contrast Requirements

• Text on Glass: Minimum 4.5:1 contrast ratio
• Interactive Elements: 3:1 contrast ratio
• Focus Indicators: Visible outline with 3px offset

Focus States

*:focus-visible {
  outline: 2px solid $monaco-red-600;
  outline-offset: 3px;
  border-radius: 4px;
}

9. Performance Optimizations

Blur Performance

• Limit backdrop-filter to essential elements
• Use will-change sparingly
• Prefer transform over position changes
• Group glass elements to reduce paint areas

CSS Variables for Dynamic Theming

:root {
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-blur: 4px;
  --glass-border: rgba(0, 0, 0, 0.05);
  --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

10. Implementation Guidelines

Portal-Specific Styles

Admin Portal

• Full glass sidebar with navigation
• Complex data tables with glass headers
• System monitoring cards
• Advanced form controls

Board Portal

• Executive dashboard layout
• Meeting management cards
• Document viewers with glass frames
• Governance tools

Member Portal

• Simplified navigation
• Personal dashboard
• Event registration forms
• Resource cards

Authentication Pages

• Centered glass card layout
• Minimal distractions
• Clear call-to-action buttons
• Subtle branding elements

11. Best Practices

1. Consistency: Use predefined glass classes, don't create variations
2. Performance: Test blur effects on lower-end devices
3. Accessibility: Always ensure sufficient contrast
4. Responsiveness: Test all breakpoints thoroughly
5. Browser Support: Provide fallbacks for browsers without backdrop-filter

12. Migration Checklist

When updating existing pages to the Glass Bolt theme:

• Replace solid backgrounds with glass effects
• Update color scheme to use Monaco red accents
• Apply consistent border-radius (8-16px)
• Add hover states with lift effect
• Ensure proper spacing (1.5rem standard gap)
• Test backdrop-filter browser support
• Verify contrast ratios meet WCAG standards
• Update button styles to glass variants
• Apply glass effect to navigation elements
• Test responsive behavior on all breakpoints

Version History

• v2.0.0 (Current) - Glass Bolt Theme

  • Subtle glassmorphism inspired by bolt.ai
  • Improved performance with minimal blur
  • Enhanced accessibility with better contrast
  • Consistent design language across all portals

• v1.0.0 - Original design system

  • Basic Material Design implementation
  • Monaco red color scheme
  • Standard component library