AUTONATOMY • Homepage Build Specification v1.0 • Internal design reference AUTONATOMY / DESIGN HANDOFF Homepage Build Specification Version 1.0 • September 21, 2026 • Status: approved visual concept; implementation not yet verified Purpose: recreate the approved homepage prototype as closely as LearnWorlds permits, while tracking any differences that require platform settings, custom CSS/HTML, or a design compromise. 1 Canonical references Source How it must be used Autonatomy homepage prototype (.html) PRIMARY visual and code reference. Keep this original file unchanged; it contains the exact HTML, CSS, text, layout, breakpoints, and example navigation. This build specification Project decision log, content inventory, build checklist, and measurable comparison criteria. Update its version when a design decision changes. Reference screenshots Capture the original HTML at desktop (~1440 px), tablet (~768 px), and mobile (~390 px); archive alongside this document before changing the design. Preserve the original HTML as “Prototype v1”. A future designer/developer should receive both this document and the HTML file; prose alone cannot reproduce a design exactly. 2 Design tokens and page geometry Element Approved prototype value Backgrounds Navy #101B31; page background #F5F7FB; white #FFFFFF; hero navy gradient (#101B31 #1A3052). → Accent and text Blue #315DCE; orange #FFBA5A; ink #16223A; muted text #5A6780; light border #E2E8F2. Typography System sans-serif stack: system-ui, -apple-system, Segoe UI, Roboto, sans-serif. Base 16 px / line-height 1.55. Content width Main container max-width 1160 px; horizontal padding 24 px desktop and 18 px phone. Header Sticky, navy background; minimum height 76 px desktop, 65 px mobile. Hero Two columns: 1.12fr / 0.88fr; 48 px gap; vertical padding 76 px top / 86 px bottom. Mobile: 1 column, 48 px vertical. Sections and cards Standard section padding 76 px vertical (50 px mobile). Three￾column course/steps grids, two columns under 800 px, one under 590 px. Responsive thresholds At viewport <=800 px: hero/challenger stack; course/step cards become 2 columns. <=590 px: hamburger navigation, one-column cards. 3 Page order and exact content inventory Order / component Required content and key appearance 01 Header Brand: orange rounded square “A” + AUTONATOMY; menu: Home, Courses, My Learning, About, Support, Log in. Sticky navy bar. Mobile: expandable “ Menu”. ☰ AUTONATOMY • Homepage Build Specification v1.0 • Internal design reference 02 Hero Eyebrow: “AUTOMOTIVE LEARNING · REIMAGINED”. Headline: “Learn how it works. Prove you know it.” Second sentence highlighted orange. Explainer, Explore Courses + See How It Works buttons. Right: sample electrical circuit card, Level 1 and 40% mock progress. 03 Courses “Explore our courses”: three cards: Automotive Electrical Systems; Engine Systems (planned); Braking Systems (planned). 04 Course structure “One clear path from course to concept”: Choose a course → Open a lesson Learn and practice. → 05 How it works “Learning that goes beyond watching”: Learn clearly; Try it yourself; Meet the challenge. 06 The Challenger Navy rounded panel: “A little pressure. A lot of learning.” Four-answer static preview question; Explore a course button. 07 My Learning Light blue callout: “Pick up where you left off.” Includes student access button. 08 Footer Navy footer with logo; tagline “Learn. Explore. Challenge what you know.” and Home, Courses, My Learning, Support links. 4 Navigation and feature requirements UI element Prototype today Published LearnWorlds requirement Top and footer links Scroll to sections on this one-page HTML. Home opens homepage; Courses opens real catalog; My Learning opens learner area; About and Support open their configured destinations. Course cards All use placeholder anchor links. Link each course card to its real course page; planned courses get a suitable preview/waitlist destination or no misleading enrollment CTA. Login / Student access Placeholder; no authentication. Link to LearnWorlds login/student dashboard and test for signed-in and signed-out students. Sample circuit and progress Illustration and 40% example, not a real simulator or student record. Keep labeled as a sample; only claim interactivity or personalized progress when these features actually work. Mobile menu “ Menu” toggles display and aria- ☰ expanded. Menu must open/close, remain usable by keyboard, and show all destinations on phone. Support Placeholder example email and alert. Replace with real support page/form and verified contact details before launch. 5 Implementation map: LearnWorlds Build the homepage and global navigation using LearnWorlds site/page builder where possible. Create course cards in the public catalog, then connect the course pages and student login. Recreate colors, font scale, hero columns, cards, spacing, sticky header, mobile layout, and footer through theme settings or supported custom styling. Availability of exact layouts, CSS, embedded HTML/JS, or custom URLs must be verified in the selected LearnWorlds plan and current editor before promising a pixel-perfect match. Record for each component: LearnWorlds page/block name • editor location or setting • asset/file used • destination URL • custom code (if any) • owner • status • difference from prototype. AUTONATOMY • Homepage Build Specification v1.0 • Internal design reference 6 Build validation: definition of done ☐ Compare original vs LearnWorlds screenshot at ~1440, ~768, and ~390 px widths. Record visible differences in font, color, spacing, order, and card alignment. ☐ Check every header, footer, button, and course-card link. No production links may point to mockup anchors or example.com. ☐ Test mobile menu, keyboard focus, legible text, and layout with no horizontal overflow. ☐ Test guest, signed-in learner, and enrolled learner states for login and My Learning access. ☐ Confirm sample UI is labeled as a preview and no fake course progress or functional simulation is presented as real. ☐ Document every approved deviation when LearnWorlds cannot reproduce the HTML exactly. 7 Change-control and handoff Freeze the approved reference as Prototype v1; edit a duplicate for later design experiments. Name future revisions v1.1, v1.2, etc. For each change, log the date, section, before/after description, reason, and approval. A developer should never have to infer which of two prototypes is current. Handoff package: (1) original .html prototype, (2) this .docx, (3) desktop/tablet/mobile screenshots, (4) final text and image assets, (5) page/link map, (6) change log. Do not publish the prototype notice or dummy support address.