SuperC

Overview

SuperC is an educational technology platform designed to democratize competitive exam preparation through AI-powered adaptive learning. The design system embodies "Educational Clarity"—a philosophy that prioritizes information hierarchy, progressive disclosure, and trust-building through consistent, structured interfaces. The brand serves students (ages 5–18), parents, and educators across India and the UK preparing for high-stakes assessments (SAT, 11+, Olympiad, Navodaya, Sainik School). The visual language combines a professional teal-and-navy color palette with generous whitespace and Roboto Slab's distinctive serif typography, evoking both academic rigor and approachability. The UI evokes a sense of calm confidence: "Your personalized learning journey starts here, with data-driven insights and unlimited practice."

The brand voice is encouraging yet precise, avoiding hyperbole while celebrating achievement. Tone: conversational but authoritative, never patronizing. Vocabulary emphasizes agency ("Your progress," "Master," "Unlock") and measurable outcomes ("4X Better Results," "100,000+ Questions"). Example sentence in brand voice: "Just 15 minutes a day unlocks your potential—our AI adapts to your pace, not the other way around."

Colors

The color system is anchored by Primary (#145170), a deep teal-navy that commands trust and focus—used exclusively on primary CTAs ("Get My Free Account"), navigation highlights, and interactive states. This color appears in the rendered primary CTA button with rgb(20, 81, 110), reinforcing authority without aggression. Secondary (#3eb1be), a bright cyan, provides energetic accents for progress indicators, badges, and supporting UI elements; it appears in the loading bar (box-shadow: 0 0 10px #3eb1be) and creates visual momentum. Tertiary (#ffc107), a warm yellow, highlights achievements, warnings, and motivational badges. The surface stack progresses from #f4f7f6 (base surface) through #f8f9fa (container-lowest) to #ffffff (surface-bright), creating subtle depth without visual noise. On-s

Typography

The type system centers on Roboto Slab, a geometric serif font that balances formality with warmth—critical for an educational platform where credibility and approachability must coexist. Display (60px, 800 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 700 weight) frames section titles like "Why Choose SuperC?"; Headline-md (28px, 700 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) carries narrative copy and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) fills form labels, card content, and secondary text. Label-md (14px, 600 weight, 0.02em tracking) styles button text and UI labels; Label-sm (12px, 500 weight, 0.03em tracking) handles badges and micro-copy. All headings use

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop and 12px on mobile. The hero section spans full-width with a soft gradient background (#ecfbf4 to #ffffff), establishing visual warmth and approachability. Content sections use the full container width but maintain 40px (lg spacing) vertical separation between major sections, creating a rhythm that guides users through the learning journey. The form inputs (Name, Email, CTA) sit in a 3-column layout on desktop, collapsing to single-column on mobile; each input uses 32px border-radius (full rounding) and 12px padding (sm spacing) for a friendly, accessible feel. Feature cards ("Unlimited Practice," "AI-Powered Personalization," etc.) are arranged in a 2×3 grid with 24px

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids heavy drop-shadows, maintaining the clean, educational aesthetic. Level 1 (Base): No shadow; flat surfaces like the body background (#f4f7f6) and input fields use only a 1px border in outline-variant (#adb5bd) to define edges. Level 2 (Standard Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, modals, and elevated buttons; this creates subtle separation without visual weight. Level 3 (Hover & Focus States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) on card-hover and button-primary-hover, signaling inte

Shapes

The shape philosophy is "Structured Friendliness"—combining geometric precision with subtle softness to balance professionalism and approachability. Buttons use 8px border-radius (lg), creating a modern, slightly rounded rectangle that feels contemporary without being overly playful. Input fields use 32px border-radius (full), approaching a pill shape that signals ease of use and accessibility. Cards use 8px border-radius (lg) to align with buttons, creating visual consistency across interactive elements. Feature icons and badges use 12px border-radius (xl) for a slightly more pronounced curve

Components

Action Elements Buttons are the primary interaction mechanism. **button-primary** uses {colors.primary} (#145170) background with white text, 48px height, 12px 24px padding, and 8px border-radius (lg). On hover, the background darkens to #084298 with a 200ms transition (cubic-bezier(0.4, 0, 0.2, 1)), and box-shadow elevates to {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)). The rendered CTA button ("Get My Free Account") uses a tighter variant: rgb(20, 81, 110) background, 40px height, 10px 20px padding, 8px border-radius, and 13px font-size (label-md). **button-secondary** uses transparent background with a 1px outline in {colors.outline} (#6c757d), maintaining the same height and padding as primary but with text color {colors.primary}. On hover, the background fills with {colors.surf