bright-holaaa

byMynor Mejia

Holaaa

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for bright-holaaa

1. Introduction

bright-holaaa is a personal AI study companion. A student uploads their own study notes, and the app's own built-in AI turns those notes into a study plan, quizzes, podcasts, flashcards, and additional study materials beyond those four types. The product is modeled on the Astra AI-style study-generation experience: the student's own material is the input, and a personalized set of study aids is the output.

The audience is a single active human role: the Student / Note Owner — someone who already has their own notes and wants them converted into a usable, personalized study plan and study aids. The tone of the product is warm, informal, and encouraging ("Holaaa"), a friend who turns chaos into a plan rather than a productivity tool that grades you. It is designed for late-night, often-solo use on a phone as well as desktop.

This document defines the current delivery: the pages, the behavior, the AI generation responsibilities, the identity continuity needed to keep a student's notes and generated materials durable and privately owned, and the visual and interaction direction.

Page 1 of 33

2. System Overview

bright-holaaa is a first-party web application with its own built-in AI. The student creates an account, uploads their study notes, and triggers generation. The built-in AI processes the uploaded notes and produces:

  • a study plan,
  • quizzes (which the student can take),
  • podcasts (which the student can listen to),
  • flashcards (which the student can review),
  • additional study materials beyond those four types.

All uploaded notes and all generated study content are durable and privately owned by the student who created them. Because the student independently begins using the application and must retain ownership of their notes and generated materials across sessions, the application owns identity: self-service enrollment establishes a new account, and returning verification restores access to stored notes and generated study materials.

Actors

  • Student / Note Owner (active human persona) — uploads notes, triggers generation, and studies from the generated materials.
  • Built-in AI (non-persona system actor) — processes uploaded notes to generate the study plan, quizzes, podcasts, flashcards, and additional study materials.
  • Application backend and storage (non-persona system actor) — persists notes, generated materials, and account ownership.

Narrow exclusions

Page 2 of 33
  • No stock photography and no 3D renders of generic students are used in the product's imagery.
  • No blue-indigo primary or accent color appears anywhere in the product.
  • No gradient-blob heroes and no glassmorphism panels.
  • No uniform grid of identical hover-lift cards.
  • No centered headline + subtext + blue button SaaS hero.
  • No cold, clinical, dashboard-first framing of the product.
  • The generic indigo/blue-on-white SaaS template is forbidden for this project.
Page 3 of 33

2a. Product Interpretation and Delivery Boundary

Delivery ownership. bright-holaaa is delivered as a first-party custom web application. The student interacts with application-owned pages for uploading notes, viewing the generated study plan, taking quizzes, listening to podcasts, reviewing flashcards, and accessing additional generated materials. The built-in AI is an application-owned capability: it is the app's own AI, not a third-party surface the student is sent to.

Access ownership. The application owns identity. The Landing page is anonymously reachable and explains what the product does. Sign Up and Login are anonymously reachable entry surfaces that establish or restore the student's identity. Notes, Study Plan, Quizzes, Podcasts, Flashcards, and Materials require login, because each of them reads or writes durable, student-owned state — uploaded notes and generated study content — that must remain bound to the correct student across sessions and devices.

Current vs. future boundary. Everything described in this document is current. The "muchísimo más" (much more) in the brief is honored as the current Materials capability: additional study-material generation beyond study plans, quizzes, podcasts, and flashcards. No specific future-only feature set is committed here beyond that current additional-materials capability.

2b. Source Content Inventory

Not applicable. No reference directive declares content_source; the Astra AI reference is feature_reference with inspiration_only authority and supplies no factual content, names, copy, or data to inventory.

2c. Page Content and Component Coverage

Page 4 of 33

Landing

  • Information / state: Anonymous first impression. Explains that the student's personal study notes can become an AI-generated study plan and study materials. Full-bleed cream (#FFF4E8) hero field.
  • Primary action: A single coral pill CTA — "Sube tus apuntes" — leading to Sign Up.
  • Supporting actions: A secondary text link — "Ver cómo funciona" — that scrolls to the explanation of how notes become study materials; navigation to Login for returning students.
  • Domain entities: Study-material types (Plan, Quiz, Podcast, Flashcards, Resúmenes, Mapas) as presented concepts only.
  • Component responsibilities:
    • Oversized Sora 800 headline spanning the viewport at desktop, with the word "apuntes" in coral (#E8503A) and "plan" in sunflower (#F5B301).
    • Custom character illustration of a student surrounded by floating cards labelled Quiz, Podcast, Flashcards, Plan; cards overlap the character and bleed slightly off the right edge.
    • Bottom-edge marquee of study-material words in Sora 700 uppercase, alternating ink and coral.
    • Section-to-section color blocking: cream → deep teal (#0E6B63) → cream → soft lilac (#C9B6F0), hard edges with rounded cards inside.
    • Spot illustrations for each generated material type.
  • States:
    • Loading: Not applicable (static entry surface).
    • Empty: Not applicable.
    • Success: The student understands the product and can proceed to Sign Up or Login.
    • Error: Not applicable.
    • Recovery: Not applicable.
Page 5 of 33

Sign Up

  • Information / state: Anonymous self-service enrollment surface. Establishes the student's account so their uploaded notes and generated study content have a durable, private owner.
  • Primary action: Create the account.
  • Supporting actions: Navigate to Login if the student already has an account; return to Landing.
  • Domain entities: Student account (identity), credential.
  • Component responsibilities: Enrollment form; validation feedback; link to Login.
  • States:
    • Loading: Submission in progress.
    • Empty: Initial form state.
    • Success: Account created; the student proceeds to Notes.
    • Error: Invalid or incomplete input, or enrollment failure; the form retains entered values and shows a recoverable message.
    • Recovery: The student corrects input and resubmits, or switches to Login.
Page 6 of 33

Login

  • Information / state: Anonymous returning-verification surface. Restores access to the student's durable notes, study plan, quizzes, podcasts, flashcards, and other generated materials.
  • Primary action: Verify identity and enter the app.
  • Supporting actions: Navigate to Sign Up; return to Landing.
  • Domain entities: Student account (identity), credential.
  • Component responsibilities: Verification form; validation feedback; link to Sign Up.
  • States:
    • Loading: Verification in progress.
    • Empty: Initial form state.
    • Success: Identity verified; the student lands on Notes with prior content available.
    • Error: Incorrect or unrecognized credentials; a recoverable message is shown without discarding entered values.
    • Recovery: The student retries, or switches to Sign Up.
Page 7 of 33

Notes

  • Information / state: The student's uploaded study notes, stored durably as the source material for all generated study content. Shows which notes exist and which have been used for generation.
  • Primary action: Upload study notes.
  • Supporting actions: Trigger generation of the study plan, quizzes, podcasts, flashcards, and additional materials from the uploaded notes; review the list of uploaded notes; remove or replace a note.
  • Domain entities: Note (uploaded source material), generation request, generated-material set.
  • Component responsibilities:
    • Large, friendly drop zone with a character peeking over its edge.
    • Upload control and upload progress.
    • Note list with per-note status.
    • Generation trigger and per-material generation status.
    • "Generating" state: a character with a spinning pencil and a pulsing accent dot (#F5B301).
  • States:
    • Loading: Note list and generation statuses loading.
    • Empty: No notes uploaded yet; the drop zone is the dominant element with an inviting prompt.
    • Success: Notes uploaded and stored; generation completes and the student is offered the generated materials.
    • Error: Upload failure or generation failure; the affected note or material is marked and the student can retry.
    • Recovery: Retry upload or retry generation without losing already-stored notes.
Page 8 of 33

Study Plan

  • Information / state: The study plan generated from the student's uploaded notes. Displays the plan's structure and progress.
  • Primary action: Follow the study plan.
  • Supporting actions: Mark plan items as done; return to Notes to add or change source material and regenerate.
  • Domain entities: Study plan, plan item, progress state.
  • Component responsibilities: Plan presentation; coral (#E8503A) study-plan progress bar; per-item completion controls.
  • States:
    • Loading: Plan loading or generation in progress.
    • Empty: No plan generated yet; prompt to upload notes and generate.
    • Success: Plan displayed with progress tracked.
    • Error: Generation failed or plan unavailable; retry offered.
    • Recovery: Regenerate from Notes.
Page 9 of 33

Quizzes

  • Information / state: Quizzes generated from the student's uploaded notes, and the student's quiz-taking state.
  • Primary action: Take a generated quiz.
  • Supporting actions: Select a quiz; answer questions; see results; retake; return to Notes to regenerate.
  • Domain entities: Quiz, question, answer, result.
  • Component responsibilities: Quiz list; question-and-answer interface; result display; retake control.
  • States:
    • Loading: Quiz list or quiz content loading.
    • Empty: No quizzes generated yet; prompt to upload notes and generate.
    • Success: Quiz completed with results shown.
    • Error: Quiz unavailable or generation failed; retry offered.
    • Recovery: Regenerate from Notes or retake an existing quiz.
Page 10 of 33

Podcasts

  • Information / state: Podcasts generated from the student's uploaded notes, available for listening.
  • Primary action: Listen to a generated podcast.
  • Supporting actions: Select a podcast; play, pause, and scrub; return to Notes to regenerate.
  • Domain entities: Podcast (generated audio material), playback state.
  • Component responsibilities: Podcast list; audio player; playback controls; headphone-wearing podcast character illustration.
  • States:
    • Loading: Podcast list or audio loading.
    • Empty: No podcasts generated yet; prompt to upload notes and generate.
    • Success: Podcast plays through with playback state visible.
    • Error: Audio unavailable or generation failed; retry offered.
    • Recovery: Regenerate from Notes or retry playback.
Page 11 of 33

Flashcards

  • Information / state: Flashcards generated from the student's uploaded notes, available for review.
  • Primary action: Review flashcards.
  • Supporting actions: Flip a card; move to the next or previous card; return to Notes to regenerate.
  • Domain entities: Flashcard (front/back), review position.
  • Component responsibilities: Flashcard deck; flip interaction; navigation between cards; quiz-card character illustration.
  • States:
    • Loading: Deck loading.
    • Empty: No flashcards generated yet; prompt to upload notes and generate.
    • Success: Deck reviewed through to the end.
    • Error: Deck unavailable or generation failed; retry offered.
    • Recovery: Regenerate from Notes.
Page 12 of 33

Materials

  • Information / state: Additional study materials generated from the student's uploaded notes, beyond the study plan, quizzes, podcasts, and flashcards.
  • Primary action: Open and use an additional generated study material.
  • Supporting actions: Browse the generated materials; return to Notes to regenerate.
  • Domain entities: Additional generated study material.
  • Component responsibilities: Materials list; material viewer; spot illustrations for each generated material type.
  • States:
    • Loading: Materials list or material content loading.
    • Empty: No additional materials generated yet; prompt to upload notes and generate.
    • Success: Material opened and usable.
    • Error: Material unavailable or generation failed; retry offered.
    • Recovery: Regenerate from Notes.
Page 13 of 33

3. Functional Requirements

Each requirement is a distinct story point with provenance, lifecycle facts, and observable acceptance.

FR-1 — Upload study notes (explicit) As a Student / Note Owner, I should upload my own study notes into the app, so that the app has my material to work from.

  • Trigger/input: The student selects or drops one or more note files in the Notes drop zone.
  • Observable result: The uploaded notes appear in the student's note list and are stored durably under the student's account.
  • Access state: Requires login.
  • Failure/recovery: If an upload fails, the affected note is marked as failed and the student can retry the upload without losing already-stored notes.
  • Continuation: The student can trigger generation from the uploaded notes.

FR-2 — Generate a study plan from uploaded notes (explicit) As a Student / Note Owner, I should have the app generate a study plan from my uploaded notes, so that I have a structured plan built from my own material.

  • Trigger/input: The student triggers generation from the Notes page after uploading notes.
  • Observable result: A study plan generated from the uploaded notes is available on the Study Plan page.
  • Access state: Requires login.
  • Failure/recovery: If generation fails, the student is notified and can retry generation from Notes.
  • Continuation: The student follows the plan and tracks progress.
Page 14 of 33

FR-3 — Generate quizzes from uploaded notes (explicit) As a Student / Note Owner, I should have the app generate quizzes from my uploaded notes, so that I can test myself on my own material.

  • Trigger/input: The student triggers generation from the Notes page after uploading notes.
  • Observable result: Quizzes generated from the uploaded notes are available on the Quizzes page.
  • Access state: Requires login.
  • Failure/recovery: If generation fails, the student is notified and can retry generation from Notes.
  • Continuation: The student takes a generated quiz.

FR-4 — Take a generated quiz (explicit) As a Student / Note Owner, I should take the quizzes generated from my notes, so that I can check my understanding.

  • Trigger/input: The student selects a quiz on the Quizzes page and answers its questions.
  • Observable result: The student's answers are recorded and a result is shown for the completed quiz.
  • Access state: Requires login.
  • Failure/recovery: If a quiz is unavailable, the student can retry or regenerate from Notes.
  • Continuation: The student retakes the quiz or moves to another generated material.
Page 15 of 33

FR-5 — Generate podcasts from uploaded notes (explicit) As a Student / Note Owner, I should have the app generate podcasts from my uploaded notes, so that I can study by listening to my own material.

  • Trigger/input: The student triggers generation from the Notes page after uploading notes.
  • Observable result: Podcasts generated from the uploaded notes are available on the Podcasts page.
  • Access state: Requires login.
  • Failure/recovery: If generation fails, the student is notified and can retry generation from Notes.
  • Continuation: The student listens to a generated podcast.

FR-6 — Listen to a generated podcast (explicit) As a Student / Note Owner, I should listen to the podcasts generated from my notes, so that I can study hands-free.

  • Trigger/input: The student selects a podcast on the Podcasts page and starts playback.
  • Observable result: The podcast plays with visible playback state and controls.
  • Access state: Requires login.
  • Failure/recovery: If audio is unavailable, the student can retry playback or regenerate from Notes.
  • Continuation: The student continues listening or moves to another generated material.
Page 16 of 33

FR-7 — Generate flashcards from uploaded notes (explicit) As a Student / Note Owner, I should have the app generate flashcards from my uploaded notes, so that I can review my own material in card form.

  • Trigger/input: The student triggers generation from the Notes page after uploading notes.
  • Observable result: Flashcards generated from the uploaded notes are available on the Flashcards page.
  • Access state: Requires login.
  • Failure/recovery: If generation fails, the student is notified and can retry generation from Notes.
  • Continuation: The student reviews the generated flashcards.

FR-8 — Review generated flashcards (explicit) As a Student / Note Owner, I should review the flashcards generated from my notes, so that I can memorize key points.

  • Trigger/input: The student opens the Flashcards page and flips through the deck.
  • Observable result: Each card's front and back are shown as the student moves through the deck.
  • Access state: Requires login.
  • Failure/recovery: If the deck is unavailable, the student can retry or regenerate from Notes.
  • Continuation: The student finishes the deck or moves to another generated material.
Page 17 of 33

FR-9 — Generate additional study materials beyond plans, quizzes, podcasts, and flashcards (explicit) As a Student / Note Owner, I should have the app generate additional study materials from my uploaded notes beyond the study plan, quizzes, podcasts, and flashcards, so that I get much more than the four core material types.

  • Trigger/input: The student triggers generation from the Notes page after uploading notes.
  • Observable result: Additional generated study materials are available on the Materials page.
  • Access state: Requires login.
  • Failure/recovery: If generation fails, the student is notified and can retry generation from Notes.
  • Continuation: The student opens and uses a generated material.

FR-10 — Use additional generated study materials (explicit) As a Student / Note Owner, I should open and use the additional study materials generated from my notes, so that I can study from them.

  • Trigger/input: The student selects a material on the Materials page.
  • Observable result: The selected material is displayed and usable.
  • Access state: Requires login.
  • Failure/recovery: If a material is unavailable, the student can retry or regenerate from Notes.
  • Continuation: The student returns to the materials list or to Notes.
Page 18 of 33

FR-11 — Built-in AI processes uploaded notes (explicit) As a Student / Note Owner, I should have the app's own built-in AI process my uploaded notes, so that the study plan, quizzes, podcasts, flashcards, and additional materials are generated from my own material.

  • Trigger/input: The student triggers generation from the Notes page.
  • Observable result: The built-in AI produces the study plan, quizzes, podcasts, flashcards, and additional study materials from the uploaded notes.
  • Access state: Requires login.
  • Failure/recovery: If the AI processing fails, the student is notified and can retry generation from Notes.
  • Continuation: The generated materials become available on their respective pages.

FR-12 — Astra AI-style study generation experience (explicit) As a Student / Note Owner, I should experience study-material generation modeled on Astra AI, so that the app feels like the study-generation experience I asked for.

  • Trigger/input: The student uses the generation flow from Notes.
  • Observable result: The generation flow and its outputs follow the Astra AI-style study-generation experience.
  • Access state: Requires login.
  • Failure/recovery: Same as the underlying generation requirements.
  • Continuation: The student uses the generated materials.
Page 19 of 33

FR-13 — Self-service enrollment (required_inference) As a Student / Note Owner, I should complete self-service enrollment before creating durable study content, so that my uploaded notes and generated study content are privately owned by me.

  • Trigger/input: The student chooses to create an account from the Landing page or Sign Up.
  • Observable result: An account is created and the student can proceed to upload notes.
  • Access state: Anonymous entry; the Sign Up page is reachable without login.
  • Failure/recovery: If enrollment fails or input is invalid, the form retains entered values and shows a recoverable message; the student can correct and resubmit or switch to Login.
  • Continuation: The student lands on Notes and uploads their first notes.

FR-14 — Returning verification (required_inference) As a Student / Note Owner, I should complete returning verification to resume access to my stored notes and generated study materials, so that my durable content is available again in a later session.

  • Trigger/input: The student chooses to log in from the Landing page or Login.
  • Observable result: Identity is verified and the student's previously stored notes and generated materials are available.
  • Access state: Anonymous entry; the Login page is reachable without login.
  • Failure/recovery: If credentials are incorrect or unrecognized, a recoverable message is shown without discarding entered values; the student can retry or switch to Sign Up.
  • Continuation: The student lands on Notes with prior content available.

4. User Personas

Page 20 of 33

Student / Note Owner

Product context. The Student / Note Owner is a student who already has their own study notes and is drowning in them. They use bright-holaaa late at night, often alone, frequently on a phone. They are not looking for a productivity tool that grades them; they want a friend that turns their chaos into a plan.

Primary goal. Turn their own uploaded notes into a usable, personalized study plan and study aids — a study plan, quizzes, podcasts, flashcards, and additional materials — so that their own material becomes something they can actually study from.

Distinct accepted responsibilities.

  • Upload their own study notes into the app (FR-1).
  • Trigger generation of the study plan, quizzes, podcasts, flashcards, and additional materials from those notes (FR-2, FR-3, FR-5, FR-7, FR-9).
  • Follow the generated study plan and track progress (FR-2).
  • Take the generated quizzes and see results (FR-4).
  • Listen to the generated podcasts (FR-6).
  • Review the generated flashcards (FR-8).
  • Open and use the additional generated study materials (FR-10).
  • Complete self-service enrollment so their notes and generated content are durably and privately theirs (FR-13).
  • Complete returning verification to resume access to stored notes and generated materials (FR-14).

Relevant inputs or decisions. Which notes to upload; when to trigger generation; which generated material to study next; whether to retake a quiz or regenerate from Notes when something fails.

Page 21 of 33

Interactions with other accepted participants. The Student / Note Owner is the only active human participant. The built-in AI is the system actor that processes their notes and produces the generated materials they then consume; the application backend and storage persist their notes and generated content under their account.

Observable success. Their own notes become a usable, personalized study plan and study aids that they can return to in a later session and find intact.

Source-backed constraints. The student uploads their own notes; the app's AI is the app's own built-in AI; the generation experience is modeled on Astra AI; the product must feel warm and informal, not cold or clinical.

5. Core User Flows

Page 22 of 33

Flow A — First-time student: from notes to a study plan and study aids

  1. The student opens bright-holaaa and lands on the Landing page (anonymous). They read the oversized headline "Tus apuntes, convertidos en tu plan de estudio" and see the character illustration surrounded by floating Quiz, Podcast, Flashcards, and Plan cards.
  2. The student taps the coral pill CTA "Sube tus apuntes" and arrives at Sign Up.
  3. On Sign Up, the student completes self-service enrollment. On success, an account is created and the student proceeds to Notes. (If enrollment fails or input is invalid, the form retains entered values and shows a recoverable message; the student corrects and resubmits, or switches to Login.)
  4. On Notes, the student drops their study notes into the large, friendly drop zone (with the character peeking over its edge). The notes appear in their note list and are stored durably under their account. (If an upload fails, the affected note is marked and the student retries without losing already-stored notes.)
  5. The student triggers generation. The "generating" state shows a character with a spinning pencil and a pulsing accent dot. The app's built-in AI processes the uploaded notes and produces the study plan, quizzes, podcasts, flashcards, and additional study materials.
  6. When generation completes, the student opens Study Plan and sees the plan generated from their notes, with the coral progress bar tracking their progress. They mark plan items as done.
  7. The student continues to Quizzes, selects a generated quiz, answers its questions, and sees a result. They may retake it or move on.
  8. The student continues to Podcasts, selects a generated podcast, and listens with visible playback controls.
  9. The student continues to Flashcards, flips through the generated deck, and reviews each card.
Page 23 of 33
  1. The student continues to Materials and opens an additional generated study material beyond the four core types.
  2. Next step: the student returns to Notes whenever they want to add or change source material and regenerate.

Flow B — Returning student: resuming stored notes and generated materials

  1. The student opens bright-holaaa and lands on the Landing page (anonymous).
  2. The student navigates to Login.
  3. On Login, the student completes returning verification. On success, their previously stored notes and generated materials are available again. (If credentials are incorrect or unrecognized, a recoverable message is shown without discarding entered values; the student retries or switches to Sign Up.)
  4. The student lands on Notes with their prior notes listed, and can immediately open Study Plan, Quizzes, Podcasts, Flashcards, or Materials to continue studying.
  5. Next step: the student resumes studying, or uploads new notes and regenerates.

Flow C — Regenerating after a generation failure

  1. From Notes, the student triggers generation and the built-in AI processing fails.
  2. The student is notified on Notes that generation failed, and the affected material is marked.
  3. The student retries generation from Notes without losing already-stored notes.
  4. On success, the generated materials become available on Study Plan, Quizzes, Podcasts, Flashcards, and Materials.
  5. Next step: the student resumes Flow A from step 6.
Page 24 of 33

6. Visuals, Colors and Theme

The creative direction is authoritative for this section. Muse: Haraldur Thorleifsson — big friendly type, saturated color blocking, custom character illustration, warmth inside order. Headline idea: big-hearted boldness for a study app that feels like a friend, not a syllabus.

Color tokens (light mode)

RoleHexUse
Background#FFF4E8Warm cream ground; dominant surface
Surface#FFFFFFPure white cards
Text#1F1A16Deep warm ink for all text
Primary#E8503AConfident coral-red: main CTA, active states, study-plan progress bar
Accent#F5B301Saturated sunflower: highlights, badges, "AI is thinking" pulse
Muted#7A6A5CSecondary text and quiet labels
Secondary block — teal#0E6B63Section ground
Secondary block — lilac#C9B6F0Section ground

Color is used as flat, confident blocks in roughly 60% cream/white, 25% color blocks, 15% accent. No gradients. No blue-indigo anywhere.

Typography

Page 25 of 33
  • Headings: Sora, weights 700–800, tight tracking (-0.02em), sentence case with occasional all-caps for micro-labels.
  • Body: Outfit, weights 400/500, line-height 1.6, generous size for late-night reading.
  • Scale (1.25 modular): hero clamp(44px, 9vw, 120px); section headline clamp(32px, 5vw, 56px); card title clamp(20px, 2.5vw, 28px); body 17px; micro-label 13px uppercase tracked +0.08em; numerals tabular in stats.

Shape language

  • Chunky rounded rectangles, radii 20–32px; full pill buttons.
  • Cards carry a soft offset shadow 0 6px 0 rgba(31,26,22,0.08) — a physical, sticker-like lift, not a blurry glow.
  • Color-blocked sections with hard edges meet rounded cards inside them.
  • Custom character illustration sits on top of blocks, breaking their edges.
  • No glassmorphism, no gradient blobs.

Layout

  • Section-based color blocking: full-bleed cream hero → deep teal block → cream → soft lilac.
  • Inside the app: two-column layout on desktop (sidebar nav + content) collapsing to a bottom tab bar on mobile.
  • Cards arranged in a loose, slightly asymmetric grid — never a uniform 3-up grid of identical cards.
  • The upload area is a large, friendly drop zone with a character peeking over its edge.

Imagery

Page 26 of 33
  • Custom flat character illustration in Haraldur's style: a friendly student character with a laptop, a coffee cup, a stack of notes; a headphone-wearing podcast character; a quiz-card character.
  • Spot illustrations for each generated material type (plan, quiz, podcast, flashcard, more).
  • Bold iconography with 2.5px strokes.
  • No stock photography, no 3D renders, no abstract blobs.

Readable text and controls stay whole at every viewport: headlines, wordmarks, labels, numbers, cards' text and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling (for example font-size: clamp(...) with its mobile size) to fit, and no other element covers any part of them. Imagery, decoration, and motion may be cropped, bled off an edge, rotated, overlapped, or cut exactly as the direction asks, as long as it covers no readable text or control.

Page 27 of 33

7. Signature Design Concept

"Tus apuntes, convertidos en tu plan de estudio" — the poster-page hero.

The public entry (Landing) is a full-bleed cream (#FFF4E8) field. On the left 55%, an oversized Sora 800 headline spans the viewport width at desktop, set at clamp(44px, 9vw, 120px), with the word "apuntes" in coral (#E8503A) and "plan" in sunflower (#F5B301). Beneath it sits a single coral pill CTA — "Sube tus apuntes" — and a secondary text link — "Ver cómo funciona".

On the right 45%, a custom character illustration of a student is surrounded by floating cards labelled Quiz, Podcast, Flashcards, and Plan. The cards overlap the character and bleed slightly off the right edge — the product's personality made visible, breaking the edges of its color block.

At the bottom edge of the hero, a slow marquee of study-material words in Sora 700 uppercase runs continuously, alternating ink and coral: Plan · Quiz · Podcast · Flashcards · Resúmenes · Mapas.

Scrolling down turns poster pages: cream → deep teal (#0E6B63) → cream → soft lilac (#C9B6F0), each block with hard edges and rounded cards inside. Study-material cards are sticker-like objects with the soft offset shadow and a 1.04 scale pop on entrance — never a uniform grid of identical hover-lift cards.

There is no centered headline, no gradient, and no blue button. The signature concept recomposes only accepted content, states, and controls.

Page 28 of 33

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d

Landing Hero Motion Brief

  • Focal subject: The custom character illustration of a student surrounded by floating Quiz, Podcast, Flashcards, and Plan cards, with the oversized Sora headline as the dominant left-side element.
  • Input → transformation → outcome thesis: As the student scrolls and hovers, sections fade and rise 16px (200ms ease-out) and cards pop in with a 1.04 scale overshoot (spring, 320ms); hovering a card lifts it 4px and rotates the character's head slightly — the outcome is a hero that feels like a warm, reactive friend rather than a static poster, while the headline and CTA remain whole and readable.
  • Motion vocabulary: Lively entrance animations; sections fade and rise 16px on scroll (200ms ease-out); cards pop in with a 1.04 scale overshoot (spring, 320ms); hover lifts cards 4px and rotates the character's head slightly; the "generating" state shows a character with a spinning pencil and a pulsing accent dot; a marquee of study-material types runs across the hero bottom edge.
  • Composed first frame: Full-bleed cream field; oversized headline on the left with "apuntes" in coral and "plan" in sunflower; coral pill CTA and secondary text link beneath; character illustration on the right with overlapping, edge-bleeding material cards; the marquee already running along the bottom edge.
  • Reduced-motion state: Entrances become instant, the marquee becomes a static wrapped row, and every item remains fully readable.
Page 29 of 33

9. Non-Functional Requirements

  • NFR-1 — Durable state (required_inference): Uploaded notes and all generated study content (study plan, quizzes, podcasts, flashcards, additional materials) must persist durably under the student's account so they survive across sessions. Rationale: the accepted journey requires the student to resume stored notes and generated materials.
  • NFR-2 — Built-in AI (explicit): The app must include its own built-in AI that processes uploaded notes to generate the study plan, quizzes, podcasts, flashcards, and additional study materials. Rationale: the user explicitly asked for "su propia IA."
  • NFR-3 — Private ownership of content (required_inference): Notes and generated materials must remain bound to the correct student. Rationale: the accepted journey requires durable, privately owned content.
  • NFR-4 — Accessible, whole text and controls (explicit, from the creative direction): Headlines, wordmarks, labels, numbers, cards' text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, with no other element covering them. Rationale: the direction's readable-text-and-controls rule.
  • NFR-5 — Reduced motion (explicit, from the creative direction): Everything respects prefers-reduced-motion: entrances become instant and the marquee becomes a static wrapped row. Rationale: the direction's motion rule.
  • NFR-6 — No blue-indigo, no gradients, no glassmorphism (explicit, from the creative direction): No blue-indigo primary or accent anywhere; no gradient-blob heroes; no glassmorphism panels. Rationale: the direction's avoid list and the project-wide ban on the generic indigo/blue-on-white SaaS template.
Page 30 of 33

10. Tech Stack

  • Frontend: React (web), with the two-column desktop layout (sidebar nav + content) collapsing to a bottom tab bar on mobile.
  • Backend: Python / FastAPI, extended with routes and modules for notes, generation, and the generated-material domains, reusing its process, port, dependencies, and deployment.
  • Storage: Appropriate durable storage for uploaded notes, generated study content, and account ownership.
  • AI: The app's own built-in AI, invoked by the backend to process uploaded notes and produce the study plan, quizzes, podcasts, flashcards, and additional study materials.
  • Deployment: Docker / docker-compose for the runnable services. Kubernetes is not required by the current scope.
Page 31 of 33

11. Assumptions and Constraints

  • A-1 (assumption): The student uploads their own notes; the app does not source notes on the student's behalf.
  • A-2 (assumption): The "muchísimo más" in the brief is honored as the current Materials capability — additional study-material generation beyond study plans, quizzes, podcasts, and flashcards — rather than as a committed list of specific future material types.
  • A-3 (assumption): The Astra AI reference is inspiration_only and supplies only the shape of the study-generation experience; it supplies no product names, copy, facts, or capabilities.
  • C-1 (constraint): The product must not use blue-indigo primary or accent colors, gradients, glassmorphism, stock photography, or 3D renders of generic students.
  • C-2 (constraint): The product must not use Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Poppins, or system-ui as its typefaces.
  • C-3 (constraint): The generic indigo/blue-on-white SaaS template is forbidden for this project.
  • C-4 (constraint): Notes, Study Plan, Quizzes, Podcasts, Flashcards, and Materials require login; Landing, Sign Up, and Login are anonymously reachable.
  • C-5 (constraint): The product is delivered as a first-party custom web application with its own built-in AI; the student is not sent to a third-party surface for generation.
Page 32 of 33

12. Glossary

  • Student / Note Owner — the single active human persona: a student who uploads their own notes and studies from the generated materials.
  • Built-in AI — the app's own AI that processes uploaded notes to generate the study plan, quizzes, podcasts, flashcards, and additional study materials.
  • Notes — the student's uploaded study notes, stored durably as the source material for all generated study content.
  • Study Plan — the structured plan generated from the student's uploaded notes.
  • Quiz — a set of questions generated from the student's uploaded notes, which the student can take and see results for.
  • Podcast — an audio study material generated from the student's uploaded notes, which the student can listen to.
  • Flashcard — a front/back review card generated from the student's uploaded notes.
  • Materials — additional study materials generated from the student's uploaded notes beyond the study plan, quizzes, podcasts, and flashcards.
  • Generation — the act of the built-in AI processing uploaded notes to produce the study plan, quizzes, podcasts, flashcards, and additional materials.
  • Astra AI-style — the study-generation experience the product is modeled on, referenced as inspiration only.
Page 33 of 33

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View intro
Sign Up: Create account
Login: Sign in
Notes: Resume stored notes
Notes: Upload notes
Notes: 1. Trigger generation
Notes: 2. Retry failed generation
Study Plan: 3. View generated plan
Study Plan: 4. Mark items done
Quizzes: 5. Take quiz
Quizzes: 6. View results
Podcasts: 7. Listen to podcast
Flashcards: 8. Review flashcards
Materials: 9. Open material
Notes: 10. Add more notes

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: View intro
Sign Up: Create account
Login: Sign in
Notes: Resume stored notes
Notes: Upload notes
Notes: 1. Trigger generation
Notes: 2. Retry failed generation
Study Plan: 3. View generated plan
Study Plan: 4. Mark items done
Quizzes: 5. Take quiz
Quizzes: 6. View results
Podcasts: 7. Listen to podcast
Flashcards: 8. Review flashcards
Materials: 9. Open material
Notes: 10. Add more notes