# RP Learning Portal — Sprint 1 Design Specifications **Version:** 1.0 **Date:** 2026-06-12 **Scope:** DS-01 through DS-04, LAY-01 through LAY-05, REG-01 through REG-04, INV-01 through INV-02, AUTH-01 through AUTH-04 **Total Frames:** 20 base frames × (Light + Dark) × (Desktop + Tablet + Mobile) = 120 Figma frames --- ## DS-01: DESIGN SYSTEM — Color Tokens ### Frame: `RP/Design System/DS-01-Color-Tokens` #### Light Mode Token Board ``` ┌─────────────────────────────────────────────────────────────┐ │ COLOR TOKENS — Light Mode │ ├─────────────────────────────────────────────────────────────┤ │ │ │ PRIMARY PALETTE │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #0B3A66 │ │ #1E5FA8 │ │ #D4A017 │ │ #F5F7FA │ │ │ │ Primary │ │ Secondary│ │ Accent │ │Background│ │ │ │ Deep │ │ Royal │ │ Academic │ │ Light │ │ │ │ Blue │ │ Blue │ │ Gold │ │ Grey │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ TEXT PALETTE │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #0F172A │ │ #1E293B │ │ #64748B │ │ │ │ Header │ │ Body │ │ Muted │ │ │ │ Slate 900│ │ Slate 800│ │ Slate 500│ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ SEMANTIC PALETTE │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #22C55E │ │ #F59E0B │ │ #DC2626 │ │ #E2E8F0 │ │ │ │ Success │ │ Warning │ │ Danger │ │ Border │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ GAMIFICATION PALETTE │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #CD7F32 │ │ #8A8A8A │ │ #D4A017 │ │ #9E9E9E │ │ #67C8FF │ │ │ │ Bronze │ │ Silver │ │ Gold │ │ Platinum │ │ Diamond │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ATTENDANCE HEATMAP │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #22C55E │ │ #F59E0B │ │ #DC2626 │ │ #E2E8F0 │ │ │ │ Present │ │ Late │ │ Absent │ │ No Class │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ OPS RING │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #22C55E │ │ #F59E0B │ │ #DC2626 │ │ │ │ 80-100% │ │ 60-79% │ │ 0-59% │ │ │ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` #### Dark Mode Token Board ``` ┌─────────────────────────────────────────────────────────────┐ │ COLOR TOKENS — Dark Mode [data-theme="dark"] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ CORE OVERRIDES │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #0F172A │ │ #1E293B │ │ #F8FAFC │ │ #E2E8F0 │ │ │ │ BG │ │ BG 2nd │ │ Header │ │ Body │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #334155 │ │ #94A3B8 │ │ #1E293B │ │ │ │ Border │ │ Muted │ │ White │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ SEMANTIC DARK │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #4ADE80 │ │ #FBBF24 │ │ #F87171 │ │ │ │ Success │ │ Warning │ │ Danger │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ GAMIFICATION DARK │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #CD7F32 │ │ #8A8A8A │ │ #D4A017 │ │ #9E9E9E │ │ #67C8FF │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ OPS RING DARK │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #4ADE80 │ │ #FBBF24 │ │ #F87171 │ │ #334155 │ │ │ │ 80-100% │ │ 60-79% │ │ 0-59% │ │ Ring BG │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ HEATMAP DARK │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #4ADE80 │ │ #FBBF24 │ │ #F87171 │ │ #334155 │ │ │ │ Present │ │ Late │ │ Absent │ │ No Class │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ SIDEBAR DARK │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ #0B1A2F │ │ #CBD5E1 │ │ #1E3A5F │ │ #1E5FA8 │ │ │ │ BG │ │ Text │ │ Hover │ │ Active │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ SKELETON DARK │ │ ┌──────────┐ ┌──────────┐ │ │ │ #334155 │ │ #475569 │ │ │ │ Base │ │ Shine │ │ │ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────────────┘ ``` ### Figma Implementation Notes - **Token type:** Figma Variables (Local Variables → Collection: "RP Design Tokens") - **Modes:** "Light" and "Dark" mapped to collection modes - **Token naming:** `color/primary`, `color/secondary`, `color/success`, etc. - **Dark mode preview:** Toggle Figma mode between Light/Dark to preview all components --- ## DS-02: DESIGN SYSTEM — Component Library ### Frame: `RP/Design System/DS-02-Components` #### Component Grid Layout All 32 components organized in a 4-column grid. Each component shows: 1. Component name 2. Default state 3. All variants in a row below 4. Prop documentation below variants #### Component Build Order (Priority) | Order | Component | Variants | States | Complexity | |-------|-----------|----------|--------|------------| | 1 | card | shadow×5, padding×2, hover×2 | Default, hover, disabled | Low | | 2 | badge | type×5, pill×2, size×2 | Static | Low | | 3 | avatar | size×4, border×2, online×2 | Default, loading | Low | | 4 | toggle | size×3, value×2, disabled×2 | Off, on, disabled | Low | | 5 | button (rp-button) | type×7, size×3 | Default, hover, active, focus, disabled | Medium | | 6 | input (rp-input) | type×6, size×3 | Default, hover, focus, error, success, disabled | Medium | | 7 | progress-bar | size×3, color-zones×2 | Animated, static | Low | | 8 | tabs | variant×3, scrollable×2 | Active states per tab | Medium | | 9 | accordion | — | Open, closed, animated | Low | | 10 | toast | type×4, position×4 | Appear, visible, dismiss | Medium | | 11 | banner | type×4, dismissible×2 | Visible, dismissed | Low | | 12 | skeleton | type×4 | Shimmer animation | Low | | 13 | empty-state | — | With CTA, without CTA | Low | | 14 | timeline | — | Multi-event | Low | | 15 | search-input | size×3 | Empty, typing, results | Medium | | 16 | modal | size×4 | Open, closing | Medium | | 17 | kpi-card | color×4, format×3 | With trend, without trend | Medium | | 18 | table | — | Loading, empty, data, pagination | High | | 19 | file-upload | — | Empty, hover, selected, error, uploading | High | | 20 | ops-ring | size×4, color-zones×3 | Animated ring fill | High | | 21 | tier-badge | tier×5 | Default, highlighted | Medium | | 22 | streak-badge | size×3 | Animated flame | Medium | | 23 | attendance-calendar | — | Month view with heatmap | High | | 24 | session-card | mode×3, status×3 | With actions, without | Medium | | 25 | goal-card | — | Active, completed | Low | | 26 | invoice-card | status×7 | With pay button, without | Medium | | 27 | notification-bell | count states | Dropdown open/closed | Medium | | 28 | child-switcher | — | Closed, open (2 children, 5+ children) | Medium | | 29 | credential-card | — | Default, revealed password | Medium | | 30 | question-builder | type×9 | Tab switching, form states | Very High | | 31 | classroom | role×2 | Teacher controls, student controls | High | | 32 | paystack-button | — | Default, processing, success, error | Medium | | 33 | digest-card | type×2 | Daily, weekly | Low | --- ## DS-03: DESIGN SYSTEM — Dark Mode ### Frame: `RP/Design System/DS-03-Dark-Mode` #### Split-Screen Comparison Layout Each row shows a component in Light mode (left) and Dark mode (right): ``` ┌─────────────────────────────────────────────────────────────┐ │ DARK MODE COMPARISON │ ├───────────────────┬─────────────────────────────────────────┤ │ LIGHT │ DARK [data-theme="dark"] │ ├───────────────────┼─────────────────────────────────────────┤ │ │ │ │ ┌─────────────┐ │ ┌─────────────┐ │ │ │ Card #FFF │ │ │ Card #1E293B│ │ │ │ Border #E2E8│ │ │ Border #3341│ │ │ │ Text #1E293B│ │ │ Text #E2E8F0│ │ │ └─────────────┘ │ └─────────────┘ │ │ │ │ │ ┌─────────────┐ │ ┌─────────────┐ │ │ │ Input BG #FF│ │ │ Input #1E293│ │ │ │ Border #E2E8│ │ │ Border #4755│ │ │ └─────────────┘ │ └─────────────┘ │ │ │ │ │ OPS Ring BG: │ OPS Ring BG: #334155 │ │ #E2E8F0 │ Green: #4ADE80 (lighter for dark) │ │ │ │ │ Tier Badge BG: │ Tier Badge BG: rgba(212,160,23,0.15) │ │ rgba(212,160,23, │ │ │ 0.08) │ │ │ │ │ │ Sidebar: #FFF │ Sidebar: #0B1A2F │ │ Nav text: #1E293B│ Nav text: #CBD5E1 │ │ Active: #1E5FA8 │ Active: #1E5FA8 (same) │ │ │ │ │ Skeleton: │ Skeleton: #334155 base │ │ #E2E8F0 base │ #475569 shine │ │ #F1F5F9 shine │ │ │ │ │ │ Heatmap: │ Heatmap: #4ADE80 (lighter greens) │ │ #22C55E #F59E0B │ #FBBF24 #F87171 │ │ #DC2626 #E2E8F0 │ #F87171 #334155 │ └───────────────────┴─────────────────────────────────────────┘ ``` ### Dark Mode Toggle Pattern ```html ``` --- ## DS-04: DESIGN SYSTEM — Icon Library ### Frame: `RP/Design System/DS-04-Icons` #### Icon Grid (4 columns, all standard icons) | Category | Icons | |----------|-------| | Navigation | layout-dashboard, users, graduation-cap, users-round, settings, log-out | | Actions | search, filter, arrow-up-down, edit, trash-2, plus, download, upload, copy, eye, eye-off | | Status | check-circle, x-circle, alert-triangle, info, check, x | | Content | file-text, clipboard, calendar, mail, bell, dollar-sign | | Expand/Collapse | chevron-right, chevron-down, chevron-up, chevron-left | | Gamification | flame, trophy, medal, star, target, lock, crown, award | | Media | play, pause, stop-circle, video, mic, mic-off, screen-share | **Size variants per icon:** 14px (xs), 16px (sm), 20px (md), 24px (lg), 32px (xl), 48px (2xl) **Color:** Uses currentColor (inherits from parent text color) --- ## LAY-01: SIDEBAR — 5 Role Variants ### Frame: `RP/Layouts/LAY-01-Sidebar` #### Sidebar Dimensions - Expanded width: 260px - Collapsed width: 72px - Background: Primary (#0B3A66) - Text: White (#FFFFFF) - Active indicator: Left border 3px accent (#D4A017 gold) + background rgba(255,255,255,0.1) #### Admin Sidebar ``` ┌──────────────────────────────┐ │ ┌────┐ │ │ │Logo│ RP Learning Portal │ │ └────┘ │ ├──────────────────────────────┤ │ ┌──────────────────────┐ │ │ │ ▣ Dashboard → │ │ ← Active state │ ├──────────────────────┤ │ │ │ 📅 Academic Years │ │ │ │ 📋 Subjects │ │ │ │ 🏫 Classes │ │ │ │ 📝 Enrollment │ │ │ ├──────────────────────┤ │ │ │ 🎓 Teachers │ │ │ │ 👤 Students │ │ │ │ 👨‍👩‍👧 Parents │ │ │ ├──────────────────────┤ │ │ │ 📅 Timetable │ │ │ │ 📌 Sessions │ │ │ │ 📋 Assignments │ │ │ │ 📝 Exams │ │ │ ├──────────────────────┤ │ │ │ 📊 OPS Dashboard │ │ │ │ 🎯 Interventions │ │ │ │ 📚 Resources │ │ │ ├──────────────────────┤ │ │ │ 💰 Finance │ │ ← Phase 10 │ │ 💼 Payroll │ │ ← Phase 11 │ │ 📢 Announcements │ │ │ │ 📋 Audit Logs │ │ │ ├──────────────────────┤ │ │ │ ⚙ Settings │ │ │ └──────────────────────┘ │ ├──────────────────────────────┤ │ ┌──────────────────────┐ │ │ │ 👤 Admin Name │ │ │ │ admin@school.com │ │ │ │ → Logout │ │ │ └──────────────────────┘ │ └──────────────────────────────┘ ``` #### Teacher Sidebar (26 items) ``` ┌──────────────────────────────┐ │ Logo RP Learning Portal │ ├──────────────────────────────┤ │ ▣ Dashboard │ │ 📅 My Timetable │ │ 📌 Sessions │ │ 🎓 My Students │ │ 📋 Assignments │ │ 📝 Exams │ │ 🎯 Goals │ │ 🛡 Interventions │ │ 📋 Action Items │ │ 📅 Availability │ │ 💰 My Payroll │ │ 📊 My KPI │ │ ✉ Messages │ │ 🔔 Notifications │ │ ──────────────── │ │ 👤 My Profile │ │ ⚙ Settings │ ├──────────────────────────────┤ │ Teacher Name │ │ → Logout │ └──────────────────────────────┘ ``` #### Student Sidebar (18 items) ``` ┌──────────────────────────────┐ │ Logo RP Learning Portal │ ├──────────────────────────────┤ │ ▣ Dashboard │ │ 📅 My Timetable │ │ 📋 Assignments │ │ 📝 Exams │ │ 🎯 My Goals │ │ 🏆 Achievements │ │ 🏅 Leaderboard │ │ 📊 My Attendance │ │ 📚 Resources │ │ ✉ Messages │ │ 🔔 Notifications │ │ ──────────────── │ │ 👤 My Profile │ │ ⚙ Settings │ ├──────────────────────────────┤ │ Student Name │ │ → Logout │ └──────────────────────────────┘ ``` #### Parent Sidebar (15 items) ``` ┌──────────────────────────────┐ │ Logo RP Learning Portal │ ├──────────────────────────────┤ │ ▣ Command Center │ │ 📊 OPS Detail │ │ 📅 Attendance │ │ 🎯 Goals │ │ 💬 Teacher Remarks │ │ 📋 Action Items │ │ 💰 Invoices │ │ ✉ Messages │ │ 🔔 Notifications │ │ ──────────────── │ │ 👤 My Profile │ │ 📜 Policies │ │ 🔑 Credentials │ │ ⚙ Settings │ ├──────────────────────────────┤ │ Parent Name │ │ → Logout │ └──────────────────────────────┘ ``` #### Super-Admin Sidebar Same as Admin sidebar + additional: - 🖥 Executive Dashboard (top of list) - All admin items below #### Collapsed State (all roles) ``` ┌──────┐ │ Logo │ ├──────┤ │ ▣ │ ← Icon only, tooltip on hover │ 📅 │ │ 📋 │ │ 📝 │ │ 🎓 │ │ 👤 │ │ ... │ ├──────┤ │ 👤 │ ← Avatar circle └──────┘ ``` #### Sidebar States | State | Background | Text | Indicator | |-------|-----------|------|-----------| | Default | Primary #0B3A66 | White | None | | Hover | Primary + rgba(255,255,255,0.05) | White | None | | Active | rgba(255,255,255,0.1) | White | Left gold bar 3px | | Badge (unread) | — | — | Red dot/count on icon | --- ## LAY-02: TOPBAR — 5 Role Variants ### Frame: `RP/Layouts/LAY-02-Topbar` #### Topbar Dimensions - Height: 64px (desktop), 56px (mobile) - Background: White (#FFFFFF) / Dark: #1E293B - Border bottom: 1px solid #E2E8F0 / Dark: #334155 - Left padding: 24px (desktop), 16px (mobile) #### Admin Topbar ``` ┌─────────────────────────────────────────────────────────────┐ │ [≡ Menu] School Admin Portal 🔔(3) 🔍 ☀/🌙 👤 ▾ │ └─────────────────────────────────────────────────────────────┘ ``` #### Teacher Topbar ``` ┌─────────────────────────────────────────────────────────────┐ │ [≡ Menu] Teacher Workspace 🔔(5) 🔍 ☀/🌙 👤 ▾ │ └─────────────────────────────────────────────────────────────┘ ``` #### Student Topbar ``` ┌─────────────────────────────────────────────────────────────┐ │ [≡ Menu] Student Portal 🔔(2) 🔍 ☀/🌙 👤 ▾ │ └─────────────────────────────────────────────────────────────┘ ``` #### Parent Topbar (with Child Switcher) ``` ┌─────────────────────────────────────────────────────────────┐ │ [≡ Menu] [▼ Amara Asante - JSS 2 ▾] 🔔(1) 🔍 ☀/🌙 👤 │ │ └── Child Switcher │ └─────────────────────────────────────────────────────────────┘ ``` **Child Switcher Dropdown:** ``` ┌─────────────────────────────────┐ │ ┌────┐ Amara Asante 78% 🔥 │ ← Active (highlighted) │ │ AA │ JSS 2 ○ │ │ └────┘ │ ├─────────────────────────────────┤ │ ┌────┐ Kofi Asante 82% 🔥│ │ │ KA │ JSS 1 ○ │ │ └────┘ │ ├─────────────────────────────────┤ │ + Add Another Child │ └─────────────────────────────────┘ ``` #### Topbar Elements | Element | Position | Size | Interaction | |---------|----------|------|-------------| | Hamburger menu | Left | 44×44px touch target | Toggle sidebar (mobile) | | Page title | Left-center | text-lg semibold | Static | | Child Switcher | Left (parent only) | Auto-width dropdown | AJAX switch, no reload | | Notification Bell | Right | 44×44px | Dropdown preview (5 items) | | Search | Right | 200px expandable | Expand on click | | Theme Toggle | Right | 44×44px | Toggle light/dark | | User Menu | Right | Avatar + name + chevron | Dropdown: Profile, Settings, Logout | --- ## LAY-03: CHILD SWITCHER ### Frame: `RP/Layouts/LAY-03-Child-Switcher` #### States 1. **Closed:** Avatar + Name + Class + chevron-down 2. **Open (2 children):** Dropdown shows both, active highlighted 3. **Open (5+ children):** Dropdown scrollable, max-height 320px 4. **Mobile:** Full-width dropdown below topbar, no shadow #### Interaction ``` Click dropdown trigger → Fetch children via AJAX (if not cached) → Render dropdown with skeleton if loading → Click child → set active state → fire event "child-switched" → All dashboard widgets listen for event → re-fetch data → Dropdown closes → topbar shows selected child ``` --- ## LAY-04: PAGE SHELL ### Frame: `RP/Layouts/LAY-04-Page-Shell` #### Desktop (1440px) ``` ┌──────────────────────────────────────────────────────────┐ │ TOPBAR (64px) │ ├──────────┬───────────────────────────────────────────────┤ │ │ │ │ SIDEBAR │ MAIN CONTENT │ │ (260px) │ (auto-width, padding: 24px) │ │ │ │ │ │ ┌─────────────────────────────────────────┐ │ │ │ │ Page Header (optional) │ │ │ │ │ [Title] [Actions] │ │ │ │ ├─────────────────────────────────────────┤ │ │ │ │ │ │ │ │ │ Page Content │ │ │ │ │ │ │ │ │ └─────────────────────────────────────────┘ │ │ │ │ ├──────────┴───────────────────────────────────────────────┤ │ (No footer — sidebar is the persistent navigation) │ └──────────────────────────────────────────────────────────┘ ``` #### Tablet (768px) ``` ┌────────────────────────────────┐ │ TOPBAR (56px) │ ├────────────────────────────────┤ │ │ │ MAIN CONTENT │ │ (full width, padding: 16px) │ │ │ │ Sidebar collapsed (72px icon │ │ strip) or hidden │ │ │ └────────────────────────────────┘ ``` #### Mobile (375px) ``` ┌──────────────────────────┐ │ TOPBAR (56px) │ ├──────────────────────────┤ │ │ │ MAIN CONTENT │ │ (full width, padding: │ │ 16px) │ │ │ │ │ │ │ ├──────────────────────────┤ │ BOTTOM TABS (64px) │ │ 🏠 📋 📅 👤 │ └──────────────────────────┘ ``` --- ## LAY-05: MOBILE NAVIGATION ### Frame: `RP/Layouts/LAY-05-Mobile-Nav` #### Bottom Tab Bar (Student Example) ``` ┌──────────────────────────────┐ │ 🏠 📋 📅 👤 │ │ Home Tasks Calendar Me │ │ ● │ └──────────────────────────────┘ ``` **Rules:** - 4 primary tabs maximum - Active tab: Gold dot indicator (#D4A017) - Badge count on relevant tabs (e.g., notifications) - Height: 64px with 44×44px touch targets - Background: White / Dark: #1E293B #### Mobile Menu (hamburger) Full-screen overlay with scrollable sidebar items: ``` ┌──────────────────────────────┐ │ ✕ RP Learning Portal │ ├──────────────────────────────┤ │ ▣ Dashboard │ │ 📅 Timetable │ │ ...all sidebar items... │ │ ──────────────── │ │ 👤 Profile │ │ ⚙ Settings │ │ → Logout │ ├──────────────────────────────┤ │ ☀/🌙 Dark Mode Toggle │ └──────────────────────────────┘ ``` --- ## REG-01: REGISTRATION LANDING ### Frame: `RP/Public/REG-01-Landing-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR (not logged in) │ │ Logo [Login] [Register as Parent] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ Join Your Child's Learning Journey ││ │ │ ───────────────────────────────── ││ │ │ Monitor progress, pay fees, and stay connected ││ │ │ with your child's education — all in one place. ││ │ │ ││ │ │ [Register as Parent] [Learn More] ││ │ │ (Primary btn) (Outline btn) ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ │ │ │ ── What Parents Can Do ── │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 📊 │ │ 💰 │ │ ✉ │ │ │ │ Monitor │ │ Pay Fees │ │ Message │ │ │ │ Progress │ │ Online │ │ Teachers │ │ │ │ │ │ │ │ │ │ │ │ Track OPS│ │ Secure │ │ Direct │ │ │ │ scores, │ │ Paystack │ │ channel │ │ │ │ attend- │ │ payments │ │ for │ │ │ │ ance, │ │ via card,│ │ school │ │ │ │ goals │ │ momo, │ │ communi- │ │ │ │ │ │ bank │ │ cation │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ── How It Works ── │ │ │ │ ① Create Account → ② Register Child → ③ Start Monitoring │ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ Footer: © 2026 RP Learning Portal | Privacy | Terms ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### States & Variants | Variant | Topbar | Hero CTA | |---------|--------|----------| | Desktop Light | White bg, primary text | Primary button | | Desktop Dark | #1E293B bg, light text | Primary button | | Tablet | Same as desktop, narrower cards | Primary button | | Mobile | Logo + hamburger | Full-width CTA button | --- ## REG-02: PARENT REGISTRATION FORM ### Frame: `RP/Public/REG-02-Form-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────┐ ┌──────────────────────────┐│ │ │ │ │ ││ │ │ Create Parent Account │ │ Why Register? ││ │ │ ───────────────────── │ │ ││ │ │ │ │ ✓ Track your child's ││ │ │ Full Name │ │ OPS score in real-time ││ │ │ ┌────────────────────┐ │ │ ✓ Receive invoices and ││ │ │ │ │ │ │ pay fees securely ││ │ │ └────────────────────┘ │ │ ✓ Get action items from ││ │ │ │ │ teachers ││ │ │ Email Address │ │ ✓ View attendance and ││ │ │ ┌────────────────────┐ │ │ progress reports ││ │ │ │ │ │ │ ✓ Message teachers ││ │ │ └────────────────────┘ │ │ directly ││ │ │ │ │ ││ │ │ Phone Number │ │ ││ │ │ ┌────────────────────┐ │ │ ││ │ │ │ │ │ │ ││ │ │ └────────────────────┘ │ │ ││ │ │ │ │ ││ │ │ Password │ │ ││ │ │ ┌────────────────────┐ │ │ ││ │ │ │ •••••••• 👁 │ │ │ ││ │ │ └────────────────────┘ │ │ ││ │ │ Min 8 characters │ │ ││ │ │ ██████████░░░ Strong │ │ ││ │ │ │ │ ││ │ │ Confirm Password │ │ ││ │ │ ┌────────────────────┐ │ │ ││ │ │ │ •••••••• 👁 │ │ │ ││ │ │ └────────────────────┘ │ │ ││ │ │ │ │ ││ │ │ ── Consent & Policies ── │ │ ││ │ │ │ │ ││ │ │ ☐ I accept the Terms of │ │ ││ │ │ Service [Read Terms →] │ │ ││ │ │ │ │ ││ │ │ ☐ I accept the Privacy │ │ ││ │ │ Policy [Read Policy →] │ │ ││ │ │ │ │ ││ │ │ ☐ I accept the Payment │ │ ││ │ │ Responsibility │ │ ││ │ │ Agreement │ │ ││ │ │ │ │ ││ │ │ ☐ I consent to Data │ │ ││ │ │ Processing │ │ ││ │ │ │ │ ││ │ │ [Create Account] │ │ ││ │ │ (Primary, full width) │ │ ││ │ │ │ │ ││ │ │ Already have an account?│ │ ││ │ │ [Login] │ │ ││ │ │ │ │ ││ │ └──────────────────────────┘ └──────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Form States | State | Visual | |-------|--------| | Default | All fields white bg, #E2E8F0 border | | Field focus | Border #1E5FA8, ring 2px | | Field error | Border #DC2626, red helper text below | | Password weak | Progress bar red, text "Weak" | | Password medium | Progress bar amber, text "Medium" | | Password strong | Progress bar green, text "Strong" | | Consent unchecked | Checkbox empty, border #CBD5E1 | | Consent checked | Checkbox filled #1E5FA8, white checkmark | | Submit disabled | Button greyed, cursor not-allowed (until all required fields valid) | | Submit loading | Button shows spinner, disabled | | Submit error | Toast: "Registration failed. Email may already be in use." | #### Validation Messages | Field | Rule | Error Message | |-------|------|---------------| | Name | required | "Full name is required" | | Email | required, email, unique | "Enter a valid email" / "Email already registered" | | Phone | required | "Phone number is required" | | Password | required, min:8 | "Password must be at least 8 characters" | | Confirm | must match | "Passwords do not match" | | Consent | all 4 required | "You must accept all policies to register" | --- ## REG-03: ADD WARD FORM ### Frame: `RP/Public/REG-03-AddWard-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ Register Your Child ││ │ │ Step 2 of 2 ││ │ │ ████████████████████░░░░░ 75% ││ │ │ ││ │ │ Child's Full Name ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Date of Birth ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ 📅 YYYY-MM-DD │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Gender ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ Select gender... ▾ │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ Options: Male / Female / Other ││ │ │ ││ │ │ Class to Enroll ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ Select class... ▾ │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ Options: Loaded from active school_classes ││ │ │ ││ │ │ [Register Child] [Skip for Now] ││ │ │ (Primary, full width) (Ghost, text-only) ││ │ │ ││ │ │ ───────────────────────────────────────────────── ││ │ │ Tip: You can add more children later from your ││ │ │ dashboard. There is no limit on the number of ││ │ │ children you can register. ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Progress Indicator - Step indicator: "Step 2 of 2" - Progress bar: 75% filled (Step 1 = account, Step 2 = child) - Color: Secondary blue (#1E5FA8) --- ## REG-04: CREDENTIAL DISPLAY ### Frame: `RP/Public/REG-04-Credentials-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ ✓ Child Registered Successfully! ││ │ │ ││ │ │ ┌─────────────────────────────────────────────────┐ ││ │ │ │ ⚠ WARNING │ ││ │ │ │ Please save these credentials. The temporary │ ││ │ │ │ password will expire on first login. │ ││ │ │ └─────────────────────────────────────────────────┘ ││ │ │ ││ │ │ ┌─────────────────────────────────────────────────┐ ││ │ │ │ │ ││ │ │ │ Student Name: Amara Asante │ ││ │ │ │ │ ││ │ │ │ Student ID │ ││ │ │ │ ┌────────────────────────────┐ [📋 Copy] │ ││ │ │ │ │ RP-2026-00001 │ │ ││ │ │ │ └────────────────────────────┘ │ ││ │ │ │ (JetBrains Mono, 18px, bold) │ ││ │ │ │ │ ││ │ │ │ Temporary Password │ ││ │ │ │ ┌────────────────────────────┐ 👁 [📋 Copy] │ ││ │ │ │ │ •••••••• │ │ ││ │ │ │ └────────────────────────────┘ │ ││ │ │ │ (Eye toggle reveals password) │ ││ │ │ │ │ ││ │ │ │ Class: JSS 2 │ ││ │ │ │ │ ││ │ │ └─────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Actions: ││ │ │ ┌──────────────┐ ┌──────────────┐ ┌────────────┐ ││ │ │ │ 📋 Copy │ │ 📥 Download │ │ ✉ Email │ ││ │ │ │ Credentials │ │ PDF │ │ to Student │ ││ │ │ └──────────────┘ └──────────────┘ └────────────┘ ││ │ │ (Secondary) (Outline) (Ghost) ││ │ │ ││ │ │ ──────────────────────────────────────────────── ││ │ │ ││ │ │ [+ Add Another Ward] → REG-03 ││ │ │ [Go to Dashboard] → PAR-01 ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Copy Credentials Action ``` Click [Copy Credentials] → navigator.clipboard.writeText("Student: Amara Asante\nID: RP-2026-00001\nPassword: xxxxxxxx") → Toast: "Credentials copied to clipboard ✓" (type: success, auto-dismiss: 3000) ``` #### Download PDF Action ``` Click [Download PDF] → POST /credentials/{student}/pdf → Server generates DomPDF with: School logo, Student name, ID, temp password → Browser downloads: "Amara_Asante_Credentials.pdf" → Toast: "PDF downloaded ✓" ``` #### Email to Student Action ``` Click [Email to Student] → Modal opens: "Send Credentials via Email" → Field: Email address (pre-filled if parent email) → [Send] button → POST /credentials/{student}/email → Toast: "Credentials sent to {email} ✓" ``` --- ## INV-01: TEACHER INVITATION LANDING ### Frame: `RP/Public/INV-01-Landing-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ 🎓 ││ │ │ ││ │ │ You've Been Invited! ││ │ │ ──────────────────── ││ │ │ ││ │ │ Greenfield Academy has invited you to join ││ │ │ RP Learning Portal as a teacher. ││ │ │ ││ │ │ ┌─────────────────────────────────────────┐ ││ │ │ │ ⏰ This invitation expires in 72 hours │ ││ │ │ │ (June 15, 2026 at 04:14 AM) │ ││ │ │ └─────────────────────────────────────────┘ ││ │ │ ││ │ │ [Accept Invitation & Complete Profile] ││ │ │ (Primary button, full width) ││ │ │ ││ │ │ Already have an account? [Login] ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Error States | Condition | Display | |-----------|---------| | Token expired | "This invitation has expired. Please contact your administrator for a new invitation." | | Token invalid | 404 page with school branding | | Already registered | "This invitation has already been used. [Login to your account]" | --- ## INV-02: TEACHER PROFILE COMPLETION ### Frame: `RP/Public/INV-02-Profile-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ Complete Your Profile ││ │ │ Welcome to RP Learning Portal ││ │ │ ││ │ │ ── Basic Information ── ││ │ │ ││ │ │ Full Name ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ Dr. Kwame Mensah (pre-filled, locked 🔒) │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Email ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ kwame@greenfield.edu (pre-filled, locked 🔒) │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Password ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ •••••••• 👁 │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Confirm Password ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ •••••••• 👁 │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ ── Personal Details ── ││ │ │ ││ │ │ Date of Birth Phone Number ││ │ │ ┌────────────────┐ ┌────────────────┐ ││ │ │ │ 📅 │ │ │ ││ │ │ └────────────────┘ └────────────────┘ ││ │ │ ││ │ │ ── Professional Details ── ││ │ │ ││ │ │ Qualifications ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ B.Ed Mathematics, M.Sc Education... │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Bio ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ Passionate mathematics educator with 10+ years │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ 0/500 characters ││ │ │ ││ │ │ ── CV Upload ── ││ │ │ ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ │ ││ │ │ │ 📄 Upload CV │ ││ │ │ │ PDF, DOC, or DOCX. Max 5MB. │ ││ │ │ │ │ ││ │ │ │ ──── or drag and drop ──── │ ││ │ │ │ │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ After upload: CV shown as file card with name + size ││ │ │ ┌────────────────────────────────────┐ [🗑 Remove] ││ │ │ │ 📄 Kwame_Mensah_CV.pdf 2.4 MB │ ││ │ │ └────────────────────────────────────┘ ││ │ │ ││ │ │ [Complete Registration] ││ │ │ (Primary, full width) ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Post-Registration State ``` ┌─────────────────────────────────────────────────────────────┐ │ │ │ ✓ Registration Complete! │ │ │ │ Your account is pending approval by the school │ │ administrator. You will receive an email once your │ │ account has been activated. │ │ │ │ Thank you for your patience! │ │ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## AUTH-01: LOGIN ### Frame: `RP/Public/AUTH-01-Login-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ ││ │ │ ┌────┐ ││ │ │ │Logo│ RP Learning Portal ││ │ │ └────┘ ││ │ │ ││ │ │ Welcome Back ││ │ │ Sign in to your account ││ │ │ ││ │ │ Email Address ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ 📧 Enter your email │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ Password ││ │ │ ┌──────────────────────────────────────┐ [👁 Show] ││ │ │ │ 🔒 Enter your password │ ││ │ │ └──────────────────────────────────────┘ ││ │ │ ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ Remember me [Forgot Password?]│ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ [Sign In] ││ │ │ (Primary, full width) ││ │ │ ││ │ │ ───────────────────────────────────────────────── ││ │ │ ││ │ │ Don't have an account? ││ │ │ [Register as Parent] ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Form States | State | Visual | |-------|--------| | Default | Fields white, border #E2E8F0 | | Email focus | Border #1E5FA8, ring | | Email error | Border #DC2626, "Enter a valid email address" | | Password focus | Border #1E5FA8 | | Login loading | Button: spinner + "Signing in..." | | Login error | Border red on password, "Invalid email or password" | | Success | Redirect to role portal | #### Role-Based Redirect ``` Login success → ├── super-admin → /admin/dashboard (with all-access bypass) ├── admin → /admin/dashboard ├── teacher → /teacher/dashboard ├── student → /student/dashboard └── parent → /parent/dashboard ``` --- ## AUTH-02: FORGOT PASSWORD ### Frame: `RP/Public/AUTH-02-Forgot-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ Reset Your Password ││ │ │ Enter your email and we'll send you a reset link ││ │ │ ││ │ │ Email Address ││ │ │ ┌──────────────────────────────────────────────────┐ ││ │ │ │ 📫 Enter your email │ ││ │ │ └──────────────────────────────────────────────────┘ ││ │ │ ││ │ │ [Send Reset Link] ││ │ │ (Primary, full width) ││ │ │ ││ │ │ ← Back to Login ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Post-Submit State ``` ┌─────────────────────────────────────────────────────────────┐ │ │ │ ✉ Check Your Email │ │ │ │ We've sent a password reset link to │ │ kwame@greenfield.edu │ │ │ │ The link will expire in 60 minutes. │ │ │ │ Didn't receive it? [Resend Email] │ │ │ │ ← Back to Login │ │ │ └─────────────────────────────────────────────────────────────┘ ``` --- ## AUTH-03: RESET PASSWORD ### Frame: `RP/Public/AUTH-03-Reset-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ Create New Password ││ │ │ ││ │ │ New Password ││ │ │ ┌──────────────────────────────────────┐ [👁 Show] ││ │ │ │ Enter new password │ ││ │ │ └──────────────────────────────────────┘ ││ │ │ ██████████░░░░░░ Strong ││ │ │ ││ │ │ Confirm New Password ││ │ │ ┌──────────────────────────────────────┐ [👁 Show] ││ │ │ │ Confirm new password │ ││ │ │ └──────────────────────────────────────┘ ││ │ │ ││ │ │ [Reset Password] ││ │ │ (Primary, full width) ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` #### Post-Reset State ``` ✓ Password Reset Successful! Your password has been updated. You can now sign in with your new password. [Sign In →] ``` --- ## AUTH-04: EMAIL VERIFICATION ### Frame: `RP/Public/AUTH-04-Verify-Desktop-Light` #### Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ NAVBAR │ ├─────────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────────────────────────────────────────────────┐│ │ │ ││ │ │ ✉ Verify Your Email ││ │ │ ││ │ │ Thanks for signing up! Before getting started, ││ │ │ please verify your email address by clicking ││ │ │ the link we sent to: ││ │ │ ││ │ │ kwame@greenfield.edu ││ │ │ ││ │ │ [Resend Verification Email] ││ │ │ (Outline button) ││ │ │ ││ │ │ ← Back to Login ││ │ │ ││ │ └─────────────────────────────────────────────────────────┘│ └─────────────────────────────────────────────────────────────┘ ``` --- ## COMPONENT BUILD SPECIFICATIONS ### Build Order for Sprint 1 (Figma) #### Phase A: Design Tokens (Day 1) 1. Create Figma Variables collection "RP Tokens" 2. Add all color tokens (Light + Dark modes) 3. Add typography tokens (font family, sizes, weights) 4. Add spacing tokens (4/8/12/16/20/24/32/40/48px) 5. Add shadow tokens (xs/sm/md/lg/xl) 6. Add border-radius tokens (sm/md/lg/full) #### Phase B: Base Components (Day 2-3) Build in this exact order (each depends on previous): | # | Component | Figma Type | Auto-Layout | Variants | |---|-----------|-----------|-------------|----------| | 1 | RP/Button | Component Set | H: center, V: center | type×7, size×3, state×5 | | 2 | RP/Input | Component Set | V: stack | type×6, size×3, state×6 | | 3 | RP/Badge | Component Set | H: center, V: center | type×5, pill×2, size×2 | | 4 | RP/Avatar | Component Set | Frame: circle | size×4, has-image×2, online×2 | | 5 | RP/Toggle | Component Set | H: space-between | size×3, value×2, disabled×2 | | 6 | RP/Card | Component Set | V: stack | shadow×5, padding×2, hover×2 | | 7 | RP/Tabs | Component Set | H: stack | variant×3, scrollable×2 | | 8 | RP/Toast | Component Set | H: space-between | type×4, position×4 | | 9 | RP/Banner | Component Set | H: space-between | type×4, dismissible×2 | | 10 | RP/ProgressBar | Component Set | V: stack | size×3, color-zones×2, show-value×2 | #### Phase C: Complex Components (Day 3-4) | # | Component | Complexity | Notes | |---|-----------|-----------|-------| | 11 | RP/KPICard | Medium | Icon + value + trend + sparkline | | 12 | RP/Modal | Medium | Focus trap, backdrop, size×4 | | 13 | RP/SearchInput | Medium | Debounce indicator, clear button | | 14 | RP/Accordion | Medium | Height animation, chevron rotation | | 15 | RP/EmptyState | Low | Icon + text + optional CTA | | 16 | RP/Skeleton | Low | Shimmer animation, type×4 | | 17 | RP/OPSRing | High | SVG circle, stroke animation, color zones | | 18 | RP/TierBadge | Medium | 5 tier variants, icon + text | | 19 | RP/StreakBadge | Medium | Flame animation, count | | 20 | RP/DataTable | High | Sort, paginate, responsive scroll | #### Phase D: Application Components (Day 4-5) | # | Component | Complexity | Notes | |---|-----------|-----------|-------| | 21 | RP/ChildSwitcher | Medium | Dropdown, AJAX pattern | | 22 | RP/NotificationBell | Medium | Badge count, dropdown preview | | 23 | RP/CredentialCard | Medium | ID + password + actions | | 24 | RP/FileUpload | High | Dropzone, preview, progress | | 25 | RP/Timeline | Low | Vertical events | | 26 | RP/Calendar | High | Month grid, heatmap | | 27 | RP/SessionCard | Medium | Mode badges, time | | 28 | RP/GoalCard | Low | Progress bar | | 29 | RP/InvoiceCard | Medium | Amount format, status | | 30 | RP/ProgressBar | Low | Already built above | | 31 | RP/QuestionBuilder | Very High | 9 type tabs — defer to Sprint 3 | | 32 | RP/Classroom | High | Zoom embed placeholder — defer to Sprint 3 | | 33 | RP/PaystackButton | Medium | Paystack popup placeholder — defer to Sprint 6 | | 34 | RP/DigestCard | Low | Daily/weekly summary | #### Phase E: Layouts (Day 5) Build page shells and navigation components: | # | Component | Notes | |---|-----------|-------| | 35 | RP/Sidebar | 5 role variants, collapsed/expanded | | 36 | RP/Topbar | 5 role variants, with child switcher for parent | | 37 | RP/PageShell | Sidebar + content area | | 38 | RP/MobileNav | Bottom tabs, hamburger menu | | 39 | RP/ThemeToggle | Light/dark switch with icon | --- ## RESPONSIVE VARIANTS — Per Frame Each frame must have 3 responsive variants: ### Desktop (1440px) - Sidebar: Expanded (260px) - Content: Auto-width with 24px padding - KPI cards: 3 across - Charts: Full width - Tables: Full width with horizontal scroll if needed - Forms: Max-width 560px centered ### Tablet (768px) - Sidebar: Collapsed (72px icons) or hidden (hamburger toggle) - Content: Full width with 16px padding - KPI cards: 2 across - Charts: Full width - Tables: Horizontal scroll - Forms: Full width ### Mobile (375px) - Sidebar: Hidden (overlay on hamburger) - Topbar: Compact (56px) - Bottom tabs: 4 primary tabs - Content: Full width with 16px padding - KPI cards: 1 across (stacked) - Charts: Full width, simplified labels - Tables: Horizontal scroll - Forms: Full width, large inputs - Touch targets: Minimum 44×44px - Modals: Full screen - Dropdowns: Full width --- ## DARK MODE — Per Frame Every frame must have a Light and Dark variant: ### Dark Mode Rules 1. Background: #0F172A (page), #1E293B (cards, sidebar) 2. Text: #F8FAFC (headers), #E2E8F0 (body), #94A3B8 (muted) 3. Borders: #334155 4. Shadows: Darker, more pronounced 5. Inputs: #1E293B bg, #475569 border, #E2E8F0 text 6. Charts: Dark background, lighter series colors 7. Third-party embeds (Paystack, Zoom): Accept independent styling --- ## FIKA NAMING CONVENTION ``` RP/ ├── Design System/ │ ├── DS-01-Color-Tokens-Light │ ├── DS-01-Color-Tokens-Dark │ ├── DS-02-Components │ ├── DS-03-Dark-Mode-Comparison │ └── DS-04-Icons ├── Layouts/ │ ├── LAY-01-Sidebar-Admin-Desktop-Light │ ├── LAY-01-Sidebar-Admin-Desktop-Dark │ ├── LAY-01-Sidebar-Teacher-Desktop-Light │ ├── LAY-01-Sidebar-Student-Desktop-Light │ ├── LAY-01-Sidebar-Parent-Desktop-Light │ ├── LAY-01-Sidebar-SuperAdmin-Desktop-Light │ ├── LAY-01-Sidebar-Admin-Mobile-Light │ ├── LAY-02-Topbar-Admin-Desktop-Light │ ├── LAY-02-Topbar-Parent-Desktop-Light │ ├── LAY-02-Topbar-Parent-ChildSwitcher-Open │ ├── LAY-03-ChildSwitcher-States │ ├── LAY-04-PageShell-Desktop-Light │ ├── LAY-04-PageShell-Tablet-Light │ ├── LAY-04-PageShell-Mobile-Light │ ├── LAY-05-MobileNav-Student │ └── LAY-05-MobileMenu-Open ├── Public/ │ ├── REG-01-Landing-Desktop-Light │ ├── REG-01-Landing-Desktop-Dark │ ├── REG-01-Landing-Mobile-Light │ ├── REG-01-Landing-Mobile-Dark │ ├── REG-02-Form-Desktop-Light │ ├── REG-02-Form-Desktop-Dark │ ├── REG-02-Form-Mobile-Light │ ├── REG-02-Form-Error-States │ ├── REG-03-AddWard-Desktop-Light │ ├── REG-03-AddWard-Mobile-Light │ ├── REG-04-Credentials-Desktop-Light │ ├── REG-04-Credentials-Desktop-Dark │ ├── REG-04-Credentials-Mobile-Light │ ├── INV-01-Landing-Desktop-Light │ ├── INV-01-Landing-Expired-Desktop │ ├── INV-02-Profile-Desktop-Light │ ├── INV-02-Profile-Desktop-Dark │ ├── INV-02-Profile-Mobile-Light │ ├── INV-02-PostRegistration-Desktop │ ├── AUTH-01-Login-Desktop-Light │ ├── AUTH-01-Login-Desktop-Dark │ ├── AUTH-01-Login-Mobile-Light │ ├── AUTH-01-Login-Error-State │ ├── AUTH-02-Forgot-Desktop-Light │ ├── AUTH-02-Forgot-Success-State │ ├── AUTH-03-Reset-Desktop-Light │ ├── AUTH-03-Reset-Success-State │ ├── AUTH-04-Verify-Desktop-Light │ └── AUTH-04-Verify-Mobile-Light └── Components/ ├── RP-Button (Component Set) ├── RP-Input (Component Set) ├── RP-Badge (Component Set) ├── ... (all 34 components) ``` --- ## SPRINT 1 DELIVERABLES CHECKLIST | # | Deliverable | Frames | Status | |---|------------|--------|--------| | 1 | Color Tokens (Light + Dark) | 2 | Not started | | 2 | Component Library (34 components) | 34+ variants | Not started | | 3 | Dark Mode Comparison | 1 | Not started | | 4 | Icon Library | 1 | Not started | | 5 | Sidebar (5 roles × 3 responsive × 2 themes) | 30 | Not started | | 6 | Topbar (5 roles × 3 responsive × 2 themes) | 30 | Not started | | 7 | Child Switcher (3 states) | 3 | Not started | | 8 | Page Shell (3 responsive × 2 themes) | 6 | Not started | | 9 | Mobile Nav (2 variants) | 2 | Not started | | 10 | REG-01 Landing (3 responsive × 2 themes) | 6 | Not started | | 11 | REG-02 Registration Form (3 responsive × 2 themes + error states) | 10 | Not started | | 12 | REG-03 Add Ward (3 responsive × 2 themes) | 6 | Not started | | 13 | REG-04 Credentials (3 responsive × 2 themes) | 6 | Not started | | 14 | INV-01 Invitation Landing (3 responsive × 2 themes + expired) | 8 | Not started | | 15 | INV-02 Profile Completion (3 responsive × 2 themes + success) | 8 | Not started | | 16 | AUTH-01 Login (3 responsive × 2 themes + error) | 8 | Not started | | 17 | AUTH-02 Forgot Password (2 states) | 2 | Not started | | 18 | AUTH-03 Reset Password (2 states) | 2 | Not started | | 19 | AUTH-04 Email Verification | 2 | Not started | | | **Total unique Figma frames** | **~135** | |