Success Corner

Overview

Success Corner is a high-energy exam-preparation platform designed for India's most ambitious competitive exam aspirants (UPSC, SSC, banking, railways, state PSCs). The design language is **Energetic Minimalism with Gradient Accents** — a visual philosophy that pairs clean, spacious layouts with vibrant color moments (primary purple #6c4cef, secondary gold #f5a623, tertiary teal #00976b) to make rigorous study feel rewarding and streak-driven. The aesthetic evokes clarity, momentum, and daily progress: every interaction reinforces the ritual of consistent preparation. The UI transforms complex exam data into digestible, motivating daily updates.

The brand voice is direct, encouraging, and achievement-focused. Tone: conversational yet authoritative, never patronizing. Vocabulary emphasizes streaks, daily rituals, and mastery ("Crack," "Build your streak," "Master the exam"). The brand personality is that of a supportive mentor who celebrates incremental wins and makes preparation feel like a game you want to play every day. Example sentence in brand voice: "You've built a 12-day streak — keep the momentum going with today's 5 new updates."

Colors

The color system is built on a **Vibrant Accent over Neutral Foundation** model. The surface stack (surface #fafafd → surface-container #e9ecef → surface-container-highest #d0d0d0) provides a clean, minimal canvas that keeps focus on content. Primary (#6c4cef, oklch(55% 0.23 285)) is the signature brand accent — used exclusively on CTAs ("Create your free account"), active navigation states, and interactive highlights. It conveys trust and energy without overwhelming. Secondary (#f5a623, oklch(74% 0.17 50)) is a warm gold accent reserved for celebratory moments, badges, and secondary CTAs ("See today's updates"); it adds warmth and approachability. Tertiary (#00976b, oklch(62% 0.19 150)) is a calm teal used for success states, checkmarks, and positive feedback. Error (#e40014) is a sharp r

Typography

The type system uses a **Display-First Hierarchy** anchored in Plus Jakarta Sans (600–800 weight) for headlines and Inter (400–600 weight) for body and labels. Display (60px, 800 weight, -0.04em tracking) commands attention in hero sections and is reserved for the main value proposition ("Crack India's toughest exams..."). Headline-lg (40px, 700 weight, -0.02em) is used for section titles and major feature callouts. Headline-md (28px, 600 weight, -0.01em) breaks up content into digestible chunks. Body-lg (18px, 400 weight) is the primary reading size for hero copy and feature descriptions; body-md (16px, 400 weight) is the standard paragraph text. Label-md (14px, 600 weight, 0.01em) is applied to button text, navigation items, and badge labels — the 600 weight ensures these micro-interacti

Layout

The layout follows a **Fluid 12-Column Grid with Fixed Container Max-Width (1280px)** model. The hero section spans full viewport width with a -mt-16 offset to overlap the sticky header, creating visual continuity and a sense of immersion. Content sections use a gutter of 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablets and 4px (xs spacing) on mobile. The spacing scale is semantic: lg (40px) separates major sections (hero → features → testimonials), md (24px) is used for card padding and section internal rhythm, sm (12px) is for component-level spacing (button padding, list item margins), and xs (4px) is reserved for micro-interactions (badge padding, icon spacing). White-space is generous — the hero section breathes with 64px (xl spacing) of vertical padding above an

Elevation & Depth

Depth is conveyed through a **Subtle Shadow Hierarchy** rather than dark overlays or glassmorphism. Level 1 (Base): surface-bright (#ffffff) with no shadow — the default card and container state. Level 2 (Elevated): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, dropdowns, and modals — this 3px blur and 8px spread creates a soft, approachable lift that suggests interactivity without aggression. Level 3 (Hover/Active): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) combined with transform: translateY(-2px) — the larger blur (24px) and vertical shift create a sense of momentum and engag

Shapes

The shape language is **Soft-Technical**: rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons and CTAs use full radius (9999px / border-radius: 9999px) to create a pill shape that feels friendly and approachable — this is the most prominent interactive element and deserves the most distinctive shape. Cards and containers use md radius (0.75rem / 12px) to provide subtle rounding that feels refined without being overly playful. Input fields use DEFAULT radius (0.5rem / 8px) for a balanced, neutral appearance. Navigation pills and

Components

Action Elements Buttons are the primary call-to-action mechanism. **button-primary** uses backgroundColor: {colors.primary} (#6c4cef), textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, height: 48px, rounded: full (9999px), and typography: label-md (14px, 600 weight). The shadow is {elevation.md} (0 3px 8px rgba(0,0,0,0.15)). On hover, **button-primary-hover** shifts backgroundColor to {colors.primary-container} (#7f22fe), applies transform: translateY(-2px), and upgrades the shadow to {elevation.lg} (0 8px 24px rgba(0,0,0,0.12)) — this creates a tactile sense of lift and engagement. The transition duration is 150ms with cubic-bezier(0.4, 0, 0.2, 1) easing. **button-secondary** uses backgroundColor: {colors.surface-bright} (#ffffff), textColor: {colors.on-surface} (#241b53),

Do's and Don'ts

**Do**

• Do use primary (#6c4cef) exclusively on CTAs and interactive highlights — it's the brand's signature accent and should never be diluted by overuse.
• Do apply the full-radius (9999px) shape to all buttons and primary interactive elements to create a cohesive, recognizable interaction language.
• Do maintain generous white-space (lg spacing: 40px between sections, md spacing: 24px for card padding) to keep the interface feeling light and focused on content.
• Do use Plus Jakarta Sans (600–800 weight) for headlines to convey energy and approachability, and Inter (400–600 weight) for body text to ensure clarity and scannability.
• Do upgrade shadows on hover (from md to lg) and apply a 2px upward transform to signal interactivity and create a sense of momentum.

**Don't**

• Don't use primary color on non-interactive elements (backgrounds, borders, text) — reserve it for buttons, active states, and key highlights to maintain visual hierarchy.
• Don't apply rounded corners to cards and containers beyond md (12px) — the interface should feel refined and organized, not playful or casual.
• Don't use shadows heavier than lg (0 8px 24px rgba(0,0,0,0.12)) — the interface should feel light and modern, not dark or heavy.
• Don't mix Plus Jakarta Sans and Inter weights arbitrarily — use Plus Jakarta for headlines (600–800) and Inter for body/labels (400–600) to maintain a clear typographic hierarchy.