# CandleCraft Academy Figma Frame Plan

## Status

This is a Figma-ready wireframe specification based on the approved onboarding MVP scope, user stories, ERD, assumptions, and low-fidelity wireframes already prepared in this repository.

Use it as the reference when recreating or refining the CandleCraft onboarding screens in Figma or when translating those frames into implementation-ready UI decisions.

## Product Direction Used

- Visual tone: crafty
- Audience emphasis: both learner groups, with copy slightly biased toward learners
- Form scope: general enquiries only
- Admin inbox scope: status, notes, search, and filtering included
- Breakpoints: separate desktop and mobile wireframes
- CAPTCHA: generic provider placeholder
- Output style: full frame plan with layout, components, spacing, and content guidance

## Design Intent

The interface should feel handmade, warm, and welcoming without becoming messy. The public experience should suggest craft, texture, and approachability. The admin experience should stay cleaner and more functional, while still belonging to the same brand.

## Suggested Figma File Structure

Pages:

1. `00 Foundations`
2. `01 Public - Desktop`
3. `02 Public - Mobile`
4. `03 Admin - Desktop`
5. `04 Admin - Mobile`
6. `05 Components`
7. `06 Notes`

## Foundations

## Frame presets

- Desktop wireframes: `1440 x 2200` or height as needed
- Mobile wireframes: `390 x 1800` or height as needed
- Admin desktop: `1440 x 1200`
- Admin mobile: `390 x 844`

## Grid

Desktop public:

- 12-column grid
- Margin: `80`
- Gutter: `24`

Desktop admin:

- 12-column grid
- Margin: `48`
- Gutter: `24`

Mobile:

- 4-column grid
- Margin: `20`
- Gutter: `16`

## Spacing scale

- `4, 8, 12, 16, 24, 32, 48, 64, 96`

## Suggested style tokens

These are wireframe-level direction tokens, not locked brand values.

- Background base: warm off-white
- Surface: soft cream
- Border: muted clay grey
- Accent 1: terracotta
- Accent 2: sage or muted olive
- Text primary: charcoal brown
- Success: muted moss green
- Warning/error: warm brick red

Typography direction:

- Public headings: expressive serif or humanist display style
- Public body: readable sans or soft serif
- Admin UI: cleaner sans, lower decoration

## Component Inventory

Public components:

- Header / navigation
- Hero section
- Value cards
- Program chips
- CTA button primary
- CTA button secondary
- Section heading block
- Testimonial / trust card
- Contact form field
- Dropdown / select
- Text area
- Checkbox
- CAPTCHA placeholder block
- Inline validation message
- Success panel
- Footer

Admin components:

- Admin top bar
- Search field
- Filter chip group
- Status badge
- Inbox table row
- Mobile message card
- Detail metadata block
- Note editor panel
- Status selector
- Save button
- Empty state panel
- Auth form card

## Public Frames

## Frame P1: Landing Page - Desktop

Frame name: `P1 Landing Desktop`

Purpose:

- Attract visitors
- Explain the academy simply
- Move visitors into the enquiry flow

Target frame size:

- `1440 x 2200`

Layout:

- Sticky header
- Multi-section vertical scroll layout

Sections top to bottom:

1. Header
2. Hero
3. Why learn here
4. What you can explore
5. How enquiries work
6. Trust / reassurance
7. Final CTA strip
8. Footer

Section details:

Header:

- Left: wordmark `CandleCraft Academy`
- Right: nav links `About`, `Programs`, `Enquire`
- CTA button: `Send an Enquiry`

Hero:

- Left column:
  - Eyebrow: `Creative tutoring in pottery and knitting`
  - H1: learner-focused headline
  - Supporting text explaining beginner-friendly, welcoming learning
  - Primary CTA: `Send an Enquiry`
  - Secondary CTA: `How it works`
- Right column:
  - Large visual placeholder with handmade/craft mood note
  - Optional overlay chips: `Pottery`, `Knitting`, `Beginner Friendly`

Why learn here:

- Three horizontally aligned value cards
- Suggested card titles:
  - `Learn by making`
  - `Beginner-friendly guidance`
  - `Warm, creative environment`

What you can explore:

- Two main program blocks:
  - Pottery
  - Knitting
- Small note for unsure visitors:
  - `Not sure where to start? Send a general enquiry.`

How enquiries work:

- Three-step horizontal process strip:
  - `Tell us what you're interested in`
  - `We review your enquiry`
  - `We get back to you`

Trust / reassurance:

- Short founder/business intro block
- Placeholder quote or reassurance panel
- Information note:
  - `General enquiries only in this MVP`

Final CTA strip:

- Short headline
- Supporting line
- CTA button

Footer:

- Business name
- Small contact note
- Admin login text link placed quietly, not prominently

Desktop notes:

- Keep hero asymmetrical and crafted rather than sterile
- Use rounded cards and soft borders instead of sharp corporate tables

## Frame P2: Contact / Enquiry - Desktop

Frame name: `P2 Contact Desktop`

Purpose:

- Let visitors submit a valid enquiry with minimal friction

Target frame size:

- `1440 x 1600`

Layout:

- Two-column layout
- Left: explanatory content
- Right: form card

Left column:

- Page title
- Short intro paragraph
- Small list of what to include:
  - interest area
  - who the enquiry is for
  - what they want help with

Right column form card:

- Full name
- Email
- Phone (optional)
- Interest area select
- Subject
- Message
- Consent checkbox
- CAPTCHA placeholder block
- Submit button

Inline states to show in Figma:

- Default field
- Error field
- Success-neutral state
- CAPTCHA error block

Helper text:

- Under email: `We will only use this to reply to your enquiry.`
- Under message: prompt example

## Frame P3: Contact Success - Desktop

Frame name: `P3 Contact Success Desktop`

Purpose:

- Confirm submission and provide a calm end state

Target frame size:

- `1440 x 900`

Layout:

- Centered success panel on warm background

Content:

- Success icon placeholder
- Heading: enquiry received
- Short follow-up message
- Primary CTA: `Back to home`
- Secondary link: `Send another enquiry`

## Public Mobile Frames

## Frame P4: Landing Page - Mobile

Frame name: `P4 Landing Mobile`

Purpose:

- Preserve the desktop content hierarchy on a narrow screen

Target frame size:

- `390 x 2200`

Layout changes from desktop:

- Header collapses to logo + menu/CTA
- Hero becomes single column
- Value cards stack vertically
- Program blocks stack
- Process strip becomes three stacked steps
- Final CTA remains full-width

Key mobile rules:

- CTA should appear within the first screen
- Paragraphs should stay short
- Avoid more than two stacked buttons in one area

## Frame P5: Contact / Enquiry - Mobile

Frame name: `P5 Contact Mobile`

Purpose:

- Make the form comfortable to complete on a phone

Target frame size:

- `390 x 1700`

Layout:

- Single-column card layout
- Form fields full width
- CAPTCHA placeholder full width
- Sticky bottom submit button optional in notes only

States to include:

- Default
- Validation error state

## Frame P6: Contact Success - Mobile

Frame name: `P6 Contact Success Mobile`

Purpose:

- Simple, readable confirmation on mobile

Target frame size:

- `390 x 844`

Layout:

- Centered vertical stack
- Large success heading
- One primary CTA

## Admin Frames

## Frame A1: Admin Login - Desktop

Frame name: `A1 Admin Login Desktop`

Purpose:

- Secure entry point for admins

Target frame size:

- `1440 x 1024`

Layout:

- Centered auth card on simplified branded background

Card contents:

- Small logo
- Title: `Admin login`
- Email / username field
- Password field
- Login button
- Error message area

Design note:

- Keep admin more restrained than public pages
- Retain brand warmth through color and subtle shape, not decorative clutter

## Frame A2: Admin Inbox - Desktop

Frame name: `A2 Admin Inbox Desktop`

Purpose:

- Let admin scan, search, filter, and access enquiries quickly

Target frame size:

- `1440 x 1200`

Layout:

- Top admin bar
- Search and filter control row
- Message table below

Top bar:

- Left: `CandleCraft Admin`
- Right: admin name, logout

Control row:

- Search field
- Status filter chips: `All`, `New`, `In Progress`, `Resolved`, `Spam`
- Optional interest filter dropdown

Table columns:

- Name
- Interest area
- Subject
- Submitted
- Status
- Last updated
- Action

States to design:

- Populated inbox
- Empty inbox
- Empty filtered results

## Frame A3: Message Detail - Desktop

Frame name: `A3 Message Detail Desktop`

Purpose:

- Review and manage a specific enquiry

Target frame size:

- `1440 x 1200`

Layout:

- Two-column detail view

Left column:

- Back link to inbox
- Message identity block
- Contact details block
- Message body block

Right column:

- Status selector
- Admin notes text area
- Save changes button
- Small metadata panel:
  - submitted at
  - updated at
  - reviewed by

States:

- Default
- Save success toast note
- Save error note

## Frame A4: Admin Inbox - Mobile

Frame name: `A4 Admin Inbox Mobile`

Purpose:

- Allow essential triage on mobile without table compression issues

Target frame size:

- `390 x 1200`

Layout:

- Compact header
- Search field
- Horizontal scroll or stacked filter chips
- List of message cards instead of table

Message card fields:

- Name
- Interest area
- Submitted date
- Status badge
- Subject snippet
- Open action

## Frame A5: Message Detail - Mobile

Frame name: `A5 Message Detail Mobile`

Purpose:

- Preserve full review flow on phone-sized layouts

Target frame size:

- `390 x 1200`

Layout:

- Single-column stacked detail view
- Persistent `Save changes` button near bottom of screen optional

Order:

1. Back link
2. Message summary
3. Contact info
4. Message body
5. Status selector
6. Notes field
7. Save button

## Suggested Content for Wireframe Copy

Public headline options:

- `A warm place to begin pottery and knitting`
- `Creative learning for curious hands`
- `Pottery and knitting tutoring for learners at every starting point`

Public support copy direction:

- welcoming
- beginner-safe
- practical
- no exaggerated claims

Admin labels:

- Keep straightforward and operational
- Avoid marketing language in admin frames

## Component Variants To Build In Figma

Buttons:

- Primary
- Secondary
- Text link
- Destructive text link

Inputs:

- Default
- Focus
- Error
- Disabled

Badges:

- New
- In progress
- Resolved
- Spam

Cards:

- Public content card
- Program card
- Admin message card
- Empty state card

## Notes for Handoff

- The public design should feel crafted and tactile, not corporate.
- The admin design should prioritize speed and clarity over decorative styling.
- Do not design booking, payments, parent portals, student dashboards, or AI features into these frames.
- Treat CAPTCHA as a flexible integration area with a generic placeholder component.
- Keep the subject field visible in wireframes, but it can be downgraded in implementation if the team decides it is unnecessary.

## Remaining Non-Blocking Assumptions

- Search is included in admin inbox because the user asked for the full set of admin tools.
- Internal admin notes are included in the detail screen.
- The landing page speaks to both learner groups, but visual/copy bias should favor learners rather than parent administration concerns.
