simple-design

byKhizer Qureshi

Design System Your color palette, typography, and style rules — used consistently across every section. Color Palette #0A0E17 Background (Dark Navy) #6C5CE7 Primary / Brand (Indigo) #00D9A3 Accent / CTA (Teal) #F5F7FA Primary Text (Off-White) #A0AEC0 Secondary Text (Slate Gray) Typography Role Font Weight Size (approx.) Headlines (H1) Sora or Poppins 800 (Extra Bold) 48-56px desktop Section Titles (H2) Sora or Poppins 700 (Bold) 32-36px Subheadings (H3) Sora or Poppins 600 (Semi-Bold) 20-24px Body Text Inter 400 (Regular) 16-18px Buttons / CTAs Inter 600 (Semi-Bold) 16-18px, uppercase optional Small print / captions Inter 400 (Regular) 13-14px Style Rules • Buttons: teal (#00D9A3) background, dark navy text, fully rounded corners (pill shape), bold weight. • Section backgrounds: alternate between dark navy (#0A0E17) and off-white (#F5F7FA) for visual rhythm. • Accent elements (icons, dividers, highlighted words): indigo (#6C5CE7). • Generous white space; avoid cramped sections. Max content width ~1140px, centered. • Corners: rounded (12-16px radius) on cards and buttons for a modern, friendly feel. COPY-PASTE PROMPT FOR ANGIE (paste this first): Before building any sections, set up a global design system for this landing page and use it consistently across every section I ask you to build next. Colors: - Background (dark sections): #0A0E17 - Background (light sections): #F4F5FA - Primary/brand color: #6C5CE7 (indigo) - Accent/CTA color: #00D9A3 (teal) - Primary text on dark: #F5F7FA - Primary text on light: #1A202C - Secondary/muted text: #A0AEC0 Typography: - Headings font: Sora (or Poppins if unavailable), weight 700-800 - Body font: Inter, weight 400 - Buttons: Inter, weight 600 - H1 size ~52px, H2 ~34px, H3 ~22px, body ~17px Style rules: buttons are teal background with dark navy text, fully rounded/pill shape. Cards and images use 12-16px rounded corners. Alternate dark-navy and off-white section backgrounds as we move down the page. Keep generous spacing between sections, centered content max-width around 1140px. SECTION 1 Hero Section Sets the first impression — headline, subheadline, and primary CTA above the fold. COPY-PASTE PROMPT FOR ANGIE: Using the design system from earlier, build a full-width hero section with a dark navy background. Layout: two columns — left column has an eyebrow label, a large bold headline, a subheadline, a pill-shaped teal CTA button, and a small trust line below the button; right column has a placeholder image/video block with rounded corners. Eyebrow text: "NEW COHORT OPEN — LIMITED SEATS" Headline: "Build and Ship Real Apps in Weeks — Using AI as Your Co-Developer" Subheadline: "Learn how to design, code, and launch fully functional apps with AI tools doing the heavy lifting — no computer science degree required." Button text: "Enroll Now for $97" Trust line: "50+ lectures · Lifetime access · Certificate of completion" SECTION 2 Social Proof Bar A slim credibility strip right under the hero to build immediate trust. COPY-PASTE PROMPT FOR ANGIE: Using the same design system, build a slim horizontal bar below the hero with a light background. Center a star rating, a student count line, and 4 grayscale placeholder logo boxes in a row. Rating line: "4.8/5 average rating (star icons) · 1,200+ students already enrolled" Caption above logos: "As seen in the workflows of teams building with:" Logo placeholders: 4 empty rounded rectangle boxes labeled Logo 1, Logo 2, Logo 3, Logo 4. SECTION 3 The Problem (Pain/Agitation) Names the visitor's frustration before presenting the solution — builds emotional relevance. COPY-PASTE PROMPT FOR ANGIE: Using the design system, build a two-column section on a light background. Left column: a bold section headline followed by 3 short paragraphs. Right column: a placeholder illustration/image block with rounded corners. Headline: "You Don't Need to Learn Everything About Coding — You Need to Learn How to Direct AI to Build With You" Paragraph 1: "You've watched tutorials, started three 'learn to code' courses, and still don't have a single app live." Paragraph 2: "AI tools like Claude, Cursor, and GPT-based copilots can write most of your app for you — but nobody's taught you how to actually use them to ship something real." Paragraph 3: "Meanwhile, people with less traditional coding background are shipping apps faster than ever, because they know how to prompt, structure, and direct AI tools." SECTION 4 The Transformation Paints the after-state — what the visitor will be able to do once they finish the course. COPY-PASTE PROMPT FOR ANGIE: Using the design system, build a 4-column icon-grid section on a dark navy background. Each column has a circular icon badge in teal, a bold short title, and one sentence of description below it. Section headline (centered, above the grid): "By the End of This Course, You'll Be Able To..." Column 1 — Title: "Design an App Idea Into a Working Spec" — Text: "Using AI to plan architecture, features, and user flow." Column 2 — Title: "Build Front-End and Back-End with AI Copilots" — Text: "Writing prompts that generate real, working code." Column 3 — Title: "Debug and Test Faster" — Text: "Using AI to catch bugs before your users do." Column 4 — Title: "Launch and Ship" — Text: "Deploy a real app to the app store or web, from zero to live." SECTION 5 Instructor Credibility Establishes who's teaching the course and why they're worth trusting. COPY-PASTE PROMPT FOR ANGIE: Using the design system, build an instructor bio section on a light background. Layout: a circular placeholder photo on the left, and on the right a bold section headline, a bio paragraph, and a row of 3 small stat boxes below it with a number and a label in each. Headline: "Meet Your Instructor" Bio text: "I've spent the last several years building apps and teaching developers how to use AI tools to 10x their output. I created this course because I wished someone had shown me this path years ago instead of making me learn everything the hard way." Stat box 1: "10+" / "Apps shipped using AI-assisted workflows" Stat box 2: "1,200+" / "Students taught" Stat box 3: "Featured" / "In leading dev podcasts and publications" SECTION 6 Full Curriculum The trust-and-value core of the page — shows exactly what's inside, module by module. COPY-PASTE PROMPT FOR ANGIE: Using the design system, build a curriculum section on a dark navy background with 8 collapsible accordion/toggle modules. Each module header shows the module title and lecture count, and expands to reveal a checklist of lecture titles. Use a teal checkmark icon next to each lecture title. Section headline: "What You'll Learn — Lecture by Lecture" Module 1: "Foundations of AI-Powered App Development" (8 lectures) — Welcome: Why AI Changes Everything About Building Apps; The New App Development Stack in 2026; Understanding What AI Can (and Can't) Do for You; Choosing Your First App Idea; Mapping User Needs Before You Build; AI-Assisted Market and Competitor Research; Writing Your App's First Product Spec with AI; Module Recap + Mini Project: Your App Blueprint. Module 2: "Setting Up Your AI Dev Toolkit" (6 lectures) — Overview of AI Coding Tools (Claude, Cursor, Copilot, and More); Setting Up Your Development Environment; Connecting AI Tools to Your Codebase; Prompting Fundamentals for Developers; Version Control Basics for AI-Assisted Projects; Module Recap + Toolkit Checklist. Module 3: "From Idea to MVP" (10 lectures) — Breaking Your App Idea into Buildable Features; Designing Your Data Model with AI; Generating Your First App Scaffold; Building Your Core Screens; Wiring Up Navigation and User Flow; Adding Your First Real Feature End-to-End; Common AI-Generated Code Pitfalls (and Fixes); Iterating Fast: The Prompt-Build-Test Loop; Keeping Your Codebase Clean as You Move Fast; Module Recap + Mini Project: Your Working MVP. Module 4: "Frontend Development with AI Copilots" (8 lectures) — UI Design Principles Every Builder Should Know; Generating UI Components with AI; Styling and Responsive Design with AI Assistance; Building Forms and User Input Flows; Adding Animations and Micro-Interactions; Accessibility Basics for AI-Generated UI; Reviewing and Refining AI-Generated Frontend Code; Module Recap + Mini Project: Polished App UI. Module 5: "Backend and APIs with AI" (8 lectures) — Backend Basics: What Your App Actually Needs; Designing APIs with AI Assistance; Databases 101 for App Builders; Building Authentication and User Accounts; Connecting Your Frontend to Your Backend; Working with Third-Party APIs; Handling Errors and Edge Cases; Module Recap + Mini Project: Full-Stack Feature. Module 6: "Testing and Debugging with AI" (6 lectures) — Why Testing Matters More With AI-Generated Code; Using AI to Write Test Cases; Debugging Faster with AI Assistance; Manual QA: What AI Still Can't Catch; Performance and Security Basics; Module Recap + QA Checklist. Module 7: "Deployment and Launch" (6 lectures) — Choosing Where to Deploy Your App; Deploying Your App Step-by-Step; Setting Up Domains, SSL, and Environments; Preparing for App Store Submission (if applicable); Monitoring Your Live App; Module Recap: Launch Checklist. Module 8: "Monetization and Scaling" (4 lectures) — Pricing and Monetization Models for Indie Apps; Growing Your First 100 Users; Scaling Your App as Usage Grows; Final Project: Ship Your Own App + Course Wrap-Up