Every mode applies 14 design tokens — background, surface, typography, motion, glow, grain and accessibility layer — simultaneously, in real-time.
A mode is a complete UX operating context — not a colour palette swap. It changes surface material, motion intensity, typography weight, border radius, glow strength, grain opacity and accessibility helpers simultaneously. A night driver, a dyslexic reader and a luxury brand client each get a fundamentally different interface from the same codebase.
CSS tokens
14
Motion profiles
6
Font modes
5
core
Optimal base for most digital products in low-to-medium light conditions.
Reduces glare in low light. Ensure text contrast ≥4.5:1 against dark bg.
WCAG AA
100%
WCAG AAA
18 modes
CVD-safe
8 modes
Motion-safe
all
UX Designer
Token system for all visual modes
Developer
CSS var API, typed Mode registry
A11y Lead
WCAG proof-of-concept per mode
Brand Director
Luxury, editorial, executive modes
Product Owner
Adaptive AI modes for smart apps
Godtier layer system
Image field
A generated spatial backdrop gives the mode system a physical stage: reflections, glass depth and light gradients respond to the active token layer.
Glass stack
Translucent panes use the same CSS variables as the product UI, so accessibility, luxury, matrix and e-ink modes all keep their own material logic.
Scroll optics
The motion is local to this section and reduced-motion aware, leaving route transitions and pinned GSAP scenes stable.
High contrast, low vision, dyslexia-optimised, reduced motion, cognitive — proving that inclusive design is not an edge case, but the universal quality standard.
// 8 modes · WCAG AAA · no animation required
Protanopia, Deuteranopia, Tritanopia, Achromatopsia — simulate every major colour vision deficiency and build palettes that work for the 8% most tools ignore.
// 8 modes · 8% of males affected · greyscale-first logic
Night, Warm, Sepia, Paper, E-Ink — comfort modes reduce blue light, preserve melatonin and remove visual strain for users who live inside the product.
// 9 modes · melatonin-safe · blue-light reduction
Neon, Matrix, Synthwave, Arcade, Sci-Fi — one mode switch transforms the same codebase for a gaming platform, a hacker conference or a creative campaign.
// 10 modes · glow system · monospace typography
AI Adaptive, Circadian, Biometric, Mood Adaptive — modes that simulate personalised UX driven by physiology, context and learned preference, with full a11y preservation.
// 6 modes · context-driven · a11y-preservation guard
74 interface modes · 10 families · one system
[M] to browse all modes
System Console
Watch the mode engine process token syncs, contrast audits and motion profile updates.
Mitterberger:Lab
Modes OS is a living proof-of-concept. Apply the system to a real product — 74 modes, fully typed, fully accessible, production-ready.
