Shelf
A warm reading companion. Linen tones, literary type, triple-encoded accessibility.
Technologies Demonstrated
Color Palette
[Alpine]Linen
--color-bg
Background
Warm Cream
--color-surface
Surface
Parchment
--color-surface-2
Surface alt
Olive
--color-primary
Primary actions
Amber
--color-accent
Highlights
Terracotta
--color-accent-2
Accents
Slate Blue
--color-info
Info / links
Sage
--color-success
Success
Rosewood
--color-danger
Danger / error
Walnut
--color-text
Body text
Driftwood
--color-text-muted
Muted text
Flax
--color-border
Borders
Click any swatch to copy hex value to clipboard.
@colorSwatchCard("Linen", "--color-bg", "Background")
Typography
Lora — Display / 2rem / 600
The Library at the End of the World
Lora — Heading / 1.25rem / 600
Chapter One: A Quiet Beginning
Lora — Italic
"A reader lives a thousand lives before he dies. The man who never reads lives only one." — George R.R. Martin
DM Sans — Subheading / 0.9375rem / 600
Currently Reading · 3 books in progress
DM Sans — Body / 0.875rem / 400
Every book on your shelf tells a story beyond its pages — when you found it, who recommended it, the coffee stain on page forty-seven.
DM Sans — Caption / 0.75rem
Added Mar 12, 2026 · Last updated 2 days ago
JetBrains Mono — ISBN & Metadata
978-0-441-17271-9
688 pages
Combined — Book detail sample
Dune
Frank Herbert
Set on the desert planet Arrakis, Dune is the story of Paul Atreides — a young man born into a powerful noble family — who must navigate the dangerous politics of a universe where the most valuable substance in existence, the spice melange, can only be found in one place.
"I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration."
Spacing Scale
Base unit: 4px
Buttons
[Alpine]Size variants
Style variants
Scan action
Toggle demo
Forms
[HTMX] [Alpine]HTMX form submission
Tag System
[Alpine]Triple encoding: icon + color + text
Interactive tag manager
<div class="shf-divider pt-5"> <p class="mb-3" style="font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;">Interactive tag manager</p> <div x-data="{ tags: ['📋 To Read', '🎁 Gift: Mom'], newTag: '' }"> <div class="flex flex-wrap gap-2 mb-3"> <template x-for="(tag, i) in tags" :key="i"> <span class="shf-tag shf-tag-list" style="cursor: pointer;" { templ.Attributes{"@click": "tags.splice(i, 1)"}... } > <span x-text="tag"></span> <span style="margin-left: 0.25rem; opacity: 0.5;">×</span> </span> </template> <span x-show="tags.length === 0" style="font-size: var(--font-size-caption); color: var(--color-text-muted);">No tags — add one below</span> </div> <div class="flex gap-2"> <input class="shf-input" style="max-width: 16rem;" type="text" x-model="newTag" placeholder="New tag..." { templ.Attributes{"@keydown.enter.prevent": "if(newTag.trim()) { tags.push(newTag.trim()); newTag = '' }"}... } /> <button class="shf-btn shf-btn-primary" { templ.Attributes{"@click": "if(newTag.trim()) { tags.push(newTag.trim()); newTag = '' }"}... } >Add</button> </div> </div> </div>
Dashboard
[HTMX] [Alpine]Project Hail Mary
Andy Weir
Pachinko
Min Jin Lee
Sapiens
Yuval Noah Harari
Piranesi
Susanna Clarke
Klara and the Sun
Kazuo Ishiguro
Circe
Madeline Miller
Piranesi
Susanna Clarke
The Midnight Library
Matt Haig
Anxious People
Fredrik Backman
Project Hail Mary
Andy Weir
} <div class="shf-book-row" hx-get={ "/guides/shelf/book/" + book.ID } hx-target="#shf-detail-panel" hx-swap="innerHTML" > <div class="shf-cover" style={ "background: " + coverColor(book.ID) }> { string([]rune(book.Title)[0:1]) } </div> <div class="flex-1 min-w-0"> <p style="font-family: var(--font-body); font-size: var(--font-size-body); font-weight: 600;" class="truncate">{ book.Title }</p> <p style="font-size: var(--font-size-caption); color: var(--color-text-muted);">{ book.Author }</p> </div> <div class="flex flex-wrap gap-1"> for _, tag := range book.Tags { <span class={ "shf-tag", tagClass(tag.Category) }> <span class="shf-tag-icon">{ tag.Icon }</span> { tag.Label } </span> } </div> <div class="shf-stars hidden sm:flex"> @starRating(book.Rating) </div> </div> if i == 0 && j == 0 {
Book Detail Panel
[HTMX]Dune
Frank Herbert
978-0-441-17271-9
688
Science Fiction
1965
A masterpiece of science fiction. The world-building is unparalleled — spice, sandworms, and political intrigue woven into a tapestry that rewards every re-read.
This is a static preview. In the dashboard above, clicking a book loads its detail via HTMX.
Review Cards
Dune is unlike anything else in science fiction. Herbert doesn't just build a world — he builds an ecology, a religion, a political system, and a mythology, then sets them all in motion. I've read it four times and find something new each time.
Feb 14, 2026 · Dune
Project Hail Mary grabbed me from the first chapter and never let go. Weir's ability to make hard science feel like an adventure story is remarkable. Rocky is one of the best non-human characters in fiction.
Mar 2, 2026 · Project Hail Mary
Pachinko is a sweeping family saga that spans four generations of a Korean family in Japan. Min Jin Lee writes with such warmth and empathy — every character feels deeply real, even the flawed ones.
Jan 20, 2026 · Pachinko