Sahayak 3D Design System
Formal design tokens, Okabe-Ito colorblind accessibility, dual-modality glyphs, and motion standards.
1. Authentic Okabe-Ito Colorblind-Safe Standard
Standardized palette proven universally distinguishable across Protanopia, Deuteranopia, Tritanopia, and Monochromacy.
On-Time Status, Clear Signal 104, Resolved States
8.4:1 (WCAG AAA)
Delays, Caution Signal 104, Universal Focus Rings
9.2:1 (WCAG AAA)
Cancellations, Danger Signal 104, Assertive Alerts
5.6:1 (WCAG AA)
Bypass Rerouting, Primary Action Buttons, Indian Rail Navy
4.8:1 (WCAG AA)
Day Sky Dome, Atmospheric Fog, Secondary Accents
10.5:1 (WCAG AAA)
Secondary Badges, Passenger Highlights
6.1:1 (WCAG AA)
Indian Railways Station Signboards, High-Visibility Highlights
14.2:1 (WCAG AAA)
2. Dual-Modality Status Components (Never Color Alone)
Per WCAG 1.4.1 (Use of Color), every status combines an Okabe-Ito tint, geometric SVG glyph, visible dual-language text, and unique border patterns.
Regular corridor velocity (0.25) • Signal 104 CLEAR
Deceleration (0.02) • Signal 104 CAUTION/STOP
Section Halt (0.00) • Signal 104 STOP (Red)
Parametric chord spline blend • Slower approach
3. Typography Hierarchy & Scalability
Fluid typography scale supporting up to 200% browser text zoom without clipping.
2.25rem (36px) • 900 ExtraBold
1.5rem (24px) • 800 Bold
1.25rem (20px) • 700 Bold
1rem (16px) • 400 Regular
0.75rem (12px) • 700 Bold
0.6875rem (11px) • 600 Mono
4. Motion Principles & Vestibular Safety
Smooth 60fps animations balanced with full reduced-motion safeguards.
Standard Motion (60 FPS Target)
- Following camera smoothly interpolates position via lerp factors (0.04 to 0.08).
- Train bogies swivel along spline tangents with subtle 0.015 rad curve sway.
- Speed changes adapt dynamically between 0.25 (running) and 0.02 (braking).
- Interactive controls use snappy 150ms transform presses (
active:scale-95).
Reduced Motion (prefers-reduced-motion)
- Camera bobbing and curve sway are locked to zero.
- Reroute branch transitions switch instantly via gentle cross-fade.
- Pulsing glow shaders on Signal 104 heads are completely frozen.
- All UI animations and slide transitions are disabled.
5. Senior Citizen Accessibility (Elder Mode / वरिष्ठ मोड)
Tailored specifically for senior citizens and low-vision travelers navigating rail distress.
Prominent 2px solid amber borders (#E69F00) around all cards and touch targets.
Locomotive velocity reduced by 36% (targetSpeed: 0.16) for relaxed visual tracking.
All action buttons strictly exceed 48×48px with 18px+ typography.