This commit is contained in:
690
design-mockups/DESIGN-SYSTEM-V2.md
Normal file
690
design-mockups/DESIGN-SYSTEM-V2.md
Normal file
@@ -0,0 +1,690 @@
|
||||
# MonacoUSA Portal Design System V2
|
||||
## Professional Neumorphic & Glassmorphic Design Language
|
||||
|
||||
---
|
||||
|
||||
## Table of Contents
|
||||
1. [Design Philosophy](#design-philosophy)
|
||||
2. [Color System](#color-system)
|
||||
3. [Typography](#typography)
|
||||
4. [Spacing & Layout](#spacing--layout)
|
||||
5. [Shadow System](#shadow-system)
|
||||
6. [Component Library](#component-library)
|
||||
7. [Morphing Dropdown Specification](#morphing-dropdown-specification)
|
||||
8. [Animation Guidelines](#animation-guidelines)
|
||||
9. [Responsive Design](#responsive-design)
|
||||
10. [Implementation Examples](#implementation-examples)
|
||||
|
||||
---
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
### Core Principles
|
||||
- **Professional & Inviting**: Balancing corporate credibility with approachable design
|
||||
- **Neumorphic Foundation**: Soft UI with subtle depth and tactile feedback
|
||||
- **Glassmorphic Accents**: Strategic use of transparency and blur for interactive elements
|
||||
- **Monaco Heritage**: Incorporating national colors while maintaining modern aesthetics
|
||||
|
||||
### Visual Hierarchy
|
||||
1. **Primary Actions**: Monaco Red gradient buttons with strong shadows
|
||||
2. **Interactive Elements**: Blue glassmorphic dropdowns and selects
|
||||
3. **Content Cards**: Neumorphic white/light gray surfaces
|
||||
4. **Navigation**: Subtle depth with hover transformations
|
||||
|
||||
---
|
||||
|
||||
## Color System
|
||||
|
||||
### Primary Palette - Monaco Red
|
||||
```scss
|
||||
$primary-50: #FEF2F2; // Lightest tint
|
||||
$primary-100: #FEE2E2;
|
||||
$primary-200: #FECACA;
|
||||
$primary-300: #FCA5A5;
|
||||
$primary-400: #F87171;
|
||||
$primary-500: #EF4444;
|
||||
$primary-600: #CC0000; // Monaco Red (Main)
|
||||
$primary-700: #990000; // Monaco Dark Red
|
||||
$primary-800: #660000;
|
||||
$primary-900: #450A0A; // Darkest shade
|
||||
```
|
||||
|
||||
### Secondary Palette - Interactive Blue
|
||||
Used exclusively for dropdowns, selects, and interactive overlays:
|
||||
```scss
|
||||
$blue-50: #EFF6FF;
|
||||
$blue-100: #DBEAFE;
|
||||
$blue-200: #BFDBFE;
|
||||
$blue-300: #93C5FD;
|
||||
$blue-400: #60A5FA;
|
||||
$blue-500: #3B82F6;
|
||||
$blue-600: #2563EB;
|
||||
$blue-700: #1D4ED8;
|
||||
$blue-800: #1E40AF;
|
||||
$blue-900: #1E3A8A;
|
||||
```
|
||||
|
||||
### Neutral Palette
|
||||
```scss
|
||||
$neutral-50: #F9FAFB;
|
||||
$neutral-100: #F3F4F6;
|
||||
$neutral-200: #E5E7EB;
|
||||
$neutral-300: #D1D5DB;
|
||||
$neutral-400: #9CA3AF;
|
||||
$neutral-500: #6B7280;
|
||||
$neutral-600: #4B5563;
|
||||
$neutral-700: #374151;
|
||||
$neutral-800: #1F2937;
|
||||
$neutral-900: #111827;
|
||||
```
|
||||
|
||||
### Semantic Colors
|
||||
```scss
|
||||
$success: #10B981; // Green
|
||||
$warning: #F59E0B; // Amber
|
||||
$error: #EF4444; // Red
|
||||
$info: #3B82F6; // Blue
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Font Stack
|
||||
```css
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto,
|
||||
'Helvetica Neue', Arial, sans-serif;
|
||||
```
|
||||
|
||||
### Type Scale
|
||||
| Name | Size | Line Height | Usage |
|
||||
|------|------|-------------|-------|
|
||||
| `text-xs` | 0.75rem (12px) | 1.5 | Labels, captions |
|
||||
| `text-sm` | 0.875rem (14px) | 1.5 | Body small, form labels |
|
||||
| `text-base` | 1rem (16px) | 1.5 | Body default |
|
||||
| `text-lg` | 1.125rem (18px) | 1.625 | Body large |
|
||||
| `text-xl` | 1.25rem (20px) | 1.625 | H4 |
|
||||
| `text-2xl` | 1.5rem (24px) | 1.375 | H3 |
|
||||
| `text-3xl` | 1.875rem (30px) | 1.375 | H2 |
|
||||
| `text-4xl` | 2.25rem (36px) | 1.25 | H1 |
|
||||
|
||||
### Font Weights
|
||||
- `font-normal`: 400 - Body text
|
||||
- `font-medium`: 500 - Emphasis
|
||||
- `font-semibold`: 600 - Subheadings
|
||||
- `font-bold`: 700 - Headings
|
||||
|
||||
---
|
||||
|
||||
## Spacing & Layout
|
||||
|
||||
### Spacing Scale
|
||||
```scss
|
||||
$space-0: 0;
|
||||
$space-1: 0.25rem; // 4px
|
||||
$space-2: 0.5rem; // 8px
|
||||
$space-3: 0.75rem; // 12px
|
||||
$space-4: 1rem; // 16px
|
||||
$space-5: 1.25rem; // 20px
|
||||
$space-6: 1.5rem; // 24px
|
||||
$space-8: 2rem; // 32px
|
||||
$space-10: 2.5rem; // 40px
|
||||
$space-12: 3rem; // 48px
|
||||
$space-16: 4rem; // 64px
|
||||
$space-20: 5rem; // 80px
|
||||
```
|
||||
|
||||
### Border Radius
|
||||
```scss
|
||||
$radius-sm: 0.375rem; // 6px - Small elements
|
||||
$radius-md: 0.5rem; // 8px - Buttons
|
||||
$radius-lg: 0.75rem; // 12px - Cards, dropdowns
|
||||
$radius-xl: 1rem; // 16px - Large cards
|
||||
$radius-2xl: 1.5rem; // 24px - Hero sections
|
||||
$radius-full: 9999px; // Pills, avatars
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Shadow System
|
||||
|
||||
### Neumorphic Shadows
|
||||
For cards and static elements:
|
||||
```scss
|
||||
// Soft elevation shadows
|
||||
$shadow-soft-sm:
|
||||
4px 4px 8px rgba(0, 0, 0, 0.08),
|
||||
-4px -4px 8px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-soft-md:
|
||||
8px 8px 16px rgba(0, 0, 0, 0.1),
|
||||
-8px -8px 16px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-soft-lg:
|
||||
12px 12px 24px rgba(0, 0, 0, 0.12),
|
||||
-12px -12px 24px rgba(255, 255, 255, 0.95);
|
||||
|
||||
// Inset shadows for pressed states
|
||||
$shadow-inset-sm:
|
||||
inset 4px 4px 8px rgba(0, 0, 0, 0.1),
|
||||
inset -4px -4px 8px rgba(255, 255, 255, 0.95);
|
||||
```
|
||||
|
||||
### Glassmorphic Shadows
|
||||
For dropdowns and overlays:
|
||||
```scss
|
||||
$shadow-morphing:
|
||||
0 10px 40px rgba(0, 0, 0, 0.12),
|
||||
0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
$shadow-glass:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.3);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Component Library
|
||||
|
||||
### 1. Buttons
|
||||
|
||||
#### Primary Button
|
||||
```scss
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, $primary-600, $primary-700);
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow:
|
||||
4px 4px 8px rgba(204, 0, 0, 0.3),
|
||||
-4px -4px 8px rgba(255, 255, 255, 0.95);
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
6px 6px 12px rgba(204, 0, 0, 0.4),
|
||||
-6px -6px 12px rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: $shadow-inset-sm;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Neumorphic Button
|
||||
```scss
|
||||
.btn-neumorphic {
|
||||
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
||||
color: $neutral-700;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-soft-sm;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-soft-md;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Cards
|
||||
|
||||
#### Neumorphic Card
|
||||
```scss
|
||||
.card-neumorphic {
|
||||
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
||||
border-radius: $radius-xl;
|
||||
padding: $space-6;
|
||||
box-shadow: $shadow-soft-md;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: $shadow-soft-lg;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Form Inputs
|
||||
|
||||
#### Neumorphic Input
|
||||
```scss
|
||||
.input-neumorphic {
|
||||
background: $neutral-50;
|
||||
border: none;
|
||||
border-radius: $radius-lg;
|
||||
padding: $space-3 $space-4;
|
||||
box-shadow: $shadow-inset-sm;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
$shadow-inset-md,
|
||||
0 0 0 3px rgba($primary-500, 0.1);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Morphing Dropdown Specification
|
||||
|
||||
### Overview
|
||||
The morphing dropdown is a signature component that combines glassmorphism with smooth spring animations. It features a blue color scheme distinct from the primary Monaco red, creating clear visual hierarchy for interactive elements.
|
||||
|
||||
### Visual Characteristics
|
||||
|
||||
#### Trigger State
|
||||
```scss
|
||||
.morphing-select-trigger {
|
||||
// Base styling
|
||||
height: 48px;
|
||||
padding: 0 1rem;
|
||||
border-radius: 12px;
|
||||
|
||||
// Glassmorphic background
|
||||
background: rgba(239, 246, 255, 0.3); // blue-50 with 30% opacity
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(191, 219, 254, 0.3); // blue-200 with 30% opacity
|
||||
|
||||
// Typography
|
||||
color: #1E3A8A; // blue-900
|
||||
font-size: 0.875rem;
|
||||
|
||||
// Transition
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(219, 234, 254, 0.4); // blue-100 with 40% opacity
|
||||
border-color: rgba(147, 197, 253, 0.4); // blue-300 with 40% opacity
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
&.open {
|
||||
background: rgba(219, 234, 254, 0.5);
|
||||
border-color: rgba(96, 165, 250, 0.5); // blue-400 with 50% opacity
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(59, 130, 246, 0.1),
|
||||
0 4px 12px rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Dropdown Panel
|
||||
```scss
|
||||
.morphing-select-dropdown {
|
||||
// Glassmorphic container
|
||||
background: rgba(239, 246, 255, 0.95); // blue-50 with 95% opacity
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(191, 219, 254, 0.3);
|
||||
border-radius: 12px;
|
||||
|
||||
// Shadow
|
||||
box-shadow:
|
||||
0 10px 40px rgba(0, 0, 0, 0.12),
|
||||
0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
// Animation
|
||||
animation: morphIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Layout
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
```
|
||||
|
||||
#### Option Items
|
||||
```scss
|
||||
.morphing-select-option {
|
||||
padding: 0.625rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
color: #1E3A8A; // blue-900
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: rgba(96, 165, 250, 0.2); // blue-400 with 20% opacity
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(59, 130, 246, 0.25); // blue-500 with 25% opacity
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Option Groups
|
||||
```scss
|
||||
.morphing-select-optgroup-label {
|
||||
padding: 0.5rem 0.75rem 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #1D4ED8; // blue-700
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
```
|
||||
|
||||
### Animation Specifications
|
||||
|
||||
#### Spring Configuration
|
||||
```javascript
|
||||
const TRANSITION = {
|
||||
type: 'spring',
|
||||
bounce: 0.05, // Minimal bounce for professional feel
|
||||
duration: 0.3, // Quick but smooth
|
||||
};
|
||||
```
|
||||
|
||||
#### Animation States
|
||||
```javascript
|
||||
// Opening animation
|
||||
@keyframes morphIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Closing animation (reversed)
|
||||
@keyframes morphOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Interaction Patterns
|
||||
|
||||
#### Click Outside
|
||||
- Clicking anywhere outside the dropdown closes it
|
||||
- Uses `mousedown` event for immediate response
|
||||
|
||||
#### Keyboard Navigation
|
||||
- `Escape` key closes the dropdown
|
||||
- `Tab` key navigates through options
|
||||
- `Enter` selects the focused option
|
||||
- `Space` toggles selection in multi-select
|
||||
|
||||
#### Touch Support
|
||||
- Touch events are handled identically to mouse events
|
||||
- Larger touch targets on mobile (min 44px)
|
||||
|
||||
### Multi-Select Variant
|
||||
|
||||
#### Selected Tags
|
||||
```scss
|
||||
.morphing-select-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background: rgba(191, 219, 254, 0.6); // blue-200 with 60% opacity
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
|
||||
// Remove button
|
||||
.tag-remove {
|
||||
color: #1D4ED8; // blue-700
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #1E3A8A; // blue-900
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Accessibility Features
|
||||
- ARIA attributes: `aria-expanded`, `aria-controls`, `aria-modal`
|
||||
- Role attributes: `role="dialog"` for dropdown panel
|
||||
- Keyboard navigation support
|
||||
- Focus management
|
||||
- Screen reader announcements
|
||||
|
||||
### Implementation Guidelines
|
||||
|
||||
#### Vue/React Component Structure
|
||||
```typescript
|
||||
interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
interface OptionGroup {
|
||||
label: string;
|
||||
options: SelectOption[];
|
||||
}
|
||||
|
||||
interface SelectProps {
|
||||
options?: SelectOption[];
|
||||
optgroups?: OptionGroup[];
|
||||
value?: string | string[]; // string[] for multi-select
|
||||
onValueChange?: (value: string | string[]) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
maxSelected?: number; // For multi-select
|
||||
className?: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### State Management
|
||||
```javascript
|
||||
// Single Select
|
||||
const [selectedValue, setSelectedValue] = useState('');
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
// Multi-Select
|
||||
const [selectedValues, setSelectedValues] = useState([]);
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Animation Guidelines
|
||||
|
||||
### Timing Functions
|
||||
```scss
|
||||
$ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
$ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
$ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
|
||||
```
|
||||
|
||||
### Duration Scale
|
||||
- `fast`: 150ms - Micro interactions
|
||||
- `base`: 300ms - Standard transitions
|
||||
- `slow`: 500ms - Complex animations
|
||||
- `slower`: 700ms - Page transitions
|
||||
|
||||
### Animation Principles
|
||||
1. **Purpose**: Every animation should have a clear purpose
|
||||
2. **Performance**: Use `transform` and `opacity` for GPU acceleration
|
||||
3. **Consistency**: Maintain consistent timing across similar interactions
|
||||
4. **Subtlety**: Animations should enhance, not distract
|
||||
|
||||
---
|
||||
|
||||
## Responsive Design
|
||||
|
||||
### Breakpoints
|
||||
```scss
|
||||
$breakpoint-sm: 640px; // Mobile landscape
|
||||
$breakpoint-md: 768px; // Tablet portrait
|
||||
$breakpoint-lg: 1024px; // Tablet landscape
|
||||
$breakpoint-xl: 1280px; // Desktop
|
||||
$breakpoint-2xl: 1536px; // Large desktop
|
||||
```
|
||||
|
||||
### Mobile Adaptations
|
||||
|
||||
#### Morphing Dropdown
|
||||
- Full-width on mobile
|
||||
- Bottom sheet presentation option
|
||||
- Larger touch targets (min 44px)
|
||||
- Reduced blur for performance
|
||||
|
||||
#### Navigation
|
||||
- Hamburger menu below tablet
|
||||
- Full-screen overlay navigation
|
||||
- Swipe gestures for sidebar
|
||||
|
||||
#### Cards
|
||||
- Single column layout on mobile
|
||||
- Reduced padding and margins
|
||||
- Simplified shadows for performance
|
||||
|
||||
---
|
||||
|
||||
## Implementation Examples
|
||||
|
||||
### Example 1: Login Form with Morphing Select
|
||||
```html
|
||||
<div class="login-form">
|
||||
<!-- Email Input (Neumorphic) -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Email</label>
|
||||
<input type="email" class="input-neumorphic" placeholder="you@example.com">
|
||||
</div>
|
||||
|
||||
<!-- Role Selector (Morphing Dropdown) -->
|
||||
<div class="form-group">
|
||||
<label class="form-label">Select Role</label>
|
||||
<div class="morphing-select">
|
||||
<div class="morphing-select-trigger">
|
||||
<span>Choose your role...</span>
|
||||
<svg class="chevron">...</svg>
|
||||
</div>
|
||||
<div class="morphing-select-dropdown">
|
||||
<div class="morphing-select-option">Member</div>
|
||||
<div class="morphing-select-option">Admin</div>
|
||||
<div class="morphing-select-option">Board Member</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button (Primary) -->
|
||||
<button class="btn-primary">Sign In</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Example 2: Dashboard Stats with Dropdown Filter
|
||||
```html
|
||||
<div class="dashboard-header">
|
||||
<h1 class="page-title">Dashboard</h1>
|
||||
|
||||
<!-- Time Period Filter (Morphing Dropdown) -->
|
||||
<div class="morphing-select">
|
||||
<div class="morphing-select-trigger">
|
||||
<span>Last 30 Days</span>
|
||||
<svg class="chevron">...</svg>
|
||||
</div>
|
||||
<div class="morphing-select-dropdown">
|
||||
<div class="morphing-select-optgroup">
|
||||
<div class="morphing-select-optgroup-label">Quick Ranges</div>
|
||||
<div class="morphing-select-option">Today</div>
|
||||
<div class="morphing-select-option">Last 7 Days</div>
|
||||
<div class="morphing-select-option selected">Last 30 Days</div>
|
||||
</div>
|
||||
<div class="morphing-select-optgroup">
|
||||
<div class="morphing-select-optgroup-label">Custom</div>
|
||||
<div class="morphing-select-option">Last Quarter</div>
|
||||
<div class="morphing-select-option">Last Year</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards (Neumorphic) -->
|
||||
<div class="stats-grid">
|
||||
<div class="card-neumorphic stat-card">
|
||||
<div class="stat-value">2,847</div>
|
||||
<div class="stat-label">Total Members</div>
|
||||
<div class="stat-change positive">+12.5%</div>
|
||||
</div>
|
||||
<!-- More cards... -->
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens
|
||||
|
||||
For implementation in code, use these design tokens:
|
||||
|
||||
```javascript
|
||||
const designTokens = {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#FEF2F2',
|
||||
100: '#FEE2E2',
|
||||
200: '#FECACA',
|
||||
300: '#FCA5A5',
|
||||
400: '#F87171',
|
||||
500: '#EF4444',
|
||||
600: '#CC0000', // Main brand color
|
||||
700: '#990000',
|
||||
800: '#660000',
|
||||
900: '#450A0A',
|
||||
},
|
||||
blue: {
|
||||
50: '#EFF6FF',
|
||||
100: '#DBEAFE',
|
||||
200: '#BFDBFE',
|
||||
300: '#93C5FD',
|
||||
400: '#60A5FA',
|
||||
500: '#3B82F6',
|
||||
600: '#2563EB',
|
||||
700: '#1D4ED8',
|
||||
800: '#1E40AF',
|
||||
900: '#1E3A8A',
|
||||
},
|
||||
// ... other colors
|
||||
},
|
||||
shadows: {
|
||||
'soft-sm': '4px 4px 8px rgba(0, 0, 0, 0.08), -4px -4px 8px rgba(255, 255, 255, 0.95)',
|
||||
'soft-md': '8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.95)',
|
||||
'soft-lg': '12px 12px 24px rgba(0, 0, 0, 0.12), -12px -12px 24px rgba(255, 255, 255, 0.95)',
|
||||
'morphing': '0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08)',
|
||||
},
|
||||
animation: {
|
||||
duration: {
|
||||
fast: '150ms',
|
||||
base: '300ms',
|
||||
slow: '500ms',
|
||||
},
|
||||
ease: {
|
||||
smooth: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Version History
|
||||
- **v2.0.0** - Initial release with Neumorphic & Glassmorphic design system
|
||||
- **v2.0.1** - Added morphing dropdown specifications
|
||||
- **v2.0.2** - Enhanced mobile responsive guidelines
|
||||
|
||||
---
|
||||
|
||||
## Contact
|
||||
For questions about implementing this design system, please contact the MonacoUSA Portal development team.
|
||||
@@ -80,7 +80,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// No additional logic needed for this index page
|
||||
// Disable authentication for mockups
|
||||
definePageMeta({
|
||||
auth: false,
|
||||
layout: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -193,9 +193,15 @@
|
||||
import { ref, onMounted } from 'vue';
|
||||
import NeumorphicCard from '../../components/core/NeumorphicCard.vue';
|
||||
import ProfessionalButton from '../../components/core/ProfessionalButton.vue';
|
||||
import StatCard from '../../components/data/StatCard.vue';
|
||||
import StatCard from '../../components/core/StatCard.vue';
|
||||
import Chart from 'chart.js/auto';
|
||||
|
||||
// Disable authentication for mockup
|
||||
definePageMeta({
|
||||
auth: false,
|
||||
layout: false
|
||||
});
|
||||
|
||||
// Icons (simplified for demo)
|
||||
const HomeIcon = { template: '<svg fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/></svg>' };
|
||||
const UsersIcon = { template: '<svg fill="currentColor" viewBox="0 0 20 20"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/></svg>' };
|
||||
|
||||
@@ -121,6 +121,12 @@ import { ref } from 'vue';
|
||||
import NeumorphicCard from '../../components/core/NeumorphicCard.vue';
|
||||
import ProfessionalButton from '../../components/core/ProfessionalButton.vue';
|
||||
|
||||
// Disable authentication for mockup
|
||||
definePageMeta({
|
||||
auth: false,
|
||||
layout: false
|
||||
});
|
||||
|
||||
// Data
|
||||
const credentials = ref({
|
||||
email: '',
|
||||
|
||||
@@ -284,6 +284,12 @@ import NeumorphicCard from '../../components/core/NeumorphicCard.vue';
|
||||
import ProfessionalButton from '../../components/core/ProfessionalButton.vue';
|
||||
import StatCard from '../../components/core/StatCard.vue';
|
||||
|
||||
// Disable authentication for mockup
|
||||
definePageMeta({
|
||||
auth: false,
|
||||
layout: false
|
||||
});
|
||||
|
||||
// Data
|
||||
const sidebarCollapsed = ref(false);
|
||||
const currentDate = ref(new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }));
|
||||
|
||||
@@ -330,6 +330,12 @@ import NeumorphicCard from '../../components/core/NeumorphicCard.vue';
|
||||
import ProfessionalButton from '../../components/core/ProfessionalButton.vue';
|
||||
import StatCard from '../../components/core/StatCard.vue';
|
||||
|
||||
// Disable authentication for mockup
|
||||
definePageMeta({
|
||||
auth: false,
|
||||
layout: false
|
||||
});
|
||||
|
||||
// Data
|
||||
const mobileMenuOpen = ref(false);
|
||||
const profileMenuOpen = ref(false);
|
||||
|
||||
361
design-mockups/styles/design-system.scss
Normal file
361
design-mockups/styles/design-system.scss
Normal file
@@ -0,0 +1,361 @@
|
||||
// MonacoUSA Portal Design System
|
||||
// Professional Neumorphic Design with Enhanced Components
|
||||
|
||||
// ========================================
|
||||
// 1. COLOR PALETTE
|
||||
// ========================================
|
||||
|
||||
// Brand Colors
|
||||
$monaco-red: #CC0000;
|
||||
$monaco-dark-red: #990000;
|
||||
$monaco-light-red: #FF3333;
|
||||
|
||||
// Primary Colors (Monaco Red)
|
||||
$primary-50: #FEF2F2;
|
||||
$primary-100: #FEE2E2;
|
||||
$primary-200: #FECACA;
|
||||
$primary-300: #FCA5A5;
|
||||
$primary-400: #F87171;
|
||||
$primary-500: #EF4444;
|
||||
$primary-600: $monaco-red;
|
||||
$primary-700: $monaco-dark-red;
|
||||
$primary-800: #660000;
|
||||
$primary-900: #450A0A;
|
||||
|
||||
// Neutral Colors
|
||||
$neutral-50: #F9FAFB;
|
||||
$neutral-100: #F3F4F6;
|
||||
$neutral-200: #E5E7EB;
|
||||
$neutral-300: #D1D5DB;
|
||||
$neutral-400: #9CA3AF;
|
||||
$neutral-500: #6B7280;
|
||||
$neutral-600: #4B5563;
|
||||
$neutral-700: #374151;
|
||||
$neutral-800: #1F2937;
|
||||
$neutral-900: #111827;
|
||||
|
||||
// Blue Colors (for dropdowns and accents)
|
||||
$blue-50: #EFF6FF;
|
||||
$blue-100: #DBEAFE;
|
||||
$blue-200: #BFDBFE;
|
||||
$blue-300: #93C5FD;
|
||||
$blue-400: #60A5FA;
|
||||
$blue-500: #3B82F6;
|
||||
$blue-600: #2563EB;
|
||||
$blue-700: #1D4ED8;
|
||||
$blue-800: #1E40AF;
|
||||
$blue-900: #1E3A8A;
|
||||
|
||||
// Semantic Colors
|
||||
$success-500: #10B981;
|
||||
$warning-500: #F59E0B;
|
||||
$error-500: #EF4444;
|
||||
$info-500: #3B82F6;
|
||||
|
||||
// ========================================
|
||||
// 2. TYPOGRAPHY
|
||||
// ========================================
|
||||
|
||||
$font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
$font-heading: 'Inter', $font-sans;
|
||||
$font-mono: 'Fira Code', 'Courier New', monospace;
|
||||
|
||||
// Font Sizes
|
||||
$text-xs: 0.75rem; // 12px
|
||||
$text-sm: 0.875rem; // 14px
|
||||
$text-base: 1rem; // 16px
|
||||
$text-lg: 1.125rem; // 18px
|
||||
$text-xl: 1.25rem; // 20px
|
||||
$text-2xl: 1.5rem; // 24px
|
||||
$text-3xl: 1.875rem; // 30px
|
||||
$text-4xl: 2.25rem; // 36px
|
||||
$text-5xl: 3rem; // 48px
|
||||
|
||||
// Font Weights
|
||||
$font-light: 300;
|
||||
$font-normal: 400;
|
||||
$font-medium: 500;
|
||||
$font-semibold: 600;
|
||||
$font-bold: 700;
|
||||
|
||||
// Line Heights
|
||||
$leading-tight: 1.25;
|
||||
$leading-normal: 1.5;
|
||||
$leading-relaxed: 1.625;
|
||||
|
||||
// ========================================
|
||||
// 3. SPACING SYSTEM
|
||||
// ========================================
|
||||
|
||||
$space-0: 0;
|
||||
$space-1: 0.25rem; // 4px
|
||||
$space-2: 0.5rem; // 8px
|
||||
$space-3: 0.75rem; // 12px
|
||||
$space-4: 1rem; // 16px
|
||||
$space-5: 1.25rem; // 20px
|
||||
$space-6: 1.5rem; // 24px
|
||||
$space-8: 2rem; // 32px
|
||||
$space-10: 2.5rem; // 40px
|
||||
$space-12: 3rem; // 48px
|
||||
$space-16: 4rem; // 64px
|
||||
$space-20: 5rem; // 80px
|
||||
|
||||
// ========================================
|
||||
// 4. NEUMORPHIC SHADOWS
|
||||
// ========================================
|
||||
|
||||
// Soft Shadows (light theme)
|
||||
$shadow-soft-xs:
|
||||
2px 2px 4px rgba(0, 0, 0, 0.07),
|
||||
-2px -2px 4px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-soft-sm:
|
||||
4px 4px 8px rgba(0, 0, 0, 0.08),
|
||||
-4px -4px 8px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-soft-md:
|
||||
8px 8px 16px rgba(0, 0, 0, 0.1),
|
||||
-8px -8px 16px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-soft-lg:
|
||||
12px 12px 24px rgba(0, 0, 0, 0.12),
|
||||
-12px -12px 24px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-soft-xl:
|
||||
16px 16px 32px rgba(0, 0, 0, 0.14),
|
||||
-16px -16px 32px rgba(255, 255, 255, 0.95);
|
||||
|
||||
// Inset Shadows (for pressed/input states)
|
||||
$shadow-inset-sm:
|
||||
inset 4px 4px 8px rgba(0, 0, 0, 0.1),
|
||||
inset -4px -4px 8px rgba(255, 255, 255, 0.95);
|
||||
|
||||
$shadow-inset-md:
|
||||
inset 6px 6px 12px rgba(0, 0, 0, 0.15),
|
||||
inset -6px -6px 12px rgba(255, 255, 255, 0.95);
|
||||
|
||||
// Glassmorphic Shadow
|
||||
$shadow-glass:
|
||||
0 8px 32px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.3);
|
||||
|
||||
// Morphing Dropdown Shadow
|
||||
$shadow-morphing:
|
||||
0 10px 40px rgba(0, 0, 0, 0.12),
|
||||
0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
|
||||
// ========================================
|
||||
// 5. BORDER RADIUS
|
||||
// ========================================
|
||||
|
||||
$radius-sm: 0.375rem; // 6px
|
||||
$radius-md: 0.5rem; // 8px
|
||||
$radius-lg: 0.75rem; // 12px
|
||||
$radius-xl: 1rem; // 16px
|
||||
$radius-2xl: 1.5rem; // 24px
|
||||
$radius-3xl: 2rem; // 32px
|
||||
$radius-full: 9999px;
|
||||
|
||||
// ========================================
|
||||
// 6. TRANSITIONS
|
||||
// ========================================
|
||||
|
||||
$transition-base: 0.3s ease;
|
||||
$transition-fast: 0.15s ease;
|
||||
$transition-slow: 0.5s ease;
|
||||
|
||||
// Spring Animation (for dropdowns)
|
||||
$spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
$spring-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// ========================================
|
||||
// 7. BREAKPOINTS
|
||||
// ========================================
|
||||
|
||||
$breakpoint-sm: 640px;
|
||||
$breakpoint-md: 768px;
|
||||
$breakpoint-lg: 1024px;
|
||||
$breakpoint-xl: 1280px;
|
||||
$breakpoint-2xl: 1536px;
|
||||
|
||||
// ========================================
|
||||
// 8. Z-INDEX LAYERS
|
||||
// ========================================
|
||||
|
||||
$z-base: 0;
|
||||
$z-dropdown: 10;
|
||||
$z-sticky: 20;
|
||||
$z-overlay: 30;
|
||||
$z-modal: 40;
|
||||
$z-popover: 50;
|
||||
$z-tooltip: 60;
|
||||
$z-notification: 70;
|
||||
|
||||
// ========================================
|
||||
// 9. GLASSMORPHISM MIXINS
|
||||
// ========================================
|
||||
|
||||
@mixin glassmorphism($bg-opacity: 0.8, $blur: 12px) {
|
||||
background: rgba(255, 255, 255, $bg-opacity);
|
||||
backdrop-filter: blur($blur);
|
||||
-webkit-backdrop-filter: blur($blur);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
@mixin glassmorphism-blue($bg-opacity: 0.3, $blur: 12px) {
|
||||
background: rgba($blue-50, $bg-opacity);
|
||||
backdrop-filter: blur($blur);
|
||||
-webkit-backdrop-filter: blur($blur);
|
||||
border: 1px solid rgba($blue-200, 0.3);
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 10. COMPONENT MIXINS
|
||||
// ========================================
|
||||
|
||||
// Neumorphic Card
|
||||
@mixin neumorphic-card($elevation: 'md') {
|
||||
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
||||
border-radius: $radius-xl;
|
||||
|
||||
@if $elevation == 'sm' {
|
||||
box-shadow: $shadow-soft-sm;
|
||||
} @else if $elevation == 'md' {
|
||||
box-shadow: $shadow-soft-md;
|
||||
} @else if $elevation == 'lg' {
|
||||
box-shadow: $shadow-soft-lg;
|
||||
} @else if $elevation == 'xl' {
|
||||
box-shadow: $shadow-soft-xl;
|
||||
}
|
||||
}
|
||||
|
||||
// Neumorphic Button
|
||||
@mixin neumorphic-button() {
|
||||
background: linear-gradient(145deg, #ffffff, #f0f0f0);
|
||||
box-shadow: $shadow-soft-sm;
|
||||
transition: all $transition-base;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $shadow-soft-md;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: $shadow-inset-sm;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Morphing Dropdown
|
||||
@mixin morphing-dropdown() {
|
||||
@include glassmorphism-blue(0.8, 16px);
|
||||
box-shadow: $shadow-morphing;
|
||||
border-radius: $radius-lg;
|
||||
overflow: hidden;
|
||||
animation: morphIn 0.3s $spring-smooth;
|
||||
}
|
||||
|
||||
// Focus Ring
|
||||
@mixin focus-ring($color: $primary-500) {
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba($color, 0.1),
|
||||
$shadow-soft-md;
|
||||
border-color: rgba($color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 11. ANIMATIONS
|
||||
// ========================================
|
||||
|
||||
@keyframes morphIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 12. UTILITY CLASSES
|
||||
// ========================================
|
||||
|
||||
.backdrop-blur {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.glass-effect {
|
||||
@include glassmorphism();
|
||||
}
|
||||
|
||||
.glass-blue {
|
||||
@include glassmorphism-blue();
|
||||
}
|
||||
|
||||
.shadow-neumorphic {
|
||||
box-shadow: $shadow-soft-md;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, $primary-600, $primary-800);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 13. RESPONSIVE UTILITIES
|
||||
// ========================================
|
||||
|
||||
@mixin responsive($breakpoint) {
|
||||
@media (min-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Usage: @include responsive($breakpoint-md) { ... }
|
||||
|
||||
// ========================================
|
||||
// 14. DARK MODE SUPPORT
|
||||
// ========================================
|
||||
|
||||
@mixin dark-mode {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@content;
|
||||
}
|
||||
|
||||
[data-theme="dark"] & {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user