LearnLoop

1. COLORS — Use these exact hex tokens: --bg #F8F7FF (off-white lavender page canvas), --surface #FFFFFF (white cards and sections), --text #0F0E1A (near-black deep indigo-ink), --muted #6B6880 (secondary text), --primary #4F46E5 (indigo action/brand), --primary-deep #3B34C2 (hover state), --accent #A3E635 (lime achievement), --accent-deep #84CC16 (lime ring fill), --border #E5E3F5 (hairline lavender-tinted divider). Hero gradient and progress ring fill: linear-gradient(135deg, #4F46E5 0%, #A3E635 100%). Stats band background: solid #4F46E5. Final CTA background: linear-gradient(135deg, #4F46E5, #2563EB). Palette mood: a bright classroom at golden hour — focused, optimistic, and fizzing with momentum. 2. TYPOGRAPHY — Load "Plus Jakarta Sans" (weights 400, 500, 600, 700, 800) and "Inter" (weights 400, 500, 600) from Google Fonts. Plus Jakarta Sans for all headings and logo; Inter for body, nav links, labels, and captions. Exact scale: H1 72px / weight 800 / line-height 1.02 / tracking -0.03em, with the final word wrapped in <em> carrying the indigo→lime gradient text via -webkit-background-clip:text. H2 52px / weight 800 / line-height 1.05 / tracking -0.025em, with one word in indigo color (not gradient). H3 36px / weight 800 / line-height 1.1 / tracking -0.02em. H4 20px / weight 600 / line-height 1.3 / tracking 0. Body-L 19px / weight 400 / line-height 1.65 / tracking 0. Body 16px / weight 400 / line-height 1.65 / tracking 0. Eyebrow/label 12px / weight 700 / line-height 1.4 / tracking 0.08em to 0.10em / ALL CAPS / color #4F46E5. Caption/meta 11–13px / weight 400–700 / line-height 1.5 / tracking 0. Course category tags: 11px / weight 700 / tracking 0.08em / uppercase / color #4F46E5. 3. PAGE SECTIONS — Full mandatory section sequence, top to bottom: sticky nav → hero (eyebrow stat + H1 with gradient em word + 19px descriptor + dual CTA buttons + "Free 14 days · No credit card" note + dashboard mockup card with 3 in-progress course rows each showing emoji icon, course name, lesson count, indigo→lime progress bar, and a 48px circular progress ring) → stats band (4 white numbers on #4F46E5: "12K+" courses, "87%" completion rate, "440K" learners, "4.8★" rating) → course showcase (top eyebrow + H2 + descriptor, then 3-column grid of course cards each with gradient thumbnail, category tag, course name, lesson/hour meta, price, and star rating) → features alternating (2 rows: row 1 "Completion system" text left + 3 progress rings visual right; row 2 "Team learning" text right + team progress bars visual left) → testimonials (3 cards with 5-star lime rating, quote paragraph, avatar initial circle, name + role) → pricing (3-tier grid: Individual $19/mo, Pro $39/mo featured with #4F46E5 border + "Most popular" label, Teams $15/seat/mo) → final CTA (indigo→blue gradient panel, centered, H2 + subline + lime primary button + ghost white secondary) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The circular SVG progress ring is the single most visually defining element, appearing at three sizes (120px hero feature, 90px medium, 48px on hero dashboard card items) and filled with linear-gradient(135deg, #4F46E5, #A3E635) via an SVG linearGradient defs block. Ring track (background circle): stroke #E5E3F5, stroke-width 8–10, fill none. Ring fill: stroke references url(#gradientId), stroke-linecap round, stroke-dasharray controls fill percentage using circumference math (circumference = 2π × radius). The ring SVG is rotated -90deg so fill starts at the 12 o'clock position. Label sits absolutely centered: percentage in Plus Jakarta Sans 800 weight, "complete" label in 10px Inter muted. Transition on ring fill: stroke-dasharray 0.8s cubic-bezier(0.16, 1, 0.3, 1) triggered on scroll-enter. Completed courses show a ✅ checkmark instead of the ring. These rings are WHY the aesthetic is distinct: progress is a visible, filling arc rather than a flat bar, making achievement tactile and addictive. 5. COMPONENT SPECS — Primary button (indigo fill): background #4F46E5, color #FFFFFF, font-family Plus Jakarta Sans, font-weight 700, font-size 14–16px, padding 10px 20px (nav size) or 14px 28px (hero/CTA size), border-radius 8px, border none; hover: filter brightness(1.1) + transform translateY(-1px), transition 0.15s. Secondary button (outline): background transparent, color #0F0E1A, font-weight 600, padding 9px 18px, border-radius 8px, border 1.5px solid #E5E3F5; hover: background #E5E3F5. Lime CTA button: background #A3E635, color #0F0E1A, font-weight 800, font-size 16px, padding 16px 36px, border-radius 8px; hover: filter brightness(1.05) + transform translateY(-2px). Course cards: background #FFFFFF, border-radius 16px, border 1px solid #E5E3F5, overflow hidden, padding 20px body section; hover: box-shadow 0 12px 40px rgba(79,70,229,0.10) + transform translateY(-4px), transition 0.2s. Pricing cards: border-radius 16px, padding 36px 28px, border 1.5px solid #E5E3F5; featured card adds border-color #4F46E5 + box-shadow 0 0 0 4px rgba(79,70,229,0.08). Nav: height 64px, sticky top 0, background rgba(248,247,255,0.92), backdrop-filter blur(12px), border-bottom 1px solid #E5E3F5, z-index 100. 6. COPY VOICE — Audience: self-learners, career-switchers, and L&D managers who have bought other online courses and never finished them — their core pain is enrollment guilt, not lack of content. Four exact headlines/sublines from this template: "Progress you can see. Courses you finish." (H1, with 'finish.' as the gradient em word); "87% completion rate · 12,000+ courses" (eyebrow stat); "Your next course. This time, you'll finish." (final CTA H2); "Built to reach the finish line" (course section H2). Five banned generic phrases for this industry: "Learn anything, anytime", "Unlock your potential", "Start learning today", "World-class instructors", "Take your skills to the next level". Copy should cite real-feeling numbers (87%, 3.4×, 94%), use direct second-person "you'll finish" confidence, and lead with completion outcomes not content volume. 7. BACKGROUND ZONES — Three distinct background levels: (1) #F8F7FF off-white lavender used for the page root, hero section, courses section, testimonials section, and footer — this is the outermost canvas; (2) #FFFFFF pure white used for card surfaces, the features alternating section (background: #FFFFFF with border-top 1px solid #E5E3F5), and the pricing section; (3) #4F46E5 solid indigo used for the stats band section, edge-to-edge full width with no container max-width cap. The final CTA uses linear-gradient(135deg, #4F46E5 0%, #2563EB 100%) edge-to-edge, padding 160px 0. Dashboard card in the hero uses background #FFFFFF with box-shadow 0 20px 60px rgba(15,14,26,0.08) and border 1px solid #E5E3F5. Individual course items inside the dashboard card use background #F8F7FF. No texture or noise patterns anywhere — all backgrounds are flat fills. 8. SCROLL ANIMATIONS — Duration 550ms, easing cubic-bezier(0.16, 1, 0.3, 1) for all scroll-reveal transitions. Every element marked .reveal starts at opacity 0 and transform translateY(24px); on entering the viewport at 12% threshold via IntersectionObserver, it transitions to opacity 1 and transform none. Stagger delays applied via data-delay attribute: data-delay="1" → transition-delay 0.1s, data-delay="2" → 0.2s, data-delay="3" → 0.3s. In the hero: eyebrow reveals first, then H1, then descriptor (delay 1), then CTAs (delay 2), then note (delay 3), then the dashboard card (delay 1). Course cards stagger 0, 0.1s, 0.2s. Testimonial cards stagger 0, 0.1s, 0.2s. Progress ring fill animates on scroll-enter: stroke-dasharray transitions from "0 [full circumference]" to the target fill value over 800ms cubic-bezier(0.16, 1, 0.3, 1). Stat numbers on the indigo band animate count-up from 0 to final value over 1200ms. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. Desktop: hero 2-column grid (1fr 1fr, 64px gap), course grid 3-col, stats band 4-col, features 2-col alternating, testimonials 3-col, pricing 3-col, footer 4-col (2fr 1fr 1fr 1fr). Tablet (max-width 1023px): hero collapses to 1-col (dashboard card hidden via display:none), stats band 2-col, course/testimonials/pricing all 1-col, footer 2-col, feature rows collapse to 1-col with reversed rows reset to normal order. Mobile (max-width 767px): H1 scales from 72px to 44px, H2 from 52px to 36px, CTA H2 from 56px to 38px, body stays 16px. Nav links (ul.nl) hidden on mobile (display:none). Stats band 1-col. Footer 1-col. All primary and secondary buttons become full-width (width:100%) on mobile inside their .hero-cta flex container. Wrap container padding reduces from 80px to 24px on mobile. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally include in the main stylesheet: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #F8F7FF; color: #0F0E1A; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.65; } The .wrap max-width container should be 1160px with auto horizontal margins; all full-bleed sections (stats band, CTA) must use width:100% on their outer element and apply the .wrap only inside for content centering. 11. SEMANTIC HTML — Document structure: <header> contains only <nav> with class ni inner div. <main> contains exactly these <section> elements in order: section.hero, section.stats-sec, section.courses-sec, section.feat-sec, section.testi-sec, section.price-sec, section.cta-sec. Course and testimonial cards use <article> tags. <footer> stands outside <main>. Exactly one <h1> in the hero; all section headings use <h2>; feature/card headings use <h3> or <h4>. SEO: <title> = "LearnLoop — Progress You Can See. Courses You Actually Finish." (58 chars). <meta name="description" content="LearnLoop is an e-learning platform built around completion, not just enrollment. Visual progress rings, accountability streaks, and courses designed to reach the end." (170 chars — trim to ≤155 in production). og:image: 1200×630px showing the hero dashboard card with filled progress rings on indigo background. Every <img> and emoji-as-icon placeholder must carry a descriptive alt attribute, e.g. alt="Advanced React Patterns course thumbnail" or alt="Progress ring showing 67% course completion". 12. FOOTER STRUCTURE — Four-column grid layout: col 1 (2fr width) is the brand column containing the LearnLoop wordmark in Plus Jakarta Sans 800 18px #4F46E5 plus a 14px Inter muted descriptor paragraph ("E-learning built around completion, not enrollment. Progress rings, accountability streaks, and courses designed to reach the end."). Col 2 (1fr): header "Learn" (11px / weight 700 / uppercase / tracking 0.08em / #6B6880) with links: All courses, Learning paths, Certificates, Instructors. Col 3 (1fr): header "Teams" with links: For business, Enterprise, API, Integrations. Col 4 (1fr): header "Company" with links: About, Blog, Careers, Press. All link text is 14px Inter color #6B6880, hover transitions to #0F0E1A in 0.2s. Footer bottom bar: border-top 1px solid #E5E3F5, padding-top 24px, flex row space-between. Left: "© 2025 LearnLoop Inc. · 87% completion rate." in 12px muted. Right: "Privacy · Terms · Accessibility" in 12px muted. No social icons, no newsletter input. Footer outer background: #F8F7FF with border-top 1px solid #E5E3F5, padding 64px 0 40px. 13. UNIQUE INTERACTIVE — The progress ring SVG component is the primary interactive/animated element; it does not click or toggle but it does animate on scroll-enter. Each ring exposes a completion percentage prop that drives stroke-dasharray: the filled arc length = (percentage / 100) × (2 × π × radius), remainder = circumference minus arc length. On page load, all rings start with stroke-dasharray "0 [circumference]"; when the IntersectionObserver fires (threshold 0.12), the value transitions to the target over 800ms cubic-bezier(0.16, 1, 0.3, 1). The hero dashboard card shows three ring sizes (48px) inline with course rows; the features section shows rings at 120px, 90px, and 70px (the 70px one shows a solid #A3E635 lime fill and a ✓ checkmark as a completion state). Course cards on hover lift translateY(-4px) with box-shadow 0 12px 40px rgba(79,70,229,0.10) over 200ms. Pricing card hover has no transform, only a subtle shadow increase. ARIA: each ring SVG needs role="img" and aria-label="Course progress: 67% complete". The IntersectionObserver unobserves each element after it fires so rings do not reset on scroll-up. Under prefers-reduced-motion, rings appear at their final stroke-dasharray value instantly with no transition. — Prompt set generated with Claude Sonnet 4.6 —