DESIGN.md · explainx registry
BYJU'S
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 System#design#ui#ux#template
DESIGN.md (markdown body)
| 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.
Usage
- Copy DESIGN.md into your project or paste it into your IDE agent chat.
- Ask your assistant to follow the tokens for color, typography, spacing, and component styling.
- When collaborating, share the file directly—or tap “Copy page link” below so teammates open the same snapshot.
Common questions
- What is BYJU'S on explainx.ai?
- 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. Listed under category “Design System”. Explainx.ai mirrors the full DESIGN.md document so assistants can cite stable tokens and prose in one place.
- What is DESIGN.md?
- DESIGN.md blends YAML design tokens—colors, typography, spacing, radii—with markdown that explains intent. Google documents this pattern for agent-driven UI work under Stitch (stitch.withgoogle.com).
- How do I use this with ChatGPT, Cursor, Claude Code, or another IDE agent?
- Paste the DESIGN.md into your repo root or attach it to the agent conversation, then ask explicitly for layouts, spacing, palette, type scale, and component tone that follow the document. Refresh from this listing when upstream authors publish changes.
- Where is the source repo?
- Maintainers link to github.com/whyashthakker/design-md-templates-skills. Community listings on explainx.ai may reference popular aesthetic names for inspiration; that does not imply official endorsement by any trademark holder.
- How current is this DESIGN.md?
- Explainx snapshots the file at import time. Recorded last update on this listing: May 8, 2026.
- Need a fresh DESIGN.md from scratch?
- Use the ExplainX DESIGN.md generator to describe your product and audience; it returns Stitch-style YAML plus narrative guidance you can publish or submit to the registry afterward.
Still exploring the format? Browse the full DESIGN.md registry or draft a new system with our DESIGN.md generator.
Community listing for AI design workflows—not necessarily affiliated with any brand referenced in the name or summary. For context on the format, see Google Stitch.
List Your Design.md
Share your design system with AI agents worldwide