Spaces:

itsluckysharma01
/

NETRA-A_Video_Surveillance_Web_Application

Running

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

Follow spacing system for padding/margins
Use shadow system for depth
Apply proper border radius
Use CSS variables for colors
Implement animation transitions
Test on all breakpoints
Verify accessibility standards

New Pages

Include ui-utils.js script
Add #toast-container div
Use .reveal class for animations
Apply consistent button styles
Use grid layouts with auto-fit
Test responsive design
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

Use CSS Variables: Always use --variable-name for colors and sizes
Consistent Spacing: Maintain spacing system throughout
Semantic HTML: Use proper HTML tags for meaning
Mobile First: Design for small screens first
Animation Moderation: Use animations purposefully, not excessively
Performance: Prefer CSS transforms over layout changes
Testing: Test all components on mobile, tablet, desktop
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

NETRA Design System & Component Library

🎨 Color Palette

Primary Colors

Accent Colors

Neutral Colors

Status Colors

Semantic Colors

📏 Spacing System

Padding & Margin Guidelines

🔤 Typography

Font Families

Font Sizes (with clamp())

Line Heights

🛇 Border Radius System

Usage

💫 Shadow System

Application

🎭 Component Specifications

Buttons

Variants

Sizes

States

Cards

Types

Standard Specifications

Forms

Input Fields

Labels

Error States

Status Chips

Variants

Modals

Notifications (Toast)

📱 Responsive Breakpoints

Desktop (960px+)

Tablet (640px - 960px)

Mobile (480px - 640px)

Small Mobile (< 480px)

Landscape (<600px height)

🎬 Animation System

Keyframe Animations

Transition Timing

Animation Timing

🔐 Accessibility Standards

Color Contrast

Focus States

Semantic HTML

Motion

🚀 Implementation Guide

New Components

New Pages

Customization

📚 Component Examples

Button Group

Status Card

Card Grid

🎯 Best Practices

📝 Version History

v2.0 (Current)

v1.0

Font Sizes (with `clamp()`)