Unacademy

name Unacademy

colors background: "#ffffff" foreground: "#3c4852" brand: "#06bc7f" # Unacademy Green muted: "#7a8b94" border: "#eff3f4" card: "#ffffff" accent: "#2d81f7" # Unacademy Blue dark: background: "#0a0a0a" foreground: "#eff3f4" muted: "#7a8b94" border: "#3c4852" card: "#1a1a1a" accent: "#06bc7f"

typography fontFamily: sans: "Inter, system-ui, -apple-system, sans-serif" body: fontSize: "14px" lineHeight: "1.5" heading: fontWeight: "700" letterSpacing: "-0.01em"

rounded default: "4px" md: "8px" lg: "12px"

Design System: Unacademy

Overview

Unacademy's design system is "The Future of Learning." It uses a clean, technology-first aesthetic with vibrant greens and blues to create a focused yet inspiring classroom environment.

Design Philosophy

• Focus on the Educator: The UI is designed to highlight the educator and the content, minimizing interface distractions.

• Growth & Success: Uses its signature green (#06BC7F) to represent progress, learning, and achievement.

• Structured Learning: Organizes complex courses and live classes into a highly structured, easy-to-navigate grid.

• Interactive Engagement: Features vibrant interactive states for polls, quizzes, and live chat to keep students engaged.

Colors

• Unacademy Green (#06BC7F): A vibrant, digital green that represents growth and the "active" learning state.

• Unacademy Blue (#2D81F7): Used for primary highlights, links, and secondary interactive states.

• Limed Spruce (#3C4852): A professional dark grey used for text and headers to maintain a serious, academic tone.

Typography

• Inter: Ensures that lecture notes, subtitles, and course descriptions are perfectly legible across all devices.

• Academic Hierarchy: Uses bold, confident headers for course titles and vibrant weights for "Live Now" status.

Components

• Live Class Card: Features a large thumbnail, educator profile, and a "Live" status badge with a pulse animation.

• The "Goal" Sidebar: A structured navigation area that helps users switch between different competitive exams and goals.

• Quiz Interface: A high-contrast, center-focused layout with large, clickable options and instant feedback.

Visual Effects

• Pulse Indicators: Used on "Live" classes to create a sense of presence and urgency.

• Soft Progress Bars: Minimalist green bars used to track course completion and test scores.

• Subtle Depth: Uses thin borders and soft background shifts rather than heavy shadows to maintain a "clean" digital feel.