Hugging Face's logo

Spaces:
itsluckysharma01
/
NETRA-AI_Video_Surveillance_Web_Application
Runtime error

App Files Community
NETRA-AI_Video_Surveillance_Web_Application / docs /DESIGN_SYSTEM.md
itsluckysharma01's picture
itsluckysharma01
Upload 39 files
cb3c674 verified
preview code
|
raw
history blame contribute delete
10.1 kB

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 

/* 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 

--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 

--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 

.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 

/* 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 

--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:

:root {
  --blue-900: #082a63;
  --radius-md: 14px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* ... etc ... */
}

📚 Component Examples

Button Group 

<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 

<div class="info-card">
  <h3>System Health</h3>
  <p>All services operational</p>
  <span class="status-chip ok">Operational</span>
</div>

Card Grid 

<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