# REG, INV, AUTH: Figma Screen Production Specs

---

## REG-01: REGISTRATION LANDING

### Frame: `RP/Public/REG-01-Landing`

**Canvas sizes:** Desktop (1440), Tablet (768), Mobile (375) × Light + Dark

---

### Desktop Light (1440px × auto)

```
Frame: REG-01-Landing-Desktop-Light
Width: 1440px
Height: auto (content-driven)
BG: color/background

├── RP/PublicNavbar (fixed top)
│   Width: 1440px, Height: 64px
│
├── Hero Section
│   Width: 1440px, Height: 480px
│   BG: color/surface
│   Padding: 80px 120px
│   Alignment: center-left
│   Layout: Vertical, gap 24px
│
│   ├── Badge (info, sm)
│   │   Text: "🚀 Trusted by 50+ schools in Ghana"
│   │
│   ├── H1: "Join Your Child's Learning Journey"
│   │   Font: Display/H1 (36px, Bold)
│   │   Color: color/header-text
│   │   Max-width: 600px
│   │
│   ├── Paragraph
│   │   Text: "Monitor progress, pay fees, and stay connected with your child's education — all in one place."
│   │   Font: Body/LG (18px, Regular)
│   │   Color: color/muted-text
│   │   Max-width: 520px
│   │
│   ├── Button Group (Horizontal, gap 12px)
│   │   ├── RP/Button (primary, lg)
│   │   │   Text: "Register as Parent"
│   │   │   → navigates to /register/parent
│   │   │
│   │   └── RP/Button (outline, lg)
│   │       Text: "Learn More"
│   │       → smooth scroll to features section
│   │
│   └── Trust indicators (optional)
│       "🔒 Secure • 💳 Paystack Payments • 📱 Mobile Friendly"
│       Font: Body/XS, color/muted-text
│
├── Features Section
│   Width: 1440px, Height: auto
│   Padding: 80px 120px
│   BG: color/background
│   Layout: Vertical, gap 48px, alignment center
│
│   ├── Section Header
│   │   ├── H2: "What Parents Can Do"
│   │   │   Font: Display/H2 (30px, Bold)
│   │   │   Alignment: center
│   │   │
│   │   └── Paragraph: "Everything you need to stay involved in your child's education."
│   │       Font: Body/Base, color/muted-text
│   │       Alignment: center
│   │
│   └── Feature Cards (3 columns, gap 24px)
│       Each card: RP/Card (shadow/sm, padding/lg, border)
│       Width: (1440 - 240 - 48) / 3 = ~384px
│       Height: 240px
│       Layout: Vertical, gap 16px, padding 24px
│
│       Card 1:
│       ├── Icon: 📊 (40px)
│       ├── H4: "Monitor Progress"
│       │   Font: Display/H4 (20px, Semibold)
│       ├── Body: "Track OPS scores, attendance, and goals in real-time."
│       │   Font: Body/SM, color/muted-text
│       └── Accent border: 4px left border, color/secondary
│
│       Card 2:
│       ├── Icon: 💰 (40px)
│       ├── H4: "Pay Fees Online"
│       ├── Body: "Secure Paystack payments via card, mobile money, bank transfer, or USSD."
│       └── Accent border: 4px left border, color/accent
│
│       Card 3:
│       ├── Icon: ✉ (40px)
│       ├── H4: "Message Teachers"
│       ├── Body: "Direct communication channel for school updates and concerns."
│       └── Accent border: 4px left border, color/success
│
├── How It Works Section
│   Width: 1440px, Height: auto
│   Padding: 80px 120px
│   BG: color/surface
│   Layout: Vertical, gap 48px, alignment center
│
│   ├── H2: "How It Works" (centered)
│   │
│   └── Steps (3 columns, gap 32px)
│       Each step: Vertical, gap 12px, alignment center
│
│       Step 1:
│       ├── Circle (64px, BG: color/secondary, text: "①" white 24px bold)
│       ├── H5: "Create Account"
│       ├── Body/SM: "Register as a parent with your details."
│
│       Step 2:
│       ├── Circle (64px, BG: color/accent, text: "②" white 24px bold)
│       ├── H5: "Register Child"
│       ├── Body/SM: "Add your child's information and get credentials."
│
│       Step 3:
│       ├── Circle (64px, BG: color/success, text: "③" white 24px bold)
│       ├── H5: "Start Monitoring"
│       ├── Body/SM: "Track progress, pay fees, and communicate."
│
├── CTA Section
│   Width: 1440px, Height: 200px
│   BG: color/primary (#0B3A66)
│   Padding: 60px 120px
│   Layout: Vertical, gap 16px, alignment center
│
│   ├── H2: "Ready to Get Started?"
│   │   Color: color/inverse-text (#FFF)
│   │   Alignment: center
│   │
│   ├── RP/Button (accent, lg)
│   │   Text: "Register as Parent"
│   │   → /register/parent
│
└── RP/PublicFooter
    Width: 1440px
```

### Mobile Light (375px)

```
Frame: REG-01-Landing-Mobile-Light
Width: 375px
Height: auto
BG: color/background

├── RP/PublicNavbar (hamburger variant)
│   Width: 375px, Height: 56px
│   Logo + hamburger only (no login/register buttons)
│
├── Hero Section
│   Padding: 40px 16px
│   Layout: Vertical, gap 16px
│
│   ├── Badge (info, sm): "🚀 Trusted by 50+ schools"
│   │
│   ├── H1: "Join Your Child's Learning Journey"
│   │   Font: Display/H2 (30px, Bold) — smaller on mobile
│   │
│   ├── Body: same text, Body/Base
│   │
│   └── Button Group (Vertical, full width, gap 12px)
│       ├── RP/Button (primary, lg, full-width)
│       │   Text: "Register as Parent"
│       │
│       └── RP/Button (outline, lg, full-width)
│           Text: "Learn More"
│
├── Features Section
│   Padding: 48px 16px
│   Layout: Vertical, gap 16px
│
│   ├── H2: "What Parents Can Do" (centered)
│   │
│   └── Feature Cards (stacked, gap 16px)
│       Each card: Full width, height auto
│
├── How It Works
│   Padding: 48px 16px
│   Steps stacked vertically
│
├── CTA Section
│   Padding: 40px 16px
│   Full width buttons
│
└── RP/PublicFooter (mobile variant)
```

### Dark Mode Variants
- BG: `color/background` → #0F172A
- Surface: `color/surface` → #1E293B
- Text: `color/header-text` → #F8FAFC
- Body: `color/body-text` → #E2E8F0
- Muted: `color/muted-text` → #94A3B8
- Border: `color/border` → #334155
- CTA Section: Same primary bg

---

## REG-02: PARENT REGISTRATION FORM

### Frame: `RP/Public/REG-02-Form`

**Canvas sizes:** Desktop (1440), Mobile (375) × Light + Dark + Error States

---

### Desktop Light (1440px)

```
Frame: REG-02-Form-Desktop-Light
Width: 1440px
Height: auto (min 800px)
BG: color/background

├── RP/PublicNavbar
│   Width: 1440px, Height: 64px
│
├── Content Area
│   Width: 1440px
│   Padding: 48px 120px
│   Layout: Horizontal, gap 48px, alignment: start
│
│   ├── Form Column (Left, 600px)
│   │   Layout: Vertical, gap 24px
│   │
│   │   ├── Page Title
│   │   │   ├── H2: "Create Parent Account"
│   │   │   │   Font: Display/H2 (30px, Bold)
│   │   │   │   Color: color/header-text
│   │   │   │
│   │   │   └── Body: "Fill in your details to create your parent account."
│   │   │       Font: Body/Base, color/muted-text
│   │   │
│   │   ├── RP/Input (text, md)
│   │   │   Label: "Full Name *"
│   │   │   Placeholder: "Enter your full name"
│   │   │   Required: true (red asterisk)
│   │   │   Width: 100% (fill)
│   │   │
│   │   ├── RP/Input (email, md)
│   │   │   Label: "Email Address *"
│   │   │   Placeholder: "you@example.com"
│   │   │   Required: true
│   │   │
│   │   ├── RP/Input (tel, md)
│   │   │   Label: "Phone Number *"
│   │   │   Placeholder: "+233 XX XXX XXXX"
│   │   │   Required: true
│   │   │
│   │   ├── RP/Input (password, md)
│   │   │   Label: "Password *"
│   │   │   Placeholder: "Min. 8 characters"
│   │   │   Has toggle: true (eye icon)
│   │   │   Helper: "Min 8 characters"
│   │   │
│   │   ├── Password Strength Indicator
│   │   │   Width: 100%, Height: 4px
│   │   │   States:
│   │   │   ├── Weak (0-39%): BG #DC2626, text "Weak"
│   │   │   ├── Medium (40-69%): BG #F59E0B, text "Medium"
│   │   │   └── Strong (70-100%): BG #22C55E, text "Strong"
│   │   │   Font: Caption/Base
│   │   │
│   │   ├── RP/Input (password, md)
│   │   │   Label: "Confirm Password *"
│   │   │   Placeholder: "Re-enter your password"
│   │   │   Has toggle: true
│   │   │
│   │   ├── Divider: 1px color/divider
│   │   │
│   │   ├── Section Title: "Consent & Policies"
│   │   │   Font: Display/H6 (16px, Medium)
│   │   │
│   │   ├── Consent Checkboxes (Vertical, gap 16px)
│   │   │   Each checkbox:
│   │   │   ├── RP/Checkbox (unchecked/checked)
│   │   │   │   Size: 20×20px
│   │   │   │   Unchecked: 2px border #CBD5E1, border-radius 4px
│   │   │   │   Checked: BG color/secondary, white checkmark
│   │   │   │
│   │   │   └── Label text (Body/SM, color/body-text)
│   │   │       With inline link: [Read Terms →] (color/secondary)
│   │   │
│   │   │   1. ☐ "I accept the Terms of Service"
│   │   │   2. ☐ "I accept the Privacy Policy"
│   │   │   3. ☐ "I accept the Payment Responsibility Agreement"
│   │   │   4. ☐ "I consent to Data Processing"
│   │   │
│   │   ├── RP/Button (primary, lg, full-width)
│   │   │   Text: "Create Account"
│   │   │   Width: 100%
│   │   │   Height: 48px
│   │   │
│   │   └── Footer text
│   │       "Already have an account? " + RP/Button (link) "Login"
│   │       Alignment: center
│   │
│   └── Info Column (Right, 400px)
│       Layout: Vertical, gap 16px
│       Padding: 24px
│       BG: color/surface
│       Border: 1px color/border
│       Border Radius: 12px
│       Sticky: top 80px
│
│       ├── H4: "Why Register?"
│       │   Font: Display/H4 (20px, Semibold)
│       │
│       └── Benefit List (Vertical, gap 16px)
│           Each: Horizontal, gap 12px
│           ├── Check icon (20px, color/success)
│           └── Text (Body/SM)
│               1. "Track your child's OPS score in real-time"
│               2. "Receive invoices and pay fees securely"
│               3. "Get action items from teachers"
│               4. "View attendance and progress reports"
│               5. "Message teachers directly"
│
└── RP/PublicFooter
```

### Error State: `REG-02-Form-Desktop-Light-Error`

Same layout with these changes:
- Email field: border 2px `color/danger`, helper "Email already registered" in red
- Password field: border 2px `color/danger`, helper "Password must be at least 8 characters"
- Consent: all unchecked, helper "You must accept all policies to register" in red
- Toast (top-right): "Registration failed. Please check your inputs." (type: danger)

### Loading State: `REG-02-Form-Desktop-Light-Loading`

- Button text replaced with spinner icon + "Creating account..."
- Button disabled
- All inputs disabled

### Mobile (375px)

```
Frame: REG-02-Form-Mobile-Light
Width: 375px
Height: auto
BG: color/background

├── RP/PublicNavbar (mobile)
├── Content Area
│   Padding: 24px 16px
│   Layout: Vertical, gap 24px
│   (Info column hidden on mobile — shown as expandable accordion below form)
│
│   ├── Page Title (centered)
│   │
│   ├── Form fields (full width, stacked)
│   │
│   ├── Consent checkboxes (full width)
│   │
│   ├── Submit button (full width)
│   │
│   └── "Why Register?" (collapsible accordion)
│       ├── RP/Accordion (state: closed)
│       │   Trigger: "Why Register? ▾"
│       │   Content: Benefit list (same as desktop)
│
└── RP/PublicFooter (mobile)
```

---

## REG-03: ADD WARD FORM

### Frame: `RP/Public/REG-03-AddWard`

### Desktop Light (1440px)

```
Frame: REG-03-AddWard-Desktop-Light
Width: 1440px
Height: auto
BG: color/background

├── RP/PublicNavbar (64px)
│
├── Content Area
│   Width: 100%
│   Max-width: 600px (centered)
│   Padding: 48px 24px
│   Layout: Vertical, gap 24px
│
│   ├── Progress Indicator
│   │   Layout: Vertical, gap 8px
│   │
│   │   ├── Step label
│   │   │   Text: "Step 2 of 2"
│   │   │   Font: Body/SM (14px, Medium)
│   │   │   Color: color/muted-text
│   │   │
│   │   ├── Progress Bar (RP/ProgressBar, md, primary)
│   │   │   Width: 100%, Height: 8px
│   │   │   Fill: 75% (step 1 = account, step 2 = child)
│   │   │
│   │   └── Percentage label
│   │       Text: "75%"
│   │       Font: Body/XS
│   │       Color: color/secondary
│   │
│   ├── Card (shadow/sm, padding/lg, border)
│   │   Layout: Vertical, gap 20px
│   │
│   │   ├── H3: "Register Your Child"
│   │   │   Font: Display/H3 (24px, Semibold)
│   │   │
│   │   ├── RP/Input (text, md)
│   │   │   Label: "Child's Full Name *"
│   │   │   Placeholder: "Enter child's full name"
│   │   │   Width: 100%
│   │   │
│   │   ├── RP/Input (date, md)
│   │   │   Label: "Date of Birth *"
│   │   │   Width: 100%
│   │   │
│   │   ├── RP/Select (md)
│   │   │   Label: "Gender"
│   │   │   Placeholder: "Select gender..."
│   │   │   Options: Male, Female, Other
│   │   │   Width: 100%
│   │   │
│   │   ├── RP/Select (md)
│   │   │   Label: "Class to Enroll *"
│   │   │   Placeholder: "Select class..."
│   │   │   Options: Loaded from active school_classes
│   │   │   Width: 100%
│   │   │
│   │   ├── Divider
│   │   │
│   │   ├── Button Group (Horizontal, gap 12px)
│   │   │   ├── RP/Button (primary, lg)
│   │   │   │   Text: "Register Child"
│   │   │   │   Width: 60%
│   │   │   │
│   │   │   └── RP/Button (ghost, lg)
│   │   │       Text: "Skip for Now"
│   │   │       Width: 40%
│   │   │
│   │   └── Tip text
│   │       "💡 Tip: You can add more children later from your dashboard. There is no limit."
│   │       Font: Body/XS, color/muted-text
│   │       Padding: 12px
│   │       BG: color/background
│   │       Border-radius: 8px
│
└── RP/PublicFooter
```

### Mobile (375px)

Same layout, max-width removed, padding 24px 16px, buttons full-width stacked.

---

## REG-04: CREDENTIAL DISPLAY

### Frame: `RP/Public/REG-04-Credentials`

### Desktop Light (1440px)

```
Frame: REG-04-Credentials-Desktop-Light
Width: 1440px
Height: auto
BG: color/background

├── RP/PublicNavbar (64px)
│
├── Content Area
│   Width: 100%
│   Max-width: 560px (centered)
│   Padding: 48px 24px
│   Layout: Vertical, gap 24px
│
│   ├── Success Header
│   │   Layout: Horizontal, gap 12px, alignment center
│   │   ├── Check circle icon (48px, color/success)
│   │   └── H2: "Child Registered Successfully!"
│   │       Font: Display/H2 (30px, Bold)
│   │       Color: color/success
│   │
│   ├── RP/Banner (warning, dismissible)
│   │   Text: "⚠ Please save these credentials. The temporary password will expire on first login."
│   │   Width: 100%
│   │
│   ├── RP/CredentialCard (revealed: false)
│   │   Width: 100%
│   │   Padding: 24px
│   │   Border: 1px color/border
│   │   Border-radius: 12px
│   │   BG: color/surface
│   │
│   │   Layout: Vertical, gap 20px
│   │
│   │   ├── Student Name
│   │   │   "Student Name: Amara Asante"
│   │   │   Font: Display/H4 (20px, Semibold)
│   │   │
│   │   ├── ID Section
│   │   │   Layout: Vertical, gap 4px
│   │   │   ├── Label: "Student ID"
│   │   │   │   Font: Label/SM (12px, Medium)
│   │   │   │   Color: color/muted-text
│   │   │   │
│   │   │   └── ID Value Row
│   │   │       Layout: Horizontal, gap 8px, alignment center
│   │   │       ├── ID Text: "RP-2026-00001"
│   │   │       │   Font: Mono/LG (18px, Bold, JetBrains Mono)
│   │   │       │   Color: color/header-text
│   │   │       │   Padding: 12px 16px
│   │   │       │   BG: color/background
│   │   │       │   Border-radius: 8px
│   │   │       │   Border: 1px color/border
│   │   │       │   Flex: 1
│   │   │       │
│   │   │       └── Copy button (RP/Button, ghost, sm)
│   │   │           Icon: copy (16px)
│   │   │           Tooltip: "Copy to clipboard"
│   │   │
│   │   ├── Password Section
│   │   │   Layout: Vertical, gap 4px
│   │   │   ├── Label: "Temporary Password"
│   │   │   │
│   │   │   └── Password Value Row
│   │   │       Layout: Horizontal, gap 8px, alignment center
│   │   │       ├── Password Text: "••••••••" (or revealed)
│   │   │       │   Font: Mono/LG
│   │   │       │   Same styling as ID
│   │   │       │
│   │   │       ├── Toggle button (ghost, sm)
│   │   │       │   Icon: eye/eye-off (16px)
│   │   │       │   Tooltip: "Reveal password"
│   │   │       │
│   │   │       └── Copy button (ghost, sm)
│   │   │
│   │   └── Class info
│   │       "Class: JSS 2"
│   │       Font: Body/Base
│   │
│   ├── Action Buttons
│   │   Layout: Horizontal, gap 12px, justify: center
│   │   Width: 100%
│   │
│   │   ├── RP/Button (secondary, md)
│   │   │   Icon: copy (16px, left)
│   │   │   Text: "Copy Credentials"
│   │   │   → Copies both ID and password to clipboard
│   │   │   → Toast: "Credentials copied ✓" (success, 3000ms)
│   │   │
│   │   ├── RP/Button (outline, md)
│   │   │   Icon: download (16px, left)
│   │   │   Text: "Download PDF"
│   │   │   → POST /credentials/{student}/pdf
│   │   │   → Downloads PDF
│   │   │
│   │   └── RP/Button (ghost, md)
│   │       Icon: mail (16px, left)
│   │       Text: "Email to Student"
│   │       → Opens email modal
│   │
│   ├── Divider
│   │
│   ├── Navigation Links
│   │   Layout: Vertical, gap 12px, alignment center
│   │
│   │   ├── RP/Button (secondary, lg, full-width)
│   │   │   Icon: plus (16px, left)
│   │   │   Text: "Add Another Ward"
│   │   │   → /register/add-ward
│   │   │
│   │   └── RP/Button (primary, lg, full-width)
│   │       Text: "Go to Dashboard"
│   │       → /parent/dashboard
│
└── RP/PublicFooter
```

### Email Modal State

```
RP/Modal (md)
├── Header: "Send Credentials via Email"
├── Content:
│   ├── RP/Input (email)
│   │   Label: "Email Address"
│   │   Value: parent@email.com (pre-filled)
│   └── Body/SM: "Credentials will be sent as a formatted email with student ID and temporary password."
├── Footer:
│   ├── RP/Button (ghost): "Cancel"
│   └── RP/Button (primary): "Send"
```

---

## INV-01: TEACHER INVITATION LANDING

### Frame: `RP/Public/INV-01-Landing`

### Desktop Light (1440px)

```
Frame: INV-01-Landing-Desktop-Light
Width: 1440px
Height: auto
BG: color/background

├── RP/PublicNavbar (64px)
│
├── Content Area
│   Max-width: 480px (centered)
│   Padding: 80px 24px
│   Layout: Vertical, gap 24px, alignment center
│
│   ├── Icon
│   │   🎓 Graduation cap, 64px
│   │   Color: color/secondary
│   │
│   ├── H2: "You've Been Invited!"
│   │   Font: Display/H2 (30px, Bold)
│   │   Alignment: center
│   │
│   ├── Body
│   │   "Greenfield Academy has invited you to join RP Learning Portal as a teacher."
│   │   Font: Body/Base (16px, Regular)
│   │   Color: color/muted-text
│   │   Alignment: center
│   │
│   ├── RP/Banner (warning)
│   │   Text: "⏰ This invitation expires in 72 hours (June 15, 2026 at 04:14 AM)"
│   │   Width: 100%
│   │
│   ├── RP/Button (primary, lg, full-width)
│   │   Text: "Accept Invitation & Complete Profile"
│   │   → /invite/{token}/register
│   │
│   └── Footer text
│       "Already have an account? " + RP/Button (link) "Login"
│       Alignment: center
│
└── RP/PublicFooter
```

### Error States

#### Expired Token: `INV-01-Landing-Expired`

```
├── Icon: ⏰ (64px, color/warning)
├── H2: "Invitation Expired"
├── Body: "This invitation has expired. Please contact your administrator for a new invitation."
├── RP/Button (outline): "Back to Login"
```

#### Invalid Token: `INV-01-Landing-Invalid`

Standard 404 page with school branding.

#### Already Used: `INV-01-Landing-Used`

```
├── Icon: ✓ (64px, color/success)
├── H2: "Invitation Already Used"
├── Body: "This invitation has already been accepted."
├── RP/Button (primary): "Login to Your Account"
```

---

## INV-02: TEACHER PROFILE COMPLETION

### Frame: `RP/Public/INV-02-Profile`

### Desktop Light (1440px)

```
Frame: INV-02-Profile-Desktop-Light
Width: 1440px
Height: auto
BG: color/background

├── RP/PublicNavbar (64px)
│
├── Content Area
│   Max-width: 640px (centered)
│   Padding: 48px 24px
│   Layout: Vertical, gap 24px
│
│   ├── Header
│   │   ├── H2: "Complete Your Profile"
│   │   │   Font: Display/H2 (30px, Bold)
│   │   │
│   │   └── Body: "Welcome to RP Learning Portal"
│   │       Font: Body/Base, color/muted-text
│   │
│   ├── Card (shadow/sm, padding/lg)
│   │   Layout: Vertical, gap 24px
│   │
│   │   ├── Section: "Basic Information"
│   │   │   ├── H5: "Basic Information"
│   │   │   │   Font: Display/H5 (18px, Medium)
│   │   │   │   Border-bottom: 1px color/divider, padding-bottom 8px
│   │   │   │
│   │   │   ├── RP/Input (text, md) — LOCKED
│   │   │   │   Label: "Full Name"
│   │   │   │   Value: "Dr. Kwame Mensah"
│   │   │   │   Icon-right: lock (16px, color/muted-text)
│   │   │   │   BG: color/disabled-bg
│   │   │   │   State: disabled
│   │   │   │
│   │   │   ├── RP/Input (email, md) — LOCKED
│   │   │   │   Label: "Email"
│   │   │   │   Value: "kwame@greenfield.edu"
│   │   │   │   State: disabled
│   │   │   │
│   │   │   ├── RP/Input (password, md)
│   │   │   │   Label: "Password *"
│   │   │   │   Placeholder: "Create a password"
│   │   │   │   Toggle: eye icon
│   │   │   │
│   │   │   └── RP/Input (password, md)
│   │   │       Label: "Confirm Password *"
│   │   │       Placeholder: "Confirm your password"
│   │   │
│   │   ├── Section: "Personal Details"
│   │   │   ├── H5: "Personal Details"
│   │   │   │
│   │   │   ├── Two-column row (Horizontal, gap 16px)
│   │   │   │   ├── RP/Input (date, md)
│   │   │   │   │   Label: "Date of Birth"
│   │   │   │   │   Width: 50%
│   │   │   │   │
│   │   │   │   └── RP/Input (tel, md)
│   │   │   │       Label: "Phone Number"
│   │   │   │       Placeholder: "+233 XX XXX XXXX"
│   │   │   │       Width: 50%
│   │   │   │
│   │   │   └── (On mobile: stacked, full width each)
│   │   │
│   │   ├── Section: "Professional Details"
│   │   │   ├── H5: "Professional Details"
│   │   │   │
│   │   │   ├── RP/Input (textarea, md)
│   │   │   │   Label: "Qualifications"
│   │   │   │   Placeholder: "B.Ed Mathematics, M.Sc Education..."
│   │   │   │   Rows: 3
│   │   │   │
│   │   │   └── RP/Input (textarea, md)
│   │   │       Label: "Bio"
│   │   │       Placeholder: "Tell us about yourself..."
│   │   │       Rows: 4
│   │   │       Counter: "0/500" (max 500 chars)
│   │   │
│   │   ├── Section: "CV Upload"
│   │   │   ├── H5: "CV Upload"
│   │   │   │
│   │   │   └── RP/FileUpload (state: empty)
│   │   │       Width: 100%
│   │   │       Min-height: 120px
│   │   │       Accepted: PDF, DOC, DOCX
│   │   │       Max size: 5MB
│   │   │       Icon: upload (32px)
│   │   │       Text: "Upload CV"
│   │   │       Subtext: "PDF, DOC, or DOCX. Max 5MB."
│   │   │       Border: 2px dashed color/border
│   │   │
│   │   └── RP/Button (primary, lg, full-width)
│   │       Text: "Complete Registration"
│   │
│   └── (After upload: CV file card)
│       RP/Card (border, padding/sm)
│       Layout: Horizontal, gap 12px, alignment center
│       ├── File icon (24px)
│       ├── File info: "Kwame_Mensah_CV.pdf · 2.4 MB"
│       └── RP/Button (ghost, sm, danger): "Remove"
│
└── RP/PublicFooter
```

### Post-Registration Success: `INV-02-Success`

```
Frame: INV-02-PostRegistration-Desktop-Light
Width: 1440px
BG: color/background

├── RP/PublicNavbar
├── Content
│   Max-width: 480px, centered, padding 80px 24px
│   Layout: Vertical, gap 16px, alignment center
│
│   ├── Check circle (64px, color/success)
│   ├── H2: "Registration Complete!"
│   ├── Body: "Your account is pending approval by the school administrator. You will receive an email once your account has been activated."
│   ├── Body: "Thank you for your patience!"
│   └── RP/Button (outline): "Back to Login"
│
└── RP/PublicFooter
```

---

## AUTH-01: LOGIN

### Frame: `RP/Public/AUTH-01-Login`

### Desktop Light (1440px)

```
Frame: AUTH-01-Login-Desktop-Light
Width: 1440px
Height: auto
BG: color/background

├── RP/PublicNavbar (64px)
│
├── Content Area
│   Max-width: 440px (centered)
│   Padding: 80px 24px
│   Layout: Vertical, gap 24px
│
│   ├── Logo + Title
│   │   Layout: Horizontal, gap 12px, alignment center
│   │   ├── Logo (40×40px)
│   │   └── "RP Learning Portal"
│   │       Font: Display/H4 (20px, Semibold)
│   │       Color: color/header-text
│   │
│   ├── H2: "Welcome Back"
│   │   Font: Display/H2 (30px, Bold)
│   │
│   ├── Body: "Sign in to your account"
│   │   Font: Body/Base, color/muted-text
│   │
│   ├── Form
│   │   Layout: Vertical, gap 16px
│   │
│   │   ├── RP/Input (email, lg)
│   │   │   Label: "Email Address"
│   │   │   Placeholder: "Enter your email"
│   │   │   Icon-left: mail (20px)
│   │   │   Width: 100%
│   │   │
│   │   ├── RP/Input (password, lg)
│   │   │   Label: "Password"
│   │   │   Placeholder: "Enter your password"
│   │   │   Icon-left: lock (20px)
│   │   │   Toggle: eye icon
│   │   │   Width: 100%
│   │   │
│   │   ├── Remember + Forgot row
│   │   │   Layout: Horizontal, justify: space-between, alignment center
│   │   │   ├── RP/Checkbox
│   │   │   │   Label: "Remember me"
│   │   │   │
│   │   │   └── RP/Button (link, sm)
│   │   │       Text: "Forgot Password?"
│   │   │       → /forgot-password
│   │   │
│   │   └── RP/Button (primary, lg, full-width)
│   │       Text: "Sign In"
│   │       Height: 48px
│   │       Width: 100%
│   │
│   ├── Divider
│   │   Text: "Don't have an account?"
│   │   Layout: Horizontal, gap 8px, alignment center
│   │   Line: 1px color/border (flex: 1)
│   │
│   └── RP/Button (outline, lg, full-width)
│       Text: "Register as Parent"
│       → /register
│
└── RP/PublicFooter
```

### Error State: `AUTH-01-Login-Error`

```
Changes from default:
├── Password field: border 2px color/danger
├── Helper text: "Invalid email or password" (color/danger)
├── RP/Banner (danger): "The email or password you entered is incorrect."
└── All other fields unchanged
```

### Loading State

```
├── Button text: spinner + "Signing in..."
├── Button disabled
├── All inputs disabled
```

### Mobile (375px)

```
Width: 375px
├── RP/PublicNavbar (mobile)
├── Content
│   Padding: 40px 16px
│   Same fields, full width
│   Button: full width
└── RP/PublicFooter
```

---

## AUTH-02: FORGOT PASSWORD

### Frame: `RP/Public/AUTH-02-Forgot`

### Desktop Light

```
Frame: AUTH-02-Forgot-Desktop-Light
Width: 1440px
BG: color/background

├── RP/PublicNavbar
├── Content
│   Max-width: 440px, centered, padding 80px 24px
│   Layout: Vertical, gap 24px
│
│   ├── H2: "Reset Your Password"
│   ├── Body: "Enter your email and we'll send you a reset link."
│   │
│   ├── RP/Input (email, lg)
│   │   Label: "Email Address"
│   │   Placeholder: "Enter your email"
│   │   Width: 100%
│   │
│   ├── RP/Button (primary, lg, full-width)
│   │   Text: "Send Reset Link"
│   │
│   └── RP/Button (ghost, md)
│       Icon: arrow-left (16px, left)
│       Text: "Back to Login"
│
└── RP/PublicFooter
```

### Post-Submit State: `AUTH-02-Forgot-Success`

```
├── Icon: ✉ (48px, color/secondary)
├── H2: "Check Your Email"
├── Body: "We've sent a password reset link to"
├── Email: "kwame@greenfield.edu" (bold, color/header-text)
├── Body: "The link will expire in 60 minutes."
├── Body: "Didn't receive it?"
│   └── RP/Button (link): "Resend Email"
└── RP/Button (ghost): "Back to Login"
```

---

## AUTH-03: RESET PASSWORD

### Frame: `RP/Public/AUTH-03-Reset`

### Desktop Light

```
Frame: AUTH-03-Reset-Desktop-Light
Width: 1440px
BG: color/background

├── RP/PublicNavbar
├── Content
│   Max-width: 440px, centered, padding 80px 24px
│   Layout: Vertical, gap 24px
│
│   ├── H2: "Create New Password"
│   │
│   ├── RP/Input (password, lg)
│   │   Label: "New Password"
│   │   Placeholder: "Enter new password"
│   │   Toggle: eye icon
│   │   Width: 100%
│   │
│   ├── Password Strength Indicator
│   │
│   ├── RP/Input (password, lg)
│   │   Label: "Confirm New Password"
│   │   Placeholder: "Confirm new password"
│   │   Toggle: eye icon
│   │
│   └── RP/Button (primary, lg, full-width)
│       Text: "Reset Password"
│
└── RP/PublicFooter
```

### Success State: `AUTH-03-Reset-Success`

```
├── Check circle (48px, color/success)
├── H2: "Password Reset Successful!"
├── Body: "Your password has been updated. You can now sign in with your new password."
└── RP/Button (primary, lg): "Sign In →"
```

---

## AUTH-04: EMAIL VERIFICATION

### Frame: `RP/Public/AUTH-04-Verify`

### Desktop Light

```
Frame: AUTH-04-Verify-Desktop-Light
Width: 1440px
BG: color/background

├── RP/PublicNavbar
├── Content
│   Max-width: 440px, centered, padding 80px 24px
│   Layout: Vertical, gap 24px, alignment center
│
│   ├── Icon: ✉ (48px, color/secondary)
│   │
│   ├── H2: "Verify Your Email" (centered)
│   │
│   ├── Body (centered): "Thanks for signing up! Before getting started, please verify your email address by clicking the link we sent to:"
│   │
│   ├── Email display
│   │   "kwame@greenfield.edu"
│   │   Font: Body/Base, bold, color/header-text
│   │   Padding: 12px 16px
│   │   BG: color/background
│   │   Border-radius: 8px
│   │   Text-align: center
│   │
│   ├── RP/Button (outline, md)
│   │   Text: "Resend Verification Email"
│   │
│   └── RP/Button (ghost, md)
│       Icon: arrow-left
│       Text: "Back to Login"
│
└── RP/PublicFooter
```

---

## PROTOTYPE INTERACTIONS

### REG Flow Prototype

| Step | Screen | Trigger | Action |
|------|--------|---------|--------|
| 1 | REG-01 | Click "Register as Parent" | Navigate → REG-02 |
| 2 | REG-02 | Fill all fields + consent | Click "Create Account" |
| 3 | REG-02 | Submit success | Navigate → REG-03 |
| 4 | REG-03 | Fill child info | Click "Register Child" |
| 5 | REG-03 | Submit success | Navigate → REG-04 |
| 6 | REG-04 | Click "Go to Dashboard" | Navigate → PAR-01 |

### INV Flow Prototype

| Step | Screen | Trigger | Action |
|------|--------|---------|--------|
| 1 | INV-01 | Click "Accept Invitation" | Navigate → INV-02 |
| 2 | INV-02 | Fill profile + upload CV | Click "Complete Registration" |
| 3 | INV-02 | Submit success | Show success state |

### Auth Flow Prototype

| Step | Screen | Trigger | Action |
|------|--------|---------|--------|
| 1 | AUTH-01 | Click "Forgot Password?" | Navigate → AUTH-02 |
| 2 | AUTH-02 | Click "Send Reset Link" | Show success state |
| 3 | AUTH-01 | Login success | Navigate → role dashboard |
| 4 | AUTH-01 | Click "Register as Parent" | Navigate → REG-01 |