Display Modes

Understanding Standard, Enhanced, Light, and Dark modes

The Alterspective brand system supports multiple display modes that adapt to different contexts, user preferences, and accessibility needs. These modes aren't just aesthetic choices—they're grounded in cognitive psychology, accessibility research, and user experience principles.

Try it now!

Use the toolbar on the left side of your screen to switch between modes and see the differences in real-time.

Style Modes

Style modes control the visual complexity and depth of the interface. Choose based on context, audience, and the cognitive demands of the task at hand.

Standard Mode

Default

Philosophy

Standard mode embraces functional minimalism—the belief that interfaces should be invisible, allowing users to focus entirely on their tasks. It removes visual noise and cognitive overhead, presenting information clearly without embellishment.

Psychology

  • Cognitive Load Theory: Reduces extraneous processing by eliminating decorative elements
  • Attention Economics: Flat surfaces don't compete for attention with content
  • Decision Fatigue: Fewer visual stimuli means less mental taxation over long work sessions

When to Use

  • Data-intensive applications (dashboards, analytics)
  • Extended work sessions requiring sustained focus
  • Professional/enterprise contexts
  • Users who prefer utilitarian interfaces
  • Lower-powered devices or bandwidth-constrained environments

Characteristics

  • Flat backgrounds with solid colors
  • Minimal shadows and elevation
  • Clean, sharp borders
  • No gradients or blur effects
  • Maximum content density

Enhanced Mode

Premium

Philosophy

Enhanced mode draws from skeuomorphic depth cues and material design principles to create interfaces that feel tangible, premium, and engaging. Subtle gradients, shadows, and glass effects create a sense of physical presence and hierarchy.

Psychology

  • Affordance Theory: Depth cues signal interactivity and hierarchy
  • Emotional Design: Visual richness creates positive emotional responses
  • Perceived Quality: Polished aesthetics increase trust and perceived value
  • Gestalt Principles: Layering helps group related elements visually

When to Use

  • Marketing and showcase contexts
  • First impressions and onboarding flows
  • Consumer-facing applications
  • Creative and design-focused tools
  • When brand personality matters

Characteristics

  • Subtle gradients and glassmorphism
  • Layered shadows creating depth
  • Backdrop blur effects
  • Soft, rounded corners
  • Gentle animations and transitions

Theme Modes

Theme modes adapt the color scheme to environmental conditions and user preferences, improving readability, reducing eye strain, and respecting individual needs.

Light Theme

Best for: Well-lit environments, daytime use, print-adjacent contexts, and users who prefer high contrast between text and background.

Research: Studies show light themes improve reading speed and accuracy in bright conditions, while providing a familiar, paper-like experience.

Dark Theme

Best for: Low-light environments, evening use, reducing eye strain, OLED screens (battery savings), and users with light sensitivity.

Research: Dark themes reduce blue light emission, can ease eye strain in dim conditions, and are preferred by many developers and creative professionals.

Mode Combinations

All four modes can be combined to create experiences tailored to specific contexts.

Light Theme
Dark Theme
Standard
Standard Light Enterprise dashboards, data analysis, documentation
Standard Dark Developer tools, monitoring systems, night shifts
Enhanced
Enhanced Light Marketing sites, product demos, consumer apps
Enhanced Dark Creative tools, media apps, premium experiences

Implementation

CSS Classes 
/* Apply via body classes */
body.dark-mode 
body.enhanced-mode 

/* Combine modes */
body.dark-mode.enhanced-mode 

/* Target specific modes */
body:not(.dark-mode) .light-only 
body.dark-mode .dark-only
JavaScript API 
// Get current mode
const isDark = document.body.classList.contains('dark-mode');
const isEnhanced = document.body.classList.contains('enhanced-mode');

// Set mode programmatically
document.body.classList.toggle('dark-mode', true);
document.body.classList.toggle('enhanced-mode', true);

// Persist preference
localStorage.setItem('as-theme', 'dark');
localStorage.setItem('as-style', 'enhanced');

Accessibility Considerations

Contrast Ratios

All mode combinations maintain WCAG AA compliance (4.5:1 for normal text, 3:1 for large text).

Motion Sensitivity

Enhanced mode respects prefers-reduced-motion by disabling animations.

System Preferences

Dark mode can auto-detect prefers-color-scheme: dark from OS settings.

Persistence

User preferences are saved to localStorage and restored on return visits.

Style
Theme