BYJU'S

name BYJU'S

colors background: "#ffffff" foreground: "#501c58" # Dark Purple brand: "#813287" # Primary Purple muted: "#7c7c7c" border: "#f0f0f0" card: "#ffffff" accent: "#f05b83" # Secondary Pink secondary: "#ac4da4" # Violet dark: background: "#1a0a1a" foreground: "#f5f5f5" muted: "#a1a1a1" border: "#501c58" card: "#241024" accent: "#813287"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "16px" lineHeight: "1.4" heading: fontWeight: "800" letterSpacing: "0.01em"

rounded default: "12px" md: "16px" lg: "24px" full: "9999px"

Design System: BYJU'S

Overview

BYJU'S design system is "Playful Discovery." It uses a signature purple-and-pink palette and rounded, friendly shapes to make learning feel like an adventure for students of all ages.

Design Philosophy

• Learning is Joy: Rejects the "clinical" look of traditional textbooks for a vibrant, character-driven aesthetic.

• The "Purple" Path: Uses a deep purple foundation to represent intelligence, curiosity, and the brand's identity.

• Brave & Bold: Uses massive typography and high-saturation colors to create a sense of excitement and confidence.

• Visual Storytelling: Integrates characters and illustrations as first-class UI elements to guide the learning journey.

Colors

• BYJU'S Purple (#813287): The core brand color, representing the "magic" of learning.

• Secondary Pink (#F05B83): Used for rewards, highlights, and to add a layer of playful energy.

• Dark Purple (#501C58): Used for headers and primary text to provide a sophisticated, stable foundation.

Typography

• Inter: Provides the necessary clarity for educational content while supporting the brand's bold voice.

• Extra Bold Hierarchy: Heavily relies on Extra Bold weights to create a sense of importance and "Play" buttons.

Components

• Lesson Tiles: Large, rounded rectangles (16px) with integrated illustrations and progress indicators.

• The "Play" Button: A prominent, colorful circle with a high-contrast play icon—the gateway to video learning.

• Reward Badges: 3D-inspired, colorful icons used for achievement tracking and gamification.

Visual Effects

• Soft Gradients: Uses purple-to-pink or purple-to-violet gradients for marketing heroes and course headers.

• Bouncy Micro-animations: Features fast, "organic" transitions to keep students engaged and entertained.

• Layered Illustrations: Uses 2D and 3D illustrations to add depth and personality to the interface.