Avelia

Appearance

Avelia: AI Design Workshop Briefing ​

Project Theme: The Private Sanctuary for the Family Journey. Core Aesthetic: Calm-Tech, Minimalist, Clinical-but-Warm, High-End.

1. The Design Language (The "Vibe") ​

Avelia is not a "cutesy" baby app. It is a Sovereign Health Tool. The design should feel as secure as a banking app but as intimate as a shared diary.

  • Primary Color: #e6194c (Vibrant Red) - Used for critical actions, medication alerts, and milestones.
  • Secondary Color: #1a1a2e (Deep Navy) - Used for primary text and structural elements.
  • Background: #fafafc (Off-White) - Generous use of white space to reduce cognitive load.
  • UI Style: "Glass-morphism" (translucent cards), soft shadows, organic rounded corners (16px+).

2. Key UI Screens for Mockups ​

Screen A: The "Safe Harbor" Onboarding ​

  • Concept: The entry point. It must communicate privacy immediately.
  • Visuals: A clean, centered heart-lock logo in #e6194c.
  • Copy: "Your Journey. Your Keys. Your Data."
  • CTA: Two primary buttons: "Start Solo" or "Invite Partner."

Screen B: The "Snapshot" Dashboard (Stage: IVF) ​

  • Concept: A glance at today's critical tasks.
  • Visuals:
    • A top header showing the current stage: "IVF Cycle - Day 14."
    • A prominent card for Medication Reminders with checkmarks.
    • A "Partner's Shared Moment" card showing a note from the other user.
    • A large, floating #e6194c action button with a "+" icon.

Screen C: The "Us" Shared Feed ​

  • Concept: The combined chronological history.
  • Visuals:
    • A timeline view with "Shared" and "Private" badges.
    • Entries from both partners (Sarah: "Injection done!", Mark: "Feeling hopeful").
    • Photos/Journal entries rendered in elegant, rounded cards.

Screen D: The "Medication Vault" (Log) ​

  • Concept: Quick, friction-less logging.
  • Visuals:
    • A clean list of meds (Gonal-F, Menopur).
    • A slider for dosage or time.
    • A prominent "Private | Shared" toggle switch.

3. Visual Assets (AI Prompts) ​

For App UI (v0.dev / Galileo AI / Figma AI): ​

"Design a high-fidelity mobile app UI for a privacy-first family tracking app called Avelia. Primary color #e6194c (vibrant red). Theme is clean, minimalist, and clinical-but-warm. Use glass-morphism cards on a #fafafc off-white background. Screen should show a medication schedule for IVF, a partner's shared note, and a floating action button. Professional, modern, calm-tech aesthetic."

For Brand/Icons (Midjourney / DALL-E): ​

"Minimalist 3D icon of a stylized heart combined with a secure padlock. Material is frosted glass and matte #e6194c red. High-end, tech-startup aesthetic, isolated on a white background, 8k resolution, cinematic lighting."

4. The User Flow (The Logic) ​

  1. Identity: User enters email -> App generates a local salt -> User sets password -> MEK is derived locally.
  2. Onboarding: User chooses "IVF / Assisted" stage.
  3. Interaction: User logs an injection -> App prompts "Share with Mark?" -> User flips toggle -> Entry appears in the "Us" feed instantly.
  4. Sync: Encrypted blob is sent to the NestJS backend for storage.

Private by design.