# LAY-01 through LAY-05: Figma Layout Production Specs --- ## LAY-01: SIDEBAR ### Component: `RP/Sidebar` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `role` | Enum | `admin`, `teacher`, `student`, `parent`, `super-admin` | `admin` | | `state` | Enum | `expanded`, `collapsed` | `expanded` | | `active-item` | String | Menu item key | `dashboard` | ### Dimensions - Expanded width: 260px - Collapsed width: 72px - Height: 100vh (full viewport) - BG: `color/primary` (#0B3A66) - Transition: width 200ms ease ### Structure (Expanded) ``` ┌──────────────────────────────────────┐ │ ┌────┐ │ │ │Logo│ RP Learning Portal │ ← 64px height, padding 16px 20px │ └────┘ │ ├──────────────────────────────────────┤ ← 1px divider rgba(255,255,255,0.1) │ │ │ ┌──────────────────────────────┐ │ │ │ ▣ Dashboard → │ │ ← 44px height, padding 0 16px │ ├──────────────────────────────┤ │ Icon: 20px, Text: 14px Medium │ │ 📅 Academic Years │ │ Gap: 12px (icon + text) │ │ 📋 Subjects │ │ │ │ 🏫 Classes │ │ │ │ 📝 Enrollment │ │ │ ├──────────────────────────────┤ │ ← Section divider: 1px rgba(255,255,255,0.1) │ │ 🎓 Teachers │ │ Padding: 8px 0 │ │ 👤 Students │ │ │ │ 👨‍👩‍👧 Parents │ │ │ ├──────────────────────────────┤ │ │ │ 📅 Timetable │ │ │ │ 📌 Sessions │ │ │ │ 📋 Assignments │ │ │ │ 📝 Exams │ │ │ ├──────────────────────────────┤ │ │ │ 📊 OPS Dashboard │ │ │ │ 🎯 Interventions │ │ │ │ 📚 Resources │ │ │ ├──────────────────────────────┤ │ │ │ 💰 Finance │ │ ← Phase 10 (greyed if not available) │ │ 💼 Payroll │ │ ← Phase 11 (greyed if not available) │ │ 📢 Announcements │ │ │ │ 📋 Audit Logs │ │ │ ├──────────────────────────────┤ │ │ │ ⚙ Settings │ │ │ └──────────────────────────────┘ │ │ │ ├──────────────────────────────────────┤ ← 1px divider │ ┌──────────────────────────────┐ │ │ │ 👤 Admin Name │ │ ← 64px height, padding 16px 20px │ │ admin@school.com │ │ Avatar: 32px │ │ → Logout │ │ Text: 14px Regular │ └──────────────────────────────┘ │ └──────────────────────────────────────┘ ``` ### Item States | State | BG | Text | Icon | Indicator | |-------|----|------|------|-----------| | Default | transparent | rgba(255,255,255,0.7) | rgba(255,255,255,0.7) | none | | Hover | rgba(255,255,255,0.05) | #FFFFFF | #FFFFFF | none | | Active | rgba(255,255,255,0.1) | #FFFFFF | #FFFFFF | Left 3px `color/accent` (#D4A017) | | Badge | — | — | — | Red dot (8px) or count badge on icon | ### Collapsed State ``` ┌──────┐ │ Logo │ ← 72px width, centered, 40×40px ├──────┤ │ ▣ │ ← 44×44px, centered, icon only │ 📅 │ Tooltip on hover (right side) │ 📋 │ BG: #0B1A2F (dark primary) │ 📝 │ Tooltip BG: #1E293B │ 🎓 │ Tooltip text: #F8FAFC │ 👤 │ Tooltip padding: 8px 12px │ ... │ Tooltip border-radius: 6px ├──────┤ │ 👤 │ ← Avatar 32px, centered └──────┘ ``` ### Dark Mode Sidebar - BG: #0B1A2F - Text: #CBD5E1 - Hover BG: #1E3A5F - Active BG: rgba(30,95,168,0.2) - Active indicator: Same gold (#D4A017) - Divider: rgba(255,255,255,0.08) ### Auto-Layout - Container: Vertical, gap 0 - Logo section: Fixed height 64px - Nav section: Fill height, Vertical, gap 0, padding 8px 0 - User section: Fixed height 64px - Each item: Horizontal, gap 12px, padding 0 16px, height 44px, alignment center --- ## LAY-02: TOPBAR ### Component: `RP/Topbar` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `role` | Enum | `admin`, `teacher`, `student`, `parent`, `super-admin` | `admin` | | `has-child-switcher` | Boolean | true/false | false | ### Dimensions - Height: 64px (desktop), 56px (mobile) - BG: `color/surface` (#FFF) - Border bottom: 1px `color/border` - Padding: 0 24px (desktop), 0 16px (mobile) ### Structure ``` ┌─────────────────────────────────────────────────────────────┐ │ [≡] [Page Title] [🔔] [🔍] [☀/🌙] [👤 ▾] │ │ ↑ ↑ ↑ ↑ ↑ ↑ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ └── User Menu │ │ │ │ │ │ └── Theme Toggle │ │ │ │ │ └── Search (expandable) │ │ │ │ └── Notification Bell │ │ │ └── Page title (text-lg, semibold) │ │ └── Hamburger (44×44px, mobile only) │ └─────────────────────────────────────────────────────────────┘ ``` ### Parent Topbar (with Child Switcher) ``` ┌─────────────────────────────────────────────────────────────┐ │ [≡] [▼ Amara Asante - JSS 2 ▾] [🔔] [🔍] [☀/🌙] [👤 ▾]│ │ ↑ │ │ └── Child Switcher (replaces page title) │ └─────────────────────────────────────────────────────────────┘ ``` ### Element Specs | Element | Width | Height | Padding | Font | Color | |---------|-------|--------|---------|------|-------| | Hamburger | 44px | 44px | 10px | — | `color/body-text` | | Page title | auto | auto | 0 | text-lg semibold | `color/header-text` | | Child Switcher | auto | 40px | 0 12px | text-sm medium | `color/body-text` | | Notification Bell | 44px | 44px | 10px | — | `color/body-text` | | Search | 200px (expanded) | 40px | 0 12px | text-sm | `color/body-text` | | Theme Toggle | 44px | 44px | 10px | — | `color/body-text` | | User Menu | auto | 40px | 0 12px | text-sm medium | `color/body-text` | ### User Menu Dropdown ``` ┌─────────────────────────────┐ │ 👤 Admin Name │ ← 48px height │ admin@school.com │ ├─────────────────────────────┤ │ 👤 My Profile │ ← 40px height │ ⚙ Settings │ │ ───────────────────── │ │ → Logout │ └─────────────────────────────┘ ``` - Width: 240px - BG: `color/surface-elevated` - Shadow: `shadow/lg` - Border Radius: 12px - Item padding: 0 16px ### Auto-Layout - Container: Horizontal, gap 0, alignment center - Left group: Horizontal, gap 16px - Right group: Horizontal, gap 8px - Sizing: Fill width, Fixed height --- ## LAY-03: CHILD SWITCHER ### Component: `RP/ChildSwitcher` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `state` | Enum | `closed`, `open-2`, `open-5+` | `closed` | ### Trigger ``` ┌─────────────────────────────────┐ │ [Avatar 32px] Amara Asante │ │ JSS 2 ▾ │ └─────────────────────────────────┘ ``` - Height: 40px - Padding: 0 12px - BG: transparent - Hover BG: rgba(0,0,0,0.05) - Border Radius: 8px - Avatar: 32px - Name: 14px Medium - Class: 12px Regular, `color/muted-text` - Chevron: 16px, rotates 180° when open ### Dropdown ``` ┌─────────────────────────────────┐ │ [Avatar 32px] Amara Asante │ ← 56px height │ JSS 2 78% │ Active: bg rgba(30,95,168,0.08) │ 🔥 │ OPS mini-ring: 24px ├─────────────────────────────────┤ │ [Avatar 32px] Kofi Asante │ ← 56px height │ JSS 1 82% │ │ 🔥 │ ├─────────────────────────────────┤ │ + Add Another Child │ ← 48px height └─────────────────────────────────┘ ``` - Width: 280px - Max height: 320px (scrollable) - BG: `color/surface-elevated` - Shadow: `shadow/lg` - Border Radius: 12px - Padding: 4px - Gap: 0 ### Child Row - Height: 56px - Padding: 8px 12px - Gap: 12px (avatar + text + OPS) - Hover BG: rgba(0,0,0,0.03) - Active BG: rgba(30,95,168,0.08) - Active indicator: Left 3px `color/secondary` ### Auto-Layout - Container: Vertical, gap 0 - Each row: Horizontal, gap 12px, alignment center - Sizing: Fill width --- ## LAY-04: PAGE SHELL ### Component: `RP/PageShell` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `role` | Enum | `admin`, `teacher`, `student`, `parent`, `super-admin` | `admin` | | `sidebar-state` | Enum | `expanded`, `collapsed` | `expanded` | | `breakpoint` | Enum | `desktop`, `tablet`, `mobile` | `desktop` | ### 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) │ │ 🏠 📋 📅 👤 │ └──────────────────────────┘ ``` ### Page Header (optional) ``` ┌──────────────────────────────────────────────────────────┐ │ Page Title (H1) [Action Buttons]│ │ Page description (optional, muted text) │ └──────────────────────────────────────────────────────────┘ ``` - Padding: 0 0 24px 0 - Title: `Display/H1` (36px, Bold) - Description: `Body/Base` (16px, Regular, `color/muted-text`) - Actions: Horizontal, gap 8px, right-aligned ### Auto-Layout - Container: Vertical, gap 0 - Topbar: Fixed height 64px (desktop) / 56px (mobile) - Body: Horizontal, gap 0 - Sidebar: Fixed width 260px (expanded) / 72px (collapsed) / 0 (mobile) - Content: Fill width, padding 24px (desktop) / 16px (mobile) - Bottom tabs: Fixed height 64px (mobile only) --- ## LAY-05: MOBILE NAVIGATION ### Component: `RP/MobileNav` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `role` | Enum | `admin`, `teacher`, `student`, `parent` | `student` | | `active-tab` | String | Tab key | `home` | ### Bottom Tab Bar ``` ┌──────────────────────────────┐ │ 🏠 📋 📅 👤 │ │ Home Tasks Calendar Me │ │ ● │ └──────────────────────────────┘ ``` ### Dimensions - Height: 64px - BG: `color/surface` (#FFF) - Border top: 1px `color/border` - Padding: 8px 0 ### Tab Specs - Width: Equal (flex: 1) - Height: 48px - Icon: 24px - Label: 10px Medium - Active color: `color/secondary` (#1E5FA8) - Inactive color: `color/muted-text` (#64748B) - Active indicator: 4px dot below icon, `color/accent` (#D4A017) - Badge: 16px circle, `color/danger`, positioned top-right of icon ### Role-Based Tabs | Role | Tab 1 | Tab 2 | Tab 3 | Tab 4 | |------|-------|-------|-------|-------| | Student | 🏠 Home | 📋 Tasks | 📅 Calendar | 👤 Me | | Teacher | 🏠 Home | 📋 Classes | 📅 Schedule | 👤 Me | | Parent | 🏠 Home | 📊 Child | 💰 Finance | 👤 Me | | Admin | 🏠 Home | 📋 Manage | 📊 Analytics | 👤 Me | ### Mobile Menu (Hamburger Overlay) ``` ┌──────────────────────────────┐ │ ✕ RP Learning Portal │ ← 56px height ├──────────────────────────────┤ │ │ │ ▣ Dashboard │ ← 48px height per item │ 📅 Timetable │ Padding: 0 24px │ 📋 Assignments │ Icon: 20px │ 📝 Exams │ Text: 16px Medium │ 🎯 Goals │ Gap: 12px │ 🏆 Achievements │ │ 🏅 Leaderboard │ │ 📊 My Attendance │ │ 📚 Resources │ │ ✉ Messages │ │ 🔔 Notifications │ │ ──────────────── │ │ 👤 My Profile │ │ ⚙ Settings │ │ → Logout │ ├──────────────────────────────┤ │ ☀/🌙 Dark Mode Toggle │ ← 48px height └──────────────────────────────┘ ``` - Overlay: Full screen, BG: `color/surface` - Close button: 44×44px, top-right - Menu items: Same as sidebar items - Dark mode toggle: Bottom of menu ### Auto-Layout - Bottom tabs: Horizontal, gap 0, alignment center - Each tab: Vertical, gap 2px, alignment center - Mobile menu: Vertical, gap 0, padding 0 --- ## LAY-06: PUBLIC NAVBAR (not logged in) ### Component: `RP/PublicNavbar` ### Dimensions - Height: 64px - BG: `color/surface` (#FFF) - Border bottom: 1px `color/border` - Padding: 0 24px ### Structure ``` ┌─────────────────────────────────────────────────────────────┐ │ Logo RP Learning Portal [Login] [Register] │ └─────────────────────────────────────────────────────────────┘ ``` ### Elements - Logo: 32×32px - Title: `Display/H6` (16px, Medium) - Login: Ghost button, text-sm - Register: Primary button, text-sm ### Auto-Layout - Container: Horizontal, gap 0, alignment center, justify: space-between - Left: Logo + Title, gap 8px - Right: Login + Register, gap 8px --- ## LAY-07: FOOTER (Public pages) ### Component: `RP/PublicFooter` ### Dimensions - Padding: 24px 0 - BG: `color/surface` - Border top: 1px `color/border` ### Structure ``` ┌─────────────────────────────────────────────────────────────┐ │ © 2026 RP Learning Portal | Privacy Policy | Terms of Use │ └─────────────────────────────────────────────────────────────┘ ``` ### Auto-Layout - Container: Horizontal, gap 16px, alignment center, justify: center - Text: `Body/XS` (12px, Regular, `color/muted-text`) - Links: `color/secondary`, underline on hover --- ## LAY-08: PAGE HEADER ### Component: `RP/PageHeader` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `has-actions` | Boolean | true/false | false | | `has-description` | Boolean | true/false | false | ### Dimensions - Padding: 0 0 24px 0 - Gap: 8px (title + description) ### Structure ``` ┌──────────────────────────────────────────────────────────┐ │ Page Title (H1) [Action Buttons]│ │ Page description (optional, muted text) │ └──────────────────────────────────────────────────────────┘ ``` ### Auto-Layout - Container: Horizontal, gap 0, justify: space-between, alignment: center - Left: Vertical, gap 8px - Right: Horizontal, gap 8px --- ## LAY-09: BREADCRUMB ### Component: `RP/Breadcrumb` ### Dimensions - Height: 24px - Gap: 8px - Font: `Body/SM` (14px, Regular) ### Structure ``` Home > Admin > Students > Amara Asante ``` ### Styles - Separator: `color/muted-text`, 12px - Current: `color/body-text`, bold - Link: `color/secondary`, underline on hover ### Auto-Layout - Container: Horizontal, gap 8px, alignment center - Each item: Horizontal, gap 8px --- ## LAY-10: PAGINATION ### Component: `RP/Pagination` **Properties:** | Property | Type | Values | Default | |----------|------|--------|---------| | `variant` | Enum | `numbers`, `simple` | `numbers` | ### Dimensions - Height: 40px - Gap: 4px - Font: `Body/SM` (14px, Medium) ### Structure (Numbers) ``` ← Previous [1] [2] [3] ... [10] Next → ``` ### Structure (Simple) ``` ← Previous Page 1 of 10 Next → ``` ### Styles - Active page: `color/secondary` BG, white text, border-radius: 6px - Inactive page: transparent, `color/body-text` - Hover: `color/background` - Disabled: `color/disabled-text` ### Auto-Layout - Container: Horizontal, gap 4px, alignment center - Each page: 36×36px, centered text --- ## LAY-11: FILTER BAR ### Component: `RP/FilterBar` ### Dimensions - Height: 48px - Padding: 0 16px - BG: `color/surface` - Border: 1px `color/border` - Border Radius: 8px ### Structure ``` ┌──────────────────────────────────────────────────────────┐ │ 🔍 Search... [Filter ▾] [Sort ▾] [Export] │ └──────────────────────────────────────────────────────────┘ ``` ### Auto-Layout - Container: Horizontal, gap 8px, alignment center - Search: Fill width - Filters: Hug width - Sort: Hug width - Export: Hug width --- ## LAY-12: EMPTY STATE ### Component: `RP/EmptyState` ### Dimensions - Padding: 48px 24px - Max width: 400px - Alignment: Center ### Structure ``` ┌──────────────────────────────────┐ │ │ │ 📋 (48px icon) │ │ │ │ No students enrolled │ │ (Display/H5, semibold) │ │ │ │ Enroll students to get │ │ started with the portal. │ │ (Body/SM, muted) │ │ │ │ [Enroll Students] │ │ (Primary button) │ │ │ └──────────────────────────────────┘ ``` ### Auto-Layout - Container: Vertical, gap 12px, alignment center - Icon: 48px, `color/muted-text` - Title: `Display/H5`, `color/header-text` - Description: `Body/SM`, `color/muted-text` - CTA: RP/Button (primary, md) --- ## LAY-13: SKELETON LOADING ### Component: `RP/SkeletonLayout` ### KPI Row Skeleton ``` ┌──────────┐ ┌──────────┐ ┌──────────┐ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ │ ░░░░░░░░ │ └──────────┘ └──────────┘ └──────────┘ ``` ### Table Skeleton ``` ┌──────────────────────────────────────┐ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ └──────────────────────────────────────┘ ``` ### Chart Skeleton ``` ┌──────────────────────────────────────┐ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ └──────────────────────────────────────┘ ``` ### Skeleton Styles - BG: `color/border` (#E2E8F0) — Light - BG: `color/border` (#334155) — Dark - Shimmer: Linear gradient animation (left to right, 1.5s infinite) - Border Radius: 4px (text), 8px (rect), 12px (card)