Quiren — Single Book Selling HTML Template

Quiren is a free, production-ready HTML template for selling a single book — a novelist launching one title, a small press promoting its lead book, a self-published author who needs one good place to send readers, or a poet, memoirist or non-fiction writer with a single work to sell. It ships as five static pages with two stylesheets and one small script: no framework, no build step, no jQuery, and no dependencies of any kind. The whole template weighs 6 KB of CSS and 1.2 KB of JavaScript, gzipped.

The palette is a hardback jacket rather than a web page: an oxblood ground at #3b1420, bone type at #f3ebe1, and a single gilt accent at #d8a657. Bodoni Moda sets the display type — a didone, which is what book jackets have used for two centuries — Literata carries the reading text because it was designed for long-form screen reading, and Red Hat Mono handles the colophon lines, labels and folios. A fixed SVG bookcloth grain sits over everything in overlay blend.

The cover is drawn in CSS, not a stock mockup

The jacket on the home page is built entirely from type and borders: an inset gilt rule frame, a spine rotated into place on the Y axis, and a striped page-block edge, with a gentle 3D tilt that eases flatter on hover. Nothing about it is an image. That matters practically — a stock cover mockup never matches your actual title, and changing the artwork on a photograph means re-rendering the mockup. Here you edit three lines of HTML (imprint, title, author) and the jacket is yours. Under prefers-reduced-motion the tilt is removed and the spine and page block are hidden so it renders flat and clean.

A genuinely typeset extract

The reason to choose this over a generic landing page is the reading page. The .leaf component sets text the way a printed book does: a real reading measure of roughly sixty-six characters rather than full-bleed text, a drop cap on the opening paragraph only with a small-caps first line, a running head and a folio (page number), justified setting with hyphens: auto, and first-line indents on continuation paragraphs. It is set on paper — the one place in the entire site that leaves the oxblood ground. The home page reuses the same component with a modifier that caps its height and fades the text out into a "keep reading" call to action.

What ships in the download

• The book (index.html) — half-title colophon strip, the CSS jacket, a format switcher that updates the buy label and price together, star line, six pieces of praise set as pull quotes, synopsis on the reading measure, the typeset extract teaser, four editions and an author block
• Read an extract (excerpt.html) — a full opening chapter typeset as a printed page; the typographic showcase
• The author (author.html) — biography, previous titles, and an enquiry form with routing for interviews, festivals, rights and review copies
• Editions (editions.html) — hardback, paperback, ebook and audiobook with specifications and prices, a retailer row, and a full bibliographic detail table
• Press (press.html) — six reviews, a dated tour schedule and a press-kit block

Who it's for

Use Quiren for a novel, a poetry collection, a memoir, a photography or art book, a technical or business book, a cookbook, or any single title that deserves better than a storefront listing. It also works unchanged as a launch page for one product with a strong story — the structure is a jacket, an argument, an extract and a way to buy.

Other free templates from the same studio

Quiren joins a growing free catalogue on html.design — every template ships with the same craft level, all free to download and use. If a book isn't what you need today, look at Fernwick for a plant shop with a working basket, Brynvel for a dark-first admin dashboard, Vandrel for an index-first Next.js portfolio, Halvorn for a corporate consultancy, Axioma for a creative agency, or Solara for a restaurant. Each is built around a different visual recipe, and all of them are free.

Customising

Everything visual is a CSS custom property at the top of assets/css/tokens.css — change --wine and --gilt together and the book changes character entirely: a black-and-red thriller, a pale literary jacket, a green nature title. --measure controls the width of the reading column. To make it your book, edit the three lines inside .jacket__front, change the title and hook in the hero, and paste your own opening chapter into .leaf__body on the extract page. The book, author, reviews and quoted publications in the demo are invented — replace them with your own.

Free for personal and commercial use, no attribution required, no email gate. Built and maintained by html.design.