Documentation,
beautifully simple.
Everything you need to explore, customize and prepare the Promplume HTML edition for your customers.
1. Getting started
Unzip the package and open index.html in a browser. All CSS, JavaScript and artwork needed for the interface are included locally. Google Fonts are optional and the template has system fallbacks.
For stable localStorage behavior across multiple pages and browsers, we recommend a local static server:
cd promplume-html python -m http.server 8000
Visit http://localhost:8000. No build process or database is needed for the HTML edition.
2. Page groups
The package includes 66 HTML files: 31 public-facing pages, 8 buyer pages, 12 seller studio pages, and 15 admin console pages.
3. Test the functional demo
Browse and save
From Explore, search titles and tags, filter by model/category/price, sort products, add an item to the bag, or save a wishlist item. Use Ctrl+K / Cmd+K for quick search.
Checkout
Add an item to the bag, open the cart and proceed through the clearly labeled demo checkout. It creates a local example order and adds products to the buyer library. No money is charged and payment details are not collected.
Seller publishing / admin moderation
Go to Create prompt, complete the wizard, and submit. Then open the Admin review queue to approve the local listing. It becomes visible on the storefront after approval, in the same browser. Rejected listings can be edited and resubmitted.
Other UI behavior
Try wishlists, theme switching, newsletter local-save, contact local-save, CSV export, copyable sample prompts, seller profile editing, sample coupons, custom categories, and browser-data reset.
4. Brand system
Brand: Promplume — a creative name inspired by prompts and the tradition of writing with a plume. Tagline: Good ideas deserve great tools.
Typography: DM Sans for body and interface, Instrument Serif for editorial headings, both served via Google Fonts when internet is available. System fallbacks work offline.
Theme: default editorial light, atmospheric dark homepage, and a browser-local theme toggle on public pages.
5. Customize content and assets
assets/css/style.css→ color variables, layouts, responsive componentsassets/js/data.js→ example categories, creators, products, bundles and journal articlesassets/js/app.js→ shared page rendering and demo interactionsassets/images/brand-mark.svg→ original brand symbolassets/images/orb.svg→ iridescent hero artassets/images/prompts/→ 16 local original illustrated product covers
A product record uses a unique ID, title, model, category, price, image name, creator ID, sample prompt, and included-items array. Consult existing records for the exact structure.
Each page has its own <title> and meta description. Update those when changing your product positioning.
6. Tailwind v4 and CSS
Promplume includes a small precompiled Tailwind utility layer and a bespoke design system in the main stylesheet. The HTML runs immediately without development tools.
npm install npm run css:build
This regenerates assets/css/tailwind-utilities.css from source/tailwind.input.css. Editing the custom CSS in assets/css/style.css requires no build step.
7. Deploy the demo
Upload the complete folder contents to any static server, CDN-backed hosting, cPanel or Plesk website root. Keep relative asset paths intact. Share the hosted preview with potential customers, but do not advertise demo checkout as real commerce.
For reliable SEO, localization and server-side protected routes in a production marketplace, use a backend with an appropriate framework rather than relying on static client-side rendering.
8. Production requirements
The figures, seller identities, ratings, reviews and creator histories are fictional. All policies are placeholders and need legal review.
9. Licensing / assets
Brandmark, hero art and 16 SVG cover illustrations were created specifically for this template and are bundled locally. No third-party stock photos or proprietary model logos are included. The optional font CSS connects to Google Fonts but no font binaries are distributed. See ASSET-NOTES.txt.
Before using the Promplume name for a real business, conduct proper trademark and domain clearance.
Promplume · HTML template documentation · November 2026