Implement Phase 1 UI foundations and role-aware shell

design/figma/figma-component-map.json

@@ -0,0 +1,56 @@
+{
+  "components": [
+    {
+      "name": "AppShell",
+      "variants": ["Student", "Teacher", "Studio", "Organization", "Admin", "Lesson"],
+      "sourceSpec": "docs/ux-overhaul/component-specifications.md#application-shell"
+    },
+    {
+      "name": "Navigation/Sidebar",
+      "variants": ["Expanded", "Collapsed", "MobileDrawer"],
+      "states": ["Default", "Active", "Focus", "Disabled", "Loading"]
+    },
+    {
+      "name": "Navigation/MobileBottomNav",
+      "variants": ["Student", "TeacherCompact"],
+      "states": ["Default", "Active", "Focus"]
+    },
+    {
+      "name": "Button",
+      "variants": ["Primary", "Secondary", "Tertiary", "Danger", "Ghost", "Link", "Icon"],
+      "sizes": ["Small", "Medium", "Large"],
+      "states": ["Default", "Hover", "Active", "Focus", "Disabled", "Loading"]
+    },
+    {
+      "name": "Form/Input",
+      "variants": ["Text", "Password", "Search", "Email"],
+      "states": ["Default", "Focus", "Error", "Success", "Disabled"]
+    },
+    {
+      "name": "Card/Course",
+      "variants": ["Assigned", "Available", "Completed", "StaffPreview"],
+      "states": ["Default", "Hover", "Focus", "Selected", "Unavailable"]
+    },
+    {
+      "name": "Card/Assignment",
+      "variants": ["NotStarted", "InProgress", "Submitted", "Returned", "Overdue"]
+    },
+    {
+      "name": "LessonPlayer",
+      "variants": ["Student", "TeacherPreview", "Blocked", "Completed", "Loading"]
+    },
+    {
+      "name": "DataList",
+      "variants": ["Roster", "Users", "Assignments", "ReviewQueue"],
+      "breakpoints": ["DesktopTable", "MobileCards"]
+    },
+    {
+      "name": "StatePanel",
+      "variants": ["Empty", "Loading", "Error", "PermissionDenied", "Success"]
+    },
+    {
+      "name": "ConfirmationDialog",
+      "variants": ["Standard", "Destructive", "Publish", "RevokeAccess"]
+    }
+  ]
+}

design/figma/figma-file-structure.md

@@ -0,0 +1,55 @@
+# Figma File Structure
+
+No native Figma file was created in this environment. No Figma MCP/API integration was available through tool discovery. This package is prepared for manual Figma implementation or import through a future integration.
+
+## Pages
+
+1. `00 Cover`
+2. `01 Foundations`
+3. `02 Design Tokens`
+4. `03 Components`
+5. `04 Public`
+6. `05 Student`
+7. `06 Teacher`
+8. `07 Admin`
+9. `08 Responsive`
+10. `09 User Flows`
+11. `10 Prototype`
+12. `11 Deprecated Current UI`
+
+## Frame Targets
+
+- Desktop: 1440px
+- Small desktop: 1280px
+- Tablet: 768px
+- Mobile: 390px
+
+## Foundation Frames
+
+- Brand principles
+- Color roles and semantic pairings
+- Typography scale
+- Spacing/radius/elevation
+- Iconography
+- Motion and reduced motion
+- Accessibility examples
+
+## Component Frames
+
+- App shell variants
+- Header variants
+- Sidebar/mobile nav variants
+- Page headers
+- Controls and form fields
+- Cards/lists/tables
+- States
+- Lesson and assessment controls
+- Discussion and feedback components
+
+## Prototype Flow Frames
+
+- Public landing to login/register
+- Student resume course and complete lesson
+- Teacher class detail and assignment creation
+- Admin user management and confirmation
+- Content admin review and publish readiness

design/figma/figma-import-readme.md

@@ -0,0 +1,29 @@
+# Figma Import Readme
+
+This package is Figma-ready, not a native `.fig` file.
+
+## Import Order
+
+1. Create pages from `figma-file-structure.md`.
+2. Add variables from `figma-variables.json`.
+3. Build components from `figma-component-map.json`.
+4. Create frames from `figma-screen-manifest.json`.
+5. Wire prototype links from `figma-prototype-connections.json`.
+
+## Naming Rules
+
+- Use semantic variable names exactly as provided.
+- Use frame names from `screen.name`.
+- Prefix component sets by domain, for example `Navigation/Sidebar`, `Card/Course`, `StatePanel`.
+
+## Implementation Notes
+
+- Use 8px card radius unless a component spec says otherwise.
+- Do not use generic purple SaaS gradients.
+- Do not put cards inside cards.
+- Keep learner screens less dense than teacher/admin screens.
+- Use real EchoEd content from seed data, especially `Introduction to Africa`, not placeholder lorem ipsum.
+
+## Native Figma Status
+
+No native Figma file was created because no functioning Figma connector was available in this session.

design/figma/figma-prototype-connections.json

@@ -0,0 +1,59 @@
+{
+  "connections": [
+    {
+      "from": "public-landing.primaryCta",
+      "to": "auth-login",
+      "interaction": "click"
+    },
+    {
+      "from": "auth-login.studentDemoSubmit",
+      "to": "student-home",
+      "interaction": "submit success"
+    },
+    {
+      "from": "student-home.continueLearning",
+      "to": "student-lesson-player",
+      "interaction": "click"
+    },
+    {
+      "from": "student-lesson-player.completeLesson",
+      "to": "student-home",
+      "interaction": "click success"
+    },
+    {
+      "from": "auth-login.teacherDemoSubmit",
+      "to": "teacher-dashboard",
+      "interaction": "submit success"
+    },
+    {
+      "from": "teacher-dashboard.openClass",
+      "to": "teacher-class-detail",
+      "interaction": "click"
+    },
+    {
+      "from": "teacher-class-detail.createAssignment",
+      "to": "teacher-assignment-flow",
+      "interaction": "click"
+    },
+    {
+      "from": "teacher-assignment-flow.confirm",
+      "to": "teacher-class-detail",
+      "interaction": "submit success"
+    },
+    {
+      "from": "auth-login.adminDemoSubmit",
+      "to": "admin-dashboard",
+      "interaction": "submit success"
+    },
+    {
+      "from": "admin-dashboard.manageUsers",
+      "to": "admin-user-management",
+      "interaction": "click"
+    },
+    {
+      "from": "admin-user-management.cancelDelete",
+      "to": "admin-user-management",
+      "interaction": "click"
+    }
+  ]
+}

design/figma/figma-screen-manifest.json

@@ -0,0 +1,137 @@
+{
+  "screens": [
+    {
+      "id": "public-landing",
+      "name": "Landing",
+      "role": "Public",
+      "route": "/",
+      "frameSizes": [1440, 1280, 768, 390],
+      "layoutRegions": ["top navigation", "mission hero", "learning preview", "community contribution", "footer"],
+      "components": ["PublicHeader", "Button", "CoursePreview", "Footer"],
+      "states": ["default"],
+      "contentRequirements": ["community project language", "no investor language", "EchoEd mission"],
+      "apiDependencies": [],
+      "prototypeLinks": ["login", "public-products"],
+      "accessibilityNotes": ["first heading is EchoEd", "primary CTA visible without keyboard trap"]
+    },
+    {
+      "id": "auth-login",
+      "name": "Login",
+      "role": "Public",
+      "route": "/login",
+      "frameSizes": [1440, 390],
+      "layoutRegions": ["brand panel", "login form", "demo access helper"],
+      "components": ["Input", "Button", "Alert"],
+      "states": ["default", "submitting", "invalid credentials", "bootstrap failed"],
+      "contentRequirements": ["demo account guidance where appropriate"],
+      "apiDependencies": ["/api/auth/token", "/api/orgs"],
+      "prototypeLinks": ["student-home", "teacher-dashboard", "admin-dashboard", "onboarding"],
+      "accessibilityNotes": ["error linked to form", "show password has accessible name"]
+    },
+    {
+      "id": "student-home",
+      "name": "Student Learn Home",
+      "role": "Student",
+      "route": "/learn",
+      "frameSizes": [1440, 768, 390],
+      "layoutRegions": ["app shell", "next learning", "assigned work", "progress", "achievements"],
+      "components": ["AppShell.Student", "CourseCard.Assigned", "ProgressSummary", "AchievementDisplay", "MobileBottomNav"],
+      "states": ["loading", "empty", "error", "all complete"],
+      "contentRequirements": ["Introduction to Africa demo content", "student-safe support copy"],
+      "apiDependencies": ["/api/student-courses", "/api/analytics/student-progress", "/api/students/{id}/badges"],
+      "prototypeLinks": ["student-course-overview", "student-lesson-player"],
+      "accessibilityNotes": ["next action first in DOM", "status text not color-only"]
+    },
+    {
+      "id": "student-course-overview",
+      "name": "Student Course Overview",
+      "role": "Student",
+      "route": "/learn/products/:id",
+      "frameSizes": [1440, 390],
+      "layoutRegions": ["course header", "unit list", "progress", "source context"],
+      "components": ["CourseHeader", "LessonCard", "ProgressIndicator"],
+      "states": ["not started", "in progress", "completed", "unavailable"],
+      "apiDependencies": ["/api/courses/{id}", "/api/start-course"],
+      "prototypeLinks": ["student-lesson-player"],
+      "accessibilityNotes": ["lesson availability explained in text"]
+    },
+    {
+      "id": "student-lesson-player",
+      "name": "Student Lesson Player",
+      "role": "Student",
+      "route": "/learn/lesson/:id",
+      "frameSizes": [1440, 768, 390],
+      "layoutRegions": ["lesson content", "activity", "progress rail", "sticky actions"],
+      "components": ["LessonPlayer", "ActivityControls", "StatePanel"],
+      "states": ["loading", "available", "governed unavailable", "completed", "error"],
+      "apiDependencies": ["/api/progress/segment", "/api/lessons/{id}", "/api/progress/segment/complete"],
+      "prototypeLinks": ["student-completion"],
+      "accessibilityNotes": ["live region for save/advance", "safe exit button"]
+    },
+    {
+      "id": "teacher-dashboard",
+      "name": "Teacher Today",
+      "role": "Teacher",
+      "route": "conceptual /teach using current /home teacher dashboard",
+      "frameSizes": [1440, 768, 390],
+      "layoutRegions": ["priorities", "classes", "learner support", "submissions", "curriculum"],
+      "components": ["AppShell.Teacher", "PriorityList", "ClassCard", "DataList", "StatusPill"],
+      "states": ["loading", "empty", "error"],
+      "apiDependencies": ["/api/courses", "/api/users/students", "/api/analytics/teacher-summary"],
+      "prototypeLinks": ["teacher-class-detail", "teacher-assignment-flow"],
+      "accessibilityNotes": ["data list fallback on mobile", "evidence basis exposed as text"]
+    },
+    {
+      "id": "teacher-class-detail",
+      "name": "Teacher Class Detail",
+      "role": "Teacher",
+      "route": "/home/sections/:id",
+      "frameSizes": [1440, 390],
+      "layoutRegions": ["class header", "tabs", "roster", "assignments", "progress"],
+      "components": ["Tabs", "RosterList", "AssignmentCard", "ProgressChart"],
+      "states": ["loading", "no learners", "error"],
+      "apiDependencies": ["/api/sections/{id}/roster", "/api/sections/{id}/assignments"],
+      "prototypeLinks": ["teacher-assignment-flow"],
+      "accessibilityNotes": ["tabs keyboard navigation", "table/card parity"]
+    },
+    {
+      "id": "teacher-assignment-flow",
+      "name": "Teacher Assignment Workflow",
+      "role": "Teacher",
+      "route": "conceptual over section assignment APIs",
+      "frameSizes": [1440, 390],
+      "layoutRegions": ["stepper", "content picker", "learner picker", "review"],
+      "components": ["Stepper", "Search", "CourseCard", "CheckboxGroup", "ConfirmationDialog"],
+      "states": ["draft", "validation error", "submitting", "success"],
+      "apiDependencies": ["/api/sections/{id}/assignments", "/api/assign-course"],
+      "prototypeLinks": ["teacher-class-detail"],
+      "accessibilityNotes": ["stepper announces current step", "review before submit"]
+    },
+    {
+      "id": "admin-dashboard",
+      "name": "Admin Dashboard",
+      "role": "Admin",
+      "route": "conceptual /admin using current admin dashboard",
+      "frameSizes": [1440, 768, 390],
+      "layoutRegions": ["alerts", "metrics", "governance issues", "recent users", "recent courses"],
+      "components": ["AppShell.Admin", "MetricTile", "DataList", "StatusPill"],
+      "states": ["loading", "partial error", "empty"],
+      "apiDependencies": ["/api/analytics/overview", "/api/users", "/api/courses"],
+      "prototypeLinks": ["admin-user-management"],
+      "accessibilityNotes": ["alerts before metrics in DOM"]
+    },
+    {
+      "id": "admin-user-management",
+      "name": "Admin User Management",
+      "role": "Admin",
+      "route": "/home/admin/users",
+      "frameSizes": [1440, 390],
+      "layoutRegions": ["filters", "user table", "user detail drawer", "confirmation"],
+      "components": ["Search", "FilterBar", "DataList", "Drawer", "ConfirmationDialog.Destructive"],
+      "states": ["loading", "no results", "delete confirm", "error"],
+      "apiDependencies": ["/api/users", "/api/users/{id}"],
+      "prototypeLinks": ["admin-dashboard"],
+      "accessibilityNotes": ["destructive confirmation names user and impact"]
+    }
+  ]
+}