PAPERTRAIL DOCUMENTS: AN SVG EMPTY STATE EXAMPLE

Files for "Design an SVG Empty State for a Product Dashboard" on svgai.org.
Made in October 2026. Papertrail is a fictional document app, and this
page is plain HTML, CSS and JavaScript.

FILES
index.html, style.css, app.js: The Documents page of a new Papertrail
workspace. It shows a first-use empty state (illustration, heading, two
sentences, one button), a text-only empty state in the Recent reviews
panel, and a text-only message when a search finds nothing. Files you
add with the button stay in the browser tab; nothing is uploaded.
assets/organize-original.svg: The illustration as downloaded from SVG AI
on October 4, 2026 (Ultra, one SVG, transparent background), unchanged.
Its prompt is in
https://www.svgai.org/blog/matching-svg-feature-illustrations
assets/organize-fit.svg: The same file with one change:
preserveAspectRatio="none" became "xMidYMid meet", so a box of any shape
shows the whole scene without stretching. The page uses this copy.
check-results.json: What was checked, and the results.

TRY THE STATES
Serve this folder (for example, run "python -m http.server" in it and
open http://localhost:8000/), or open index.html directly in Chrome or
Edge.
index.html: the first-use state, after a short simulated load.
index.html?documents=3: three sample documents. Search for a word that
matches none of them (for example "zebra") to see the no-results
message.
index.html?delay=3000: a three-second load, to see the loading message.

THE DECISIONS
Image: decorative here (alt=""), because the heading and the text say
everything it shows. On the feature page where the file was first used,
it had descriptive alt text. Decide for each placement.
Heading: "No documents yet" (h2, under the page's h1). Body: what will
appear here and how to start. Action: <button type="button">, because it
opens the file chooser. Use a link (<a href>) if your action goes to
another page.
Size: width="1891" height="1125" (whole numbers in the image's ratio)
and CSS width clamp(168px, 56vw, 264px) with height: auto.
Dark mode: the transparent image sits on a light plate, so its navy
parts stay visible.
No results: text only, in a role="status" region, with Clear search.
Loading: the empty state is chosen only after the documents have
loaded. The loading message and the empty state share one minimum
height (386px), so the panel keeps its height when the load finishes.

TESTED
Chrome 155 and Edge 155 on Windows 11, served from a local web
server: widths 1280, 375 and 320 px, 200% and 400% zoom, light and dark
mode, the keyboard path, the file chooser, focus after adding and
removing a document, the accessibility tree, the image's shape in
different boxes, loading and layout shift.
Not tested: Firefox, Safari, real phones, screen readers, forced colors
and right-to-left languages.
The page and the checks were made by an AI coding agent.