Academic UI Design System

A comprehensive, high-contrast, accessibility-first design language specifically crafted for Indian academic portals, question papers, and bilingual students.

Color Token Matrix & Contrast Validation

Calibrated against WCAG 2.1 Level AA and AAA standards for optimal readability on high-brightness phone screens and desktop monitors.

#1e40af

Primary Deep Blue

--color-primary

Brand authority, main CTA buttons, header links

Contrast: 7.2:1 (AAA)

#f59e0b

Secondary Amber

--color-secondary

Urgency, important alerts, notification tags, active year

Contrast: 3.5:1 (UI Component)

#16a34a

Success Download Green

--color-success

Download PDF buttons, verified answer keys, safe badges

Contrast: 4.8:1 (AA)

#fafaf9

Warm White Background

--app-bg

Light mode main viewport canvas, gentle on eyes

Contrast: Background

#0f172a

Dark Mode Slate

--app-bg-dark

Dark mode main canvas, late night study sessions

Contrast: 14.8:1 Against White

#0f172a / #f8fafc

Text Slate Main

--text-main

Primary headings, titles, examination codes

Contrast: 14.8:1 (AAA)