Skip to content

UI_STANDARDS.md

Latest commit

 

History

History
144 lines (119 loc) · 5.24 KB

UI_STANDARDS.md

File metadata and controls

144 lines (119 loc) · 5.24 KB

UI Standards for MileIQ_CreateUser Chrome Extension

Design Philosophy

The extension follows a modern, system-adaptive design philosophy with the following principles:

Adaptive Theming

  • System Theme Detection: Automatically adapts to user's system/browser theme preference
  • Light Theme: Clean whites (#ffffff) with subtle grays and blue accents (#0d6efd)
  • Dark Theme: Deep grays (#212121) with green accents (#10a37f)
  • CSS Variables: Consistent theming through CSS custom properties
  • Seamless Switching: Respects prefers-color-scheme media query

Color System

Light Theme

  • Primary Green: #0d6efd (professional blue accent)
  • Text Primary: #212529 (high contrast on light backgrounds)
  • Text Secondary: #6c757d (muted text for descriptions)
  • Background Primary: #ffffff
  • Background Secondary: #f8f9fa
  • Border Color: #dee2e6

Dark Theme

  • Primary Green: #10a37f (ChatGPT-inspired accent color)
  • Text Primary: #ececec (high contrast on dark backgrounds)
  • Text Secondary: #8e8ea0 (muted text for descriptions)
  • Background Primary: #212121
  • Background Secondary: #2a2a2a
  • Border Color: #3d3d3d

Component Standards

Tabs

  • Equal width distribution
  • Active state with bottom border accent
  • Smooth transitions (0.2s ease)
  • Hover states with subtle background changes

Buttons/Links

  • Rounded corners (8px for buttons, 12px for containers)
  • Green accent color scheme
  • Hover animations with transform effects
  • Consistent padding (10px 16px for links)

Cards/Containers

  • Subtle transparency overlays
  • Rounded corners (12px for main containers)
  • Hover states with border color changes
  • Smooth animations on load

Animation Guidelines

  • Loading Animations: Staggered fade-in effects (0.1s delays between elements)
  • Hover Effects: Subtle transform translations (1px up)
  • Transitions: 0.2s ease for most interactions
  • Shimmer Effects: Linear gradients for button hover states

Layout Structure

Container (360px x 600px)
├── Header (Logo + Title)
├── Tabs (Environment Selection)
├── Content (Scrollable)
│   ├── Environment Header
│   └── Account Stack (Single Column)
│       ├── Account Category (Standalone)
│       │   ├── Category Header (Icon + Title)
│       │   └── Plan Options
│       │       ├── Monthly Plans (Free, Unlimited)
│       │       └── Annual Plans (Free, Unlimited)
│       └── Account Category (Teams)
│           ├── Category Header (Icon + Title)
│           └── Plan Options
│               ├── Monthly Plans (Lite, Standard, Pro)
│               └── Annual Plans (Lite, Standard, Pro)
└── Footer (Helper Text)

Streamlined Organization

  • Stacked Layout: Single-column vertical stack for optimal space utilization
  • Full-width Design: Each category uses the full popup width (no horizontal scrolling)
  • Category-based: Grouped by product line (Standalone vs Teams)
  • Compact Design: Billing cycles organized vertically within each category
  • Icon Differentiation: Visual icons distinguish between account types
  • Micro-interactions: Small buttons for individual plan selections

Responsive Considerations

  • Fixed width popup (360px) for consistent extension experience
  • Scrollable content area with custom scrollbar styling
  • Height adjustments for smaller viewports (< 500px)
  • Touch-friendly button sizes (minimum 44px touch targets)

Accessibility Standards

  • High contrast ratios (WCAG 2.1 AA compliant)
  • Semantic HTML structure
  • Keyboard navigation support
  • Screen reader friendly markup
  • Focus indicators for interactive elements

Browser Compatibility

  • Chrome/Chromium based browsers (primary target)
  • Modern CSS features with fallbacks
  • Hardware acceleration for animations
  • Optimized for extension popup constraints

Implementation Guidelines

CSS Architecture

  • CSS Variables: Comprehensive theming system with --bg-primary, --text-primary, etc.
  • System Theme Detection: @media (prefers-color-scheme: dark) for automatic switching
  • Color-mix Function: Modern CSS with fallbacks for older browsers
  • Component-based: Modular CSS with clear component boundaries
  • Performance-optimized: Hardware-accelerated animations and transitions

JavaScript Patterns

  • ES6+ modern JavaScript
  • Event delegation for dynamic content
  • Modular function organization
  • Error handling and graceful degradation

Asset Optimization

  • SVG icons for scalability
  • Optimized CSS for fast rendering
  • Minimal external dependencies
  • Efficient DOM manipulation

Maintenance Standards

Code Quality

  • Consistent naming conventions (kebab-case for CSS, camelCase for JS)
  • Commented code for complex animations
  • Regular accessibility audits
  • Performance monitoring for popup load times

Future Updates

  • Version control for design changes
  • Backward compatibility considerations
  • User testing for major UI changes
  • Documentation updates for new patterns

This document ensures consistent UI implementation across all extension components and provides guidance for future development iterations.

Last updated: 2024-12-19