New here
Start a poster
New Poster Creators enroll with their own credentials. Once you are in, you open a fresh canvas and start putting text, images and shapes where they belong.
canvas-posters is a web application in the spirit of Canva, where a user can create posters. The product intent is a canvas-style poster editor: a Poster Creator opens the application, starts a poster, adds and arranges design elements — text, images, and shapes — on a poster canvas, and saves the poster so it persists across sessions and can be reopened later.
The audience is aspiring poster makers — young creators, small businesses, event organisers, students and side-hustlers — who want Canva-like ease without design-software expertise, and who want the act of making a poster to feel like walking into a bright studio rather than filing a ticket. The product's whole job is visual expression, so the interface itself is colour-saturated and poster-like, while the design surface stays a clean white sheet.
This document is the System Requirements Document for canvas-posters. It specifies the current delivery: anonymous entry, self-service enrollment, returning verification, a saved-poster library, and the canvas editor.
canvas-posters is delivered as a first-party web application with three provisioned services: a React frontend, a shared FastAPI backend that hosts all application APIs and domain modules, and a MariaDB database for application-owned persistent data. Poster designs, their elements, and their ownership are durable application state, so the backend and database carry the saved-poster lifecycle; the frontend carries the anonymous entry, identity establishment, poster library, and the canvas editor.
The only active human actor is the Poster Creator. There are no other human roles, no administrative surface, and no differentiated permissions: every Poster Creator sees and edits only their own posters, and that separation follows from ownership of saved designs, not from a role system.
Current accepted behavior, in brief:
Narrow exclusions: there is no export/download pipeline, no template marketplace, no collaboration or sharing, no commenting, no print ordering, and no account-management surface beyond enrollment and verification. The product is a poster creation and saving tool.
Removed from scope
The product is a first-party, application-owned experience. The Landing page is anonymously reachable and explains the product before any identity exists. Sign Up and Login are also anonymously reachable, because a protected destination cannot own the interaction that establishes access to itself. My Posters and the Editor require a verified Poster Creator, because saved poster designs are durable, actor-specific state that must remain bound to the correct owner across sessions.
Identity is application-owned and self-service: a Poster Creator enrolls with their own credentials and returns later to verify them. There is no invitation, provisioning, or deployment-bootstrap path, and no third-party identity provider. Session continuity is what protects saved work; it does not create roles, permissions, or visibility tiers.
Everything specified here is current. No future-horizon capabilities are committed in this document.
FR-1 — Create a poster design in a canvas-style editor (explicit) As a Poster Creator, I should create a poster design in a canvas-style editor similar to Canva, so that I can produce a poster without design-software expertise.
FR-2 — Add and arrange design elements on the poster canvas (explicit) As a Poster Creator, I should add and arrange design elements — text, images, and shapes — on the poster canvas, so that I can compose the poster I intend.
FR-3 — Save poster designs so they persist across sessions (explicit) As a Poster Creator, I should save my poster designs so they persist across sessions, so that I can leave and return to finished or in-progress work.
FR-4 — Self-service enrollment for a new Poster Creator (required_inference) As a new Poster Creator, I should be able to enroll myself with my own credentials, so that I can own and later return to my saved posters.
FR-5 — Returning verification before accessing saved poster designs (required_inference) As a returning Poster Creator, I should verify my identity before reaching my saved posters, so that my designs remain private to me.
FR-6 — Browse and reopen saved posters (required_inference) As a Poster Creator, I should see my saved posters and reopen any of them, so that I can continue or revisit earlier work.
FR-7 — Name a poster (required_inference) As a Poster Creator, I should give a poster a title, so that I can tell my posters apart in the library.
Product context. A Poster Creator is someone who needs a poster — for a gig night, a birthday, a sale, an exhibition, a club night, a workshop — and wants to make it themselves in a browser without learning design software. They may be a student, a small-business owner, an event organiser, or a side-hustler who shares their work on social. They arrive with an idea in their head and no patience for a grey dashboard.
Primary goal. Produce a finished poster design in a canvas-style editor and keep it, so it can be reopened and reused.
Distinct accepted responsibilities.
Relevant inputs and decisions. What the poster is for (which shapes the composition and the title); which elements to add and where to place them; when the composition is finished enough to save; whether to continue an existing poster or start a new one.
Interactions with other accepted participants. None. The Poster Creator is the only active human actor; there is no collaborator, reviewer, approver, or recipient inside the product. The backend and database act on the Poster Creator's behalf but make no decisions for them.
Observable success. The Poster Creator signs up or logs in, starts a poster, composes it from text, images, and shapes, saves it, and later returns to find that exact poster intact in their library and reopenable in the Editor.
What makes this role different. The work is compositional and visual rather than transactional: the value is in arranging elements on a canvas and having that arrangement survive, not in submitting, approving, or routing anything. The role's only continuity requirement is that their own saved designs stay theirs.
Failure and recovery. If the save fails, the Editor keeps the composition, keeps the dirty state, and reports the failure with a retry; the Poster Creator retries rather than losing work. If an image fails to load, it is reported on the canvas and can be removed or replaced. If the Poster Creator tries to leave with unsaved changes, they are asked to confirm.
Continuation. The Poster Creator signs out, or closes the browser and returns later via Flow B.
Continuation. The Poster Creator can rename posters from the library, start another new poster, or sign out.
The visual language is poster-making as a colour-saturated playground, after Jessica Walsh: playful confidence, colour-first, never white-first. The page itself is a warm poster wall; white is reserved for the design surface.
Colour tokens (light mode)
| Role | Token | Value |
|---|---|---|
| Background (cream ground) | --bg | #F4E9D8 |
| Surface (canvas, form and editor panels) | --surface | #FFFFFF |
| Text / ink | --ink | #1A1410 |
| Primary action | --primary | #F0327D |
| Accent (stickers, badges, hover) | --accent | #FF6B2C |
| Muted metadata | --muted | #7A6A5C |
| Colour block — lime | --lime | #C6E94A |
| Colour block — cobalt | --cobalt | #2B4BF2 |
Rules: the cream ground dominates every page except the canvas surface and form/editor panels. Hot pink is the primary action and marquee colour; tangerine is the secondary accent. Ink is used for all readable text and 2px borders. Muted is for metadata and helper copy only, at 16px and above. Colour blocks in hero and section openers rotate through pink, tangerine, lime, and cobalt as flat fields behind white or ink type — never as gradients. No blue/indigo primary buttons on white; pink and tangerine are the only action colours. Cream and ink tones are never lifted toward neutral grey.
Typography
-0.02em, all-caps for hero and section openers, sentence case for card titles.clamp(56px, 9vw, 148px); section opener clamp(36px, 5vw, 72px); card title 24/28; body 16/26; label 13/18 uppercase Manrope 700 with 0.08em tracking.Shape language. Big radii: 24–40px on cards, 999px pill buttons. Overlapping sticker shapes with 3px ink outlines and hard offset shadows (6px 6px 0 #1A1410). Blob and squiggle accents drawn as SVG. Colour-block section boundaries with diagonal or scalloped cuts. Sharp-cornered exception: the poster canvas itself is a crisp rectangle with a 1px ink rule, so the design surface reads as real paper against the playful chrome.
Layout. Asymmetric editorial grid. The Landing hero is a 12-column spread: a wall of tilted poster mockups occupies the right 7 columns, a stacked all-caps headline occupies the left 5 and bleeds off the top edge. My Posters is a masonry-style poster wall with varied tile sizes and rotated stickers. The Editor is a three-pane layout — left tool rail, centre canvas on a warm dotted ground, right properties drawer — with the canvas never smaller than 60% of the viewport. All readable text and controls wrap inside their container at 375, 768, and 1280; decorations and mockups may crop.
Imagery. Art-directed flat vector poster mockups in the Walsh palette — bold colour fields, oversized type, surreal props such as a giant lemon, a hand holding a paintbrush, a disco ball — shown tilted and overlapping on the cream ground. Custom sticker illustrations (stars, squiggles, arrows, a smiling sun) as SVG. No stock photography, no gradient blobs, no device mockups, no corporate illustration.
Accessibility of the visual system. Readable text and controls stay whole at every viewport: headlines, wordmarks, labels, numbers, card text, and controls stay entirely inside the viewport and their container at 375px, 768px, and 1280px, wrapping or scaling to fit, and no other element covers any part of them. Where the direction asks for a cropped or bleeding gesture, the gesture is carried by imagery or decoration instead. Moving content (the marquee ticker) may cross the viewport edge by design, and every item becomes fully readable as it passes.
The poster wall that becomes your poster. The public entry is a split editorial hero on warm cream. The left five columns hold a four-line all-caps Archivo Black headline at clamp(56px, 9vw, 148px) — MAKE / POSTERS / THAT / SHOUT — with the word "SHOUT" set in hot pink on a rotated tangerine block that breaks the column grid and bleeds toward the poster fan. Beneath it sits a pill CTA, "Start a poster", in hot pink with an ink outline and a hard offset shadow, flipping to tangerine on hover.
The right seven columns are a layered fan of five tilted poster mockups, each a real mini-composition in the palette, overlapping and cropping off the top-right edge, with two floating sticker SVGs — a pink star and a lime squiggle — pinned to corners. A thin full-bleed ink marquee ticker runs along the very top with poster categories in Archivo Black all-caps: GIG NIGHT · BIRTHDAY · SALE · EXHIBITION · CLUB · WORKSHOP.
The concept is implementable with accepted content only: the headline states what the product does, the CTA enters Sign Up, the secondary entry enters Login, and the poster fan and stickers are decoration. No centred stack, no gradient, no blue button. Section openers below the hero use a scalloped colour-block edge in lime or cobalt behind an all-caps Archivo Black label, creating a poster-wall rhythm down the page.
Interaction Model: Animated Motion Tempo: expressive Hero Dimensionality: layered_2d
Landing Hero Motion Brief
cubic-bezier(0.34, 1.56, 0.64, 1) over 320ms; snappy 120ms transforms on editor selection handles.prefers-reduced-motion freezes the marquee into wrapping rows so every category is fully readable, removes the parallax drift, and swaps bounces for instant state changes. All text and controls remain whole and reachable.prefers-reduced-motion yields a usable static arrangement: marquees wrap into rows, parallax is removed, and bounces become instant state changes.#1A1410 on cream #F4E9D8, on white, and on lime #C6E94A meets WCAG AA for body text; white type on pink #F0327D and on cobalt #2B4BF2 is used only at large display sizes where it meets AA.docker-compose.yml with three services — frontend, backend, database — with the frontend depending on the backend and the backend depending on the database.No additional infrastructure is required for the accepted workflows.

The canvas poster studio
canvas-posters is a canvas-style poster editor. Build a poster by adding and arranging text, images and shapes on the canvas, then save it so it's ready when you come back.
A canvas-style editor for poster makers: place text, images and shapes on the sheet, arrange them until the composition sings, then save the poster so it is waiting for you next time.
Type a headline, drop in a gig line, then drag it where it belongs. Set its size and position on the canvas.
Bring an image onto the poster canvas and place it with the rest of your composition.
Drop in blocks and forms to build a bold layout behind your type and images.
Save a poster and it persists across sessions, so you can reopen it later and pick up where you left off.
New here
New Poster Creators enroll with their own credentials. Once you are in, you open a fresh canvas and start putting text, images and shapes where they belong.
Returning
Returning Poster Creators verify once to reach the posters they saved before, right where they left them.
Already verified? You skip this entry screen — you are taken straight to My Posters to pick up your saved work.

The canvas poster studio
canvas-posters is a canvas-style poster editor. Build a poster by adding and arranging text, images and shapes on the canvas, then save it so it's ready when you come back.
A canvas-style editor for poster makers: place text, images and shapes on the sheet, arrange them until the composition sings, then save the poster so it is waiting for you next time.
Type a headline, drop in a gig line, then drag it where it belongs. Set its size and position on the canvas.
Bring an image onto the poster canvas and place it with the rest of your composition.
Drop in blocks and forms to build a bold layout behind your type and images.
Save a poster and it persists across sessions, so you can reopen it later and pick up where you left off.
New here
New Poster Creators enroll with their own credentials. Once you are in, you open a fresh canvas and start putting text, images and shapes where they belong.
Returning
Returning Poster Creators verify once to reach the posters they saved before, right where they left them.
Already verified? You skip this entry screen — you are taken straight to My Posters to pick up your saved work.
No comments yet. Be the first!