Colors
Brand colors used across the MahaEd Design System.
Primary Blue
Primary buttons, links & active states
#2563EB
Primary Blue Dark
Button hover & active state
#1E40AF
Primary Orange
Primary CTA & highlights
#F97316
Primary Orange Dark Hover
CTA hover state
#EA580C
Headings
Headings (H1–H6)
#0F172A
Body Text
Paragraphs & descriptions
#64748B
Background
Section Backgrounds
#F8FAFC
Card White
Cards And Containers
#FFFFFF
Border
Borders & dividers
#E2E8F0
Error
Errors & destructive actions
#DC2626
Success
Success messages
#16A34A
Highlights
Badges & highlights
#F59E0B
Typography
Global font styles used across MahaEd.
English Typography
H1 EN
This is an H1 Heading
64px / Bold / Poppins
H2 EN
This is an H2 Heading
48px / Bold / Poppins
H3 EN
This is an H3 Heading
36px / SemiBold / Poppins
H4 EN
This is an H4 Heading
30px / SemiBold / Poppins
H5 EN
This is an H5 Heading
24px / Medium / Poppins
H6 EN
This is an H6 Heading
20px / Medium / Poppins
Body EN
This is the default paragraph used throughout the website.
18px / Regular / Poppins
Small EN
Small helper text for forms and descriptions.
14px / Regular / Poppins
Label EN
CATEGORY LABEL
12px / Medium / Poppins
H1 MR
हा H1 मराठी मथळा आहे
64px / Bold / Noto sans devanagari
H2 MR
हा H2 मराठी मथळा आहे
48px / Bold / Noto sans devanagari
H3 MR
हा H3 मराठी मथळा आहे
36px / Semibold / Noto sans devanagari
H4 MR
हा H4 मराठी मथळा आहे
30px / Semibold / Noto sans devanagari
H5 MR
हा H5 मराठी मथळा आहे
24px / Medium / Noto sans devanagari
H6 MR
हा H6 मराठी मथळा आहे
20px / Medium / Noto sans devanagari
Body MR
परिच्छेद म्हणजे मजकूराचा एक वेगळा विभाग, जो सामान्यतः एकाच विषयाशी संबंधित असतो आणि नवीन ओळ, इंडेंटेशन किंवा नंबरिंगद्वारे दर्शविला जातो.
18px / Normal / Noto sans devanagari
Small MR
फॉर्म आणि वर्णनांसाठी छोटासा मदतपर मजकूर.
14px / Normal / Noto sans devanagari
Label MR
वस्तुला लावलेली खूण चिठ्ठी, लेबल
12px / Medium / Noto sans devanagari
Spacing System
Define consistent spacing rules used across MahaEd UI to maintain clean, readable and professional layouts.
8px Grid System
All spacing values in MahaEd are based on an 8px grid to maintain consistency across the interface.
Token
Value
Visual
Usage
Space-XS
8px
Icon Gap
Space-S
16x24 px
Button Padding (Tablet 14x20 px, Mobile 12x16 px)
Space-M
24px
Content Gap (Tablet 20px, Mobile 16px)
Space-L
32px
Card Padding (Tablet 24px, Mobile 16px)
Space-XL
48px
Section Content
Space-2XL
64px
Large Components
Section
96px
Section Top / Bottom (top/bottom Tablet 64px, Mobile 40px)
Hero
120px
Hero Section (top/bottom Tablet 80px, Mobile 56px)
Never use random values like 13px, 27px or 41px. Always use the MahaEd spacing scale based on the 8px grid.