Version 1.0 • A modern educational platform for Nepalese institutions
🎯
Design Philosophy
SikshyaOS bridges institutional authority with modern digital experiences. We've crafted a design language that feels both trusted and innovative—like a prestigious institution that's embraced the future.
Core Principles
Editorial Clarity — Information is curated, not dumped. Every element earns its place.
Tonal Depth — We use color shifts and layers instead of lines. Depth comes from surfaces, not shadows.
Spacious Intelligence — White space is a feature. Dense data becomes digestible through breathing room.
Cultural Resonance — Design choices honor Nepalese educational contexts while feeling globally modern.
🎨
Color System
Our palette balances institutional trust (Deep Blue) with decisive action (Warm Orange). Every color has a purpose.
Primary Colors
PRIMARY
Deep Navy Blue
#142c78
Authority • Trust • Structure Use for: Main navigation, headers, primary branding
PRIMARY CONTAINER
Rich Blue
#2f4490
Depth • Gradient Partner Use for: Gradient endpoints, hover states
SECONDARY
Academic Teal
#1a648c
Links • Focus States • Interactive Use for: Hyperlinks, input focus borders, active states
SECONDARY FIXED
Sky Highlight
#c8e6ff
Chips • Badges • Contextual Info Use for: Academic calendar chips, date badges, highlights
Secondary Actions • Gentle CTAs Use for: Secondary buttons, less urgent actions
Surface & Background
SURFACE
Base Canvas
#f7faf4
Main Background The foundation. Everything sits on this.
SURFACE CONTAINER LOW
First Layer
#f2f4ee
Sections Use for: Page sections, content areas
SURFACE CONTAINER LOWEST
Cards & Modals
#ffffff
Elevated Items Use for: Cards, modals, data tables
SURFACE CONTAINER HIGHEST
Emphasis
#e0e3dd
Hover States Use for: Selected states, hover backgrounds
Text Colors
ON-SURFACE
Primary Text
#191d19
Use for: Headings, important text
ON-SURFACE VARIANT
Body Text
#454651
Use for: Descriptions, metadata, body paragraphs
OUTLINE VARIANT
Borders (Sparingly)
#c5c5d3
Use at 15% opacity when absolutely necessary
Semantic Colors
SUCCESS
#2d7d46
ERROR
#ba1a1a
WARNING
#7d5700
INFO
#1a648c
✍️
Typography
Typeface:Inter — Modern, highly legible, optimized for screens and data-dense interfaces.
Display Large
1,247
57px • Semibold 600 • -0.02em tracking
Display Medium
Academic Year 2082
45px • Semibold 600 • -0.015em tracking
Headline Large
Student Dashboard
32px • Medium 500 • 0 tracking
Headline Medium
Performance Overview
28px • Medium 500 • 0 tracking
Title Large
Recent Activities
22px • Medium 500 • 0 tracking
Body Large
The current semester shows a 15% improvement in overall student engagement across all departments. Students are participating more actively in classroom discussions and online forums.
16px • Regular 400 • 0.01em tracking
Body Medium
Last updated: 2 hours ago • Submitted by Ram Sharma
14px • Regular 400 • 0.015em tracking
Label Large (Uppercase)
Submitted On
14px • Medium 500 • 0.05em tracking • UPPERCASE
Label Medium (Uppercase)
March 24, 2026
12px • Medium 500 • 0.05em tracking • UPPERCASE
📐
Spacing System
Based on an 8px grid. Use these tokens consistently.