Programming Hero

Overview

Programming Hero is a high-energy, tech-forward bootcamp brand that transforms aspiring developers into AI-driven Full Stack engineers. The design system embodies "Gradient Maximalism"—a bold aesthetic that pairs a deep, focused dark canvas (rgb(0, 0, 31)) with vibrant, multi-directional gradients (teal-to-cyan, magenta-to-gold) that energize CTAs and key moments. The brand serves learners across South Asia seeking intensive, community-driven coding education with premium job placement support. The UI evokes clarity, momentum, and possibility—every interaction feels like progress toward a career breakthrough.

The voice is direct, motivational, and Bengali-first: conversational yet authoritative, celebrating wins without hype. Tone examples: "শূন্য থেকে শুরু করে হয়ে ওঠো AI Driven Full Stack Web Engineer" (Start from zero, become an AI-driven Full Stack engineer) and "৭ মাসের সুপার গাইডেড Bootcamp" (7-month super-guided bootcamp). The vocabulary blends technical precision (MERN, Full Stack, 24/7 Support) with aspirational language (career, placement, success). Every sentence assumes the learner is ready to commit.

Colors

The color system is built on three pillars: a near-black foundation (surface: #000000, surface-container: #0f0f23) that minimizes cognitive load during long study sessions; a teal-cyan primary accent (primary: #05caad, primary-container: #00d9c4) that signals interactivity and trust; and a dual-gradient secondary system (magenta #e855de + gold #ffc931) reserved for high-energy CTAs and celebratory moments.

Primary (#05caad) is used on all primary action buttons ("এখনই এনরোল করো"), focus states (input-field-focus: 0 0 0 3px rgba(5, 202, 173, 0.15)), and key links. Secondary colors are deployed as a gradient overlay on hero CTAs (linear-gradient(90deg, #e855de 0%, #ffc931 100%)) to create visual momentum. The error color (#ca4505) is reserved for validation and alerts. Surface tokens follow

Typography

The type system pairs Space Grotesk (geometric, tech-forward, weights 300–700) for body and label text with Baloo Da 2 (warm, friendly, weights 400–600) for headlines and CTAs. This pairing communicates both technical rigor and human approachability. Display and headline-lg use Baloo Da 2 at 40px/600 weight with -0.02em letter-spacing to create confident, readable hero statements. Body text uses Space Grotesk at 16px/400 weight with 0.01em letter-spacing for clarity during long reading sessions. Labels use Baloo Da 2 at 14px/600 weight with 0.02em letter-spacing to ensure button text stands out. On small labels over busy backgrounds (e.g., badge components), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to maintain legibility. All interactive text (buttons, links) uses fontWeight: 600 to

Layout

The page uses a 12-column fluid grid with a max-width container of 1280px, centered with symmetric gutters of 24px. The hero section spans full-width with a light gradient background (rgba(255, 255, 255, 0.05)) to create visual separation from the dark base. Section rhythm is governed by the spacing scale: lg (40px) separates major sections (hero, features, testimonials), md (24px) separates card groups, and sm (12px) separates inline elements. The container max-width of 1280px ensures readability on ultra-wide displays while maintaining focus. White-space is generous—cards use padding: 24px with 12px gaps between them, creating a breathing room that reduces cognitive overload. Mobile breakpoints compress spacing to sm (12px) for sections and xs (4px) for inline elements, maintaining visua

Elevation & Depth

Depth is conveyed through a subtle shadow and border system rather than dramatic layering. Level 1 (Base): the page background is solid #000000 with no shadow. Level 2 (Standard Card): cards use backgroundColor: {colors.surface-container} (#0f0f23) with a 1px solid border in {colors.surface-container-high} (#1a1a2e) and box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal): modals use backgroundColor: {colors.surface-container-high} (#262641) with a 1px border in {colors.outline} (#6c757d) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25). Hover states lift cards by increasing sha

Shapes

The shape philosophy is "Tech-Friendly Softness"—rounded corners are used consistently to soften the dark, technical aesthetic without sacrificing clarity. Buttons and primary CTAs use rounded: lg (1rem / 16px) for a balanced, approachable feel. Cards and containers use rounded: xl (1.5rem / 24px) to create visual breathing room and reduce the severity of the dark background. Input fields use rounded: DEFAULT (0.5rem / 8px) for a compact, focused appearance. Badges and small accent elements use rounded: full (9999px) to signal completeness and celebration. The rationale: larger radii (xl, full

Components

Action Elements Buttons are the primary driver of user progression through the bootcamp journey. **button-primary** uses backgroundColor: {colors.primary} (#05caad), textColor: {colors.on-primary} (#000000), padding: 12px 24px, height: 48px, and rounded: lg (16px). On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#00d9c4) over 200ms ease-out. **button-primary-gradient** is reserved for high-energy CTAs ("এখনই এনরোল করো") and uses a linear-gradient(90deg, #e855de 0%, #ffc931 100%) with textColor: #ffffff and the same padding/height specs. **button-secondary** uses a transparent background with a 2px solid border in {colors.primary} and textColor: {colors.primary}; on hover, shift to backgroundColor: rgba(5, 202, 173, 0.1) over 200ms. All but

Do's and Don'ts

**Do**

• Do use the teal primary (#05caad) on all CTAs and interactive elements—it's the brand's signature accent and signals trust and momentum.
• Do pair Space Grotesk (body) with Baloo Da 2 (headlines) to balance technical precision with human warmth; never mix them within a single text block.
• Do apply the gradient overlay (magenta-to-gold) exclusively to hero CTAs and celebratory moments; overuse dilutes the impact.
• Do maintain the dark surface foundation (#000000 to #0f0f23) across all pages to reduce cognitive load and support long study sessions.
• Do use rounded: xl (24px) on cards and rounded: lg (16px) on buttons to create visual softness without sacrificing clarity.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) on hover states to lift cards and create depth without harsh shadows.

**Don't**

• Don't use near-white or near-black as primary or secondary colors—the brand's energy comes from the teal-magenta-gold palette, not neutrals.
• Don't apply rounded: full (9999px) to buttons or input fields; reserve it for badges and celebratory accent elements only.
• Don't mix Space Grotesk and Baloo Da 2 within the same headline or button—choose one per component and stick with it.
• Don't use the gradient overlay on anything other than hero CTAs; it's a high-energy signal that loses meaning if overused.
• Don't apply shadows stronger than 0 16px 40px rgba(0, 0, 0, 0.25) on any element; the dark background already provides depth.
• Don't use on-surface-variant (#c8c8d8) for primary text or CTAs—it's reserved for secondary labels and disabled states only.