Color Palette
Brand colors and semantic tokens used across the theme.
Primary Colors
Primary 100
#9382FF
Primary 200
#8273E2
Primary 300
#6156A9
Primary 400
#50478B
Primary 500
#40396F
Primary 600
#302A53
Primary 700
#7E6FC0
Secondary Colors
Secondary 100
#D6DAF0
Secondary 200
#C7CCEB
Secondary 300
#B8BFE5
Secondary 400
#A9B1E0
Secondary 500
#9AA4DA
Secondary 600
#8F9AD6
Secondary 700
#979AB2
Dark Colors
Dark 100
#050520
Dark 200
#160A35
Dark 300
#0F102A
Dark 400
#1A1A35
Dark 600
#1D1D2E
Semantic Colors
Success
#2ECA7F
Warning
#FFBD7A
Error
#FF71BF
Info
#6AE4FF
Basic
#B26EF7
Gradients
Gradient tokens for backgrounds and text effects.
Gradient 100
Text & badge accent
Gradient 200
Horizontal blend
Gradient 400
Soft overlay
Gradient 500
Multi-stop blend
Gradient 900
Purple depth
Default Gradient 2
Card background
Gradient Text Effect
LearnHub Gradient 500
Typography
Font family: DM Sans — headings, body, and utility sizes.
Headings
Heading 1 — 56px
Heading 2 — 48px
Heading 3 — 34px
Heading 4 — 30px
Heading 5 — 24px
Heading 6 — 20px
Display
Display 1 — 96px
Display 2 — 48px
Body Text
Body B1 — 24px. LearnHub helps students and educators connect through modern online courses.
Body B2 — 18px. LearnHub helps students and educators connect through modern online courses.
Body B3 — 16px. LearnHub helps students and educators connect through modern online courses.
Body B4 — 14px. LearnHub helps students and educators connect through modern online courses.
Body B5 — 12px. LearnHub helps students and educators connect through modern online courses.
Font Weights
Light 300
Regular 400
Medium 500
SemiBold 600
Bold 700
ExtraBold 800
Black 900
Buttons
Primary, secondary, and outline button styles.
Sizes
Variations
Badges
Labels and tags for highlighting content.
Our Teacher
Solid Badge
Hover Badge
Gradient Badge
Primary
-50%
Form Elements
Inputs, textarea, checkbox, and radio controls.
Shadows & Radius
Elevation and corner radius tokens.
Border Radius
Small — 6px
Default — 8px
Big — 12px
Shadows
Shadow 1
Shadow 2
Shadow 4