| # NETRA Design System & Component Library | |
| ## 🎨 Color Palette | |
| ### Primary Colors | |
| - **Blue 900**: `#082a63` - Dark backgrounds, headings | |
| - **Blue 800**: `#0b3b8a` - Secondary headings | |
| - **Blue 700**: `#0f55c7` - Primary accent | |
| - **Blue 600**: `#1c6ef2` - Interactive elements | |
| ### Accent Colors | |
| - **Orange 600**: `#ff7a00` - CTAs, highlights | |
| - **Orange 500**: `#ff922b` - Hover states | |
| - **Orange 100**: `#fff1e6` - Light backgrounds | |
| ### Neutral Colors | |
| - **White**: `#ffffff` - Primary background | |
| - **Slate 900**: `#1b2a4a` - Text | |
| - **Slate 700**: `#41557c` - Secondary text | |
| - **Slate 500**: `#7284a8` - Tertiary text | |
| ### Status Colors | |
| - **Success (Green)**: `#1f9d55` | |
| - **Warning (Orange)**: `#ff9f1a` | |
| - **Danger (Red)**: `#e53935` | |
| - **Info (Blue)**: `#1c6ef2` | |
| ### Semantic Colors | |
| - **Line/Border**: `#d9e4ff` | |
| - **Glass (Semi-transparent)**: `rgba(255, 255, 255, 0.82)` | |
| --- | |
| ## 📏 Spacing System | |
| ```css | |
| /* Base unit: 0.25rem (4px) */ | |
| 0.25rem = 4px | |
| 0.5rem = 8px | |
| 0.75rem = 12px | |
| 1rem = 16px | |
| 1.2rem = 19px | |
| 1.5rem = 24px | |
| 2rem = 32px | |
| 2.2rem = 35px | |
| 2.4rem = 38px | |
| ``` | |
| ### Padding & Margin Guidelines | |
| - **Cards/Sections**: 1.2rem - 1.5rem | |
| - **Form Groups**: 0.85rem | |
| - **Buttons**: 0.72rem (vertical), 1.1rem (horizontal) | |
| - **Section Padding**: 4.2rem (vertical), 1rem (horizontal) | |
| --- | |
| ## 🔤 Typography | |
| ### Font Families | |
| - **Headings**: Sora (weights: 400, 500, 600, 700, 800) | |
| - **Body**: IBM Plex Sans (weights: 400, 500, 600, 700) | |
| ### Font Sizes (with `clamp()`) | |
| - **H1 (Hero)**: `clamp(2.4rem, 6vw, 4.1rem)` | |
| - **H2 (Section Title)**: `clamp(1.7rem, 4vw, 2.45rem)` | |
| - **H3 (Subsection)**: `1.3rem` | |
| - **Body**: `1rem` | |
| - **Small**: `0.9rem` | |
| - **Extra Small**: `0.85rem` | |
| ### Line Heights | |
| - **Headings**: -0.02em letter-spacing | |
| - **Body**: 1.6 line-height | |
| - **Descriptions**: 1.7 line-height | |
| --- | |
| ## 🛇 Border Radius System | |
| ```css | |
| --radius-md: 14px; /* Standard components */ | |
| --radius-lg: 22px; /* Large sections, modals */ | |
| 999px; /* Pill-shaped (badges, chips) */ | |
| ``` | |
| ### Usage | |
| - **Buttons**: 12px | |
| - **Input Fields**: 10px | |
| - **Cards**: 22px | |
| - **Badges/Chips**: 999px | |
| --- | |
| ## 💫 Shadow System | |
| ```css | |
| --shadow-sm: 0 8px 20px rgba(11, 59, 138, 0.08); | |
| --shadow-md: 0 16px 35px rgba(11, 59, 138, 0.12); | |
| --shadow-lg: 0 24px 60px rgba(11, 59, 138, 0.18); | |
| ``` | |
| ### Application | |
| - **Small**: Hover states, subtle elements | |
| - **Medium**: Cards, panels, modals | |
| - **Large**: Hero sections, prominent cards | |
| --- | |
| ## 🎭 Component Specifications | |
| ### Buttons | |
| #### Variants | |
| | Type | Background | Color | Shadow | | |
| | --------- | ----------------------- | ----- | ------------------------- | | |
| | Primary | Linear gradient (blue) | White | sm on normal, md on hover | | |
| | Secondary | Linear gradient (blue) | White | sm on normal, md on hover | | |
| | Danger | Linear gradient (red) | White | sm on normal, md on hover | | |
| | Success | Linear gradient (green) | White | sm on normal, md on hover | | |
| | Outline | Transparent + border | White | sm | | |
| #### Sizes | |
| - **Normal**: `0.72rem` padding, `1.1rem` horizontal | |
| - **Large**: `0.95rem` padding, `1.6rem` horizontal | |
| #### States | |
| - **Normal**: Full opacity | |
| - **Hover**: `translateY(-2px)`, enhanced shadow | |
| - **Active**: `translateY(0)` | |
| - **Disabled**: 60% opacity, no interaction | |
| - **Loading**: Spinner appended, disabled | |
| ### Cards | |
| #### Types | |
| - **Stat Card**: Summary statistics | |
| - **Feature Card**: Feature descriptions | |
| - **Tech Card**: Technology highlights | |
| - **Dashboard Card**: Main navigation cards | |
| - **Info Card**: Information panels | |
| #### Standard Specifications | |
| - **Padding**: 1.35rem | |
| - **Background**: Glass effect (`rgba(255, 255, 255, 0.82)`) | |
| - **Border**: 1px solid `rgba(255, 255, 255, 0.76)` | |
| - **Border Radius**: 22px | |
| - **Transition**: 0.25s ease on transform and shadow | |
| ### Forms | |
| #### Input Fields | |
| - **Border**: 1px solid `#d9e4ff` | |
| - **Border Radius**: 10px | |
| - **Padding**: 0.72rem 0.8rem | |
| - **Focus**: Blue border + 0 0 0 4px shadow | |
| #### Labels | |
| - **Color**: `#1b2a4a` | |
| - **Font Weight**: 600 | |
| - **Margin Bottom**: 0.4rem | |
| #### Error States | |
| - **Border Color**: Red | |
| - **Background**: Red tint | |
| - **Error Message**: Red text below field | |
| ### Status Chips | |
| ```css | |
| .status-chip { | |
| border-radius: 999px; | |
| padding: 0.38rem 0.8rem; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| } | |
| ``` | |
| #### Variants | |
| | Status | Background | Color | Border | | |
| | ------- | -------------------------- | --------- | ------------------------- | | |
| | Success | `rgba(31, 157, 85, 0.12)` | `#1f9d55` | `rgba(31, 157, 85, 0.3)` | | |
| | Warning | `rgba(255, 159, 26, 0.12)` | `#ff9f1a` | `rgba(255, 159, 26, 0.3)` | | |
| | Danger | `rgba(229, 57, 53, 0.12)` | `#e53935` | `rgba(229, 57, 53, 0.3)` | | |
| | Info | `rgba(28, 110, 242, 0.12)` | `#1c6ef2` | `rgba(28, 110, 242, 0.3)` | | |
| ### Modals | |
| - **Background**: White | |
| - **Border**: 1px solid `#d9e4ff` | |
| - **Border Radius**: 22px | |
| - **Shadow**: Large shadow | |
| - **Max Width**: 540px | |
| - **Padding**: 1.4rem | |
| ### Notifications (Toast) | |
| - **Background**: White | |
| - **Border Left**: 4px colored | |
| - **Border Radius**: 12px | |
| - **Padding**: 1rem 1.2rem | |
| - **Min Width**: 280px | |
| - **Auto Dismiss**: 3000ms | |
| --- | |
| ## 📱 Responsive Breakpoints | |
| ### Desktop (960px+) | |
| - Full multi-column layouts | |
| - Side-by-side panels | |
| - All features visible | |
| - Desktop navigation | |
| ### Tablet (640px - 960px) | |
| - 2-column grids reduced to 2 columns max | |
| - Single column for main content | |
| - Optimized spacing | |
| - Dropdown menus | |
| ### Mobile (480px - 640px) | |
| - Single column layouts | |
| - Touch-friendly spacing (minimum 44px taps) | |
| - Simplified navigation | |
| - Condensed modals | |
| ### Small Mobile (< 480px) | |
| - Maximum 1 column | |
| - Minimal padding | |
| - Simplified components | |
| - Essential features only | |
| ### Landscape (<600px height) | |
| - Reduced vertical padding | |
| - Compact sections | |
| - Optimized for long, narrow screens | |
| --- | |
| ## 🎬 Animation System | |
| ### Keyframe Animations | |
| ```css | |
| /* Entrance Animations */ | |
| fadeIn /* Opacity fade */ | |
| slideInUp /* Slide from bottom */ | |
| slideInDown /* Slide from top */ | |
| slideInLeft /* Slide from left */ | |
| slideInRight /* Slide from right */ | |
| riseIn /* Rise with fade */ | |
| /* Action Animations */ | |
| pulse /* Box-shadow pulse */ | |
| spin /* Full rotation */ | |
| bounce /* Vertical bounce */ | |
| shimmer /* Shimmer effect */ | |
| ``` | |
| ### Transition Timing | |
| ```css | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| ``` | |
| ### Animation Timing | |
| - **Fast**: 0.2s - 0.3s (hover states, small changes) | |
| - **Normal**: 0.4s - 0.6s (page transitions, major changes) | |
| - **Slow**: 0.8s - 1s (scroll reveals, long animations) | |
| - **Continuous**: 1.5s - 2s (looping animations) | |
| --- | |
| ## 🔐 Accessibility Standards | |
| ### Color Contrast | |
| - Text on background: 4.5:1 minimum (WCAG AA) | |
| - Large text: 3:1 minimum | |
| - Icons: 3:1 minimum | |
| ### Focus States | |
| - All interactive elements have visible focus states | |
| - Focus outline: 2px solid, contrasting color | |
| - Not removed, only repositioned if necessary | |
| ### Semantic HTML | |
| - Proper heading hierarchy (H1, H2, H3...) | |
| - Form labels associated with inputs | |
| - Buttons used for actions, links for navigation | |
| - ARIA labels where needed | |
| ### Motion | |
| - Reduced motion respected via `prefers-reduced-motion` | |
| - No animations longer than 3 seconds that can't be paused | |
| - Auto-playing content has pause controls | |
| --- | |
| ## 🚀 Implementation Guide | |
| ### New Components | |
| 1. Follow spacing system for padding/margins | |
| 2. Use shadow system for depth | |
| 3. Apply proper border radius | |
| 4. Use CSS variables for colors | |
| 5. Implement animation transitions | |
| 6. Test on all breakpoints | |
| 7. Verify accessibility standards | |
| ### New Pages | |
| 1. Include `ui-utils.js` script | |
| 2. Add `#toast-container` div | |
| 3. Use `.reveal` class for animations | |
| 4. Apply consistent button styles | |
| 5. Use grid layouts with `auto-fit` | |
| 6. Test responsive design | |
| 7. Verify form accessibility | |
| ### Customization | |
| All design values are CSS variables in `:root`: | |
| ```css | |
| :root { | |
| --blue-900: #082a63; | |
| --radius-md: 14px; | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| /* ... etc ... */ | |
| } | |
| ``` | |
| --- | |
| ## 📚 Component Examples | |
| ### Button Group | |
| ```html | |
| <div class="hero-buttons"> | |
| <a href="#" class="btn btn-primary btn-large">Primary</a> | |
| <a href="#" class="btn btn-outline btn-large">Outline</a> | |
| </div> | |
| ``` | |
| ### Status Card | |
| ```html | |
| <div class="info-card"> | |
| <h3>System Health</h3> | |
| <p>All services operational</p> | |
| <span class="status-chip ok">Operational</span> | |
| </div> | |
| ``` | |
| ### Card Grid | |
| ```html | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-number">99%</div> | |
| <div class="stat-label">Uptime</div> | |
| </div> | |
| <!-- More cards... --> | |
| </div> | |
| ``` | |
| --- | |
| ## 🎯 Best Practices | |
| 1. **Use CSS Variables**: Always use `--variable-name` for colors and sizes | |
| 2. **Consistent Spacing**: Maintain spacing system throughout | |
| 3. **Semantic HTML**: Use proper HTML tags for meaning | |
| 4. **Mobile First**: Design for small screens first | |
| 5. **Animation Moderation**: Use animations purposefully, not excessively | |
| 6. **Performance**: Prefer CSS transforms over layout changes | |
| 7. **Testing**: Test all components on mobile, tablet, desktop | |
| 8. **Accessibility**: Always include keyboard navigation and focus states | |
| --- | |
| ## 📝 Version History | |
| ### v2.0 (Current) | |
| - Enhanced animations and transitions | |
| - Responsive design improvements | |
| - New UI utility library | |
| - Status chips redesign | |
| - Modal dialog system | |
| - Toast notification system | |
| ### v1.0 | |
| - Initial design system | |
| - Color palette | |
| - Typography | |
| - Basic components | |
| --- | |
| _Design System Documentation_ | |
| _Last Updated: May 2, 2026_ | |
| _NETRA Frontend v2.0_ | |